@font-face{font-family:"Smally Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Smally Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Smally Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Smally Inter";src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Smally Serif";src:url("/assets/fonts/DejaVuSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Metric-matched stand-ins while the woff2 files load, so the swap does not move the text. size-adjust is Inter's (or DejaVu Serif Italic's) advance over the stand-in's across the text of both /compress/ pages; ascent/descent/line-gap are the web font's hhea metrics divided by size-adjust; line-gap 0 like Inter. */
@font-face{font-family:"Smally Inter Fallback";src:local("Arial"),local("Liberation Sans");font-weight:400;font-style:normal;size-adjust:105.96%;ascent-override:91.43%;descent-override:22.76%;line-gap-override:0%}
@font-face{font-family:"Smally Inter Fallback";src:local("Arial Bold"),local("Liberation Sans Bold");font-weight:600;font-style:normal;size-adjust:100.93%;ascent-override:95.98%;descent-override:23.9%;line-gap-override:0%}
@font-face{font-family:"Smally Inter Fallback";src:local("Arial Bold"),local("Liberation Sans Bold");font-weight:700;font-style:normal;size-adjust:102.32%;ascent-override:94.68%;descent-override:23.57%;line-gap-override:0%}
@font-face{font-family:"Smally Serif Fallback";src:local("Times New Roman Italic"),local("Liberation Serif Italic");font-weight:400;font-style:italic;size-adjust:126.64%;ascent-override:73.29%;descent-override:18.62%;line-gap-override:0%}
/* The /compress page. Colours, radii and elevations are design/tokens.json, the Mac app's tokens too; browser typography uses locally hosted canonical Inter/DejaVu faces.
   No third-party font request is made. scripts/check-compress-page.mjs keeps these values equal to the file. --chip, --dash,
   --stage and --handle are this page's own (a translucent chip, the dashed edge, the comparison stage, the divider's grip).
   Green (--saving) means bytes saved and nothing else; a file that does not improve is muted, never green or red. */
:root{
  --accent:#2457cc;--accent-ink:#2457cc;--accent-tint:#2457cc1a;--on-accent:#ffffff;
  --paper:#fffaf1;--surface:#fcfaf2;--solid:#ffffff;--ink:#252a2c;--muted:#626660;--line:#dfdfd2;--hair:#2527281f;
  --saving:#1f7a34;--warn:#a8480c;--warn-tint:#f08a2a26;--sage:#e5e9df;--sage-ink:#455439;--chip:#25272c14;--dash:#7f7f7f66;--stage:#e9e7df;
  --handle:#fff;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:99px;
  --elev-1:0 4px 12px #39402808;--elev-2:0 25px 60px #39402812,0 4px 12px #39402808;
  color-scheme:light dark;
  font-family:"Smally Inter","Smally Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none
}
@media(prefers-color-scheme:dark){:root{
  --accent-ink:#8aa9f5;--accent-tint:#6f93ee26;
  --paper:#1c1c19;--surface:#2b2b26;--solid:#262622;--ink:#f1eee5;--muted:#a9aaa0;--line:#3a3a34;--hair:#ffffff1f;
  --saving:#5fd07a;--warn:#f4a35f;--warn-tint:#f08a2a2e;--sage:#33402b;--sage-ink:#c9d6b8;--chip:#ffffff17;--dash:#ffffff40;--stage:#171715;--elev-1:0 18px 50px #00000066;--elev-2:0 18px 50px #00000066
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.4;min-height:100vh;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:30;border-radius:var(--r-sm)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}

/* The hero's column is design sheet 05's: drop zone, files and facts 1000 px wide. The explanations under it keep 860. */
.page{width:min(1000px,100% - 32px);margin-inline:auto;padding-block:0 28px}
main>:is(.seo-article,.seo-howto,.seo-facts,.page-faq,.counter-disclosure,.stub-tools){max-width:860px;margin-inline:auto}

/* Header (design sheet 05, "Site header"): the wordmark alone on the left, the nav in ink 14/600 with 30 between items, and the
   Download for Mac pill outlined in ink. It spans the sheet's 1280 frame less its 56 padding (1168), wider than the hero column. */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;padding-block:24px;margin-inline:calc((100% - min(1168px,100vw - 32px)) / 2)}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand-text{display:flex}
.pip-head-source,.tagline{display:none}
.wordmark-img{display:block;content:url("/assets/wordmark-canonical.svg");height:48px;width:143px}
@media(prefers-color-scheme:dark){.wordmark-img{content:url("/assets/wordmark-canonical-dark.svg")}}
.top nav{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;flex:none}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-pill);text-decoration:none;color:var(--ink)}
.top nav a:hover{background:var(--accent-tint)}
.top nav .nav-cta{min-height:40px;margin-left:10px;padding:0 18px;border:1px solid var(--ink)}
.top nav .nav-cta:hover{background:var(--ink);color:var(--paper)}
@media(pointer:coarse){.top nav .nav-cta{min-height:44px}}

.stub-banner{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-md);background:var(--warn-tint);color:var(--ink);font-size:13px;border:1px dashed var(--warn)}

/* Borders that mark focus, a drag or the chosen copy use --accent-ink: the brand blue is 2.7:1 on the dark page, under the
   3:1 a focus or state outline needs; in light mode the two are the same colour. */
/* Canonical empty surface: 250 px minimum, 84 px Pip, solid edge and ink action.
   Honest copy and limits may grow the surface; never clip them to match mock data. */
.surface{position:relative;border-radius:var(--r-lg);transition:box-shadow .15s,background-color .15s}
.surface.is-empty{background:var(--surface);border:1.5px solid var(--line);min-height:250px;display:flex;align-items:center;justify-content:center;padding:8px 20px}
.surface.is-empty.is-drag{border-color:var(--accent-ink);border-style:solid}
.surface.has-files.is-drag{box-shadow:0 0 0 2px var(--accent-ink);background:var(--accent-tint)}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;width:100%;cursor:pointer}
.pip-stage{position:relative;width:84px;height:84px;margin-bottom:6px}
.pip-large,.pip-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.pip-video{visibility:hidden;pointer-events:none;mix-blend-mode:multiply}
.pip-stage.video-on .pip-video{visibility:visible}
.pip-stage.video-on .pip-large{visibility:hidden}
@media(prefers-color-scheme:dark){.pip-video{display:none}}
/* Pip's outline and legs are near-black in the PNG and vanish on the dark page; the app's dark Pip keeps a light rim.
   A 1 px light halo gives the static image the same edge. */
@media(prefers-color-scheme:dark){.pip-large,.invite-pip{filter:drop-shadow(0 0 .6px #fffc) drop-shadow(0 0 1px #ffffff59)}}
.empty-title{font-size:20px;line-height:28px;font-weight:600;margin:0 0 6px}
.promise{margin:0 0 6px;font-size:12px;color:var(--muted);line-height:15px}
.promise span{display:block}
.formats{margin:6px 0 0;font-size:12px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:5px 13px;border:0;border-radius:var(--r-sm);background:var(--accent-tint);color:var(--accent-ink);font-size:13px;font-weight:600;white-space:nowrap}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.big{min-height:40px;padding:8px 22px;border-radius:var(--r-pill);font-size:14px}
.empty .btn.primary{min-height:44px;min-width:150px;padding:10px 20px;border-radius:var(--r-md);background:var(--ink);color:var(--paper)}
html[lang="es"] .empty .btn.primary{min-width:190px}
.btn svg{width:15px;height:15px;flex:none}
.btn:disabled{opacity:.5;cursor:default}
@media(pointer:coarse){.btn{min-height:44px;padding-inline:16px}}

/* Status line above the list (BatchStatus). */
.statusbar{padding:2px 4px 10px}
.batch{display:block;width:100%;height:4px;margin:0 0 10px;accent-color:var(--accent);border:0;border-radius:var(--r-xs);overflow:hidden;background:var(--chip);appearance:none;-webkit-appearance:none}
.batch::-webkit-progress-bar{background:var(--chip)}
.batch::-webkit-progress-value{background:var(--accent)}
.batch::-moz-progress-bar{background:var(--accent)}
.status{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.status svg{width:16px;height:16px;flex:none}
/* No icon while compressing or after a failure: the empty span must not push the words off the lock line's edge. */
#status-icon:empty{display:none}
.status .ic-ready{color:var(--accent-ink)}
.status .ic-done{color:var(--saving)}
.cap-note{margin:6px 0 0;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.cap-note a{color:var(--accent-ink)}
.reload-note{margin:6px 0 0;font-size:13px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}

/* Rows. */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}.row-item{display:block}
.row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:4px 14px;padding:12px 28px 12px 8px;border-bottom:1px solid var(--hair);border-radius:0}
.row:focus{outline:none;background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent-ink);border-radius:var(--r-md);border-bottom-color:transparent}
.row:focus-visible{outline:none}
.thumb{width:32px;height:32px;border-radius:var(--r-xs);overflow:hidden;background:var(--chip);flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* No picture the browser can show (PDF, HEIC, a damaged file): a file glyph, as the app's thumbnail falls back to a symbol. */
.thumb{display:grid;place-items:center}
.thumb:empty::after{content:"";width:16px;height:16px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M4 1.8h5.2L12.5 5v9.2H4z'/%3E%3Cpath d='M9 1.8V5.2h3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M4 1.8h5.2L12.5 5v9.2H4z'/%3E%3Cpath d='M9 1.8V5.2h3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.main{min-width:0}
.name{display:flex;min-width:0;font-size:15px;font-weight:500}
.name .n1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre}
.name .n2{flex:none;white-space:pre}
.detail{display:block;font-size:12px;color:var(--muted);margin-top:1px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.result{text-align:right;min-width:64px}
.size{display:block;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.15}
.saving{display:block;font-size:12px;font-weight:650;color:var(--saving);font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:var(--chip);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.tag.failed{background:var(--warn-tint);color:var(--warn)}
.actions{display:flex;align-items:center;gap:8px;min-width:0}
.actions:empty{display:none}
.diagnostics-hint{grid-column:2 / -1;margin:4px 0 0;font-size:12px;color:var(--muted)}
.diagnostics-message{margin:8px 0;color:var(--ink);font-size:13px;overflow-wrap:anywhere;user-select:text}
.row-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:var(--chip);color:var(--muted);display:grid;place-items:center;padding:0;opacity:0}
.row-x svg{width:10px;height:10px}
.row:hover .row-x,.row:focus .row-x,.row:focus-within .row-x,.row-x:focus-visible{opacity:1}
@media(hover:none){.row-x{opacity:1}}
/* A queued or working row offers Cancel only, as in the app (JobRow: the remove button is for finished rows). */
.row:has(.actions [data-act="cancel"]) .row-x{display:none}
@media(pointer:coarse){.row-x{width:32px;height:32px;right:0}}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--chip);border-top-color:var(--accent);animation:spin .9s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.row-progress{width:90px;height:6px;accent-color:var(--accent);appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-xs);overflow:hidden;background:var(--chip)}
.row-progress::-webkit-progress-bar{background:var(--chip)}
.row-progress::-webkit-progress-value{background:var(--accent)}
.row-progress::-moz-progress-bar{background:var(--accent)}
.addrow{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:10px 8px;border:0;background:none;color:var(--accent-ink);font-size:14px;font-weight:500;border-radius:var(--r-sm);min-height:44px}
.addrow svg{width:18px;height:18px}
.addrow:hover{background:var(--accent-tint)}

/* Footer: lock line, then the buttons. The sentence shortens, then wraps, as the app's promise line gives way. */
.foot{container-type:inline-size;container-name:foot;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-top:14px;padding-inline:4px;min-height:36px}
.lock{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;color:var(--muted);min-width:0}
.lock svg{width:14px;height:14px;flex:none}
.lock .short{display:none}
.page-foot{margin:28px 0 8px;text-align:center;font-size:12px}
.page-foot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.page-foot a:hover{color:var(--ink)}
.foot-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
@container foot (max-width:560px){.lock{flex:1 0 100%}.foot-actions{margin-left:0;width:100%}}
@container foot (max-width:340px){.lock .full{display:none}.lock .short{display:inline}}

/* Pip's reactions on the static image: one per batch, no motion under Reduced Motion. */
@media(prefers-reduced-motion:no-preference){
  [data-pip="celebrate"]{animation:pip-celebrate var(--pip-ms,1.4s) ease-out 1}
  [data-pip="shrug"]{animation:pip-shrug var(--pip-ms,1.4s) ease-in-out 1}
  [data-pip="concern"]{animation:pip-concern var(--pip-ms,1.4s) ease-in-out 1}
  .is-drag .pip-large{transform:translateY(-6px) scale(1.04)}
  .pip-large{transition:transform .2s}
}
@keyframes pip-celebrate{0%,100%{transform:translateY(0)}25%{transform:translateY(-9px) rotate(-4deg)}50%{transform:translateY(0)}70%{transform:translateY(-6px) rotate(4deg)}}
@keyframes pip-shrug{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(1px)}65%{transform:rotate(5deg)}}
@keyframes pip-concern{0%,100%{transform:translateY(0) scaleY(1)}40%,70%{transform:translateY(2px) scaleY(.96)}}

.unavailable{text-align:center;max-width:420px;padding:20px}
.unavailable p{font-size:16px;margin:0 0 16px}

/* Preview dialog. */
dialog.preview{border:0;padding:20px;border-radius:var(--r-lg);background:var(--solid);color:var(--ink);width:min(920px,100vw - 20px);max-width:none;max-height:calc(100dvh - 20px);overflow:auto;box-shadow:var(--elev-2)}
dialog.preview::backdrop{background:#0000006b}
.pv-title{margin:0 0 14px;text-align:center;font-size:15px;font-weight:650;overflow-wrap:anywhere}
.cmp-box{display:flex;justify-content:center}
.cmp{position:relative;background:var(--stage);border-radius:var(--r-md);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
.cmp.is-zoom{cursor:grab}
.cmp.is-zoom.panning{cursor:grabbing}
.cmp .layer{position:absolute;inset:0;overflow:hidden}
.cmp .layer img{position:absolute;left:0;top:0;max-width:none;display:block;pointer-events:none;-webkit-user-drag:none}
.cmp .lab{position:absolute;top:10px;padding:3px 10px;border-radius:var(--r-pill);background:#0000008c;color:#fff;font-size:12px;font-weight:650;pointer-events:none;z-index:2}
.cmp .lab-o{left:10px}.cmp .lab-s{right:10px}
.divider{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:3;cursor:ew-resize;display:flex;justify-content:center}
.divider::before{content:"";width:2px;height:100%;background:#fff;box-shadow:0 0 0 1px #0000004d}
.divider .handle{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--handle);color:#252a2c;display:grid;place-items:center;box-shadow:0 1px 6px #0000006b}
.divider .handle svg{width:18px;height:18px}
.divider:focus-visible{outline:none}
.divider:focus-visible .handle{outline:3px solid var(--accent-ink);outline-offset:2px}
.zoom-badge{position:absolute;right:10px;bottom:10px;z-index:4;min-width:56px;min-height:28px;padding:3px 10px;border:0;border-radius:var(--r-pill);background:#0000008c;color:#fff;font-size:12px;font-weight:650}
.pv-toolbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.zoom-seg{display:inline-flex;gap:4px;padding:3px;border-radius:var(--r-pill);background:var(--chip)}
.zoom-seg button{min-width:52px;min-height:32px;padding:2px 12px;border:0;border-radius:var(--r-pill);background:transparent;font-size:12px;font-weight:650;color:var(--ink)}
.zoom-seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.zoom-seg button:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
@media(pointer:coarse){.zoom-seg button{min-width:56px;min-height:44px}}
.pv-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:14px 0 0;padding:0}
.pv-facts>div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px}
.pv-facts dt{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pv-facts dd{margin:0;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.pv-facts .save-pill{padding:2px 10px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--saving)}
.zoom-badge:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(pointer:coarse){.zoom-badge{min-height:44px;min-width:64px}}
.copy-card{display:block;margin:14px auto 0;min-width:150px;padding:8px 18px;text-align:center;border-radius:var(--r-md);border:1.5px solid var(--accent-ink);background:var(--accent-tint);width:fit-content}
.copy-card b{display:block;font-size:14px}
.copy-card span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.copy-card .sv{color:var(--saving);font-weight:650;margin-left:6px}
.pv-quality{display:flex;gap:7px;align-items:center;justify-content:center;margin:12px 0 0;font-size:13px;color:var(--muted);text-align:center}
.pv-quality svg{width:15px;height:15px;flex:none}
.pv-hints{display:flex;gap:6px 24px;justify-content:space-between;flex-wrap:wrap;margin:14px 0 0;font-size:12px;color:var(--muted)}
.pv-hints p{margin:0;flex:1 1 280px}
.pv-hints p+p{text-align:right}
.pv-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.pv-actions .btn{min-width:84px}
.btn.plain{background:var(--chip);color:var(--ink)}
@media(max-width:560px){.pv-hints p+p{text-align:left}.page{width:calc(100% - 32px)}}

/* Phone: the row's actions drop under the name; nothing may scroll sideways. */
@media(max-width:560px){
  .page{padding-block:0 20px}
  .top{padding-block:24px;gap:8px}
  .wordmark-img{height:36px;width:108px}
  .top nav{gap:4px}
  .top nav a:not(.nav-lang):not(.nav-cta){display:none}
  .top nav .nav-cta{margin-left:0;padding:0 14px}
  .surface.is-empty{padding:8px 14px}
  .row{grid-template-columns:32px minmax(0,1fr) auto;padding-right:42px}
  .actions{grid-column:2 / -1;justify-content:flex-end;flex-wrap:wrap}
  .row .result{grid-column:3;grid-row:1}
  /* A row with a tag (Left as is, Already small, Failed) has no size: its sentence takes the full width and the tag goes
     under it, with the row's action on the same line, instead of squeezing the sentence into a narrow column. */
  .row:has(.result .tag) .main{grid-column:2 / -1}
  .row:has(.result .tag) .result{grid-column:2;grid-row:2;text-align:left;min-width:0}
  .row:has(.result .tag) .actions{grid-column:3;grid-row:2}
  dialog.preview{padding:14px;border-radius:var(--r-md)}
}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:var(--accent);border-right-color:var(--accent)}.surface{transition:none}}

/* Smally for Mac: one card under the list, after a result (funnel.js). Quiet: no modal, never over a row. */
.invite{position:relative;display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px 44px 16px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev-1)}
.invite-pip{width:44px;height:44px;flex:none}
.invite-body{min-width:0;flex:1}
.invite-text{margin:0 0 12px;font-size:14px;line-height:1.45}
.invite-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.invite-actions a.btn{text-decoration:none}
.invite-note{font-size:12px;color:var(--muted)}
.invite-x{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;border:0;background:var(--chip);color:var(--muted);display:grid;place-items:center;padding:0}
.invite-x svg{width:10px;height:10px}
.remind-menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.remind-menu a.btn{text-decoration:none}
.remind-said{flex:1 0 100%;margin:2px 0 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.remind-said:empty{display:none}
.invite-anyway{display:inline-flex;align-items:center;min-height:32px;margin-top:8px;font-size:12px;color:var(--accent-ink)}
@media(pointer:coarse){.invite-anyway{min-height:44px}}
@media(pointer:coarse){.invite-x{width:44px;height:44px;right:4px;top:4px}.invite{padding-right:52px}}
@media(max-width:560px){.invite-pip{display:none}}

/* A file the browser cannot take (PDF, video, HEIC, over the pixel limit): its own row invites, in place, with one button and what it
   runs on (design/smally.fig sheet 05; Framer's one primary action and Square's cause plus one action). No modal, no tag. */
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{filter:brightness(1.25)}
.row.is-mac-invite{background:var(--surface);border-radius:var(--r-md);border-bottom-color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.row.is-mac-invite:focus-visible{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
.row.is-mac-invite .result{display:none}
.mac-cta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mac-cta a.btn{text-decoration:none}
.mac-note{font-size:11px;color:var(--muted)}
@media(max-width:560px){.row.is-mac-invite .actions{grid-column:2 / -1;justify-content:flex-start}.mac-cta{align-items:flex-start}}

/* ?stub=1 test panel */
.stub-tools{margin-top:22px;font-size:12px;color:var(--muted)}
.stub-tools summary{cursor:pointer;min-height:36px;display:flex;align-items:center}
.stub-bar{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
.stub-bar .btn{min-height:28px;font-size:12px;padding:3px 10px}

/* Shown by the HTML itself; app.js hides it once the script and the strings have loaded. */
.boot{opacity:0;animation:boot-show 0s 2s forwards;margin:0 auto;max-width:460px;padding:24px;text-align:center;font-size:15px;line-height:1.5}
.boot a{text-decoration:underline}

/* Invisible for the first 2 s so a slow load never flashes it; with no script it appears, and app.js hides it when it starts. */
@keyframes boot-show{to{opacity:1}}

/* The page says what it is: someone who arrives from a search sees the task before Pip's line. Same heading on every state. */
.page-title{margin:0 0 14px;padding-inline:4px;font-size:22px;line-height:1.2;font-weight:680;letter-spacing:-.015em}
@media(max-width:560px){.page-title{font-size:19px;margin-bottom:12px}}

/* Sheet 05: a 1168 px editorial hero above the 1000 px working column. The headline reserves its two-line 56/64 box.
   Native SMA348 clones document the existing EN/ES copy at 390/1440; mobile reserves three proportional lines for either locale. */
.hero{margin:20px 0 18px;margin-inline:calc((100% - min(1168px,100vw - 32px)) / 2);text-align:center}
.hero-eyebrow{margin:0 0 18px;font-size:11px;line-height:16px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
.hero .page-title{margin:0 0 18px;padding:0;font-size:clamp(34px,12px + 5.6vw,56px);line-height:1.142857143;min-height:2.285714286em;font-weight:600;letter-spacing:-.053571429em;text-wrap:wrap}
@media(max-width:560px){.hero .page-title{min-height:3.428571429em}}
/* The parent owns the line box; serif fallback ascenders must not enlarge it in WebKit. */
.page-title em{font-family:"Smally Serif","Smally Serif Fallback",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:inherit;line-height:0}
.hero .seo-lead{max-width:1000px;min-height:2.7em;margin:0 auto;padding:0;font-size:17px;line-height:1.35;color:var(--muted);text-wrap:pretty}

/* Three reasons under the drop zone (design sheet 05, "Facts"): sage cards, 16 apart, 16 padding, 13/600 in sage ink. */
.trust-strip{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 0;padding:0}
.trust-strip li{padding:16px;border-radius:var(--r-md);background:var(--sage);color:var(--sage-ink);font-size:13px;font-weight:600;line-height:1.35}
@media(max-width:560px){.trust-strip{grid-template-columns:1fr;gap:8px}}
/* Footer: Smally for Mac (the header hides it on phones), the address to write to, and the licence notices. */
.page-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.page-foot a{text-wrap:wrap}

.counter-disclosure, .page-faq { margin: 24px 0; font-size: 13px; line-height: 1.55; }
.counter-disclosure summary, .page-faq summary { cursor: pointer; }
.counter-disclosure p, .page-faq p { margin: 10px 0; }
.page-faq details { margin: 6px 0; }