/* picanchor.com - shared stylesheet. Values follow the design handoff (design_handoff_picanchor_site)
   exactly; see site/README.md. Teal rule: #0F766E for every teal text, link and button fill on light
   surfaces; #2FD3BD only for the anchor line, dots and decoration, and as text only on the dark panel
   and photos (it is 1.9:1 on white). */

/* Self-hosted Geist and Geist Mono (SIL OFL 1.1, fonts/geist/OFL.txt): no third-party font origin. */
@font-face{font-family:'Geist';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/geist/geist-latin-wght-normal.woff2) format('woff2-variations'),url(/fonts/geist/geist-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/geist/geist-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/fonts/geist/geist-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/geist/geist-mono-latin-wght-normal.woff2) format('woff2-variations'),url(/fonts/geist/geist-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/geist/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/fonts/geist/geist-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --base:#FFFFFF; --tile:#F5F5F7; --line:#E5E5EA; --border:#D2D2D7; --unlit:#C7C7CC; --pending:#AEAEB2;
  --ink:#1D1D1F; --body:#424245; --muted:#6E6E73;
  --teal:#0F766E; --teal-hover:#115E59; --tint:#E6F4F1; --anchor:#2FD3BD; --dark:#1D1D1F;
  --gutter:clamp(20px,4vw,48px);
  --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  --warm:repeating-linear-gradient(135deg,#3B2C24 0 12px,#33261F 12px 24px);
  --grey:repeating-linear-gradient(135deg,#2C3033 0 12px,#25292C 12px 24px);
  --brick:repeating-linear-gradient(135deg,#4A2C24 0 12px,#40261F 12px 24px);
  --cool:repeating-linear-gradient(135deg,#243038 0 12px,#1F2A31 12px 24px);
}

*,*::before,*::after{box-sizing:border-box}
/* In-page links are plain anchors and jump INSTANTLY, with no script involved. `scroll-behavior:smooth`
   made the browser glide for up to ~1.4s after a nav click and fight every scroll input on the way (a snap
   back of 5000px+ against a trackpad flick in real Chrome), so the page felt stuck. Do not bring it back, and
   do not add any script that scrolls: tools/site-src/test-nav-scroll.mjs drives every nav link with trackpad,
   wheel, keys and touch and fails on a stall or a snap-back. Each anchor target clears the sticky header
   with its own scroll-margin-top. */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}
a{color:var(--teal)} a:hover{color:var(--teal-hover)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--teal);color:#fff;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.teal{color:var(--teal)} .anchor{color:var(--anchor)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:999px;font-size:17px;font-weight:600;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--teal);color:#fff} .btn-primary:hover{background:var(--teal-hover);color:#fff}
.btn-white{background:#fff;color:var(--ink)} .btn-white:hover{background:var(--tint);color:var(--ink)}
.btn-sm{height:44px;padding:0 20px;font-size:15px}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--border)} .btn-outline:hover{background:#fff;color:var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;height:54px;font-size:17px;font-weight:500;text-decoration:none}
.link-arrow.on-dark{color:#fff} .link-arrow.on-dark:hover{color:var(--anchor)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr{max-width:1280px;margin:0 auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
/* the shared logo (logo() in parts.mjs): mark + wordmark, proportions from the real PDF report header */
.pa-logo{--m:calc(var(--fs) * 1.67);display:inline-flex;flex-direction:row;align-items:center;gap:calc(var(--m) * .27);font-size:var(--fs);line-height:1.1}
.pa-logo.sub{--m:calc(var(--fs) * 2.4)}
.pa-mark{display:block;flex:none;width:var(--m);height:var(--m);border-radius:calc(var(--m) * .222)}
.pa-txt{display:flex;flex-direction:column;gap:.15em}
.pa-word{font-weight:700;letter-spacing:-.01em;color:#0F766E}
.pa-sub{font-size:.62em;font-weight:400;color:#666}
.brand .pa-word{font-weight:600;color:var(--ink)}
.nav{display:flex;gap:4px;flex:1;margin-left:12px}
.nav a{padding:10px 12px;border-radius:8px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--muted)}
.nav a:hover,.nav a[aria-current=page],.nav a[aria-current=location]{color:var(--ink);background:#fff}
.nav a[aria-current=page]:hover{color:var(--ink)}
.signin{padding:10px 4px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--ink);flex:none}
.signin:hover{color:var(--teal)}
.hdr .btn-sm{flex:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:none;padding:0}
.menu-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px}
.mobile-menu{border-top:1px solid var(--line);padding:12px var(--gutter) 24px;display:flex;flex-direction:column;gap:2px}
.mobile-menu[hidden]{display:none}
.mobile-menu a:not(.btn){padding:14px 0;font-size:20px;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:20px;height:54px;width:100%}
@media (max-width:1100px){
  .nav,.signin,.hdr>.btn-sm{display:none}
  .hdr>.lang{margin-left:auto;min-width:0}
  /* The header picker's panel hangs from the button's right edge, and the button sits gutter + 56px (the menu button and
     the 12px gap) in from the screen's edge, so a 288px panel ran 4px off the left of a 360px screen and left 11px at
     375px. Cap its width so its left edge stays 16px (the `100vw - 32px` gap below) from the screen's: 56 + 16 = 72.
     288px is unchanged wherever it already had 16px to spare (from 390px up). */
  .hdr>.lang .lang-panel{max-width:min(calc(100vw - 32px),calc(100vw - var(--gutter) - 72px))}
  .menu-btn{display:flex}
}
@media (min-width:1101px){.mobile-menu{display:none!important}}

/* ---------- language picker ---------- */
.lang{position:relative;display:inline-block}
.lang-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer;max-width:min(190px,38vw)}
.lang-btn:hover{border-color:var(--pending);background:#F2F2F4}
.lang-btn svg{flex:none}
.lang-btn .lang-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-btn .chev{opacity:.7}
.lang-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;width:288px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px -12px rgba(0,0,0,.2);padding:8px}
.lang-panel[hidden]{display:none}
.lang.left .lang-panel{right:auto;left:0}
.lang.up .lang-panel{top:auto;bottom:calc(100% + 8px)}
.lang-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 8px;font:500 13px var(--mono);color:var(--muted)}
.lang-search{padding:0 4px 8px}
.lang-search input{width:100%;height:44px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink);padding:0 12px;font:400 16px var(--sans)}
.lang-list{max-height:312px;overflow-y:auto}
.lang-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.lang-list a:hover{background:#F2F2F4;color:var(--ink)}
.lang-list a[aria-current=true]{background:var(--tint)}
.lang-list .n{display:block;font:500 16px var(--sans)}
.lang-list .e{display:block;margin-top:2px;font:400 13px var(--sans);color:var(--muted)}

/* ---------- anchor segments ---------- */
.seg{display:flex;flex-direction:column;align-items:center;padding-top:clamp(72px,9vw,120px)}
.seg-line{width:2px;height:clamp(64px,8vw,112px);background:var(--anchor);transform-origin:top}
.seg-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--anchor);background:var(--anchor);box-shadow:0 0 0 6px rgba(47,211,189,.2)}
.seg-dot.end{width:20px;height:20px}
.seg.first{padding-top:clamp(40px,5vw,64px)}
.seg.sub{padding-top:clamp(72px,9vw,120px)}
.seg.sub .seg-line{height:clamp(56px,7vw,96px)}
.seg.top{padding-top:0}
/* Draw-in: only when site.js has confirmed motion is allowed (html.anim). Without JS, or with reduced
   motion, every line is drawn and every dot filled at load. */
.anim .seg .seg-line{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.anim .seg .seg-dot{transition:background .3s .7s,box-shadow .3s .7s}
.anim .seg:not(.on) .seg-line{transform:scaleY(0)}
.anim .seg:not(.on) .seg-dot{background:#fff;box-shadow:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- section heads ---------- */
.eyebrow{margin:0 0 16px;font:500 14px var(--mono);color:var(--teal)}
.eyebrow.on-dark{color:var(--anchor)}
.sec-head{text-align:center;padding-top:28px}
.h2{margin:0 auto;max-width:900px;font-size:clamp(40px,6.4vw,88px);font-weight:700;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.h3{font-size:clamp(36px,4.6vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.h3c{margin:0 auto;max-width:820px;font-size:clamp(40px,5.6vw,80px);font-weight:700;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.h2p{font-size:clamp(40px,5.2vw,72px);font-weight:700;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.lead{margin:24px auto 0;max-width:620px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.lead.w640{max-width:640px}
.panel{background:var(--tile);border-radius:28px}
.bullets{display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.45;color:var(--ink)}
.bullets li{display:flex;gap:12px;align-items:baseline}
.bullets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--anchor);flex:none;transform:translateY(-2px)}
.bullets.center li{align-items:center}
.bullets.center li::before{transform:none}
.photo-label{position:absolute;font:500 12px var(--mono);color:rgba(255,255,255,.8);letter-spacing:.02em}

/* ---------- stamp card: ONE component, matched to PicAnchor's real stamp
   (tools/site-src/ref/stamp-reference.png). Every size is in em of the stamp's own font-size, which is
   the company-line size, so each placement sets ONE scale (font-size on a wrapper) and the proportions
   never change. Always left-aligned, whatever the container does. ---------- */
.stamp{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;padding:1em 1.95em 1.25em 1.14em;border-radius:.62em;background:rgba(52,47,44,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:var(--sans);font-weight:400;line-height:1.3;white-space:nowrap;letter-spacing:0}
.stamp .st-top{display:flex;gap:.53em;margin-bottom:.55em}
.stamp .st-pill,.stamp .st-code{display:inline-flex;align-items:center;border-radius:999px;background:#0B0D0E}
.stamp .st-pill{height:2.52em;gap:.73em;padding:0 1em 0 .88em;font-size:.76em;font-weight:600}
.stamp .st-pill svg{width:.95em;height:1.05em;flex:none}
.stamp .st-code{height:2.9em;padding:0 1.05em;font:500 .66em var(--mono);letter-spacing:.03em}
.stamp .st-co{font-size:1em;color:rgba(255,255,255,.88)}
.stamp .st-time{display:flex;align-items:flex-start;margin-top:.1em}
.stamp .st-time svg{width:2.6em;height:2.6em;margin:.3em .2em 0 -.3em;flex:none}
.stamp .st-clock{font-size:3.25em;font-weight:700;letter-spacing:-.01em;line-height:1.08}
.stamp .st-zone{font-size:.86em;margin:.15em 0 0 .7em;color:rgba(255,255,255,.9)}
.stamp .st-date{font-size:1.31em;font-weight:600;line-height:1.25;margin-top:.29em}
.stamp .st-addr{font-size:.93em;color:rgba(255,255,255,.86);margin-top:.26em}
.stamp .st-name{font-size:1.33em;font-weight:500;line-height:1.3;margin-top:.24em}
.stamp .st-note{font-size:.92em;color:rgba(255,255,255,.86);margin-top:.32em}
.stamp .st-geo{font:400 .89em var(--mono);margin-top:.3em;color:rgba(255,255,255,.92)}

/* ---------- THE phone mock-up (phone() in parts.mjs): the shared frame PNG over a screen layer ----------
   --fw is the whole PNG's width (1.2644x the phone body: the PNG carries its own shadow margins). The screen layer
   is the frame's opening (left 13.549%, top 1.487%, 73.049% x 84.351% of the PNG) oversized by 0.5% each side, with
   the opening's corner radius; the frame, with its island and shadow, lies on top. --w, inside, is the body's
   width: the unit every screen is laid out in. No CSS shadow on any phone: the PNG has its own. */
.pf{position:relative;flex:none;width:var(--fw,100%);aspect-ratio:679/1278}
.pf-screen{position:absolute;left:13.049%;top:.987%;width:74.049%;height:85.351%;border-radius:15.3%/7.05%;overflow:hidden;isolation:isolate;background:#000;--w:calc(var(--fw) * .7954)}
.pf-frame{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.pf .screen{position:relative;width:100%;height:100%;background:var(--warm)}
.pf .screen.shot picture,.pf .screen.shot img{display:block;width:100%;height:100%;object-fit:cover}
.screen.warm{background:repeating-linear-gradient(135deg,#3B2C24 0 10px,#33261F 10px 20px)}
.screen.grey{background:repeating-linear-gradient(135deg,#2C3033 0 10px,#25292C 10px 20px)}
.screen.brick{background:repeating-linear-gradient(135deg,#4A2C24 0 10px,#40261F 10px 20px)}
.screen.cool{background:repeating-linear-gradient(135deg,#243038 0 10px,#1F2A31 10px 20px)}

/* ---------- hero A ---------- */
/* Full-bleed: the image runs edge to edge of the viewport, directly under the header, no radius and no
   card; the text column and stamp stay on the page's content grid (.hero-in: 1280px, same gutter as the
   sections below). Desktop height: at least 560px, at most 88% of the viewport. */
.hero-wrap{padding:0}
.hero{position:relative;min-height:min(92svh,920px);display:flex;flex-direction:column;overflow:hidden;border-radius:0;color:#fff}
@media (min-width:900px){.hero{min-height:max(560px,min(88svh,920px))}}
.hero-img{position:absolute;inset:0}
.hero-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
@media (max-width:899px){.hero-img img{object-position:center top}}
/* The design's own darkening, over the photograph, plus a shade behind the text column (--hero-shade),
   left to right on desktop, top to bottom on the tall mobile image, at the least strength that keeps
   every hero text run at AA against its worst pixel (measured; see the commit). */
.hero{--hero-shade:.65}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(14,17,20,var(--hero-shade)) 0%,rgba(14,17,20,calc(var(--hero-shade) * .85)) 38%,rgba(14,17,20,0) 62%),
  linear-gradient(180deg,rgba(14,17,20,.92) 0%,rgba(14,17,20,.55) 32%,rgba(14,17,20,0) 60%,rgba(14,17,20,.35) 100%)}
@media (max-width:899px){
  .hero{--hero-shade:.45}
  .hero-bg{background:
    linear-gradient(180deg,rgba(14,17,20,var(--hero-shade)) 0%,rgba(14,17,20,var(--hero-shade)) 52%,rgba(14,17,20,0) 72%),
    linear-gradient(180deg,rgba(14,17,20,.92) 0%,rgba(14,17,20,.55) 32%,rgba(14,17,20,0) 60%,rgba(14,17,20,.35) 100%)}
}
.hero .photo-label{right:var(--gutter);top:52%;letter-spacing:.04em}
.hero-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:clamp(48px,9vh,112px) var(--gutter) 0;flex:1;display:flex;flex-direction:column}
.hero h1{font-size:clamp(50px,11vw,148px);font-weight:700;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.hero h1 .anchor{color:var(--anchor)}
.hero-lead{margin:28px 0 0;max-width:560px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:rgba(255,255,255,.88);text-wrap:pretty}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.hero-note{margin:12px 0 0;font-size:16px;color:rgba(255,255,255,.78)}
.hero-stamp{margin-top:auto;padding:64px 0 clamp(40px,6vw,72px);display:flex;align-items:center}
.hero-stamp .st-wrap{font-size:clamp(9.5px,1.1vw,15px);flex:none}
.hero-stamp .node{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--anchor);background:#141719;margin-left:-7px;position:relative;z-index:2}
.hero-stamp .branch{flex:1;height:2px;background:var(--anchor);margin-right:-50vw}

/* ---------- how it works / numbered cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.steps{margin-top:56px}
.step{background:var(--tile);border-radius:28px;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;min-height:280px}
.step .n{font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--teal)}
.step h3{margin:auto 0 10px;padding-top:40px;font-size:30px;font-weight:600;letter-spacing:-.02em}
.step p{font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.step.sm{min-height:240px;padding:clamp(28px,3.5vw,40px)}
.step.sm .n{font-size:64px}
.step.sm h3{padding-top:32px;font-size:26px}

/* ---------- in the field ---------- */
.field{padding-top:clamp(64px,8vw,112px)}
.field.far{padding-top:clamp(96px,11vw,160px)}
.split{display:flex;flex-wrap:wrap}
.pad-l{padding:clamp(32px,5vw,72px)}
.body18{margin:24px 0 0;max-width:460px;font-size:18px;line-height:1.55;color:var(--body);text-wrap:pretty}
.h3 .thin{display:block;font-weight:300;letter-spacing:-.03em}
.con .bullets{margin-top:28px}
.maint .panel{overflow:hidden}
.maint .txt{flex:1 1 420px}
.rows{margin-top:40px;display:flex;flex-direction:column;gap:24px}
.rows li{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:center}
.rows .num{width:56px;height:56px;border-radius:16px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font:500 15px var(--mono)}
.rows .lab{display:block;font-size:16px;color:var(--muted)}
.rows .val{display:block;margin-top:2px;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.maint .ph{flex:1 1 380px;position:relative;min-height:560px}
.maint .ph-hold{position:absolute;right:clamp(-60px,-3vw,0px);top:48px;transform:rotate(-12deg);transform-origin:top right}
.duo{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.insp-a{overflow:hidden;min-height:600px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(32px,4vw,56px) 24px 0}
.h4{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.insp-a p{margin:10px 0 0;max-width:380px;font-size:17px;line-height:1.5;color:var(--muted)}
.insp-a .ph-hold{margin-top:40px;margin-bottom:-160px}
.insp-b{position:relative;border-radius:28px;overflow:hidden;min-height:600px;background:linear-gradient(180deg,rgba(14,17,20,.55),rgba(14,17,20,0) 40%),var(--brick);color:#fff;text-align:center;padding:clamp(32px,4vw,56px) 24px}
.insp-b p{margin:10px auto 0;max-width:380px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.85)}
.insp-b .photo-label{left:24px;bottom:24px}
.big-lines{display:flex;flex-direction:column;gap:28px}
.big-lines b{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em}
.big-lines span{font-size:17px;color:rgba(255,255,255,.82)}
.veh{overflow:hidden;min-height:560px;display:flex;flex-direction:column;padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px) 0}
.veh h4{font-size:clamp(26px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.veh>p:not(.eyebrow){margin:10px 0 0;font-size:18px;line-height:1.5;color:var(--body)}
.veh .strip{position:relative;margin:40px calc(-1 * clamp(24px,4vw,56px)) 0;flex:1;min-height:320px;background:var(--grey)}
.veh .strip .photo-label{right:20px;top:20px}
.veh .strip .st-wrap{position:absolute}
.veh .bullets{margin-top:20px;gap:10px}
.veh .ph-hold{display:flex;justify-content:center;margin-top:40px;margin-bottom:-200px}

/* gallery screen (HTML recreation of the app UI) */
.app{position:relative;width:100%;height:100%;border-radius:37px 37px 0 0;overflow:hidden;background:#fff;color:#111}
.app .bar{display:flex;align-items:center;justify-content:space-between;padding:46px 12px 8px}
.app .bar .b{width:26px;height:26px;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:13px}
.app .bar .t{font-size:13px;font-weight:600}
.app .seg2,.tscreen .seg2{margin:0 12px;display:grid;grid-template-columns:1fr 1fr;background:#EEF0F1;border-radius:999px;padding:2px;font-size:10px;text-align:center}
.app .seg2 span,.tscreen .seg2 span{padding:5px}
.app .seg2 .on,.tscreen .seg2 .on{background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.app .day,.tscreen .day{padding:12px 12px 6px;font-size:10.5px;font-weight:600}

.rpt-qr svg{display:block;width:100%;height:100%}

/* ---------- offline ---------- */
.off{margin-top:28px;padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px)}
.off .h2p{margin:0 auto;max-width:820px}
.off .sub{margin:24px auto 0;max-width:580px;font-size:19px;line-height:1.55;color:var(--body);text-wrap:pretty}
.track{position:relative;margin:64px auto 0;max-width:900px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:center}
.track .dash{position:absolute;top:8px;left:16.6%;width:33.4%;border-top:2px dashed var(--pending)}
.track .solid{position:absolute;top:8px;left:50%;width:33.4%;height:2px;background:var(--anchor)}
.track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.track .nd{width:18px;height:18px;border-radius:50%;border:2px solid var(--pending);background:var(--tile)}
.track .nd.a{border-color:var(--anchor)}
.track .nd.f{border:0;background:var(--anchor)}
.track b{font-size:clamp(17px,1.8vw,21px);font-weight:600}
.track span.d{font-size:16px;color:var(--muted);line-height:1.5}

/* ---------- plans ---------- */
.plan-grid{margin-top:56px}
.plan{display:flex;flex-direction:column;padding:36px 32px;border-radius:28px;background:var(--tile)}
.plan .kind{font:500 14px var(--mono);color:var(--muted)}
.plan h3,.plan h2{margin:12px 0 0;font-size:44px;font-weight:700;letter-spacing:-.03em}
.plan .who{margin:4px 0 0;font-size:20px;font-weight:500}
.plan .desc{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--body);text-wrap:pretty}
.pill{align-self:flex-start;margin-top:16px;padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--teal);font-size:14px;font-weight:600}
.checks{margin:24px 0 32px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45;color:var(--body)}
.checks li{display:flex;gap:10px}
.checks svg{flex:none;margin-top:2px}
.plan .btn{margin-top:auto;height:52px;font-size:16px;width:100%;white-space:normal;text-align:center}
.btn-quiet{background:#fff;color:var(--ink)} .btn-quiet:hover{background:var(--tint);color:var(--ink)}
.plan-foot{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:17px;color:var(--muted)}
.plan-foot a.more{font-weight:500}
.plans-page .plan h2{font-size:48px}
.plans-page .plan .who{font-size:22px}
.plans-page .plan .pill{margin-top:20px}
.plans-page .plan .spacer{flex:1;min-height:28px}
.plans-page .plan .btn{margin-top:0;min-height:54px;height:auto;padding:14px 20px}
.compare{position:relative;margin-top:48px;background:var(--tile);border-radius:28px;padding:8px clamp(16px,3vw,40px) 16px;overflow-x:auto}
.compare table{width:100%;min-width:600px;border-collapse:collapse;font-size:16px}
.compare thead th{padding:24px 16px 16px;font-size:20px;font-weight:600;text-align:left}
.compare thead th:first-child{padding-left:0;font-size:16px;font-weight:500;color:var(--muted);width:40%}
.compare tbody tr{border-top:1px solid var(--line)}
.compare tbody th{padding:18px 16px 18px 0;text-align:left;font-weight:400;color:var(--ink)}
.compare td{padding:18px 16px;color:var(--ink);vertical-align:middle}
.compare .no{color:var(--muted)}
.compare small{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
/* From 861px the three plan columns are EQUAL (fixed layout: the label column 38%, the rest split three ways), so the same value renders the same in every plan. With auto layout the Free column took its width from its own short content and was narrower, which wrapped "For 30 days, on the web" there and nowhere else. Below 861px the table keeps its auto layout and its horizontal scroll. */
@media (min-width:861px){.compare table{table-layout:fixed}.compare thead th:first-child{width:38%}}

/* ---------- FAQ (native details, one open at a time via name=) ---------- */
.faq{margin:48px auto 0;display:flex;flex-direction:column;gap:36px;max-width:820px}
.faq-group h3{margin:0 0 10px 20px;font-size:15px;font-weight:500;color:var(--muted)}
.faq-list{background:var(--tile);border-radius:20px;overflow:hidden}
.faq-list details{margin:0 20px;border-top:1px solid var(--line)}
.faq-list details:first-child{border-top:0}
.faq-list summary{list-style:none;min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;color:var(--ink);font:500 18px/1.4 var(--sans);cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:22px;color:var(--teal);width:20px;text-align:center}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{padding:0 40px 20px 0;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.faq-plain{max-width:820px;margin:48px auto 0}

/* ---------- download band ---------- */
.band{padding-bottom:clamp(96px,12vw,160px)}
.band .sec-head{display:flex;flex-direction:column;align-items:center}
.band h2{max-width:980px;font-size:clamp(44px,7.4vw,112px);font-weight:700;letter-spacing:-.045em;line-height:.94;text-wrap:balance}
.band p{margin:24px 0 36px;max-width:560px;font-size:19px;line-height:1.55;color:var(--muted)}
.band h2.sm{margin:0 0 32px;max-width:900px;font-size:clamp(40px,6vw,84px);letter-spacing:-.04em;line-height:.98}

/* ---------- store badges: official artwork, unmodified, 54px tall; 14px gap = quarter-height clear space ---------- */
.badges{display:flex;flex-wrap:wrap;gap:14px}
.badges.center{justify-content:center}
.badge{display:inline-flex;height:54px;border-radius:9px}
.badge img{display:block;height:54px;width:auto}
.badge[hidden]{display:none}

/* ---------- QR modal: what a store badge opens on a computer (qrModal in parts.mjs, opened by site.js) ----------
   Built only from the site's own tokens: the card is the language picker's panel (white, 1px var(--border), 16px radius,
   the same shadow), the close button is the menu button's 44px ring, the scrim is var(--dark) at 55%, the caption is the
   body type at 17px/500. The QR is 37 modules, drawn 264px wide (7.14px a module). */
.qrm{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.qrm[hidden]{display:none}
.qrm-back{position:absolute;inset:0;background:rgba(29,29,31,.55)}
.qrm-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:100%;padding:56px 32px 28px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px -12px rgba(0,0,0,.2)}
.qrm-x{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--ink);cursor:pointer}
.qrm-x:hover{border-color:var(--pending);background:#F2F2F4}
.qrm-qr{display:block;width:264px;max-width:100%;height:auto}
.qrm-card p{margin:0;font:500 17px/1.3 var(--sans);color:var(--ink);text-align:center}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--tile);color:var(--muted)}
.ft{max-width:1280px;margin:0 auto;padding:64px var(--gutter) 40px}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px 32px}
.ft-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ft-brand p{font-size:16px;line-height:1.55;max-width:260px}
.ft-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ft-col .h{font:500 13px var(--mono);color:var(--muted)}
.ft-col a{color:var(--body);text-decoration:none;font-size:16px}
.ft-col a:hover{color:var(--teal)}
.ft-col .lang{margin-top:8px}
.ft-legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- subpages ---------- */
.page-h1{margin:0 auto;max-width:1000px;font-size:clamp(48px,8vw,112px);font-weight:700;letter-spacing:-.045em;line-height:.94;text-wrap:balance}
.page-lead{margin:24px auto 0;max-width:640px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--body);text-wrap:pretty}
.center-note{margin:28px 0 0;text-align:center;font-size:17px;color:var(--muted)}
.h2s{margin:0;font-size:clamp(40px,6vw,80px);font-weight:700;letter-spacing:-.04em;line-height:.98;text-wrap:balance}

/* legal */
.legal-h{text-align:center;padding:28px 0 clamp(40px,5vw,64px)}
.legal-h h1{font-size:clamp(44px,7vw,96px);font-weight:700;letter-spacing:-.045em;line-height:.95}
.legal-h .dates{margin:20px 0 0;font-size:17px;color:var(--muted)}
.legal{display:flex;flex-wrap:wrap;gap:32px 72px;padding:0 0 120px;align-items:flex-start}
.toc{position:sticky;top:92px;flex:0 0 280px;background:var(--tile);border-radius:20px;padding:20px 20px 16px;max-height:calc(100vh - 116px);overflow-y:auto}
.toc .h{margin:0 0 16px;font:500 13px var(--mono);color:var(--muted)}
.toc a{display:block;padding:9px 0;font-size:16px;line-height:1.4;color:var(--body);text-decoration:none}
.toc a:hover{color:var(--teal)}
.toc-m{display:none;width:100%;border-radius:20px;background:var(--tile)}
.toc-m summary{padding:18px 20px;font-size:17px;font-weight:500;cursor:pointer;color:var(--teal)}
.toc-m ol{padding:0 18px 12px}
.toc-m a{display:block;padding:12px 0;font-size:16px;color:var(--body);text-decoration:none;border-top:1px solid var(--line)}
@media (max-width:900px){.toc{display:none}.toc-m{display:block}}
.prose{flex:1 1 560px;max-width:720px;min-width:0;font-size:17px;line-height:1.7;color:var(--body)}
.prose .intro{margin:0 0 32px;padding:20px 24px;border-radius:20px;background:var(--tile);color:var(--ink)}
.prose h2{margin:56px 0 16px;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.prose h2:first-of-type{margin-top:0}
.prose p{margin:0 0 20px;text-wrap:pretty}
.prose ul{list-style:disc;margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font:400 .92em var(--mono);background:var(--tile);padding:1px 6px;border-radius:6px}
.prose .tbl{overflow-x:auto;margin:0 0 20px}
.prose table{width:100%;min-width:480px;border-collapse:collapse;font-size:16px;line-height:1.5}
.prose th{padding:12px 12px 12px 0;font-weight:500;text-align:left;color:var(--muted);border-bottom:1px solid var(--border)}
.prose td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th+th,.prose td+td{padding-left:12px}

/* get */
.get-main{max-width:1280px;margin:0 auto;padding:clamp(12px,2vw,24px) clamp(12px,2vw,24px) clamp(64px,8vw,120px)}
.get-main .seg-line{height:clamp(48px,6vw,80px)}
.get-card{margin-top:28px;background:var(--tile);border-radius:clamp(24px,3vw,36px);padding:clamp(48px,8vw,112px) clamp(20px,5vw,64px);display:flex;flex-direction:column;align-items:center;text-align:center}
.get-card img{border-radius:22px;box-shadow:0 12px 30px -12px rgba(15,118,110,.5)}
.get-card h1{margin:32px 0 0;font-size:clamp(44px,8vw,96px);font-weight:700;letter-spacing:-.045em;line-height:.96}
.get-card p{margin:20px 0 36px;max-width:520px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--body);text-wrap:pretty}

/* 404 */
.nf{max-width:1280px;margin:0 auto;min-height:calc(100svh - 69px);padding:0 var(--gutter) clamp(80px,10vw,140px);display:flex;flex-direction:column;align-items:center;text-align:center}
.nf .dash{width:0;height:clamp(40px,5vw,64px);border-left:2px dashed var(--unlit);margin-top:10px}
.nf .hollow{width:12px;height:12px;border-radius:50%;border:2px solid var(--unlit)}
.nf .eyebrow{margin:28px 0 16px}
.nf h1{max-width:900px;font-size:clamp(44px,8vw,112px);font-weight:700;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
.nf p{margin:24px 0 36px;max-width:520px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--body);text-wrap:pretty}
.nf .ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px}

/* join */
.join{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:20px 20px 28px}
.join .top{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center}
.join .mid{flex:1;width:100%;max-width:480px;display:flex;flex-direction:column;justify-content:center;padding:24px 0 40px}
.join .seg{padding-top:0}
.join .seg-line{height:56px}
.join .hd{text-align:center;padding-top:24px}
.join .eyebrow{margin:0}
.join h1{margin:12px 0 0;font-size:clamp(36px,9vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.join .hd p:not(.eyebrow){margin:16px auto 0;max-width:380px;font-size:18px;line-height:1.55;color:var(--body);text-wrap:pretty}
.join .main-btn{margin-top:36px;display:flex;align-items:center;justify-content:center;min-height:64px;border-radius:999px;background:var(--teal);color:#fff;font-size:19px;font-weight:600;text-decoration:none;padding:0 24px;text-align:center}
.join .main-btn:hover{background:var(--teal-hover);color:#fff}
.join .main-btn[hidden],.join [hidden]{display:none}
.join .note{margin:14px 0 0;text-align:center;font-size:16px;color:var(--muted)}
.join .box{margin-top:40px;background:var(--tile);border-radius:28px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.join .box h2{margin:0 0 6px;font-size:20px;font-weight:600}
.join .box p{margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--muted)}
.join .tm{max-width:440px;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}
.join .spin{width:26px;height:26px;margin:24px auto 0;border:2.5px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* The design's inspection and vehicle panels are content-box: min-height is measured INSIDE the
   padding, which is what makes them 600+padding tall in the reference. Kept to match it. */
.insp-a,.insp-b,.veh{box-sizing:content-box}
/* Likewise the design's split-panel columns are content-box, so flex-basis is measured inside their
   padding. That is what sets the reference's column widths; border-box would narrow the text column. */
.split>*{box-sizing:content-box}
.veh .bullets{line-height:normal}
/* Placeholder-only: below 600px the hero's PHOTO label would sit on top of the hero copy (the
   Indonesian copy runs taller), so it moves to the panel's top edge. Goes away with the real photo. */
/* Construction: a real app screenshot in a device frame replaces the drawn phone mock. Same width
   (290px) and tilt (5deg) as the mock; the frame is in the image, so the shadow follows its outline. */
/* Maintenance: the real stamped photo in the camera screen. The photo is 2:3 and the screen is far
   narrower, so it is fitted to the screen's WIDTH on black (as the app's own camera shows it) rather
   than cropped, which would cut through the burned-in stamp. */
.screen.cam{background:#000}
.cam-photo{position:absolute;left:0;right:0;top:calc(var(--w)*.16)}
.cam-photo img{display:block;width:100%;height:auto}
/* Maintenance panel. The boiler-room photograph covers the WHOLE panel, edge to edge, as a faint texture:
   the panel grey laid over it at --maint-veil, so about 1 - veil of the photo shows. The phone is a real
   device in the right half: the app's photo viewer with its own opaque photo (a tighter crop on the gauge
   and valves), 336px, -4deg, soft shadow, vertically centred, at least 32px clear of every edge (its
   column padding allows for the tilt's overhang: 25px sideways, 11px vertically). */
.maint .panel{--maint-veil:.86;
  background:linear-gradient(rgba(245,245,247,var(--maint-veil)),rgba(245,245,247,var(--maint-veil))),url(/img/bg-maintenance.jpg) center/cover no-repeat;
  background:linear-gradient(rgba(245,245,247,var(--maint-veil)),rgba(245,245,247,var(--maint-veil))),image-set(url(/img/bg-maintenance.webp) type("image/webp"),url(/img/bg-maintenance.jpg) type("image/jpeg")) center/cover no-repeat;
  align-items:stretch}
.maint .txt{flex:0 0 50%;box-sizing:border-box;padding:clamp(32px,5vw,72px)}
.maint .ph{flex:1 1 0;min-height:0;position:static;display:flex;align-items:center;justify-content:center;padding:56px 64px;box-sizing:border-box}
.maint .ph-hold{position:static;transform:none}
/* Over the photo texture the design's grey labels (#6E6E73) measured 3.36:1 and the teal eyebrow 3.63:1 at
   their worst pixel - under AA at any veil that still shows 10% of the photo. Inside this panel only they
   take the next darker colours of the same palette: body grey for the labels, the hover teal for the
   eyebrow. Measured per text run at 390-1440 with 14% of the photo showing: lowest 5.02:1 (eyebrow). */
.maint .rows .lab{color:var(--body)}
.maint .txt .eyebrow{color:var(--teal-hover)}
/* Below 1024px: text first, then the phone centred; the faint photo still covers the whole panel. The phone
   shrinks so its tilted outline keeps 32px each side (outline width = 1.15 x the phone's). */
@media (max-width:1023px){
  .maint .panel{flex-direction:column}
  .maint .txt{flex:none;width:100%}
  .maint .ph{flex:none;padding:8px 0 56px}
  .maint .pf{--fw:calc(min(336px,calc((100vw - 2 * var(--gutter) - 64px) / 1.15)) * 1.2644) !important}
}
/* Inspection, left card: the phone shows the FINISHED photo in the app's viewer, whole, 32px clear of the
   card's bottom edge. */
.insp-a .ph-hold{margin-top:32px;margin-bottom:32px}
/* Inspection: real photographs. The phone's viewfinder fills with the scaffold-tag photo (anchored top,
   under the drawn stamp); the right panel's photo fills the panel, anchored bottom so the dusk sky stays
   behind the heading. A top-to-transparent shade sits over the photo at the least strength that keeps
   every white text run at AA against its worst pixel (0.45; 0.4 left the body text at 4.49:1 at 900px). */
.pf .ph-stamp{z-index:1}.insp-b{background:#1D2230}
.insp-b .insp-bg{position:absolute;inset:0}
.insp-b .insp-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.insp-b h4,.insp-b p{position:relative;z-index:1}
.insp-b .insp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,20,var(--insp-shade,.45)) 0%,rgba(14,17,20,0) 45%)}

/* Photo-viewer phone, laid out as the iOS PhotoDetailScreen: white page, a status bar, the top bar (round
   white back chevron, round white ellipsis menu), and the photo fit to the full width at its 3:4 capture
   aspect, centred. The stamp is PART OF THE PHOTO: bottom-left, with a burned stamp's margins (4% of the
   photo width) and scaled with the photo (its font is 2.68% of the photo width, which makes it 60% as
   wide as the photo, as in the reference). */
.screen.vw{background:#fff}
.pf .vw-bar{position:absolute;z-index:3;left:calc(var(--w)*.05);right:calc(var(--w)*.05);top:calc(var(--w)*.17);display:flex;justify-content:space-between}
.pf .vw-btn{width:calc(var(--w)*.12);height:calc(var(--w)*.12);border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
.pf .vw-btn svg{width:56%;height:56%}
.pf .vw-photo{--pw:calc(var(--w)*.931);position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:3/4;overflow:hidden}
.pf .vw-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pf .vw-photo .ph-stamp{position:absolute}

/* Inspection, right panel: the QR story. */
.insp-b{container-type:inline-size}
.qr-story{position:absolute;z-index:1;left:50%;bottom:clamp(16px,4cqw,32px);transform:translateX(-50%);width:34em;height:20em;font-size:min(15px,2.72cqw)}
.rpt{position:absolute;left:1.1em;bottom:1.6em;width:18.5em;padding:.9em 1em 1em;border-radius:.45em;background:#fff;color:#1A1D1F;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);transform:rotate(-5deg);transform-origin:50% 100%;text-align:left}
.rpt-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:.55em;border-bottom:1px solid #E4E6E8}
.rpt-h>span{display:flex;flex-direction:column;gap:.15em}
.rpt-h .r{align-items:flex-end}
.rpt-h b{font-size:.78em;font-weight:600}
.rpt-h small{font-size:.5em;color:#666}
.rpt-row{display:grid;grid-template-columns:7em 1fr;gap:.8em;padding-top:.7em}
.rpt-pic{aspect-ratio:3/4;background:url(/img/inspection-scaffold-tag.jpg) center top/cover}
.rpt-meta{display:flex;flex-direction:column;gap:.22em;font-size:.56em;line-height:1.3;color:#333}
.rpt-meta .ok{color:#0E7C6E}
.rpt-meta .mono{font-family:var(--mono)}
.rpt-qr{margin-top:.6em;width:8em;height:8em}
.qr-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.qr-line path{fill:none;stroke:#2FD3BD;stroke-width:2;vector-effect:non-scaling-stroke}
.qr-line circle{fill:#2FD3BD}
.fnd{position:absolute;right:0;bottom:0;width:15.5em;padding:1.1em 1.2em;border-radius:1em;background:#1D1D1F;border:1px solid rgba(255,255,255,.12);color:#fff;box-shadow:0 24px 48px -12px rgba(0,0,0,.6);text-align:left}

/* Vehicle damage: real photographs. Left card: the close-up fills the strip, anchored right so the damage
   stays in view, the stamp over it. Right card: the phone is the photo viewer (finished photo, no
   shutter), whole and inside the card, 32px clear of its bottom edge. */
.veh .strip{overflow:hidden}
.veh .strip .strip-img{position:absolute;inset:0}
.veh .strip .strip-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.veh .strip .st-wrap{z-index:1}
.veh .ph-hold{margin-bottom:32px}

/* ---------- for teams: the three-step flow (admin adds Maya -> Maya joins -> her photo lands) ---------- */
.tflow{position:relative;margin-top:56px}
.tflow-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tflow-line{position:absolute;left:16.6%;right:16.6%;top:259px;height:2px;background:var(--anchor)}
.tstep{display:flex;flex-direction:column;align-items:center}
.tstep-ph{position:relative;z-index:1}
.tstep>p{margin-top:24px;display:grid;grid-template-columns:36px 1fr;gap:12px;max-width:320px;font-size:17px;line-height:1.5;color:var(--body)}
.tstep .c{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--teal);font:600 15px var(--mono);display:flex;align-items:center;justify-content:center}
.tflow-note{margin-top:28px;text-align:center;font-size:15px;color:var(--muted)}
.pf .tscreen{background:#fff;color:#111;font-family:var(--sans);text-align:left}
.tform{padding:6px 14px;display:flex;flex-direction:column;gap:6px}
.tform label{margin-top:6px;font-size:9.5px;color:#6E6E73}
.tfield{border:1px solid #D2D2D7;border-radius:10px;padding:8px 10px;font-size:12px}
.tcode-card{margin-top:16px;background:#F5F5F7;border-radius:14px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.tcode-card small{font-size:9px;color:#6E6E73}
.tcode-card b{font:600 26px var(--mono);letter-spacing:.06em;color:var(--teal)}
.tcode-card span{font-size:9.5px;color:#6E6E73}
.digits{display:flex;gap:5px}
.digits span{flex:1;aspect-ratio:3/4;border:1.5px solid var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;font:600 16px var(--mono);color:#111}
.tbtn{margin-top:16px;height:34px;border-radius:999px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
/* gallery (interactive: the chips filter the grid) */
/* as the app: days newest first under their date headers, 5 columns 2px apart, square cells cropped from the bottom */
.tday[hidden]{display:none}
.tscreen .tday .day{padding:5px 10px 3px;font-size:9.5px}
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.tgrid li{position:relative;aspect-ratio:1;overflow:hidden;transition:opacity .25s,transform .25s}
.tgrid li[hidden]{display:none}
.tgrid li.is-out{opacity:0;transform:scale(.85)}
.tgrid img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.tgrid .new-badge{position:absolute;left:2px;top:2px;padding:1px 4px;border-radius:999px;background:var(--teal);color:#fff;font-size:6.5px;font-weight:600}
.tgrid li.is-new{box-shadow:inset 0 0 0 2px var(--anchor)}
.who2{position:absolute;left:10px;right:10px;bottom:22px}
.who2 .chips{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:6px 4px;display:flex;justify-content:space-around}
.av-chip{background:none;border:0;padding:2px;min-width:40px;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 8.5px var(--sans);color:#111;cursor:pointer;border-radius:10px}
.av-chip i{width:30px;height:30px;border-radius:50%;color:#fff;font-size:10px;font-weight:600;font-style:normal;display:flex;align-items:center;justify-content:center;transition:box-shadow .25s}
.av-chip[aria-pressed=true] i,.av-chip.is-new i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--anchor)}
.av-chip[aria-pressed=true] span{font-weight:700}
.bubble{position:absolute;bottom:calc(100% + 8px);left:var(--bx,14%);transform:translateX(-50%);display:flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;border:2px solid var(--anchor);background:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.3);font-size:10px;white-space:nowrap;transition:left .3s cubic-bezier(.2,.7,.2,1)}
.bubble b{font-weight:600}
.bubble span{font-family:var(--mono);color:#6E6E73}
/* the flow plays once when it scrolls into view (html.anim: motion allowed and JS on); otherwise, and with
   reduced motion, everything is shown in its final state */
.anim .tflow .digits.fill span{transition:color .2s calc(.6s + var(--i) * .3s),border-color .2s calc(.6s + var(--i) * .3s)}
.anim .tflow:not(.play) .digits.fill span{color:transparent;border-color:#D2D2D7}
.anim .tflow .tgrid li.is-new,.anim .tflow .av-chip.is-new i{transition:opacity .4s 2.9s,transform .4s 2.9s,box-shadow .3s 3.2s}
.anim .tflow:not(.play) .tgrid li.is-new{opacity:0;transform:scale(.8)}
.anim .tflow:not(.play) .av-chip.is-new i{box-shadow:none}
@media (max-width:900px){
  .tflow-steps{grid-template-columns:1fr;gap:48px}
  .tflow-line{left:calc(50% - 1px);right:auto;width:2px;height:auto;top:0;bottom:120px}
  .tstep>p{max-width:420px;position:relative;z-index:1;background:#fff;padding:8px 0}
}

/* ---------- for teams: bento ---------- */
.bento{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.bento>li{position:relative;overflow:hidden;background:var(--tile);border-radius:24px;padding:28px 28px 32px;display:flex;flex-direction:column}
.bento h3{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.01em}
.bento p{font-size:17px;line-height:1.55;color:var(--body);text-wrap:pretty}
.b-codes{grid-column:span 2;grid-row:span 2}
.b-codes h3{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em}
.b-codes .code-big{margin-top:28px;max-width:420px}
.b-codes .code-big.digits{gap:10px}
.b-codes .code-big.digits span{border-radius:14px;font-size:clamp(28px,3vw,40px);border-color:var(--teal);background:#fff}
.b-codes .tag{margin-top:18px;font-size:clamp(18px,1.6vw,22px)!important;font-weight:600;color:var(--ink)!important}
.b-codes .try{margin-top:auto;padding-top:32px}
.try{display:flex;flex-direction:column;gap:10px}
.try-l{font:500 14px var(--mono);color:var(--teal)}
/* six real boxes drawn behind one plain input: Geist Mono is 0.6em wide per character, so at 28px each
   character is 16.8px and a 48px pitch needs 31.2px of letter-spacing; 11.6px of left padding centres
   the first character in its 40px box. Works with no JavaScript. */
.try input{width:288px;max-width:100%;height:60px;padding:0 0 0 11.6px;border:0;border-radius:12px;font:600 28px var(--mono);letter-spacing:31.2px;color:var(--ink);caret-color:var(--teal);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60'%3E%3Crect x='1' y='1' width='38' height='58' rx='10' fill='%23fff' stroke='%23D2D2D7' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/48px 60px repeat-x}
.try input::placeholder{color:var(--muted)}
.try input:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.try-done{margin-top:12px;font-size:15px!important;color:var(--teal)!important}
.bento>.b-stamp{grid-column:span 2;flex-direction:row;align-items:center;gap:20px}
.b-stamp .b-txt{flex:1 1 0;min-width:0}
.b-phones{display:flex;gap:10px;flex:none}
/* the frame PNG carries ~10% transparent shadow margin each side: let neighbours share it, so the three phones take
   the room the bodies need, not the PNGs */
.b-phones .pf{margin:0 calc(var(--fw) * -.1)}.b-phones{padding:0 calc(126px * .1)}
.bphone .screen{background:#fff}
/* the viewer shows the photo at its own 4:3, fit to the width (the stamp is in its pixels) */
.pf .bp-photo{aspect-ratio:4/3}
.lock{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--teal-hover)}
.lock svg{width:16px;height:16px}
.roster{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.roster li{display:flex;align-items:center;gap:10px;font-size:15px}
.roster i{width:28px;height:28px;border-radius:50%;color:#fff;font:600 10px var(--sans);font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.roster span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster em{font-style:normal;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px}
.roster .ok{background:var(--tint);color:var(--teal)}
.roster .wait{background:#FEF3C7;color:#92400E}
.pswitch{margin-top:18px;align-self:flex-start;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#E5E5EA;font-size:14px}
.pswitch span{padding:6px 14px;text-align:center}
.pswitch .on{background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:600}
.roles{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.roles span{padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
.r-admin{background:var(--ink);color:#fff}
.r-worker{background:var(--tint);color:var(--teal)}
.bento>.b-dash{grid-column:span 3;gap:24px}
.b-dash .b-txt{max-width:640px}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento>.b-codes,.bento>.b-stamp,.bento>.b-dash,.bento>.b-roles{grid-column:span 2}
  .bento>.b-codes{grid-row:auto}
}
@media (max-width:700px){
  .bento{grid-template-columns:1fr}
  .bento>.b-codes,.bento>.b-stamp,.bento>.b-dash,.bento>.b-roles{grid-column:auto}
  .bento>.b-stamp,.bento>.b-dash{flex-direction:column;align-items:flex-start}
  .b-phones{align-self:center}
  .bento>.b-dash .b-txt{flex:none}
}

/* ---------- delivery: full-bleed photograph (like the hero), text on the content grid ----------
   1100px and up: the photograph (delivery-doorstep-extended, 2172x724: garden, courier, door, parcel) is
   anchored so the PARCEL's right edge (image x 1822) sits 60px in from the viewport's right edge, which leaves
   the garden on the left for the text; the section is about as tall as the image is wide / 3, so it is barely
   cropped. The text never reaches the courier (his left edge is image x 892; test-layout.mjs checks it at
   1920, 1440 and 1100). Below 1100px - where the courier would reach the text column - the text sits on a dark band ABOVE the photo, which is cropped to about
   1150 image px centred on the courier, the phone and the parcel. */
.deliv-bleed{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:clamp(480px, 42vw, 800px);display:flex;overflow:hidden;color:#fff;background:#1D1D1F}
/* the photo as a "stage": object-fit: cover done by hand, so the fade can be placed on the photo's own pixels,
   placed by --left (clamped so the stage always covers the box) and --dy */
.deliv-img{position:absolute;inset:0;overflow:hidden;container-type:size;--dy:.5;
  --sw:max(100cqw, calc(100cqh * var(--iw) / var(--ih)));--left:calc(100cqw - 60px - var(--sw) * 1822 / var(--iw));
  --lx:clamp(100cqw - var(--sw), var(--left), 0px)}
.dstage{position:absolute;width:var(--sw);aspect-ratio:var(--iw)/var(--ih);left:var(--lx);top:calc((100cqh - var(--sw) * var(--ih) / var(--iw)) * var(--dy))}
.dstage picture,.dstage img{display:block;width:100%;height:100%}
/* THE LEFT FADE: one smooth, eased curve, in CSS so it can be tuned. 0.92 at the far left, easing linearly to 0.75 at
   the text's right edge (--tra: the text box, 40px short of it below 1280px), then a cubic Hermite down to 0 at
   --fe, over the courier's dark jacket (image x 990: left of his head, right of the jacket's edge at 892), with its
   starting slope matched to the first part and zero slope at the end, so there is no step and no kink. --fe is
   placed on the photo's own pixels (--lx + --sw * x / --iw). Stops (u = position between --tra and --fe):
   0 .92 | half-way to the text edge .835 | text edge .75 | u .125 .713 | .25 .625 | .375 .505 | .5 .368 | .625 .233 |
   .75 .115 | .875 .032 | 1 0 */
.deliv-bleed{--tr:calc(max(0px, (100vw - 1280px) / 2) + var(--gutter) + var(--txw))}
.deliv-shade{position:absolute;inset:0;pointer-events:none;--fe:calc(var(--lx) + var(--sw) * 990 / var(--iw));--t0:var(--tra, var(--tr));--d:calc(var(--fe) - var(--t0));
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0,rgba(0,0,0,.835) calc(var(--t0) * .5),rgba(0,0,0,.75) var(--t0),
    rgba(0,0,0,.713) calc(var(--t0) + var(--d) * .125),rgba(0,0,0,.625) calc(var(--t0) + var(--d) * .25),rgba(0,0,0,.505) calc(var(--t0) + var(--d) * .375),
    rgba(0,0,0,.368) calc(var(--t0) + var(--d) * .5),rgba(0,0,0,.233) calc(var(--t0) + var(--d) * .625),rgba(0,0,0,.115) calc(var(--t0) + var(--d) * .75),
    rgba(0,0,0,.032) calc(var(--t0) + var(--d) * .875),rgba(0,0,0,0) var(--fe))}
.deliv-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:clamp(48px,5vw,80px) var(--gutter);display:flex;align-items:center}
.deliv-bleed{--txw:400px}
.deliv-txt{max-width:var(--txw)}
.deliv-txt h3{margin:0 0 32px;font-size:clamp(34px,3.6vw,64px)}
/* narrower desktops: a narrower text column and a slightly smaller headline, never over the courier */
@media (max-width:1279px){.deliv-bleed{--txw:330px;--tra:calc(var(--tr) - 40px)}.deliv-txt h3{font-size:clamp(30px,3.1vw,40px)}}
@media (max-width:1099px){
  .deliv-bleed{flex-direction:column;min-height:0}
  .deliv-in{order:1;padding:56px var(--gutter) 40px}
  .deliv-txt{max-width:560px}
  .deliv-img{position:relative;order:2;height:calc(100vw * var(--ih) / 1150);--left:calc(50cqw - var(--sw) * 1357 / var(--iw))}
  /* the text sits on the dark band above the photo here, so the photo shows clean and full-colour: no fade at all */
  .deliv-shade{display:none}
}

/* Construction: the grey panel runs full-bleed, edge to edge like the hero (square corners). Its inner
   padding is exactly the extra width, so the text and phone keep the same content box as before. */
.con .panel{box-sizing:border-box;width:100vw;margin-left:calc(50% - 50vw);border-radius:0;padding-inline:max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)))}


/* ---------- construction: build timeline on a faint timber-frame photograph ---------- */
.con-panel{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:var(--con-rg);padding-block:clamp(40px,4.4vw,56px);--con-rg:28px;
  --con-veil:.86;
  background:linear-gradient(rgba(245,245,247,var(--con-veil)),rgba(245,245,247,var(--con-veil))),url(/img/construction/bg-frame.jpg) center/cover no-repeat;
  background:linear-gradient(rgba(245,245,247,var(--con-veil)),rgba(245,245,247,var(--con-veil))),image-set(url(/img/construction/bg-frame.webp) type("image/webp"),url(/img/construction/bg-frame.jpg) type("image/jpeg")) center/cover no-repeat}
.con-txt{grid-column:1 / span 5;grid-row:1}
.con .con-txt .eyebrow{color:var(--teal-hover)}
/* the Frame up phone: top right, top-aligned with the headline; below it the anchor line runs down the
   rest of the row to the timeline, where it meets the Frame up dot */
.con-phone{grid-column:-4 / -1;grid-row:1;justify-self:end;width:var(--tlp);display:flex;flex-direction:column;align-items:center;padding-top:30px}
.con-phone{--cfw:calc(var(--tlp) * 1.2644)}
.con-shot{transform:rotate(3deg)}
/* the same phone as the timeline's last stage, for narrow screens (below): one of the two is display:none at any
   width, so a screen reader meets exactly one, in the order it is seen */
.con-phone-m{display:none}
.con-phone::after{content:"";flex:1;width:2px;min-height:0;background:var(--anchor)}
.con-panel{--tlp:210px;--thw:250px}
.tl{grid-column:1 / -1;grid-row:2;position:relative}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,var(--thw))) var(--tlp);justify-content:space-between;align-items:end}
.tl-line{position:absolute;left:25px;right:calc(var(--tlp) / 2);bottom:62px;height:2px;background:var(--anchor)}
.tl-st{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.tl-ph{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--grey);box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.tl-ph img{display:block;width:100%;height:100%;object-fit:cover}
.tl-stamp{position:absolute}
.tl-dot{position:relative;z-index:1;margin:24px 0 14px 18px;width:14px;height:14px;border-radius:50%;border:2px solid var(--anchor);background:var(--anchor);box-shadow:0 0 0 6px rgba(47,211,189,.2)}
.tl-st b{font-size:17px;font-weight:600;color:var(--ink)}
.tl-st .tl-d{font:500 14px var(--mono);color:var(--body)}
.tl-frame{align-self:stretch;align-items:center;justify-content:flex-end;text-align:center}
.tl-frame .tl-dot{margin-left:0}
/* the line turning up: from the Frame up dot to the top of its cell, then across the row gap */
.tl-frame::after{content:"";position:absolute;left:calc(50% - 1px);top:calc(-1 * var(--con-rg));bottom:62px;width:2px;background:var(--anchor)}
/* dots light up in turn when the timeline scrolls into view (html.anim), otherwise all lit */
.anim .tl .tl-dot{transition:background .3s calc(.2s + var(--i) * .45s),box-shadow .3s calc(.2s + var(--i) * .45s)}
.anim .tl:not(.play) .tl-dot{background:#fff;box-shadow:none}
@media (max-width:1100px){.con-txt{grid-column:1 / span 7}.con-panel{--thw:220px;--tlp:190px}}
@media (max-width:900px){
  .con-panel{display:flex;flex-direction:column;gap:36px}
  .con-phone{display:none}
  .tl-line{display:none}
  .tl-frame::after{display:none}
  .tl-steps{grid-template-columns:1fr;gap:28px;padding-left:40px;align-items:stretch}
  .tl-st{display:grid;grid-template-columns:minmax(0,150px) 1fr;column-gap:16px;align-items:center}
  .tl-ph{grid-row:1 / span 2}
  .tl-frame{display:block;text-align:left;padding:6px 0}
  .tl-frame b,.tl-frame .tl-d{display:block}
  .tl-dot{position:absolute;left:-32px;top:calc(50% - 7px);margin:0}
  .tl-st:not(:first-child)::before,.tl-st:not(:last-child)::after{content:"";position:absolute;left:-26px;width:2px;background:var(--anchor)}
  .tl-st:not(:first-child)::before{top:-28px;height:calc(50% + 28px)}
  .tl-st:not(:last-child)::after{top:50%;height:50%}
  .tl-st b{align-self:end}.tl-st .tl-d{align-self:start}
  /* Frame up closes the timeline: its dot and label like the others, the phone centred under the label, and the
     line ending at this dot (it has no line below it) */
  .tl-frame .tl-dot{top:20px}
  .tl-frame::before{height:calc(28px + 27px) !important}
  .con-phone-m{display:flex;justify-content:center;margin:20px 0 0 -40px;--cfw:calc(min(300px, 100vw - 130px) * 1.2644)}
  .con-phone-m .con-shot{transform:none}
}

/* ---------- the stamp's SIZE on a photo: the app's own rule ----------
   PicAnchor sizes the stamp from the photo's SHORT edge (iOS StampLayoutEngine.swift:134:
   base = minDim x sizeFraction x skin.scale; NORMAL sizeFraction 0.034, StampConfig.swift:22; Anchor Bar
   skin.scale 1.0, DesignRegistry.swift:94). The time is the HERO role, 2.0 x base = 6.8% of the short edge
   (StampLayoutEngine.swift:54); in this component the time is 3.25em, so 1em = 2.092% of the short edge.
   The card sits 0.04 x the short edge in from the corner (marginFactor, DesignRegistry.swift:106).
   Every photo that carries a stamp is a size container, so cqmin IS its short edge: a landscape 4:3 photo
   gets a stamp about 36% of its width, a 3:4 portrait about 48%. (The hero stamp is a display element,
   not a photo stamp, and keeps its own size.) */
.tl-ph,.pf .vw-photo,.veh .strip{container-type:size}
.tl-stamp,.pf .vw-photo .ph-stamp,.veh .strip .st-wrap{left:4cqmin;bottom:4cqmin;font-size:2.092cqmin}

/* Vehicle damage: both cards are square-cornered */
.veh{border-radius:0}

/* ---------- the shared phone status bar (statusBar() in parts.mjs), sized by the phone's --w, around the frame's island ---------- */
.pf .sbar{position:absolute;z-index:4;left:0;right:0;top:calc(var(--w)*.055);height:calc(var(--w)*.06);display:grid;grid-template-columns:34.7% 1fr 34.9%;align-items:center;justify-items:center;color:#111;pointer-events:none}
.pf .sb-icons{grid-column:3}
.pf .sbar.sb-dark{color:#fff}
.pf .sb-time{font:600 calc(var(--w)*.05)/1 var(--sans);letter-spacing:-.01em}
.pf .sb-icons{display:flex;align-items:center;gap:calc(var(--w)*.016)}
.pf .sbar svg{display:block;height:calc(var(--w)*.04);width:auto;fill:currentColor}
.pf .sb-batt{height:calc(var(--w)*.042)!important}

/* ---------- the shared phone nav bar (navBar() in parts.mjs): left slot | centred title | right slot ---------- */
.nbar{display:grid;grid-template-columns:var(--slot) minmax(0,1fr) var(--slot);align-items:center;column-gap:6px;padding:46px 12px 10px}
.nb-l{justify-self:start;display:flex}
.nb-r{justify-self:end;display:flex}
.nb-t{min-width:0;text-align:center;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-btn{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.nb-btn svg{width:14px;height:14px}

/* ---------- anyone can check: full-bleed, light, the photo dominates ----------
   The background is the photo's own worktop tone, lightened (sampled 180,172,163), so the section and
   the bright kitchen read as one scene. Text near-black; eyebrow and the "check it" accent dark teal. */
.vfy{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:28px;background:#F3EFEA;color:var(--ink);overflow:hidden;
  display:flex;align-items:center;gap:136px;                 /* > the Found card's 104px overhang + 32px */
  padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,112px) calc(max(0px, (100vw - 1280px) / 2) + var(--gutter))}
.vfy .eyebrow{color:var(--teal)}
.vfy .anchor{color:var(--teal)}
.vfy-txt{flex:1 1 0;min-width:0;max-width:440px}
.vfy-txt>p:not(.eyebrow){margin:24px 0 0;font-size:19px;line-height:1.55;color:var(--body);text-wrap:pretty}
.vfy-txt .btn{margin-top:32px}
/* the checked photo on its own (no browser bar): 60% of the viewport width, bleeding off the right edge */
.vfy-vis{--bw:60vw;flex:none;position:relative;width:var(--bw);margin-right:-3vw}
.vfy .browser{border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 30px 70px -30px rgba(60,45,30,.45)}
.vfy .browser .shot{position:relative;aspect-ratio:3/2;background:#DDD6CE;container-type:size}
.vfy .browser .shot img{display:block;width:100%;height:100%;object-fit:cover}
.vfy .shot-stamp{position:absolute;left:4cqmin;bottom:4cqmin;font-size:2.092cqmin}
/* the Found card: ~60% of its former size, straddling the photo's LEFT edge just above the stamp (the
   stamp takes the photo's bottom-left ~42% of its height), over the plain counter: never on the
   checklist, the keys or the stamp */
.vfy .found{position:absolute;left:-104px;bottom:calc(var(--bw) * 2 / 3 * .45);width:208px;padding:14px;font-size:12px;text-align:left;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 18px 40px -14px rgba(40,30,20,.45)}
.vfy .found dl{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.vfy .found dl>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vfy .found dt{font-size:10px;color:var(--muted)}
.vfy .found dd{margin:1px 0 0;font-size:12px;font-weight:500}
.vfy .found dd.mono{font:500 11px var(--mono)}
.vfy .found dl svg{width:15px;height:15px;flex:none}
@media (max-width:1099px){
  .vfy{flex-direction:column;align-items:stretch;padding:48px var(--gutter) 56px}
  .vfy-txt{max-width:560px}
  .vfy-vis{--bw:calc(100vw - 2 * var(--gutter));width:100%;margin-right:0}
  /* the card sits under the photo, just overlapping its bottom edge on the right (the counter and pen) */
  .vfy .found{position:relative;left:auto;bottom:auto;margin:-18px 10px 0 auto}
}
/* the heading sits in a narrow column beside the big photo: sized so the longest word (Indonesian
   "memeriksanya", ~6.6em wide) stays inside the column at every width */
.vfy .h2p{font-size:clamp(32px,3.6vw,48px)}
@media (max-width:1099px){.vfy .h2p{font-size:clamp(36px,9vw,56px)}}

/* ---------- EXPERIMENT: panel--fade-edges (revertable: one commit) ----------
   The panel's background spans the viewport and fades out at the sides into the page. The solid band
   follows the CONTENT GRID (the 1280px grid + 24px each side), so text never sits in the fade: that is
   ~67% of the viewport at 1920 and ~85% at 1440 (a fixed 60-70% band would fade under the text at
   1440). The background - grey and, where a panel has one, its faint photo - is drawn on ::before under
   one mask, so photo and grey fade together. Under 900px: no fade, full width, normal padding.
   Default: Construction and Anyone can check. ?panels=fade: every single-panel section (plus
   Maintenance, Reports, Works offline); ?panels=classic: none (site.js swaps the classes). */
.con-panel{--pbg:linear-gradient(rgba(245,245,247,var(--con-veil)),rgba(245,245,247,var(--con-veil))),url(/img/construction/bg-frame.jpg) center/cover no-repeat}
.vfy{--pbg:#F3EFEA}
.maint .panel{--pbg:linear-gradient(rgba(245,245,247,var(--maint-veil)),rgba(245,245,247,var(--maint-veil))),url(/img/bg-maintenance.jpg) center/cover no-repeat}
.rep,.off{--pbg:var(--tile)}
.panel--fade-edges{--fs:max(0px, calc((100vw - 1280px) / 2 + var(--gutter) - 24px));position:relative;isolation:isolate;background:transparent!important;border-radius:0;
  box-sizing:border-box;width:100vw;margin-left:calc(50% - 50vw)}
.panel--fade-edges::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pbg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fs),#000 calc(100% - var(--fs)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fs),#000 calc(100% - var(--fs)),transparent 100%)}
/* sections that were in-grid panels get the grid as inner padding when they go full-bleed */
.maint .panel.panel--fade-edges,.off.panel--fade-edges{padding-inline:calc(max(0px, (100vw - 1280px) / 2) + var(--gutter))}
@media (max-width:899px){.panel--fade-edges::before{-webkit-mask-image:none;mask-image:none}}

/* ---------- how it works: capture -> stamp -> verify on one photo ---------- */
.story{margin-top:56px}
.story-steps{list-style:none;margin:0;padding:0}
.story-st{display:flex;flex-direction:column;min-width:0}
.story-h{margin-top:18px;display:flex;align-items:baseline;gap:12px}
.story-h .n{font:600 15px var(--mono);color:var(--teal)}
.story-h b{font-size:26px;font-weight:600;letter-spacing:-.02em}
.story-d{margin-top:8px;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty;overflow-wrap:anywhere}
/* the frame: the shared phone (phone() in parts.mjs) showing the real camera screen, then the viewer, with the fingerprint
   line under it. A fixed box in every state (the card and the fingerprint line are always laid out, only faded),
   so the three titles below share one baseline and the sticky frame never jumps. --pw is the phone's width:
   300px, less on a narrow column or a short screen; the frame PNG is 1.2644x that (its shadow margins). */
.hiw-frame{position:relative;container-type:inline-size;--pw:min(300px, 74cqw, calc((100vh - 200px) * .56))}
.hf-dev{position:relative;display:flex;justify-content:center}
.hf-scr{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hf-fp{margin-top:24px;text-align:center;font:500 13px var(--mono);color:var(--body)}
.hf-fp>span{white-space:nowrap}
.hf-fp .lab{color:var(--muted)}
.hf-fp .reg{color:var(--teal);font-weight:600}
.hf-found{position:absolute;z-index:5;right:max(0px, calc(50% - var(--pw) / 2 - 118px));bottom:calc(var(--pw) * .1 - 40px);width:min(210px,58cqw);padding:12px;font-size:11.5px;text-align:left;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 18px 40px -14px rgba(0,0,0,.5)}
/* the viewer's stamp ends 65% across the phone: on a wide frame the card sits clear of it to the right; on a
   narrow one there is no room beside the phone, so it drops below the stamp, over the phone's foot, and the
   fingerprint line moves down to stay clear of it (test-layout checks both) */
@container (max-width: 560px){.hf-found{right:0;bottom:-62px}.hf-fp{margin-top:78px}.hf-found .rc-dl{display:none}}   /* narrow: the badge and heading only; the phone's own screen shows the times */
.hf-found dl{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hf-found dl>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hf-found dt{font-size:10px;color:var(--muted)}
.hf-found dd{margin:1px 0 0;font-size:11.5px;font-weight:500}
.hf-found dd.mono{font:500 10.5px var(--mono)}
.hf-found dl svg{width:14px;height:14px;flex:none}
/* the three states */
.hiw-frame:not([data-state="3"]) .hf-fp,.hiw-frame:not([data-state="3"]) .hf-found{opacity:0}
/* one screen per step: 1 the camera (the stamp live in the viewfinder), 2 the viewer (the saved photo), 3 Safari on
   verify.picanchor.com; the card and the fingerprint line belong to step 3 only */
.hiw-frame .hf-scr.ver,.hiw-frame .hf-vfy{opacity:0}
.hiw-frame[data-state="2"] .hf-scr.ver,.hiw-frame[data-state="3"] .hf-vfy{opacity:1}
.hiw-frame:not([data-state="1"]) .hf-scr.cam{opacity:0}
.anim .hiw-frame.live .hf-scr,.anim .hiw-frame.live .hf-vfy{transition:opacity .22s}
.anim .hiw-frame.live .hf-fp .hash{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;width:21ch;transition:width 1s steps(21) .5s}
.anim .hiw-frame.live:not([data-state="3"]) .hf-fp .hash{width:0;transition:none}
.anim .hiw-frame.live .hf-fp .reg{transition:opacity .3s 1.6s}
.anim .hiw-frame.live:not([data-state="3"]) .hf-fp .reg{opacity:0;transition:none}
.anim .hiw-frame.live .hf-fp{transition:opacity .3s}
.anim .hiw-frame.live .hf-found{transition:opacity .4s .2s,transform .4s .2s}
.anim .hiw-frame.live:not([data-state="3"]) .hf-found{transform:translateX(24px)}
@media (max-width:899px){.anim .hiw-frame.live:not([data-state="3"]) .hf-found{transform:translateY(12px)}}   /* never past the screen's edge */
/* Safari on verify.picanchor.com (verifyScreen in build.mjs): the page's own fonts, colours and sizes, in --u (1/390 of
   the screen); read off the live page's computed styles */
@font-face{font-family:'Verify Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/verify/archivo-latin.woff2) format('woff2')}
@font-face{font-family:'Verify Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/verify/ibm-plex-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'Verify Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/verify/ibm-plex-mono-600-latin.woff2) format('woff2')}
.hf-vfy{position:absolute;inset:0;background:#fff;color:#101418;container-type:inline-size;font-family:'Verify Archivo',system-ui,-apple-system,sans-serif;text-align:left}
.vp-page{--u:calc(100cqw / 390);position:absolute;left:0;right:0;top:calc(var(--w) * .15);bottom:calc(100cqw / 390 * 92);overflow:hidden;padding:calc(var(--u) * 10) calc(var(--u) * 20)}
.vp-card{border:calc(var(--u) * 1) solid #E5E7EB;border-left:calc(var(--u) * 5) solid #0D9488;border-radius:calc(var(--u) * 12);padding:calc(var(--u) * 22)}
.vp-badge{display:inline-flex;align-items:center;gap:calc(var(--u) * 6);padding:calc(var(--u) * 5) calc(var(--u) * 10);border-radius:999px;background:#E6F5F3;color:#0B5F59;font-size:calc(var(--u) * 12);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.vp-badge svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14)}
.vp-card h4{margin:calc(var(--u) * 10) 0 0;font-size:calc(var(--u) * 20);line-height:1.3;font-weight:800;letter-spacing:-.01em}
.vp-card p{margin:calc(var(--u) * 10) 0 0;font-size:calc(var(--u) * 15.5);line-height:1.55}
.vp-card p b{font-weight:800}
.vp-card p.dim{color:#4B5563}
.vp-bracket{margin-top:calc(var(--u) * 16);padding:calc(var(--u) * 16);border:calc(var(--u) * 1) solid #E5E7EB;border-radius:calc(var(--u) * 10);background:#F7F8F9}
.vp-end{display:flex;flex-direction:column}
.vp-end .k{font-size:calc(var(--u) * 11.5);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4B5563}
.vp-end .v{margin-top:calc(var(--u) * 4);font:600 calc(var(--u) * 15)/1.35 'Verify Plex Mono',ui-monospace,monospace}
.vp-end .u{margin-top:calc(var(--u) * 4);font:400 calc(var(--u) * 11.5)/1.55 'Verify Plex Mono',ui-monospace,monospace;color:#4B5563}
.vp-end .who{font-size:calc(var(--u) * 12.5);font-style:italic;color:#4B5563}
.vp-arrow{display:flex;align-items:center;gap:calc(var(--u) * 10);margin:calc(var(--u) * 10) 0;font-size:calc(var(--u) * 11.5);font-weight:700;color:#4B5563}
.vp-arrow i{width:calc(var(--u) * 64);height:calc(var(--u) * 1);background:#C4C8CE;position:relative}
.vp-arrow i::after{content:"";position:absolute;right:calc(var(--u) * -1);top:calc(var(--u) * -4);border:calc(var(--u) * 4.5) solid transparent;border-left-color:#C4C8CE;border-right:0}
/* Safari's bottom address bar */
.vp-safari{--u:calc(100cqw / 390);position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 92);padding:calc(var(--u) * 10) calc(var(--u) * 16) 0;background:rgba(246,246,248,.96);border-top:calc(var(--u) * 1) solid rgba(0,0,0,.08);display:flex;align-items:flex-start;gap:calc(var(--u) * 10)}
.vp-safari>*{height:calc(var(--u) * 44);display:flex;align-items:center}
.vp-aa{font:600 calc(var(--u) * 17) -apple-system,system-ui,sans-serif;color:#111;padding:0 calc(var(--u) * 4)}
.vp-host{flex:1;justify-content:center;gap:calc(var(--u) * 6);border-radius:calc(var(--u) * 14);background:#E4E4E9;font:500 calc(var(--u) * 17) -apple-system,system-ui,sans-serif;color:#111}
.vp-host svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13);color:#6E6E73}
.vp-rl{width:calc(var(--u) * 24);color:#111;padding:0 calc(var(--u) * 4)}
/* ?hiw=moment (off by default; site.js adds .moment, then .m-run for 0.65s on the step 1 -> 2 change, only with motion
   allowed): the app's shutter flash (black over the preview, gone in 0.12s: CameraScreen.swift:2452-2479 on ios-port), the
   stamp settling, and the photo shrinking into the gallery circle bottom left; then the viewer cross-fades in as usual.
   Everything is inside the phone's screen, so nothing shifts. The preview is rows 14.2%-76% of the screen; the circle's
   centre is at 19% / 88%, 13.6% of the width across. */
.hf-flash,.hf-shrink{position:absolute;z-index:3;pointer-events:none;opacity:0;left:0;width:100%;top:14.2%;height:61.8%}
.hf-flash{background:#000}
.hf-shrink{background:url(/img/hiw-camera-screen.webp) 0 37.2%/100% auto no-repeat;transform-origin:50% 50%}
.hiw-frame.moment.m-run .hf-scr.cam{opacity:1;transition:none;animation:hf-settle .2s .12s ease-out both}
.hiw-frame.moment.m-run .hf-scr.ver{opacity:0;transition:none}
.hiw-frame.moment.m-run .hf-flash{animation:hf-flash .12s ease-out both}
.hiw-frame.moment.m-run .hf-shrink{animation:hf-shrink .42s .16s cubic-bezier(.4,0,.2,1) both}
@keyframes hf-flash{from{opacity:1}to{opacity:0}}
@keyframes hf-settle{from{transform:scale(1.012)}to{transform:none}}
@keyframes hf-shrink{0%{opacity:1;transform:none;border-radius:0}85%{opacity:1}100%{opacity:0;transform:translate(-31%,69.4%) scale(.136,.1014);border-radius:50%}}

/* ---------- the PDF report pages (reportPages() in parts.mjs): the iOS generator's layout, in PDF points ----------
   One page is 595.28 x 841.89pt; --pt is one point at whatever width the page is drawn (the sample PDF at 210mm,
   the phone mock-up at its screen width). A4, 50pt margins; header, 2x2 grid (16pt gutters, 84pt captions), footer. */
.rpg-wrap{container-type:inline-size}
.rpg{--pt:calc(100cqw / 595.28);position:relative;width:100%;aspect-ratio:595.28/841.89;box-sizing:border-box;padding:calc(var(--pt) * 50);background:#fff;color:#1A1D1F;font-family:var(--sans);overflow:hidden;text-align:left}
.rpg-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:calc(var(--pt) * 8);border-bottom:calc(var(--pt) * .75) solid #D6DEE0}
.rpg-brand{display:flex;align-items:center;gap:calc(var(--pt) * 7)}
.rpg-brand .pa-mark{--m:calc(var(--pt) * 26)}
.rpg-brand .pa-txt,.rpg-co{display:flex;flex-direction:column;gap:calc(var(--pt) * 2)}
.rpg-brand .pa-word{font-size:calc(var(--pt) * 15);font-weight:700;letter-spacing:0;color:#0D9488;line-height:1.05}
.rpg-co{align-items:flex-end;text-align:right}.rpg-co b{font-size:calc(var(--pt) * 15);font-weight:700;line-height:1.05}
.rpg-brand small,.rpg-co small{font-size:calc(var(--pt) * 9);color:#4B5256}
.rpg-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--pt) * 16);height:calc(var(--pt) * 624);margin-top:calc(var(--pt) * 14)}
/* a cell is 304pt tall: the photo 220pt (3:4, so 165pt wide) over the 84pt caption; the caption spans exactly the
   photo's width, text from its left edge, the QR at its right edge, as both apps draw it */
.rpg-cell{display:flex;flex-direction:column;align-items:flex-start;min-height:0;--iw:calc(var(--pt) * 165)}
.rpg-cell.r{align-items:flex-end}
.rpg-img{position:relative;align-self:flex-start;height:calc(100% - var(--pt) * 84);aspect-ratio:3/4;max-width:100%;overflow:hidden;container-type:size}
.rpg-cell.r .rpg-img{align-self:flex-end}
.rpg-img img{display:block;width:100%;height:100%;object-fit:cover}
.rpg-img>.rst{position:absolute;left:4cqmin;bottom:4cqmin;font-size:2.092cqmin}
.rpg-cap{position:relative;width:var(--iw);height:calc(var(--pt) * 84);box-sizing:border-box;padding:calc(var(--pt) * 6) calc(var(--pt) * 46) 0 0;display:flex;flex-direction:column;gap:calc(var(--pt) * 1.6);font-size:calc(var(--pt) * 7);line-height:1.25;color:#4B5256}
.rpg-cap>b{font-size:calc(var(--pt) * 8);color:#1A1D1F}
.rpg-cap em{font-style:normal;font-weight:700;color:#4B5256}
.rpg-cap strong{font-weight:700;color:#0D9488}
.rpg-q{position:absolute;right:0;top:calc(var(--pt) * 6);width:calc(var(--pt) * 40);height:calc(var(--pt) * 40);display:block}
.rpg-sum{margin-top:calc(var(--pt) * 14)}
.rpg-sum h3{margin:0 0 calc(var(--pt) * 10);font-size:calc(var(--pt) * 14);font-weight:700}
.rpg-sum table{width:100%;border-collapse:collapse;font-size:calc(var(--pt) * 8)}
.rpg-sum th{text-align:left;font-size:calc(var(--pt) * 9);font-weight:700;color:#4B5256;padding:0 calc(var(--pt) * 6) calc(var(--pt) * 4) 0;border-bottom:calc(var(--pt) * .75) solid #D6DEE0}
.rpg-sum td{height:calc(var(--pt) * 14);padding:0 calc(var(--pt) * 6) 0 0;white-space:nowrap}
.rpg-sum td.ok{color:#0D9488;font-weight:600}
.rpg-sum p{margin:calc(var(--pt) * 12) 0 0;font-size:calc(var(--pt) * 10);font-weight:700}
.rpg-f{position:absolute;left:calc(var(--pt) * 50);right:calc(var(--pt) * 50);bottom:calc(var(--pt) * 30);display:flex;align-items:center;gap:calc(var(--pt) * 12);padding-top:calc(var(--pt) * 8);border-top:calc(var(--pt) * .75) solid #D6DEE0}
.rpg-f>img{width:calc(var(--pt) * 26);height:calc(var(--pt) * 26);border-radius:calc(var(--pt) * 6)}
.rpg-f>div{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(var(--pt) * 2);font-size:calc(var(--pt) * 7);color:#6B7176}
.rpg-f>div b{font-size:calc(var(--pt) * 8);font-weight:700;color:#4B5256}
.rpg-f>div i{font-style:normal;font-weight:400;color:#8A8F94}
.rpg-fq{width:calc(var(--pt) * 34);height:calc(var(--pt) * 34);display:block}
.rpg-fq path{fill:#0F766E}

/* ---------- reports: the scroll story's phone (reportsStory in build.mjs) ----------
   Three screens in one phone, each its own layer: the gallery in selection mode, Choose a Layout, the preview.
   Sized in --w (the phone body), so the screens keep their proportions at every phone size. */
.rp-frame{position:relative;container-type:inline-size;--pw:min(300px, 74cqw, calc((100vh - 200px) * .42))}
.rp-dev{display:flex;justify-content:center}
.rscreen{background:#fff;color:#1A1D1F;font-family:var(--sans);text-align:left}
.rs{position:absolute;inset:0;overflow:hidden;background:#fff;isolation:isolate}
.rp-gal{z-index:1}
.rp-frame .nbar{padding:calc(var(--w) * .165) calc(var(--w) * .04) calc(var(--w) * .03);column-gap:calc(var(--w) * .02)}
.rp-frame .nb-t{font-size:calc(var(--w) * .05)}
.rp-frame .nb-btn{width:calc(var(--w) * .1);height:calc(var(--w) * .1)}
.rp-frame .nb-btn svg{width:55%;height:55%}
.rp-gal .nbar{--slot:calc(var(--w) * .27)!important}
.rp-txt{position:relative;font-size:calc(var(--w) * .047);color:#007AFF;white-space:nowrap}
.rp-exp{font-weight:600}
.rp-exp .tap{position:absolute;inset:-35% -12%;border-radius:999px;background:rgba(0,122,255,.18);opacity:0;pointer-events:none}
.rp-gal .seg2{margin:0 calc(var(--w) * .04);display:grid;grid-template-columns:1fr 1fr;background:#EEF0F1;border-radius:999px;padding:2px;font-size:calc(var(--w) * .038);text-align:center}
.rp-gal .seg2 span{padding:calc(var(--w) * .017)}
.rp-gal .seg2 .on{background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rg-day{padding:calc(var(--w) * .05) calc(var(--w) * .04) calc(var(--w) * .022);font-size:calc(var(--w) * .043);font-weight:600}
.rg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.rg-grid li{position:relative;aspect-ratio:1;overflow:hidden;container-type:size}
.rg-grid img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.rg-grid picture,.rpg-img picture{display:contents}
.rg-grid .g-stamp{position:absolute;left:4cqmin;bottom:4cqmin;font-size:2.092cqmin;z-index:1}
/* the app's selection mark, bottom-right: a white ring, then the filled blue check */
.rg-tick{position:absolute;z-index:2;right:7%;bottom:7%;width:30%;aspect-ratio:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.rg-tick i{position:absolute;inset:4%;border-radius:50%;border:1.5px solid #fff;box-sizing:border-box}
.rg-tick svg{position:absolute;inset:0;width:100%;height:100%}
.rp-pick{background:#F2F2F7}
.rp-list{list-style:none;margin:calc(var(--w) * .03) calc(var(--w) * .04) 0;padding:0;background:#fff;border-radius:calc(var(--w) * .035);overflow:hidden}
.rp-list li{display:flex;align-items:center;gap:calc(var(--w) * .035);padding:calc(var(--w) * .03) calc(var(--w) * .035)}
.rp-list li{position:relative}
.rp-list li+li::before{content:"";position:absolute;top:0;right:0;left:calc(var(--w) * .2);height:1px;background:#E3E3E8}
.rp-list .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--w) * .008)}
.rp-list b{font-size:calc(var(--w) * .047);font-weight:600}
.rp-list small{font-size:calc(var(--w) * .036);color:#8A8A8E;line-height:1.25}
.rp-list .chev{flex:none;width:calc(var(--w) * .05)}
.rp-list li.press{background:#E5E5EA}
/* the layout thumbnails (44 x 56 in the app, padding 6, a quaternary fill): two tint blocks stacked, or a 2 x 2 grid */
.rp-th{flex:none;width:calc(var(--w) * .13);aspect-ratio:44/56;box-sizing:border-box;background:#EFEFF2;border-radius:calc(var(--w) * .018);padding:calc(var(--w) * .018);display:grid;gap:calc(var(--w) * .014)}
.rp-th i{background:#007AFF;border-radius:calc(var(--w) * .006)}
.rp-th.k1{grid-template-rows:1fr 1fr}
.rp-th.k2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
/* the preview: the report's own pages (reportPages) in a column, page 1 at the top; in step 4 the column follows
   --p from page 2's top to page 3's end (the pages are 92cqw wide with a 3cqw gap, so 130.11cqw tall) */
.rp-prev{background:#E4E4E8;display:flex;flex-direction:column}
.rp-prev .nbar{position:relative;z-index:3;background:#F7F7F8;box-shadow:0 1px 0 #D9D9DE}
.rp-pdf{position:relative;flex:1;min-height:0;overflow:hidden;container-type:size}
.rp-pages{display:flex;flex-direction:column;gap:3cqw;align-items:center;padding:3cqw 0}
.rp-pages .rpg-wrap{width:92cqw;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.rp-frame[data-state="4"] .rp-pages{transform:translateY(calc(-133.11cqw - var(--p, .55) * (269.22cqw - 100cqh)))}
/* states: 1 the gallery, all ticked; 2 Choose a Layout over it; 3 and 4 the preview over both */
.rp-frame:not([data-state="1"]) .rp-exp .tap{opacity:0}
.rp-frame[data-state="1"] .rp-pick,.rp-frame[data-state="1"] .rp-prev,.rp-frame[data-state="2"] .rp-prev{opacity:0}
.rp-frame:not([data-state="2"]) .rp-list li.press{background:#fff}
.rp-frame[data-state="2"] .rp-list li.press{background:#E5E5EA}
.rp-pick{z-index:2}.rp-prev{z-index:3}
/* with motion allowed: each screen cross-fades in (.22s); the ticks come on in report order once the story is
   reached, then Export PDF wakes; in step 2 the tap on Export PDF. Reduced motion: instant swaps. */
.anim .rp-frame.live .rp-pick,.anim .rp-frame.live .rp-prev{transition:opacity .22s}
.anim .rp-frame.live .rg-tick svg{transition:opacity .2s calc(var(--i) * .14s + .3s),transform .25s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .14s + .3s)}
.anim .rp-frame.live:not([data-seen]) .rg-tick svg{opacity:0;transform:scale(.4);transition:none}
.anim .rp-frame.live .rp-exp{transition:color .2s 1.6s}
.anim .rp-frame.live:not([data-seen]) .rp-exp{color:#B8B8BD;transition:none}
.anim .rp-frame.live[data-state="2"] .rp-exp .tap{animation:rp-tap .5s ease-out both}
@keyframes rp-tap{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}
.anim .rp-frame.live .rp-pages{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.anim .rp-frame.live[data-state="4"] .rp-pages{transform:translateY(calc(-133.11cqw - var(--p, 0) * (269.22cqw - 100cqh)))}
.rep-sample{margin:14px 0 0;font-size:17px}
.rep-sample a{font-weight:500;text-decoration:none}
.rep-sample a:hover{text-decoration:underline}

/* ---------- scroll stories (How it works, Reports): ONE layout at every width, driven by site.js ----------
   One sticky frame (.story-stage) and the step blocks scrolling past it; the active step (.on) sets the frame's
   data-state. The anchor line runs down the steps with a dot per step, and continues into the next section's
   connector through .story-join (tools/site-src/test-layout.mjs checks the join to 1px). --hs is half the
   stage's height, measured by site.js. Nothing scroll-snaps and nothing takes over the scroll. */
.story{position:relative;--dot:16px}
.story-stage{position:sticky;z-index:2}
.story-steps{position:relative}
.story-steps::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--anchor)}
.story-st{position:relative;opacity:.35}
.story-st.on,.story:not(.story-live) .story-st{opacity:1}
.anim .story-st{transition:opacity .35s}
.story-tx{position:relative}
.story-tx::before{content:"";position:absolute;top:calc(50% - 8px);width:var(--dot);height:var(--dot);border-radius:50%;border:2px solid var(--anchor);background:#fff;box-sizing:border-box}
.story-st.on .story-tx::before{background:var(--anchor);box-shadow:0 0 0 6px rgba(47,211,189,.2)}
.story-h{margin-top:0}
section:has(.story)+section>.seg{padding-top:var(--join-h)}
.story-join{display:block;position:absolute;top:100%;height:var(--join-h);pointer-events:none}
.story-join i{position:absolute;border:0 solid var(--anchor)}
.anim .story-join .a{transition:clip-path .45s cubic-bezier(.2,.7,.2,1)}
.anim .story-join .b{transition:clip-path .45s cubic-bezier(.2,.7,.2,1) .4s}
.anim .story-join:not(.on) .a{clip-path:inset(0 0 100% 0)}
.anim .story-join:not(.on) .b{clip-path:inset(0 0 0 100%)}
/* desktop: the frame left, sticking with its middle at the middle of the screen; the steps right, each text centred
   in its block so the step being read sits level with the phone. The first and last blocks are as tall as the
   frame, the middle ones make up the rest. The scrub step (Reports' pages) is long and its text sticks level with
   the phone while the pages scroll. The join: down from the step line, a 24px elbow left to the page centre, a
   second elbow down into the next section's line. */
@media (min-width:900px){
  :root{--join-h:calc(clamp(72px,9vw,120px) * .6)}
  #how>.seg.first{padding-top:calc(clamp(40px,5vw,64px) * .6)}
  .story{--gap:clamp(40px,5vw,80px);--lx:calc(100% - (100% - var(--gap)) / 2.2 + 8px);margin-top:34px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap);align-items:start}
  .story-stage{top:max(96px, calc(50vh - var(--hs, 280px)))}
  .story-steps{padding-left:44px}
  .story-st{min-height:max(30vh, calc(110vh - var(--hs, 280px) * 2));justify-content:center}
  .story-st:first-child,.story-st:last-child{min-height:calc(var(--hs, 280px) * 2)}
  .story-tx::before{left:-44px}
  .story-h b{font-size:clamp(28px,2.6vw,36px)}
  .story-st[data-scrub]{min-height:calc(var(--hs, 280px) * 2 + 70vh);justify-content:flex-start;padding-top:calc(5vh - 20px)}
  .story-st[data-scrub] .story-tx{position:sticky;top:calc(50vh - 70px)}
  .story-join{left:calc(50% - 1px);width:calc(var(--lx) - 50% + 2px)}
  .story-join .a{right:0;top:0;width:calc(100% - 24px);height:calc(var(--join-h) / 2 + 1px);border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:24px}
  .story-join .b{left:0;top:calc(var(--join-h) / 2 - 1px);width:26px;height:calc(var(--join-h) / 2 + 1px);border-left-width:2px;border-top-width:2px;border-top-left-radius:24px}
}
/* phones and tablets: the frame sticks under the header (69px), centred, the phone about min(52svh, 460px) tall
   (svh, so the iOS toolbar does not make it jump), on the page background so the steps pass under it. Each step block
   is at least 70svh; its text sticks just below the frame while the block passes, and a step becomes active when its
   block reaches the frame's bottom edge. After the last block the frame releases with the section. The join: down
   from the step line, an elbow right to the page centre, an elbow down into the next section's line. */
@media (max-width:899px){
  :root{--join-h:56px}
  .story{--hdr-h:69px;margin-top:28px}
  .story-stage{top:var(--hdr-h);padding:8px 0 6px;background:var(--base);box-shadow:0 0 0 100vmax var(--base);clip-path:inset(0 -100vmax)}
  .hiw-frame,.rp-frame{--pw:min(calc(min(52svh, 460px) / 2.38), 62vw)}
  .story-stage .pf{margin-bottom:calc(var(--pw) * -.1)}
  /* tablets: the Found card beside the phone's right edge, clear of the stamp on the left of the screen (a narrow
     column keeps the card below the phone, the @container rule above) */
  @container (min-width: 561px){.hf-found{right:auto;left:calc(50% + var(--pw) * .5 + 8px)}}
  .story-steps{padding-left:36px}
  .story-st{min-height:70svh}
  .story-tx{position:sticky;top:calc(var(--hdr-h) + var(--hs, 220px) * 2 + 16px);padding-bottom:12px}
  .story-tx::before{left:-36px;top:5px}
  .story-h b{font-size:24px}
  .story-d{font-size:16px}
  .story-join{left:7px;width:calc(50% - 6px)}
  .story-join .a{left:0;top:0;width:calc(100% - 24px);height:calc(var(--join-h) / 2 + 1px);border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:24px}
  .story-join .b{right:0;top:calc(var(--join-h) / 2 - 1px);width:26px;height:calc(var(--join-h) / 2 + 1px);border-right-width:2px;border-top-width:2px;border-top-right-radius:24px}
  .anim .story-join:not(.on) .b{clip-path:inset(0 100% 0 0)}
}

/* ---------- the web dashboard mock-up (dashMock in build.mjs): the real Photos & Report page ----------
   Drawn in the dashboard's own pixels times --u (1/1800 of the window on desktop, 1/390 in the phone), with its own
   Tailwind values (slate palette, brand #0F766E, the system sans stack; APP-UI-REFERENCE.md "Web dashboard"). */
.dm-mon{width:100%;max-width:1180px;margin:0 auto}
.dm-bezel{padding:10px;border-radius:14px;background:#16181B;box-shadow:0 24px 50px -28px rgba(0,0,0,.55);container-type:inline-size}
.dm-neck{display:block;width:12%;height:34px;margin:0 auto;background:linear-gradient(90deg,#9A9CA1,#C9CBCF 50%,#9A9CA1)}
.dm-foot{display:block;width:30%;height:9px;margin:0 auto;border-radius:6px 6px 3px 3px;background:linear-gradient(#CFD1D5,#A7A9AD)}
.dm-v{position:relative;overflow:hidden;background:#F8FAFC;color:#0F172A;text-align:left;font:400 calc(var(--u) * 14)/1.43 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.dm-d{--u:calc(100cqw / 1800);aspect-ratio:1800/960;border-radius:4px;display:flex;flex-direction:column}
.dm-v *{box-sizing:border-box}
.dm-chrome{flex:none;height:calc(var(--u) * 52);display:flex;align-items:center;justify-content:center;position:relative;background:#EDEEF0;border-bottom:calc(var(--u) * 1) solid #D9DADD}
.dm-dots{position:absolute;left:calc(var(--u) * 20);display:flex;gap:calc(var(--u) * 8)}
.dm-dots i{width:calc(var(--u) * 12);height:calc(var(--u) * 12);border-radius:50%;background:#C8CACE}
.dm-url{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 6);width:calc(var(--u) * 620);height:calc(var(--u) * 32);border-radius:calc(var(--u) * 8);background:#fff;color:#3C3C43;font-size:calc(var(--u) * 14)}
.dm-url svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13);color:#8A8A8E}
.dm-app{flex:1;min-height:0;display:flex;flex-direction:column}
.dm-hdr{flex:none;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 12);padding:calc(var(--u) * 10) calc(var(--u) * 24);background:#fff;border-bottom:calc(var(--u) * 1) solid #E2E8F0;position:relative;z-index:2}
.dm-hl{display:flex;align-items:center;gap:calc(var(--u) * 8);min-width:0}
.dm-wm{font-size:calc(var(--u) * 18);font-weight:700;color:#0F766E}
.dm-sl{color:#CBD5E1}
.dm-co{font-weight:500;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-hr{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.dm-lang,.dm-seg{display:inline-flex;border:calc(var(--u) * 1) solid #CBD5E1;border-radius:calc(var(--u) * 8);background:#fff;padding:calc(var(--u) * 2)}
.dm-lang>span,.dm-seg>span{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--u) * 40);border-radius:calc(var(--u) * 6);font-weight:500;color:#475569;white-space:nowrap}
.dm-lang>span{min-width:calc(var(--u) * 40);padding:0 calc(var(--u) * 8);font-size:calc(var(--u) * 12)}
.dm-seg>span{padding:0 calc(var(--u) * 12)}
.dm-lang>.on,.dm-seg>.on{background:#0F766E;color:#fff}
.dm-ghost{display:inline-flex;align-items:center;min-height:calc(var(--u) * 44);padding:0 calc(var(--u) * 16);font-weight:500;color:#475569}
.dm-body{flex:1;min-height:0;display:flex}
.dm-side{flex:none;width:calc(var(--u) * 224);padding:calc(var(--u) * 24) calc(var(--u) * 12);border-right:calc(var(--u) * 1) solid #E2E8F0;display:flex;flex-direction:column;gap:calc(var(--u) * 4)}
.dm-side span{display:flex;align-items:center;min-height:calc(var(--u) * 44);padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 8);font-weight:500;color:#475569;white-space:nowrap}
.dm-side .on{background:#0F766E;color:#fff}
.dm-main{flex:1;min-width:0;overflow:hidden;padding:calc(var(--u) * 24)}
.dm-scroll{display:flex;flex-direction:column;gap:calc(var(--u) * 20)}
.dm-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--u) * 16)}
.dm-id{display:flex;align-items:center;gap:calc(var(--u) * 12);min-width:0}
.dm-init{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:calc(var(--u) * 8);border:calc(var(--u) * 1) solid #E2E8F0;background:#F8FAFC;font-weight:700;color:#94A3B8}
.dm-id b{display:block;font-size:calc(var(--u) * 20);font-weight:600;line-height:1.25}
.dm-id small{display:block;font-size:calc(var(--u) * 12);color:#64748B}
.dm-acts{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u) * 8)}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--u) * 44);padding:0 calc(var(--u) * 16);border-radius:calc(var(--u) * 8);background:#0F766E;color:#fff;font-weight:500;white-space:nowrap}
.dm-card{border-radius:calc(var(--u) * 12);border:calc(var(--u) * 1) solid #E2E8F0;background:#fff;box-shadow:0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0,0,0,.05)}
.dm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 12)}
.dm-stats .dm-card{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u) * 8);padding:calc(var(--u) * 16)}
.dm-stats small{font-size:calc(var(--u) * 12);font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:#64748B}
.dm-stats b{font-size:calc(var(--u) * 30);font-weight:600;line-height:1.2}
.dm-split{grid-column:span 2}
.dm-bar{display:flex;height:calc(var(--u) * 10);border-radius:999px;overflow:hidden;background:#F1F5F9}
.dm-bar i{flex:1;background:#0D9488}
.dm-leg{display:flex;justify-content:space-between;font-size:calc(var(--u) * 12);color:#475569}
.dm-leg i{display:inline-block;width:calc(var(--u) * 10);height:calc(var(--u) * 10);margin-right:calc(var(--u) * 6);border-radius:calc(var(--u) * 2);background:#0D9488}
.dm-line{grid-column:1 / -1;font-size:calc(var(--u) * 12);color:#64748B}
.dm-filters{max-width:calc(var(--u) * 896);padding:calc(var(--u) * 16);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 12)}
.dm-filters small{display:block;margin-bottom:calc(var(--u) * 4);font-size:calc(var(--u) * 12);font-weight:500;color:#64748B}
.dm-in{display:flex;align-items:center;min-height:calc(var(--u) * 44);padding:0 calc(var(--u) * 12);border:calc(var(--u) * 1) solid #CBD5E1;border-radius:calc(var(--u) * 8);background:#fff}
.dm-sel{justify-content:space-between}
.dm-sel::after{content:"";width:calc(var(--u) * 7);height:calc(var(--u) * 7);border:solid #64748B;border-width:0 calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0;transform:rotate(45deg) translateY(-30%)}
.dm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(var(--u) * 12)}
.dm-tile{overflow:hidden;border-radius:calc(var(--u) * 12);border:calc(var(--u) * 1) solid #E2E8F0;background:#fff;box-shadow:0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0,0,0,.05)}
.dm-img{display:block;aspect-ratio:3/4;background:#F1F5F9}
.dm-img picture{display:contents}
.dm-img img{display:block;width:100%;height:100%;object-fit:contain}
.dm-cap{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 4);padding:calc(var(--u) * 8)}
.dm-cap>*{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-cap b{font-size:calc(var(--u) * 12);font-weight:500;color:#334155}
.dm-badge{padding:calc(var(--u) * 2) calc(var(--u) * 8);border-radius:999px;background:rgba(13,148,136,.1);color:#0D9488;font-size:calc(var(--u) * 12);font-weight:500}
.dm-when,.dm-addr{font-size:calc(var(--u) * 11);color:#64748B}
.dm-addr{color:#94A3B8}
/* phones: the dashboard's own mobile layout in the shared phone - a URL bar, the header with the menu button, the
   range and Generate Report full width, the stats in one card, the filters folded into one row, 2 columns; scrolled
   down to the grid, the header staying on top as it does (sticky) */
.dm-mob{display:none}
.dmp{background:#F8FAFC;container-type:inline-size}
.dm-m{--u:calc(100cqw / 390);position:absolute;left:0;right:0;bottom:0;top:calc(var(--w) * .125);display:flex;flex-direction:column}
.dm-mchrome{flex:none;display:flex;justify-content:center;padding:calc(var(--u) * 4) 0 calc(var(--u) * 8);background:#F8FAFC}
.dm-m .dm-url{width:calc(var(--u) * 300);height:calc(var(--u) * 36);border-radius:calc(var(--u) * 12);background:#E9E9EE;font-size:calc(var(--u) * 15)}
.dm-m .dm-hdr{padding:calc(var(--u) * 4) calc(var(--u) * 16)}
.dm-burger{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u) * 44);height:calc(var(--u) * 44);margin-right:calc(var(--u) * -8);color:#334155}
.dm-burger svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
.dm-m .dm-main{padding:calc(var(--u) * 20) calc(var(--u) * 16)}
.dm-m .dm-scroll{transform:translateY(calc(var(--u) * -330))}
.dm-m .dm-acts{width:100%}
.dm-m .dm-seg{flex:1}
.dm-m .dm-seg>span{flex:1}
.dm-m .dm-btn{width:100%}
.dm-m .dm-stats{grid-template-columns:1fr 1fr;gap:calc(var(--u) * 12) calc(var(--u) * 16);padding:calc(var(--u) * 16);border-radius:calc(var(--u) * 12);border:calc(var(--u) * 1) solid #E2E8F0;background:#fff}
.dm-m .dm-stats .dm-card{padding:0;border:0;box-shadow:none;background:none;gap:calc(var(--u) * 4)}
.dm-m .dm-stats b{font-size:calc(var(--u) * 24)}
.dm-frow{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--u) * 44);padding:0 calc(var(--u) * 12);color:#475569;font-weight:500}
.dm-frow svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.dm-m .dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:699px){.dm-mon{display:none}.dm-mob{display:flex;justify-content:center}}

/* ---------- the camera screen (cameraScreen in parts.mjs), laid out on the real screenshot's proportions ---------- */
.pf .cam-scr{background:#000;color:#fff;font-family:-apple-system,system-ui,sans-serif}
.cs-top{position:absolute;left:0;right:0;top:calc(var(--w) * .135);height:calc(var(--w) * .11);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--w) * .05)}
.cs-menu,.cs-flash{width:calc(var(--w) * .06);height:calc(var(--w) * .06);color:#fff}
.cs-pill{display:flex;align-items:center;gap:calc(var(--w) * .014);height:calc(var(--w) * .085);padding:0 calc(var(--w) * .03);border-radius:999px;background:rgba(255,255,255,.14);font-size:calc(var(--w) * .033);font-weight:600;white-space:nowrap}
.cs-pill svg{width:calc(var(--w) * .03);height:calc(var(--w) * .03)}
.cs-vf{position:absolute;left:0;right:0;top:14.2%;aspect-ratio:3/4;overflow:hidden;container-type:inline-size}
.cs-vf picture{display:contents}
.cs-photo{display:block;width:100%;height:100%;object-fit:cover}
.cs-mk{position:absolute;width:6cqw;height:6cqw;border:0 solid rgba(255,255,255,.9)}
.cs-mk.tl{left:3cqw;top:3cqw;border-left-width:.5cqw;border-top-width:.5cqw}
.cs-mk.tr{right:3cqw;top:3cqw;border-right-width:.5cqw;border-top-width:.5cqw}
.cs-mk.bl{left:3cqw;bottom:3cqw;border-left-width:.5cqw;border-bottom-width:.5cqw}
.cs-mk.br{right:3cqw;bottom:3cqw;border-right-width:.5cqw;border-bottom-width:.5cqw}
/* the wordmark (DR:37-71: bold white, a soft shadow, 4% in plus the padding) and the logo corner (LP:66-90: 12% of the
   short edge, 4.5% in, at 85%) */
.cs-wm{position:absolute;left:calc(4cqw + 2.108cqw);top:calc(4cqw + 2.108cqw);font:700 2.516cqw/1 -apple-system,system-ui,sans-serif;color:#fff;text-shadow:0 .15cqw .25cqw rgba(0,0,0,.7)}
.cs-logo{position:absolute;right:4.5cqw;top:4.5cqw;width:12cqw;height:12cqw;opacity:.85;border-radius:1.5cqw}
.cs-bot{position:absolute;left:0;right:0;top:76%;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--w) * .12) 6%}
.cs-thumb{width:calc(var(--w) * .136);height:calc(var(--w) * .136);border-radius:50%;overflow:hidden;background:#222;box-shadow:0 0 0 calc(var(--w) * .006) rgba(255,255,255,.5)}
.cs-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.cs-shutter{width:calc(var(--w) * .2);height:calc(var(--w) * .2);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--w) * .012) #000,0 0 0 calc(var(--w) * .022) #fff}
.cs-flip{width:calc(var(--w) * .07);height:calc(var(--w) * .07);color:#fff}
/* the Glass Panel stamp, drawn (class prefix gst-: a bare .gp clashed with the Google Play badge's class): 1em = the app's base (3.4% of the viewfinder's short edge); rows and roles from DR:223-337,
   metrics from LE:43-76, glass from PT:165-177 */
.gst{position:absolute;left:5cqw;bottom:5cqw;font-size:3.4cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.34em;padding:.62em;border-radius:.5em;background:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,0) 50%),rgba(36,48,64,.349);box-shadow:inset 0 0 0 .05em rgba(255,255,255,.4);color:#fff;font-family:-apple-system,system-ui,sans-serif;line-height:1.19;white-space:nowrap;text-align:left}
.gst>span:not(.gst-pills){padding-left:.5em}
.gst-pills{display:flex;gap:.42em}
.gst-pl{display:inline-flex;align-items:center;gap:.357em;height:1.44em;padding:0 .5em;border-radius:1em;background:#0E1417;box-shadow:inset 0 0 0 .04em rgba(255,255,255,.2);font-size:.74em;font-weight:500}
.gst-pl .gst-sh{width:1.15em;height:1.15em}
.gst-tok{font:400 .62em/1 ui-monospace,SFMono-Regular,Menlo,monospace;height:calc(1.44em * .74 / .62)}
.gst-co,.gst-addr,.gst-note,.gst-zone{font-size:.74em;color:rgba(255,255,255,.7)}
.gst-co{font-weight:500}
.gst-time{display:flex;align-items:flex-start;gap:.32em}
.gst-clock{width:1.84em;height:1.84em;margin-top:.17em}
.gst-clk{font-size:2em;font-weight:700;line-height:1.19}
.gst-zone{margin-left:.1em}
.gst-date{font-size:.92em;font-weight:500}
.gst-name{font-size:.92em;font-weight:500;color:rgba(255,255,255,.7)}
.gst-geo{display:flex;gap:.42em;font:400 .74em/1.19 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.7)}

/* ---------- result cards (resultCard in build.mjs): the verify page's own words and badge ----------
   Sized in em of each card (.fnd scales with its panel; .found and .hf-found are 12px and 11.5px). The badge is the
   page's: #E6F5F3 on #0B5F59, uppercase, a shield; the times are the page's Plex-style mono lines. */
.rc-badge{display:inline-flex;align-items:center;gap:.45em;padding:.35em .75em;border-radius:999px;background:#E6F5F3;color:#0B5F59;font-size:.82em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.rc-badge svg{width:1.15em;height:1.15em;flex:none}
.rc-h{display:block;margin-top:.55em;font-size:1.28em;font-weight:700;letter-spacing:-.015em;line-height:1.22}
.rc-p{margin:.45em 0 0;font-size:.92em;line-height:1.4;opacity:.8}
.rc-dl{margin:.75em 0 0;padding-top:.65em;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.5em}
.rc-dl dt{font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.rc-dl dd{margin:.15em 0 0;font:500 .9em/1.3 var(--mono)}
.fnd .rc-dl{border-top-color:rgba(255,255,255,.14)}
.rc-dl>div{display:block}
/* the file-match panel, beneath the Registered card as on the page */
.rc-match{margin-top:.8em;padding:.7em .8em;border-left:.3em solid #0D9488;border-radius:.5em;background:#F2FAF9;color:#101418}
.rc-match>b{display:block;font-size:1.02em;font-weight:700;line-height:1.25}
.rc-match .rc-p{margin-top:.35em;font-size:.86em}
@media (max-width:699px){.found .rc-match .rc-p{display:none}}   /* narrow: the badge, the heading and the match line */
.compare-foot{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:720px;text-wrap:pretty}