@font-face {
  font-family: "Figtree";
  src: url("../vendor/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --text: #222222;
  --muted: #5f6368;
  --line: #ececec;
  --soft: #f5f5f3;
  --page: #ffffff;
  --yellow: #ffdd00;
  --yellow-hover: #f5d300;
  --danger: #d93036;
  --warn: #c77700;
  --ok: #1f7a45;
  --map-sea: #eef3f6;
  --map-land: #e2ddcf;
  --map-coast: #c9c1ad;
  --surface: #ffffff;
  --focus: 0 0 0 3px #fff, 0 0 0 6px #222;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text); font: 18px/1.5 "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.center { text-align: center; }
:focus-visible { outline: none; box-shadow: var(--focus); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { border-radius: 12px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 18px 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }

/* GitHub star button, styled like GitHub's own */
.gh { display: inline-flex; align-items: stretch; text-decoration: none; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; color: #1f2328; border-radius: 6px; box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04); }
.gh-main { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #f6f8fa; border: 1px solid #d1d9e0; border-radius: 6px; transition: background .15s; }
.gh:has(.gh-count:not([hidden])) .gh-main { border-radius: 6px 0 0 6px; }
.gh-count { display: inline-flex; align-items: center; padding: 7px 10px; background: #fff; border: 1px solid #d1d9e0; border-left: 0; border-radius: 0 6px 6px 0; font-variant-numeric: tabular-nums; }
.gh-count[hidden] { display: none; }
.gh:hover .gh-main { background: #eff2f5; }
.gh:hover .gh-count { color: #0969da; }
.gh-star { color: #59636e; }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 20px/1.1 "Figtree", sans-serif; padding: 20px 34px; border-radius: 999px; border: 0; cursor: pointer; color: #222; text-decoration: none; transition: transform .12s, background .15s; text-align: center; }
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: progress; opacity: .6; transform: none; }
.btn-yellow { background: var(--yellow); }
.btn-yellow:hover:not(:disabled) { background: var(--yellow-hover); }
.btn-gray { background: #f0f0ee; border: 1px solid #e1e1de; font-weight: 600; font-size: 17px; padding: 14px 24px; }
.btn-gray:hover { background: #e9e9e6; }
.btn-sm { font-size: 15px; padding: 9px 16px; }
.btn-wide { width: 100%; }

/* hero */
.hero { padding: 28px 0 8px; }
/* Two columns on wide screens: the pitch and the file's facts on the left, the real photo on the right. */
/* Full width of main, so the headline lines up with the logo above it. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "left photo"; column-gap: 56px; row-gap: 28px; align-content: center; }
/* The left column spans the photo's height: the pitch starts level with its top edge,
   the steps end level with its bottom edge. */
.hero-left { grid-area: left; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; padding: 20px 16px; margin: -20px -16px; }
.hero-text { grid-area: text; }
.hero-photo { grid-area: photo; margin: 0; align-self: center; }
/* While a file is dragged over the home page, the left column becomes the drop frame:
   a soft glow, the text fades back and the mascot comes up; over the frame the glow turns yellow.
   The column's padding (taken back by a negative margin) is the frame's room, so nothing moves
   and a drop anywhere inside the frame counts. */
.hero-left::before { content: ""; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(circle at 50% 44%, rgba(195, 196, 250, .2), transparent 62%); opacity: 0; pointer-events: none; transition: opacity .15s, background .2s; }
.drop-hint { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 24px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; transform: scale(.97); }
.hero-left > .hero-text, .hero-left > .process { transition: opacity .15s; }
body.dragging:not(.working) .hero-left::before, body.dragging:not(.working) .drop-hint { opacity: 1; }
body.dragging:not(.working) .drop-hint { transform: none; }
body.dragging:not(.working) .hero-left > .hero-text, body.dragging:not(.working) .hero-left > .process { opacity: .06; }
.hero-left.over::before { background: radial-gradient(circle at 50% 44%, rgba(255, 221, 0, .24), transparent 58%); }
.proof { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 18px; }
.proof .ic { color: var(--ok); width: 20px; height: 20px; }
h1 { font-weight: 800; font-size: clamp(40px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 20px; }
.lead { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; max-width: 520px; margin: 0 0 24px; }
.cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* icons: Phosphor, one sprite */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; fill: currentColor; }
.btn .ic { width: 1.1em; height: 1.1em; }

/* hero demo on a real photo */
/* On the work screen a photo can still be dropped anywhere: the whole page is outlined. */
body.working.dragging main { box-shadow: inset 0 0 0 4px var(--yellow); border-radius: 24px; }
.demo-photo { position: relative; line-height: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.demo-photo img { display: block; width: 100%; height: auto; }
.mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--mc); border-radius: 6px; line-height: 1.2; }
.mark b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; font-weight: 700; color: #fff; background: var(--mc); border-radius: 999px; padding: 3px 9px; }
/* Boxes in % of river.jpg (840×1050). Hints are clues Unpin can't find: dashed, dark label. */
.m-face { --x: 39.3%; --y: 9%; --w: 11.3%; --h: 9.5%; --mc: #e08a00; }
.m-face b { left: auto; right: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%); }
.m-bridge { --x: 52.4%; --y: 19.5%; --w: 14.9%; --h: 5.4%; }
.m-bridge b { bottom: auto; top: calc(100% + 6px); }
.m-boat { --x: 13.3%; --y: 22.9%; --w: 16.7%; --h: 3.3%; }
.m-boat b { bottom: auto; top: calc(100% + 6px); }
.mark.clue { --mc: rgba(20, 22, 26, .75); border-style: dashed; border-color: #fff; }
/* One compact list of properties: icon, name, value. */
/* What the file says, as a card over the bottom of the demo photo (the path and the legs,
   below the marked face, bridge and boat), like the Info panel of a phone's gallery. */
/* A frosted backing over the bottom of the photo, under the card and the button, so they
   don't sit on the busy pavement. It fades out upwards; the photo still shows through,
   so its edge stays visible on the white page. Drawn before the marks and the card, so it stays under them. */
.demo-photo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); pointer-events: none; }
.demo-over { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.demo-info { padding: 10px 14px 6px; border-radius: 14px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); line-height: 1.3; }
.facts-title { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; padding: 2px 0 7px; border-bottom: 1px solid var(--line); }
.facts-title .ic { width: 17px; height: 17px; }
.facts-title b { font-weight: 700; }
.facts-title span { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.facts { list-style: none; margin: 0; padding: 0; }
.fact { display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; font-size: 14px; }
.fact + .fact { border-top: 1px solid var(--line); }
.fact > .ic { width: 17px; height: 17px; align-self: start; margin-top: 1px; color: var(--warn); } /* level with the first line */
.fact.high > .ic { color: var(--danger); }
.fact b { font-weight: 700; }
.fact span { color: var(--muted); overflow-wrap: anywhere; }
/* Its own light button on the photo, under the card and as wide: white like the card, so the
   yellow "Choose a photo" stays the one main button. The frosted backing keeps it readable. */
.demo-try { width: 100%; padding: 12px 16px; font-size: 15px; color: var(--text); background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
.demo-try:hover { background: #f4f4f2; }

/* The demo plays once, like Unpin at work: a scan line passes down the photo twice, each pass
   to the very bottom; only then the boxes lock on one by one, then the backing, the card row by
   row, and the button. CSS only, with fill-mode "both", so nothing shows early. js/demo-start.js
   holds it (.demo-wait) until the photo is on screen, so on a phone it plays when you get to it.
   --s is when the second pass ends; everything after it counts from there. */
.demo-photo { --s: 2.05s; }
/* !important: the "animation" shorthands below reset play-state, and some are more specific. */
.demo-wait .demo-photo::before, .demo-wait .demo-photo::after, .demo-wait .demo-photo * { animation-play-state: paused !important; }
.demo-photo::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(to bottom, rgba(255, 221, 0, 0), rgba(255, 221, 0, .2) 75%, rgba(255, 221, 0, .9) 98%, rgba(255, 255, 255, .9)); pointer-events: none; animation: sweep-once .95s cubic-bezier(.45, 0, .55, 1) .15s 2 both; }
@keyframes sweep-once { from { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(433%); opacity: 0; } }
.demo-photo .mark { animation: lock .45s cubic-bezier(.3, 1.4, .5, 1) calc(var(--s) + var(--d, 0s)) both; }
.demo-photo .mark b { animation: appear .25s ease calc(var(--s) + var(--d, 0s) + .2s) both; }
.m-face { --d: .05s; }
.m-bridge { --d: .3s; }
.m-boat { --d: .5s; }
@keyframes lock { from { opacity: 0; transform: scale(1.6); } }
@keyframes appear { from { opacity: 0; } }
.demo-photo::before { animation: appear .4s ease calc(var(--s) + .75s) both; }
.demo-info { animation: rise .4s cubic-bezier(.2, .7, .3, 1) calc(var(--s) + .85s) both; }
.demo-info .facts-title, .demo-info .fact { animation: appear .3s ease both; }
.demo-info .facts-title { animation-delay: calc(var(--s) + 1s); }
.demo-info .fact:nth-child(1) { animation-delay: calc(var(--s) + 1.1s); }
.demo-info .fact:nth-child(2) { animation-delay: calc(var(--s) + 1.2s); }
.demo-info .fact:nth-child(3) { animation-delay: calc(var(--s) + 1.3s); }
.demo-try { animation: rise .4s cubic-bezier(.2, .7, .3, 1) calc(var(--s) + 1.5s) both; }
@media (prefers-reduced-motion: reduce) {
  .demo-photo::after { display: none; }
  .demo-photo::before, .demo-photo .mark, .demo-photo .mark b, .demo-info, .demo-info .facts-title, .demo-info .fact, .demo-try { animation: none; }
}

/* working mode: only the tool */
body.working .landing { display: none; }

.error { max-width: 640px; margin: 48px auto; text-align: center; background: var(--soft); border-radius: 24px; padding: 36px 28px; }
.error h2 { font-size: 30px; margin: 0 0 10px; }
.error p { margin: 0 0 24px; }

/* result */
.result { padding: 20px 0 40px; }
.bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; min-width: 0; }
.bar #filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* The work screen: photo and download down the left; the report on the right.
   On a computer the left column stays put while the page scrolls through the report
   (sticky); when the report ends, the page scrolls on as usual. */
/* Left, held in view: back button and file name, the photo, the download.
   Right: the report. How to use the tools is behind the ? in the toolbar. */
.grid.work { grid-template-areas: "left report"; row-gap: 14px; }
.work .left { grid-area: left; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.work .left .bar { margin-bottom: 0; }
/* The report starts level with the photo, not with the back button above it
   (--bar-h is the bar's height plus the gap, set by the script). */
.work .report-panel { grid-area: report; margin-top: var(--bar-h, 0px); }
.panel { background: var(--soft); border-radius: 24px; padding: 22px; min-width: 0; }
/* Editor: one neutral surface, the photo straight on it, tools floating under it. */
.editor { padding: 18px; }
.stage { display: flex; justify-content: center; min-width: 0; }

/* Full screen (js/app.js, setFullscreen): the editor covers the window on a dark ground, the photo
   is centred in it, the tools float at the bottom and a × sits top right. The page under it
   doesn't scroll. */
.fs-close { display: none; }
body.fullscreen { overflow: hidden; }
/* The left column is sticky, so it is a layer of its own: it goes above the report too. */
body.fullscreen .work .left { z-index: 60; }
body.fullscreen .work .editor { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; margin: 0; padding: 64px 16px 104px; border-radius: 0; background: #16181d; }
body.fullscreen .work .editor .stage { flex: 1; align-items: center; min-height: 0; }
body.fullscreen .work .editor .frame { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
body.fullscreen .work .editor .toolbar { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 2; margin: 0 auto; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
body.fullscreen .work .editor .status { display: none; }
body.fullscreen .fs-close { position: fixed; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
body.fullscreen .fs-close:hover { background: rgba(255, 255, 255, .24); }
body.fullscreen .fs-close .ic { width: 22px; height: 22px; }
.frame { position: relative; line-height: 0; max-width: 100%; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .10); transition: box-shadow .15s; }
.frame canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; }
/* "Add a box" is on: the photo is outlined and waits for a drag. */
.stage.drawing .frame { box-shadow: 0 0 0 3px #3b82f6, 0 8px 24px rgba(0, 0, 0, .10); }
.toolbar { position: relative; display: flex; align-items: center; gap: 2px; width: fit-content; margin: 14px auto 0; padding: 4px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .08); }
.tool { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; transition: background .12s; }
.tool .ic { width: 21px; height: 21px; }
.tool:hover { background: var(--soft); }
.tool[aria-pressed="true"] { background: #e8f0fe; color: #1d4ed8; }
.tool:focus-visible { border-radius: 10px; }
.tool-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
/* Tooltip with the tool's name, above the button, on hover and keyboard focus. */
.tool[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 9px; border-radius: 7px; background: #1f2023; color: #fff; font: 600 13px/1.2 "Figtree", sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 6; }
.tool[data-tip]:hover::after, .tool[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
@media (pointer: coarse) { .tool[data-tip]::after { display: none; } .tool { width: 46px; height: 46px; } }
/* A finger swipe on the photo scrolls the page; the script stops that only when the finger lands
   on a box or a corner handle (to move or resize it). With the Box tool every drag draws. */
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y pinch-zoom; }
.stage.drawing #overlay { touch-action: none; }

/* ---------- motion: short, and only while something is happening ---------- */
/* A yellow scan line sweeps the photo while Unpin reads it. The line is 28% of the photo tall,
   so it travels (100 + 28) / 28 ≈ 457% of its own height to cross from top to bottom.
   It starts from the top when the check starts, and the script ends the check only after
   a whole pass (SWEEP_MS in js/app.js is this 1.15 s), so it never stops halfway. */
.scanline { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.frame.scanning .scanline { opacity: 1; }
.scanline::before { content: ""; position: absolute; left: 0; right: 0; top: -28%; height: 28%; background: linear-gradient(to bottom, rgba(255, 221, 0, 0), rgba(255, 221, 0, .22) 75%, rgba(255, 221, 0, .95) 98%, rgba(255, 255, 255, .9)); }
.frame.scanning .scanline::before { animation: sweep 1.15s cubic-bezier(.45, 0, .55, 1) infinite; }
.frame.scanning .scanline.restart::before { animation: none; } /* the script restarts the pass */
/* Before the picture is decoded, the frame already has its shape (from the file's header). */
.frame.scanning #photo { background: #e9e9e6; }
.frame.scanning .scanline::after { content: ""; position: absolute; inset: 0; background: rgba(20, 22, 26, .12); }
@keyframes sweep { to { transform: translateY(457%); } }

/* While working, the status line gets a pulsing dot. */
.busy::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #e0b800; vertical-align: 1px; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

/* Findings, boxes and check results come in one after another (--i is set by the script). */
.enter { animation: rise .34s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.after li.ok.enter .ic { animation: tick .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes tick { from { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .frame.scanning .scanline::before, .busy::before, .enter, .after li.ok.enter .ic { animation: none; }
  .frame.scanning .scanline::after { display: none; }
}
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.status { margin: 12px 4px 0; text-align: center; }
/* The tools wait until the check is over (the status line is in their place meanwhile), then
   hop in as the photo develops: up a little past their place, down, and settle. */
.toolbar.waiting { display: none; }
.toolbar.hop { animation: tools-hop .55s cubic-bezier(.3, .7, .4, 1) .5s both; }
@keyframes tools-hop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 55% { opacity: 1; transform: translateY(-5px) scale(1.02); } 78% { transform: translateY(1px) scale(.995); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toolbar.hop { animation: none; } }
.status:empty { display: none; }
/* The how-to sits apart from the work: outside the panel, outlined instead of filled. */
/* How to use the tools: a popover from the ? in the toolbar. The script sets --x and --y
   (above the button by the popover's bottom edge; with .below, under it by its top edge).
   Where the browser has no popovers it stays hidden. */
.tools-help { display: none; }
.tools-help:popover-open { display: block; position: fixed; inset: auto auto var(--y) var(--x); width: min(340px, calc(100vw - 24px)); box-sizing: border-box; margin: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: #fff; color: var(--muted); font-size: 15px; line-height: 1.45; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .16); animation: help-in .18s ease-out; }
.tools-help.below:popover-open { inset: var(--y) auto auto var(--x); }
.tools-help p { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.tools-help p + p { margin-top: 10px; }
.tools-help .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text); }
.tools-help b { color: var(--text); font-weight: 600; }
@keyframes help-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tools-help:popover-open { animation: none; } }
#help.open { background: #e8f0fe; color: #1d4ed8; }
#help.open::after { display: none; } /* no hover name under the open popover */
/* Buttons on the boxes. The layer lets drags through to the photo; only the buttons take clicks. */
.marks { position: absolute; inset: 0; pointer-events: none; line-height: 1.2; }
.mark-area { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 4px; }
.mark-area:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; border-radius: 4px; }
/* The button sits on the box's top-right corner, kept inside the photo. */
/* On the top-right corner. It covers that corner's resize handle; the other three corners resize. */
.box-x { position: absolute; left: clamp(0px, calc(var(--x) + var(--w) - 14px), calc(100% - 28px)); top: clamp(0px, calc(var(--y) - 14px), calc(100% - 28px)); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 2px #fff; transition: transform .12s; }
.box-x .ic { width: 15px; height: 15px; }
/* Hidden until you point at its box (script adds .show), or it or your box has keyboard focus. */
.box-x { opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .12s, transform .12s; }
.box-x.show, .box-x:focus-visible, .mark-area:focus-visible + .box-x { opacity: 1; transform: none; pointer-events: auto; }
.box-x.show:hover { transform: scale(1.1); }
.box-x:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #222; border-radius: 50%; }
.box-x.face { background: #e08a00; } .box-x.code { background: var(--danger); } .box-x.hand { background: #3b82f6; }
.box-x.off { background: #fff; color: #222; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
@media (pointer: coarse) { .box-x { width: 34px; height: 34px; } .box-x .ic { width: 17px; height: 17px; } }
h2 { font-weight: 800; letter-spacing: -0.03em; }
.panel h2 { font-size: 30px; line-height: 1.1; margin: 4px 4px 16px; }
.findings { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.finding { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 14px 16px; }
.finding strong { display: block; font-size: 17px; font-weight: 700; }
.finding p { margin: 2px 0 0; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.finding-ic { flex: none; color: var(--muted); margin-top: 1px; }
.finding-ic .ic { width: 22px; height: 22px; }
/* A tool's logo from its Content Credentials: a compact item, logo and name. */
.finding-logo { display: block; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--soft); object-fit: contain; }
.finding.has-logo { align-items: center; padding: 12px 16px; }
.finding.has-logo p { margin-top: 0; font-size: 14px; }
.finding.high .finding-ic { color: var(--danger); }
.finding.medium .finding-ic { color: var(--warn); }
.thumb { margin-top: 10px; max-width: 160px; border-radius: 10px; }
.mapwrap { margin: 0 0 14px; }
#map { width: 100%; height: 250px; border-radius: 18px; display: block; }
/* Pin and accuracy circle sit on top of the map at --x, --y (set by the script, in % of the map). */
.mapframe { position: relative; border-radius: 18px; overflow: hidden; }
.map-spot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; pointer-events: none; }
.map-spot[hidden] { display: none; }
.map-pulse { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; background: var(--danger); opacity: .2; animation: breathe 2.4s ease-in-out infinite; }
.map-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--danger); animation: ripple 2.4s ease-out infinite; }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .12; } }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(2); opacity: 0; } }
/* Phosphor's filled pin: its tip is at 240/256 of the height, its hole centred at 104/256. */
.map-pin { position: absolute; left: -17px; top: -32px; width: 34px; height: 34px; fill: var(--danger); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); transform-origin: 50% 94%; animation: drop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.map-dot { position: absolute; left: -5px; top: -23px; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: drop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes drop { from { transform: translateY(-14px) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .map-pulse, .map-pulse::after, .map-pin, .map-dot { animation: none; }
  .map-pulse::after { display: none; }
}
/* Labels on the map: what and where at the top, the nearest town at the bottom. The pin sits in the middle. */
.map-label { position: absolute; left: 10px; max-width: calc(100% - 20px); padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(4px); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); line-height: 1.35; }
.map-label[hidden] { display: none; }
.map-where { top: 10px; }
.map-where strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.map-where strong .ic { width: 17px; height: 17px; color: var(--danger); }
.map-where span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.map-near { bottom: 10px; font-size: 14px; font-weight: 700; }
.map-note { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .75); font-size: 12px; color: var(--muted); cursor: help; }
.actionbar { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.format-note:empty { display: none; }
.keepname { font-size: 15px; color: var(--muted); display: flex; gap: 8px; align-items: center; cursor: pointer; }
.keepname input { accent-color: #222; width: 16px; height: 16px; }
/* The check report takes the place of the findings, in the same layout. */
/* While the photo is being checked: placeholders in the shape of the findings, with a soft shimmer.
   The real findings are already filled in underneath and replace them all at once. */
.skeleton { display: none; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#report.pending .skeleton { display: flex; }
#report.pending > :not(.skeleton):not(#verdict) { display: none; }
.sk { position: relative; overflow: hidden; border-radius: 18px; background: #fff; }
.sk-map { height: 170px; background: #e9e8e3; }
.sk-card { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; row-gap: 8px; padding: 16px; }
.sk-card i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #ecebe7; }
.sk-card b { height: 12px; border-radius: 6px; background: #ecebe7; }
.sk-card b.short { width: 60%; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); animation: shimmer 1.3s ease-in-out infinite; }
.sk:nth-child(2)::after { animation-delay: .1s; } .sk:nth-child(3)::after { animation-delay: .2s; } .sk:nth-child(4)::after { animation-delay: .3s; }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; display: none; } }

/* Headings get focus from the script only, to move screen readers there: no ring. */
.after h2:focus, #verdict:focus { outline: none; box-shadow: none; }
.after-sub { margin: -8px 4px 14px; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.after ul { list-style: none; margin: 0 0 14px; padding: 8px 16px; background: #fff; border-radius: 18px; }
.after li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 17px; }
.after li + li { border-top: 1px solid var(--line); }
.after li .ic { width: 20px; height: 20px; margin-top: 0.12em; }
.after-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.after .ok { color: var(--ok); font-weight: 600; } .after .bad { color: var(--danger); font-weight: 700; } .after .unknown { color: var(--warn); font-weight: 600; } .after .info { color: var(--muted); }

/* sections */
.section { padding: 88px 0 0; text-align: center; }
.big { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; margin: 0 auto 18px; max-width: 860px; }
.sub { font-size: 20px; max-width: 640px; margin: 0 auto 34px; }
/* How it works: three short steps in the hero, under the pitch; the demo photo shows them. */
.process { grid-area: steps; list-style: none; margin: 0; padding: 18px 0 0; max-width: 520px; display: grid; gap: 12px; border-top: 1px solid var(--line); text-align: left; font-size: 16px; color: var(--muted); }
.process li { display: flex; gap: 10px; align-items: flex-start; }
.process .ic { width: 22px; height: 22px; color: var(--text); margin-top: 1px; }
.process b { color: var(--text); }

/* What Unpin checks: three cards by what it does (removes, finds, leaves to you): a heading,
   one line on how it works and its limit, then short chips instead of sentences. */
.checks { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.check { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: var(--soft); }
.check h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; line-height: 1.2; }
.check h3 .ic { width: 26px; height: 26px; }
.check.done h3 .ic { color: var(--ok); }
.check.found h3 .ic { color: var(--warn); }
.check.yours h3 .ic { color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; }
.chips .ic { width: 16px; height: 16px; color: var(--muted); }
.check p { margin: -8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); } /* close under its heading */
.ai-line { max-width: 1080px; margin: 16px auto 0; display: flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 18px; text-align: left; font-size: 16px; color: var(--muted); }
.ai-line .ic { width: 22px; height: 22px; color: #7a5cd6; }
.ai-line b { color: var(--text); }

/* Checks and Questions on a computer: heading on the left, held in view while the cards or the
   questions scroll past on the right. Left-aligned; one centred column on phones. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; text-align: left; }
.split-head { position: sticky; top: 40px; }
.split .big { font-size: clamp(36px, 3.9vw, 50px); max-width: none; margin: 0 0 16px; }
.split .sub { margin: 0; max-width: 420px; }
.split .checks { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.split .ai-line { max-width: none; margin-top: 12px; }
.split .faq { max-width: none; margin: 0; }
.split .faq details:first-child { padding-top: 6px; } /* first question level with the heading */

.faq { max-width: 760px; margin: 30px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
.faq summary { font-weight: 700; font-size: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); margin: 12px 0 0; }

/* The last call: as wide as the content, straight top with big round corners, light yellow at
   the top fading to the page colour downwards, so it stands apart without a filled box. */
.final { margin: 110px 0 0; padding: 96px 32px 64px; text-align: center; border-radius: 48px 48px 0 0; background: linear-gradient(to bottom, #fff6bf 0%, rgba(255, 246, 191, .55) 45%, rgba(255, 246, 191, 0) 100%); }
.final .big { margin-bottom: 14px; }
.final .sub { margin-bottom: 30px; color: var(--muted); }
.foot { max-width: 1180px; margin: 0 auto; padding: 24px 24px 0; color: var(--muted); font-size: 15px; text-align: center; overflow: hidden; }
/* The service name, pale, exactly the width of the content column, cut by the bottom edge. */
.wm { position: relative; margin-top: 28px; user-select: none; pointer-events: none; }
.wordmark { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.wordmark text { font: 800 100px "Figtree", sans-serif; letter-spacing: -5.5px; fill: #efeee8; }
body.working .foot { padding-bottom: 40px; }

/* ---------- the logo in the header (js/logo.js) ---------- */
.logo-svg { display: block; width: 32px; height: 32px; overflow: visible; }
.logo-svg .lg-pin, .logo-svg .lg-eyes, .logo-svg .lg-eye, .logo-svg .lg-bits circle { transform-box: fill-box; transform-origin: center; }
.logo-svg .lg-pin { transform-origin: 50% 100%; }
/* The eyes follow the mouse: js/logo.js sets --lx/--ly. */
.logo-svg .lg-eyes { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.logo-svg .lg-eye { transition: transform .2s; }
.logo-svg.blink .lg-eye { animation: lg-blink .18s; }
@keyframes lg-blink { 45% { transform: scaleY(.08); } }
/* Hover: the bar strikes the pin out again, the eyes narrow. */
.lg-bar { stroke-dasharray: 1; stroke-dashoffset: 0; }
a:hover .logo-svg .lg-bar, a:focus-visible .logo-svg .lg-bar { animation: lg-strike .5s cubic-bezier(.6, 0, .25, 1); }
@keyframes lg-strike { from { stroke-dashoffset: 1; } }
a:hover .logo-svg .lg-eye { transform: scaleY(.62); }
/* Tap: squash and spring back. */
.logo-svg.poke .lg-pin { animation: lg-poke .45s; }
@keyframes lg-poke { 25% { transform: scale(1.14, .82); } 55% { transform: scale(.93, 1.09); } 80% { transform: scale(1.03, .97); } }
/* Five quick taps: the pin bursts into bits, the bar slides off, both come back. */
.lg-bits circle { opacity: 0; }
.logo-svg.burst .lg-pin { animation: lg-pop 1.6s cubic-bezier(.3, .7, .4, 1); }
.logo-svg.burst .lg-bar { animation: lg-bar-off 1.6s; }
.logo-svg.burst .lg-bits circle { animation: lg-bit .9s .12s cubic-bezier(.2, .7, .3, 1); }
@keyframes lg-pop { 12% { transform: scale(1.12); } 22%, 64% { transform: scale(0); } 84% { transform: scale(1.08); } }
@keyframes lg-bar-off { 15% { stroke-dashoffset: 0; } 30%, 70% { stroke-dashoffset: -1; } 71% { stroke-dashoffset: 1; } 95% { stroke-dashoffset: 0; } }
@keyframes lg-bit { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@media (prefers-reduced-motion: reduce) { .logo-svg *, a:hover .logo-svg * { animation: none !important; transition: none !important; } }

/* ---------- the mascot (js/mascot.js draws it, js/mascot-places.js runs its scenes) ---------- */
.mascot { display: block; }
.mascot-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* It can be pulled like dough; a swipe over it still scrolls the page. */
.mascot-grab { cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.mascot-grab:active { cursor: grabbing; }

/* Drop frame: no box. Rings spread from the mascot like a location ping on a map; over the frame
   they close in on it and turn yellow, the target is locked. They run only while a file is dragged. */
.drop-hint .mascot { position: relative; width: 128px; margin-bottom: -8px; }
.drop-ping { position: relative; display: grid; place-items: center; }
.drop-ping > i { position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(141, 137, 220, .55); opacity: 0; pointer-events: none; }
body.dragging:not(.working) .drop-ping > i { animation: drop-ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
body.dragging:not(.working) .drop-ping > i:nth-child(2) { animation-delay: .8s; }
body.dragging:not(.working) .drop-ping > i:nth-child(3) { animation-delay: 1.6s; }
@keyframes drop-ping { from { transform: scale(.5); opacity: 0; } 15% { opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
body.dragging:not(.working) .hero-left.over .drop-ping > i { border-color: #e0b800; border-width: 3px; animation-name: drop-lock; animation-duration: 1s; }
body.dragging:not(.working) .hero-left.over .drop-ping > i:nth-child(2) { animation-delay: .33s; }
body.dragging:not(.working) .hero-left.over .drop-ping > i:nth-child(3) { animation-delay: .66s; }
@keyframes drop-lock { from { transform: scale(1.9); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.dragging:not(.working) .drop-ping > i { animation: none; opacity: .6; transform: scale(1.3); }
}

/* Work screen: over the photo while it is checked. The photo develops out of a blur under it. */
.develop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s; }
.develop.on { opacity: 1; }
.develop .mascot { width: min(46%, 220px); }
.frame canvas, .frame img { transition: filter .9s ease-out, opacity .9s ease-out; }
.frame.developing canvas, .frame.developing img { filter: blur(14px) saturate(.5); opacity: .6; will-change: filter; } /* own layer: the blur is not redrawn under the moving mascot */
@media (prefers-reduced-motion: reduce) { .develop { display: none; } .frame.developing canvas, .frame.developing img { filter: none; opacity: 1; } }

/* After a download: in the corner of the result. */
.after { position: relative; }
.mascot-after { position: absolute; top: -6px; right: 0; width: 76px; }
.after > h2 { padding-right: 72px; }

/* Error screen */
.error .mascot { width: 132px; margin: -12px auto 6px; }

/* Under the "Questions" heading. */
.mascot-faq { width: 150px; margin: 22px 0 0 -14px; }

/* Footer: the ghost stands behind the "n" of the name, its hands on top of the letter.
   Measured from the glyphs: the "n" runs from 26.7% to 46.2% across, its top is 38.3% down and
   its inner gap starts 61.7% down. The body layer sits under the letter and is cut flat at 60%,
   which falls inside the letter's own stroke, so what shows is exactly the letter's outline.
   The ghost box is 26% wide (109% of the name's height); its edge line, 65.5% down the box,
   rests on the top of the letter. */
.wm-peek, .wm-hands { position: absolute; inset: 0; pointer-events: none; }
.wm-peek { z-index: 0; clip-path: inset(-400% -50% 40% -50%); }
/* Room to pull him up: the footer, which cuts the name at the bottom of the page, reaches 160px up
   over the transparent bottom of the last call; it lets clicks through to it. */
body:not(.working) .foot { margin-top: -160px; padding-top: 184px; pointer-events: none; }
body:not(.working) .foot p { pointer-events: auto; }
.wm-hands { z-index: 2; }
.mascot-peek { position: absolute; left: 23.6%; width: 26%; top: -33.2%; }
.wm-peek .mascot-svg { pointer-events: auto; }
.wm-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

@media (max-width: 900px) {
  .mascot-faq { width: 110px; margin: -10px auto 12px; }
}

/* Scroll-linked, where the browser supports it (elsewhere all stays still): the last call rises
   into place as it comes into view, the name slides up from behind the bottom edge as you reach
   the end of the page, and in its last stretch the ghost rises from behind the "n". */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .final { animation: final-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes final-in { from { opacity: 0; transform: translateY(80px) scale(.96); } }
    .foot { view-timeline: --foot block; }
    .wm { animation: wordmark-up linear both; animation-timeline: --foot; animation-range: entry 0% entry 100%; }
    @keyframes wordmark-up { from { transform: translateY(22%); } }
    .mascot-peek { animation: ghost-rise linear both; animation-timeline: --foot; animation-range: entry 55% entry 100%; }
    @keyframes ghost-rise { from { transform: translateY(80%); } }
  }
}

.for-touch { display: none; }
@media (pointer: coarse) {
  .for-mouse { display: none; }
  .for-touch { display: inline; }
}

@media (max-width: 860px) {
  main { padding: 0 16px; }
  .nav { padding: 14px 16px; }
  .hero { padding: 16px 0 8px; }
  /* One column, in reading order: pitch, then the photo with what its file says and its buttons. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "photo" "steps"; row-gap: 22px; }
  /* Pitch and steps take their own rows around the photo; a dropped photo goes anywhere. */
  .hero-left { display: contents; }
  .drop-hint { display: none; }
  body.dragging:not(.working) .hero-left > .hero-text, body.dragging:not(.working) .hero-left > .process { opacity: 1; }
  body.dragging main { box-shadow: inset 0 0 0 4px var(--yellow); border-radius: 24px; }
  .process { margin: 8px auto 0; width: 100%; }
  .hero-text { padding-top: 8px; text-align: center; }
  .cta { justify-content: center; }
  .lead { margin: 0 auto 20px; }
  /* A shorter demo photo on phones; the tool itself shows photos whole. */
  .hero-photo { width: min(100%, 340px); margin: 0 auto; }
  .demo-over { left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .demo-info { padding: 8px 12px 4px; }
  .fact { grid-template-columns: 16px 68px minmax(0, 1fr); font-size: 13px; padding: 5px 0; }
  .btn.demo-try { font-size: 15px; padding: 11px 14px; }
  .mark b { font-size: 11px; padding: 2px 7px; }
  .proof { font-size: 15px; margin-bottom: 14px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the download comes last in the flow, so it stays stuck to the bottom of the screen
     from the photo all the way down the report. */
  .grid.work { grid-template-areas: "bar" "editor" "report" "action"; grid-template-rows: none; row-gap: 14px; }
  .work .left { display: contents; } /* its parts take their own places in the column */
  .work .report-panel { margin-top: 0; }
  .work .bar { grid-area: bar; }
  .work .editor { grid-area: editor; }
  .work .actionbar { grid-area: action; }
  .panel { padding: 14px; border-radius: 20px; }
  .panel h2 { font-size: 26px; }
  .btn { font-size: 18px; padding: 18px 28px; }
  .btn-sm { font-size: 15px; padding: 9px 16px; }
  .section { padding-top: 56px; }
  .process { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* The three check cards stack. */
  .checks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Checks and Questions: one centred column again, heading above, nothing held in place. */
  .split { display: block; text-align: center; }
  .split-head { position: static; }
  .split .big { font-size: clamp(34px, 5.2vw, 60px); margin: 0 auto 18px; }
  .split .sub { margin: 0 auto 34px; }
  .split .checks, .split .faq { text-align: left; }
  .split .faq { margin-top: 30px; }
  .final { margin-top: 72px; padding: 64px 20px 44px; border-radius: 32px 32px 0 0; }
  .foot { padding: 16px 16px 0; }
  .check { padding: 20px; border-radius: 20px; gap: 14px; }
  .check h3 { font-size: 19px; }
  .ai-line { align-items: flex-start; padding: 14px 16px; font-size: 15px; }
  /* The download button stays in reach at the bottom of the screen. */
  /* Stuck to the bottom of the screen while you read the report below it. */
  .actionbar { position: sticky; bottom: 0; z-index: 5; padding: 10px 0; gap: 6px; background: var(--page); box-shadow: 0 -10px 16px rgba(255, 255, 255, .92); }
}