/* wearfits.me — app screens in the "Kampania" language shared with site/public/css/site.css.
   Archivo variable (wdth 62–125, wght 300–800). Headlines: condensed 62% · 800 · uppercase · tight.
   Square corners, 2px ink rules, black solid buttons, black panels as accents. Teal only on black.
   Layout system: project/design/DESIGN-NOTES.md, "Layout system". Order: tokens, base, type, components, screens,
   desktop (≥900), utilities LAST so that .mt-* and .mb-0 always win over a component's own margins. Light only. */

:root {
  color-scheme: light;
  --ground: #EDEAE4;
  --ink: #111;
  --muted: #3B3935;        /* 9.6:1 on ground */
  --muted-dark: #BDB7AD;   /* on ink: 9.9:1 */
  --brand: #00edc9;        /* on ink only: 12.55:1; never text or marks on ground/white */
  --white: #fff;
  --tone: #DDD8CF;         /* image plate placeholder */
  --danger: #8A1F17;       /* 7.9:1 on ground */
  --rule: 2px solid var(--ink);
  --hair: 1px solid #A8A197;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --page-max: 1200px;
  --gutter: 16px;
  --side: 360px;
  --page-top: 24px;
  --gap-section: 32px;
  --gap-block: 16px;
  --gap-tight: 8px;
  /* The one left and right edge: the header, the views, the strip and the banner all pad by this.
     Percent resolves against each full-width box, so a classic scrollbar can't shift anything. */
  --edge: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  --bar-h: 60px;
  --tap: 48px;
  --strip: #4A4741;        /* task strip: on it ground 7.71, muted-dark 4.65, teal 6.15; set apart from the black active tab */
  --cta-h: 0px;            /* Style's fixed button on phones */
  --strip-above: calc(62px + env(safe-area-inset-bottom));
  --font: Archivo, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* always a scrollbar: the strip's reserve can't move content sideways, and bars still reach the right edge */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scroll-padding-bottom: calc(var(--consent-h, 0px) + var(--strip-above) + var(--strip-now, 0px) + var(--cta-h)); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-stretch: 100%; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  padding-bottom: calc(var(--consent-h, 0px) + var(--strip-h, 0px)); /* --consent-h, --strip-h: consent-space.js, strip-space.js */
}
html[data-locale-pending="1"] body { visibility: hidden; }
button, input, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { opacity: 0.75; }
::selection { background: var(--brand); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
figure { margin: 0; }
p { margin: 0 0 var(--s4); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
strong, b { font-weight: 700; }

/* ---------- typography ---------- */
.h1, .h2, .h3, .plan .amount, .card .ttl, .item-title { font-stretch: 62%; font-weight: 800; text-transform: uppercase; }
.h1 { font-size: min(44px, 11.5vw); line-height: 0.9; letter-spacing: -0.005em; }
.h1 .h1-sub { font-weight: 400; color: var(--muted); }
.h2 { font-size: 32px; line-height: 0.95; overflow-wrap: break-word; }
.h3 { font-size: 26px; line-height: 0.95; overflow-wrap: break-word; }
.muted { color: var(--muted); }
.small { font-size: 15px; line-height: 1.5; }
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; }
.price { font-variant-numeric: tabular-nums; text-transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.danger { color: var(--danger); }
.nowrap { white-space: nowrap; }

/* ---------- shell ---------- */
.device { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); }
.device > main { flex: 1; min-width: 0; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
.saas-skip-link { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--ink); color: var(--ground); padding: var(--s3) var(--s4); }
.saas-skip-link:focus { left: var(--s2); top: var(--s2); }

.appbar {
  position: sticky; top: 0; z-index: 6;
  height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-inline: var(--edge); background: var(--ink); color: var(--ground);
  border-bottom: 1px solid #4A4741; /* keeps black content under the sticky bar, and the language panel, from merging with it */
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.appbar .wordmark:focus-visible, .appbar .row :focus-visible { outline-color: var(--ground); }
/* An outlined SVG; font-size sets its scale. */
.wordmark { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 28px; }
.wordmark img { width: auto; height: 0.714em; }
.appbar .row { flex: 0 0 auto; gap: var(--s2); }
.credits {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--s2);
  border: 1px solid var(--brand); background: var(--brand); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.appbar a.credits:hover { opacity: 0.85; }
@media (max-width: 360px) { .appbar .wordmark { font-size: 19px; } }
@media (max-width: 899px) { .credits[data-empty] { max-width: 96px; white-space: normal; text-align: center; line-height: 1.15; } }
.appbar .credits, .appbar .nav-account { height: 44px; }
.appbar .nav-account { display: inline-flex; align-items: center; font-weight: 600; letter-spacing: 0.06em; }
.credits b { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.credits[data-empty] { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.credits[data-empty] b { color: var(--ink); font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: var(--consent-h, 0px); z-index: 6;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ground); border-top: var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
  letter-spacing: 0.02em; font-size: 11.5px;
}
.tabbar a {
  position: relative; min-height: var(--bar-h); padding: 0 2px; display: flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: var(--muted);
}
.tabbar a[aria-current="page"] { color: var(--ground); background: var(--ink); }
.tabbar a[aria-current="page"]:hover { opacity: 1; }
.tabbar a:focus-visible { outline-offset: -4px; }
/* the count: a pseudo-element, because translations rewrite the tab's text. ::after is the desktop underline. */
.tabbar a[data-count]::before { content: "(" attr(data-count) ")"; order: 1; margin-left: 5px; font-weight: 800; color: var(--ink); }
.tabbar a[data-count][aria-current="page"]::before { color: inherit; }
.tabbar a[aria-current="page"]:focus-visible, .sheet-head :focus-visible, .plan.featured :focus-visible, .task :focus-visible { outline-color: var(--ground); }

/* Every view: one container, one left edge, one top offset. */
.view { padding: var(--page-top) var(--edge) var(--gap-section); }
main > .notice { margin: var(--gap-block) var(--edge) 0; }
.screen-head { margin-bottom: var(--gap-block); }
.screen-head > .label { color: var(--muted); margin-bottom: var(--s2); }
.screen-head .h1 + p { margin-top: var(--gap-block); margin-bottom: 0; }
.cols { display: flex; flex-direction: column; gap: var(--gap-section); }
.col-main, .col-side { min-width: 0; }
.side-box { border: var(--rule); padding: var(--s4); }
.side-box > :last-child { margin-bottom: 0; }
.recent-tryon { margin-top: var(--gap-block); }
.recent-tryon:first-child, .balance[hidden] + .recent-tryon { margin-top: 0; }
.recent-tryon h2 { margin-bottom: var(--s3); }
.recent-tryon-link { display: block; }
.recent-tryon-link img { display: block; width: 100%; height: auto; background: var(--tone); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px; padding: 0 var(--s5);
  border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--ground);
  font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
}
a.btn:hover { opacity: 1; }
.btn:hover { background: #2B2A28; border-color: #2B2A28; }
/* Solid black buttons only. :where keeps this at .btn:hover's weight, so .plan.featured .btn and .consent .btn still win.
   #twin-create submits the biometric consent and, like the cookie banner, stays neutral. */
@media (hover: hover) {
  .btn:where(:not(.btn-ghost, .danger, .btn-danger, [disabled], [aria-disabled="true"], #twin-create)):hover {
    background: var(--brand); border-color: var(--brand); color: var(--ink);
  }
}
.btn-buy { color: var(--brand); } /* the "get more" CTA; the solid hover and disabled state outrank it */
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { background: #CFC9BF; border-color: #CFC9BF; color: #4A4741; cursor: not-allowed; }
.btn-ghost[disabled] { background: transparent; border-color: #8F897F; color: #4A4741; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 44px; padding: 0 var(--s4); font-size: 12px; }
.btn-group { display: grid; gap: var(--s3); }
.btn-group.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.btn-group.cols-2 .btn { padding: var(--s2) var(--s3); } /* long Polish words must fit the half width */
.btn-group.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.btn-group.cols-3 .btn { min-width: 0; padding: var(--s2) var(--s1); font-size: clamp(12px, 3vw, 14px); letter-spacing: 0.03em; }
.btn.danger, .btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.danger:hover, .btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--ground); }
#confirm-ok.btn-danger { background: var(--danger); color: var(--ground); }

button.link, button.link-label, .btn-inline, button.link-row { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.25; text-decoration: underline; text-underline-offset: 4px; }
.link[disabled] { color: var(--muted); cursor: not-allowed; }
.link-label {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; text-decoration: none;
}
.link-label.go::after { content: "\2192"; margin-left: var(--s2); letter-spacing: 0; }
.btn-inline { min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.link-row { display: flex; width: 100%; min-height: 60px; align-items: center; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.wrap-row { flex-wrap: wrap; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.stack > * + * { margin-top: var(--gap-block); }

/* ---------- forms ---------- */
.field { display: block; }
.field > .label { display: block; margin-bottom: var(--s2); }
.input-row { position: relative; display: flex; align-items: stretch; border: var(--rule); background: var(--white); }
.input-row:focus-within { box-shadow: 0 0 0 1px var(--ink); }
.input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font-size: 17px; }
.input::placeholder { color: #6B665E; }
.input:focus, .input:focus-visible { outline: none; }
.input-row .btn-inline { padding: 0 var(--s4); background: var(--ink); color: var(--ground); }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.input-row:has(select)::after { content: "\2193"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-weight: 700; }
input[type="number"].input { -moz-appearance: textfield; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; min-height: var(--tap); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0;
  border: var(--rule); border-radius: 0; background: var(--white); cursor: pointer; display: grid; place-items: center;
}
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid var(--ground); border-bottom: 2px solid var(--ground); transform: rotate(-45deg); }
.check span { font-size: 15px; line-height: 1.5; }

.segmented { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.segmented legend { padding: 0; margin-bottom: var(--s2); }
.segmented label { display: flex; align-items: center; justify-content: center; min-height: 52px; border: var(--rule); cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.segmented label + label { border-left: 0; }
.segmented input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked), .chips label:has(input:checked) { background: var(--ink); color: var(--ground); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0 0 var(--s2); }
.chips-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 2px; }
.chips-row > .chips-auto { grid-column: 1 / -1; border-bottom: 0; }
.chips label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2px; border: var(--rule); margin-left: -2px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; }
.chips:disabled label { opacity: 0.5; cursor: default; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }

/* ---------- image plates ---------- */
.plate { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--tone); display: flex; align-items: flex-end; justify-content: center; }
.plate[data-center] { align-items: center; }
.plate.t2 { background: #D3CDC2; }
.plate.t3 { background: var(--white); }
.plate.wide-plate { aspect-ratio: 4 / 3; }
.plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.thumb img { object-fit: contain; background: var(--white); }
.plate .tag { position: absolute; top: 0; left: 0; z-index: 1; padding: 6px 10px; background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.plate .tag-r { left: auto; right: 0; background: var(--ground); color: var(--ink); }
.plate .tag-new { color: var(--brand); }
/* AI notice on the main result image. */
.ai-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; color: var(--ink); }
.plate .ai-tag { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 3px 8px; background: rgba(237, 234, 228, 0.9); max-width: 100%; }
.img-missing { align-self: center; margin: auto; padding: var(--s2); text-align: center; }
.upload { display: block; cursor: pointer; }
.upload .plate { border: 2px dashed var(--ink); }
.upload:focus-within .plate { outline: 2px solid var(--ink); outline-offset: 2px; }
.upload .plate.drag-over { outline: 3px solid var(--ink); outline-offset: 2px; border-style: solid; }
.upload-plate { display: flex; }
[data-view="tryon"].drag-over, [data-view="style"].drag-over { outline: 3px dashed var(--ink); outline-offset: -6px; }

.progress { height: 4px; background: var(--ink); position: relative; overflow: hidden; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: var(--brand); }
.queue-progress { display: block; margin-top: 8px; }
.progress-waiting > i { width: 30%; animation: waiting-progress 1.6s ease-in-out infinite alternate; }
@keyframes waiting-progress { from { left: 0; } to { left: 70%; } }
#url-status::before, #style-add-status.is-loading::before, [data-tab="tryon"][data-busy]::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px;
  margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: activity-spin .8s linear infinite;
}
[data-tab="tryon"][data-busy]::before { width: 11px; height: 11px; margin: 0 6px 0 0; }
[data-tab="tryon"][data-blocked]::before { content: "!"; display: inline-block; margin-right: 6px; color: var(--brand); font-weight: 700; }
.queue-blocker { display: block; padding: var(--s2); border-left: 3px solid var(--danger); background: #F6E4E1; color: #691F17; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { background: #D3CDC2; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .progress-waiting { display: none; } /* waiting copy remains; a frozen partial fill would look like a percentage */
}

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.list > li { border-bottom: var(--hair); }
.list > li:last-child { border-bottom: var(--rule); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 60px; padding: var(--s2) 0; margin: 0; }
.kv > :last-child:not(:first-child) { text-align: right; }
.notice { border: var(--rule); padding: var(--s4); margin: 0; }
.notice a:not(.btn) { color: inherit; }
.msg { overflow-wrap: break-word; margin: 0; }
.msg a:not(.btn) { color: inherit; }
.msg.error { color: var(--danger); font-weight: 600; border-left: 4px solid var(--danger); padding-left: var(--s3); }
.danger-box { border-color: var(--danger); background: #F6E4E1; }
.field-error { display: block; margin-top: var(--s2); font-size: 14px; }

/* The shared row: thumbs on one vertical, actions on another, a hairline between rows. */
.item-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: var(--s4); align-items: start;
  width: 100%; padding: var(--s3) 0; text-align: left; color: inherit;
}
.item-row + .item-row { border-top: var(--hair); }
.list > li.item-row + li.item-row { border-top: 0; } /* the list item already draws the hairline */
.item-thumb { position: relative; display: flex; width: 72px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); }
.item-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.item-thumb .img-missing { font-size: 10px; letter-spacing: 0; padding: 2px; }
.item-text { display: grid; gap: 2px; min-width: 0; align-content: start; }
.item-title { font-size: 21px; line-height: 1; overflow-wrap: break-word; }
.item-hint { font-size: 15px; line-height: 1.35; color: var(--muted); }
.item-text .price { font-size: 15px; font-weight: 700; }
.item-text .label { overflow-wrap: break-word; }
.item-action { justify-self: end; text-align: right; white-space: nowrap; }
.item-below { grid-column: 1 / -1; margin-top: var(--s2); }
.item-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.item-row.small-thumb { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--s3); }
.small-thumb .item-thumb { width: 56px; }
.item-row.shot { grid-template-columns: 96px minmax(0, 1fr) auto; }
.item-row.shot .item-thumb { width: 96px; aspect-ratio: 9 / 16; }
/* The action drops under the text where a long one would squeeze the title. */
@media (max-width: 479px) {
  .item-row.action-below { grid-template-columns: 72px minmax(0, 1fr); }
  .item-row.action-below .item-action { grid-column: 2; justify-self: start; }
}

.empty { display: grid; justify-items: start; gap: var(--gap-block); }
.grid-empty { grid-column: 1 / -1; }
.empty p { margin: 0; max-width: 34em; }
.card-status { display: block; margin-top: var(--s1); font-size: 14px; font-weight: 600; }

/* ---------- try on ---------- */
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.thumb { padding: 0; border: var(--hair); background: var(--white); aspect-ratio: 3 / 4; cursor: pointer; position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; }
.thumb[aria-pressed="true"] { border: 3px solid var(--ink); }
.has-product #url-hint, .has-product #look-hint { display: none; }
.product-card { border: var(--rule); background: var(--white); padding: 0 var(--s3); }
.picker-photos { padding-bottom: var(--s3); }
.how { list-style: none; counter-reset: how; margin: 0 0 var(--gap-block); padding: 0; display: grid; gap: var(--s3); }
.how li { counter-increment: how; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); font-size: 15px; line-height: 1.35; align-items: baseline; }
.how li::before { content: counter(how); font-stretch: 62%; font-weight: 800; font-size: 21px; line-height: 1; }
.side-head { margin: var(--gap-block) 0 var(--s1); }
.side-head:first-child { margin-top: 0; }
.side-slot { margin-top: var(--s2); }
.side-slot select.input { min-height: 44px; font-size: 15px; }

/* ---------- wizard ---------- */
.wiz-progress { display: flex; gap: 4px; }
.wiz-progress i { flex: 1; height: 4px; background: var(--tone); }
.wiz-progress i.on { background: var(--ink); }
.wiz-plate { position: relative; display: grid; place-items: center; min-height: 220px; padding: var(--s4); background: var(--white); border: 2px dashed var(--ink); text-align: center; }
.wiz-plate #selfie-prompt { display: grid; gap: var(--s1); justify-items: center; }
.wiz-plus { font-stretch: 62%; font-size: 40px; font-weight: 800; line-height: 1; }
.wiz-photo:empty { display: none; }
.wiz-photo { width: 150px; }
.wiz-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.wiz-body { display: flex; align-items: center; gap: var(--s3); }
.wiz-body-plate { flex: none; width: 54px; }
.wiz-body-plate:empty { display: none; }
.wiz-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--gap-block); }
.wiz-nav .btn { width: 100%; padding: 0 var(--s2); }
.wiz-first { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--gap-block); }
.wiz-first .btn { flex: 1; max-width: 240px; }
.wizard-form > #wiz-waiting { order: -1; }

/* ---------- style ---------- */
#style-error { margin-bottom: var(--s2); }
.bag-note { margin: var(--s1) 0 0; text-align: right; }
.slot-group { margin: var(--gap-block) 0 0; padding-bottom: var(--s2); border-bottom: var(--rule); }
.slot-group:first-child { margin-top: 0; }
.slot-or { display: flex; align-items: center; gap: var(--s3); margin: var(--gap-block) 0; color: var(--muted); text-transform: none; }
.slot-or::before, .slot-or::after { content: ""; flex: 1; border-top: var(--hair); }
.slots-shoes { margin-top: var(--gap-section); }
.slot-row { border-top: var(--hair); }
.slot-group + .slot-row { border-top: 0; }
.slot-plus { align-items: center; justify-content: center; background: transparent; border: 2px dashed var(--ink); font-stretch: 62%; font-weight: 800; font-size: 32px; line-height: 1; }
/* The side that doesn't count: the row keeps its geometry, only the look changes. */
.slot-row.parked .item-thumb > img { filter: grayscale(1); opacity: 0.5; }
.slot-row.parked .item-text, .slot-row.parked .item-title { color: var(--muted); }
.slot-note { display: grid; gap: var(--s2); justify-items: start; padding: var(--s3) 0; border-top: var(--hair); }
.picker { list-style: none; margin: 0; padding: 0; border-top: var(--rule); border-bottom: var(--rule); }
.picker > li + li { border-top: var(--hair); }
.pick.item-row { background: none; border: 0; cursor: pointer; }
.pick.item-row:hover { background: var(--white); }
.pick[aria-pressed="true"] .item-title { text-decoration: underline; text-decoration-thickness: 2px; }
.pick[aria-pressed="true"]::after { content: "\2713"; font-weight: 800; align-self: center; }
.pick.none { width: 100%; padding: 0; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; min-height: 44px; color: var(--danger); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* the pasted piece: its category, what it replaced, or the pasted photo waiting for a category */
.add-strip { border: var(--rule); padding: var(--s3); background: var(--white); }
.add-strip .plate.wide-plate { aspect-ratio: 5 / 2; }
.add-strip .upload-plate .label { padding: 0 var(--s3); text-align: center; }
.add-replaced { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); margin-top: var(--s2); }
.add-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.add-photo .upload-plate { aspect-ratio: 1; }
.add-photo .plate > img { object-fit: contain; }
.add-actions { display: flex; justify-content: center; margin-top: var(--s1); }

/* ---------- result: the image sets the column, by the viewport height; a placeholder holds the same box ---------- */
.result-cols { --shot-h: max(320px, calc(100svh - 280px)); display: flex; flex-direction: column; gap: var(--gap-block); align-items: flex-start; }
.result-side { width: 100%; min-width: 0; }
.result-history-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.result-history-link { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; text-decoration: none; overflow-wrap: anywhere; }
.result-history-link > .small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.result-history-image { display: grid; gap: var(--s1); }
.result-history-image > img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: var(--tone); }
@media (max-width: 359px) { .result-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.result-fig { width: 100%; }
.result-fig .plate { background: var(--tone); }
/* Phone: the plate fills the column, the render centred inside it on its backdrop colour. */
.result-fig .plate:has(> img) { display: flex; justify-content: center; aspect-ratio: auto; width: 100%; background: #F3F3F6; }
.result-fig .plate > img { position: static; display: block; width: auto; max-width: 100%; height: auto; max-height: var(--shot-h); aspect-ratio: auto 9 / 16; }
.plate.result-fig { aspect-ratio: auto; height: var(--shot-h); }
.result-progress .result-side { order: -1; }
.result-bar { height: 8px; }
.result-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.result-pieces .item-thumb { width: 44px; flex: none; }
.result-pieces p { flex: 1 1 10em; min-width: 0; overflow-wrap: break-word; }
.look-rows { border-bottom: var(--rule); }
.result-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); margin: var(--s3) 0 0; }
.tile-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 6px var(--s2); background: var(--ink); color: var(--ground); font-size: 12px; line-height: 1.25; }
.tile-over .progress { display: block; margin-top: 4px; background: #3A3A3A; }

/* ---------- mine ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule); }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.seg a[aria-current] { background: var(--ink); color: var(--ground); }
.seg a[aria-current]:hover { opacity: 1; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
.card { margin: 0; text-decoration: none; display: block; min-width: 0; }
/* Uniform tall tile; a render of any proportions shows whole, head to feet, on a backdrop-like white. */
.card .plate { aspect-ratio: 9 / 16; background: var(--white); }
.card .plate > img { object-fit: contain; object-position: 50% 50%; }
/* Keep spare space around generated shots close to their pale studio backdrop. */
.card-rendered .plate { background: #F3F3F6; }
.card .ttl { display: block; font-size: 21px; line-height: 1; margin-top: var(--s3); overflow-wrap: break-word; }
.card .sub { display: block; font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: var(--s1); overflow-wrap: break-word; }
.card:hover .ttl { text-decoration: underline; text-decoration-thickness: 2px; }
#mine-live { margin-bottom: var(--gap-section); padding-bottom: var(--gap-section); border-bottom: var(--rule); }
#mine-live > .label { margin-bottom: var(--gap-block); }
.mine-entries { margin-top: var(--gap-block); }
#gallery-count { margin-bottom: var(--gap-block); }
.saved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.saved-actions .btn { margin-right: var(--s1); }
.saved-editor { display: block; margin-top: var(--s3); max-width: 360px; }
.saved-editor .saved-actions { margin-top: var(--s2); }

/* ---------- bag ---------- */
.bag-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-section); }
.bag-shop-head { padding-bottom: var(--s3); align-items: baseline; flex-wrap: wrap; gap: 0 var(--s3); }
.bag-shop-head .label { flex: none; white-space: nowrap; }
.bag-item .item-title { font-size: 24px; }
.shopping-item { grid-template-columns: 192px minmax(0, 1fr); }
.shopping-media { display: flex; gap: var(--s2); align-items: flex-start; }
.shopping-photo, .shopping-shot { display: grid; gap: var(--s1); min-width: 0; width: 88px; text-decoration: none; }
.shopping-media .item-thumb { width: 88px; }
.shopping-shot .item-thumb { aspect-ratio: 9 / 16; }
.shopping-media .fine { font-size: 11px; line-height: 1.3; }
.shopping-item .item-text { gap: var(--s2); }
.shopping-item .bag-open { justify-self: start; }
@media (max-width: 599px) {
  .shopping-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .tabbar a[data-tab="mine"] { font-size: 10px; letter-spacing: 0; flex-wrap: wrap; align-content: center; }
}
.bag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin-top: var(--s2); }
.bag-remove { color: var(--muted); }
.check.bag-bought { display: inline-grid; padding: 0; min-height: 44px; align-items: center; grid-template-columns: 24px auto; gap: var(--s2); }
.bag-bought input { margin: 0; }
.bag-bought span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bag-sub { min-height: 0; padding: var(--s3) 0 0; align-items: baseline; }
.balance.low .btn { margin-top: var(--s3); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: var(--s3); }
.plan { border: var(--rule); padding: var(--s5) var(--s4); display: flex; flex-direction: column; min-width: 0; }
.plan .amount { font-size: 56px; line-height: 0.9; margin-bottom: 0; text-transform: none; white-space: nowrap; }
.plan .amount small { font-stretch: 100%; font-weight: 500; font-size: 18px; text-transform: none; }
.plan ul { list-style: none; margin: var(--s4) 0 var(--s5); padding: 0; border-top: var(--hair); }
.plan li { padding: var(--s2) 0; border-bottom: var(--hair); font-size: 15px; }
.plan > .btn:first-of-type { margin-top: auto; }
.plan.featured { background: var(--ink); color: var(--ground); }
.plan.featured li { border-bottom-color: #4A4741; }
.plan.featured ul { border-top-color: #4A4741; }
.plan.featured .amount { color: var(--brand); }
.plan.featured .amount small, .plan.featured .muted { color: var(--muted-dark); }
.plan.featured .btn { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.plan.featured .btn[disabled] { background: transparent; color: var(--muted-dark); border-color: var(--muted-dark); }
.plan .flag { padding: 4px 10px; border: 1px solid currentColor; font-size: 12px; white-space: nowrap; }
#balance-list:empty { display: none; }

/* ---------- account ---------- */
.account-shell { position: relative; }
.menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: var(--s2); display: grid; background: var(--ground); border: var(--rule); padding: var(--s3) var(--s4); }
.menu p { margin: 0 0 var(--s2); }
.menu-item { min-height: var(--tap); background: none; border: 0; border-top: var(--hair); text-align: left; cursor: pointer; font-size: 15px; color: var(--ink); }
.menu-item.danger { color: var(--danger); }
.link-row.between { align-items: center; }
.link-row > span:first-child { min-width: 0; }
.link-row .label { flex: none; text-align: right; }
.row-details > summary { list-style: none; cursor: pointer; }
.row-details > summary::-webkit-details-marker { display: none; }
.row-details[open] .small { margin-bottom: var(--s3); }

/* ---------- dialogs: one heading size, one aligned column ---------- */
dialog { background: var(--ground); color: var(--ink); border: var(--rule); border-radius: 0; padding: var(--s5); width: calc(100% - 32px); max-width: 460px; }
dialog::backdrop { background: rgba(17, 17, 17, .6); }
#confirm-msg { font-stretch: 100%; font-weight: 700; font-size: 20px; line-height: 1.3; text-transform: none; }
dialog.sheet { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding-top: 0; }
.sheet-head { position: sticky; top: 0; z-index: 2; align-items: center; margin: 0 calc(var(--s5) * -1) var(--s4); padding: 0 var(--s5); background: var(--ink); color: var(--ground); min-height: 52px; }
dialog.sheet-bottom { margin: auto auto 0; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-width: 2px 0 0; }
/* Sign-in dialog: the "Check your email" screen shows only what it needs. */
#login-sent:not([hidden]) ~ .login-form-only { display: none; }
#nocredits-dialog .stack > .link { display: flex; width: fit-content; }
.passkeys-list li { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s3) 0; }
.passkeys-list button { background: none; border: 0; color: var(--danger); cursor: pointer; min-height: var(--tap); }
.passkey-meta { display: grid; }

/* ---------- consent banner + toast ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--edge) calc(10px + env(safe-area-inset-bottom)); max-height: 42vh; overflow-y: auto; background: var(--ink); color: var(--ground); }
.consent .fine { color: var(--muted-dark); }
.consent .small { font-size: 13px; line-height: 1.35; margin: 0 0 var(--s1); }
.consent .fine { font-size: 12px; line-height: 1.35; margin: 0 0 var(--s2); }
.consent .btn { min-height: 44px; padding: 6px; font-size: 12px; background: var(--ground); color: var(--ink); border-color: var(--ground); }
.consent .btn-ghost { background: transparent; color: var(--ground); }
.consent .btn-ghost:hover { background: var(--ground); color: var(--ink); }
.consent .btn-group { gap: var(--s2); }
.consent .btn-inline { grid-column: 1 / -1; justify-self: center; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.consent :focus-visible { outline-color: var(--ground); }
.consent .check { padding: 2px 0; }
.consent .check input { border-color: var(--ground); background: transparent; }
.consent .check input:checked { background: var(--ground); }
.consent .check input:checked::after { border-color: var(--ink); }
.consent-more { margin: 0 0 var(--s2); }
.consent-more summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; text-decoration: underline; width: fit-content; color: var(--muted-dark); }
.consent-more[open] p { margin-bottom: var(--s2); }
.toast { position: fixed; left: 50%; bottom: calc(76px + var(--strip-now, 0px) + var(--cta-h)); transform: translateX(-50%); z-index: 40; width: calc(100% - 32px); max-width: 460px; margin: 0; padding: var(--s3) var(--s4); background: var(--ink); color: var(--ground); font-size: 15px; font-weight: 600; }
.toast[data-kind="error"] { background: var(--danger); }
/* Taller tap target without changing the line height of the message. */
.toast a { display: inline-block; margin: -12px 0; padding: 12px var(--s1); color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.toast a:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.storage-check { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; }

/* ---------- language menu: same look as the site's .lp-lang; panel joined to the button so hover survives ---------- */
.lang-desktop { display: none; }
button.language-switch { background: none; border: 0; padding: 0; cursor: pointer; }
.lang-menu { position: relative; flex: none; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ground); cursor: pointer; }
.lang-menu.is-open .lang-btn { background: var(--ground); color: var(--ink); }
.lang-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 8; width: 130px; flex-direction: column; border: 1px solid var(--ground); background: var(--ink); }
.lang-menu.is-open .lang-panel { display: flex; }
.lang-panel button.lang-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 12px 10px; border: 0; background: transparent; color: var(--ground); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; }
.lang-panel button.lang-opt + .lang-opt { border-top: 1px solid #4A4741; }
.lang-panel button.lang-opt[aria-current] { color: var(--brand); }
.lang-panel button.lang-opt:hover { background: #2A2825; }
.lang-opt span:last-child { font-weight: 400; letter-spacing: 0; }

/* ---------- task strip: fixed above the tab bar, so it never moves the page; strip-space.js reserves its height ---------- */
.task-strip { position: fixed; left: 0; right: 0; bottom: calc(var(--consent-h, 0px) + var(--strip-above)); z-index: 5; max-height: 45vh; overflow-y: auto; background: var(--strip); color: var(--ground); }
.task { display: block; position: relative; padding: var(--s2) var(--edge); }
.task + .task { border-top: 1px solid var(--muted-dark); }
.task-link { color: inherit; text-decoration: none; }
.task-link::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the try-on; its actions sit above */
.task-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; }
.task-title { display: flex; justify-content: space-between; gap: var(--s3); margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.task-side { flex: none; color: var(--muted-dark); font-weight: 400; max-width: 45%; text-align: right; }
.task-what { font-weight: 400; color: var(--muted-dark); }
.task-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: var(--muted-dark); }
.task-bar { margin-top: 6px; background: var(--ink); }
.task-act { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.task.done .task-title > :first-child > span:first-child { color: var(--brand); }
.task.done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.task.done .task-title { flex: 1 1 12em; min-width: 0; }
.task.done .task-act { justify-content: center; padding: 0 var(--s4); background: var(--brand); color: var(--ink); font-size: 14px; text-decoration: none; }
.task.fail { background: var(--danger); color: #fff; }
.task.fail .task-sub, .task.fail .task-side, .task.fail .task-what { color: #fff; }
.task.blocked { border-left: 4px solid var(--brand); }
.task.blocked .task-title > :first-child::before { content: "! "; color: var(--brand); font-weight: 700; }
.task-more { font-size: 13px; color: var(--muted-dark); }

/* =================== phones and tablets only =================== */
@media (max-width: 899px) {
  .style-cta { border: 0; padding: 0; }
  .balance.low { border: 0; padding: 0; }
  .empty .btn { width: 100%; }
  /* Style's button stays on screen above the tab bar, the strip and the banner; the page reserves its height. */
  [data-view="style"] { padding-bottom: calc(var(--gap-section) + var(--cta-h)); }
  .style-bar { position: fixed; left: 0; right: 0; z-index: 4; bottom: calc(var(--consent-h, 0px) + var(--strip-above) + var(--strip-now, 0px)); padding: var(--s2) var(--edge); background: var(--ground); border-top: var(--rule); }
  /* The waiting piece stays small above the wizard; its note is for the side box. */
  #wiz-waiting { padding: var(--s2); }
  #wiz-waiting > p { display: none; }
  #wiz-waiting .item-row { grid-template-columns: 36px minmax(0, 1fr); padding: 0; align-items: center; }
  #wiz-waiting .item-thumb { width: 36px; }
  #wiz-waiting .item-title { font-size: 17px; }
}

/* =================== desktop ≥ 900px =================== */
@media (min-width: 900px) {
  :root { --gutter: 40px; --page-top: 40px; --gap-section: 48px; --bar-h: 60px; --strip-above: 0px; }

  .device > main { padding-bottom: 0; }
  .appbar { gap: var(--s4); }
  .wordmark { font-size: 30px; }
  .appbar .row { gap: var(--s5); }
  .lang-desktop { display: inline-flex; }
  .lang-phone { display: none; }
  /* A new visitor's compact phone offer becomes its full label on desktop. */
  .credits { padding: 0 var(--s3); }
  .credits::after { content: attr(data-word); }
  .credits[data-empty] b, .credits[data-offer] b { display: none; }
  /* the bottom tab bar becomes the top nav: middle item of the app bar row */
  .tabbar {
    position: static; flex: 1 1 auto; min-width: 0; align-self: stretch;
    display: flex; justify-content: flex-start; gap: 0; padding: 0; background: transparent; border-top: 0;
    overflow-x: auto; scrollbar-width: none; /* long labels scroll instead of overlapping Account/credits */
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  }
  .tabbar a { min-height: 0; padding: 0 var(--s3); height: 100%; white-space: nowrap; color: var(--muted-dark); }
  .tabbar a[aria-current="page"] { background: transparent; color: var(--ground); }
  .tabbar a:focus-visible, .tabbar a[aria-current="page"]:focus-visible { outline-color: var(--ground); }
  .tabbar a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 14px; border-top: 3px solid currentColor; }
  .tabbar a[data-count]::before { color: var(--ground); }

  .h1 { font-size: 64px; line-height: 0.88; }
  .h2 { font-size: 40px; line-height: 0.9; }
  .view { padding-bottom: var(--s8); }

  /* Narrow pages end where the main column of .cols ends; pricing's text where the second plan ends. */
  .narrow { max-width: calc(100% - var(--side) - var(--s8)); }
  .two-plans { max-width: calc((100% - 2 * var(--s4)) * 2 / 3 + var(--s4)); }
  .item-below { grid-column: 2 / -1; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--s8); align-items: start; }
  .col-side { position: sticky; top: calc(var(--bar-h) + var(--s5)); }
  /* Portrait plus tools can exceed a laptop viewport: let the whole column scroll naturally. */
  .col-side.recent-tryon-side:has(.recent-tryon:not([hidden])) { position: static; }
  .wizard-form > #wiz-waiting { order: 0; }

  .thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
  #mine-seg { max-width: 420px; }
  .item-row.shot { grid-template-columns: 128px minmax(0, 1fr) auto; column-gap: var(--s5); }
  .item-row.shot .item-thumb { width: 128px; }
  .plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
  .plan { padding: var(--s6) var(--s5); }
  .plan .amount { font-size: 64px; }

  .result-cols { --shot-w: calc(min(var(--page-max), 100vw - 2 * var(--gutter)) - var(--s7) - 400px); /* the side column keeps at least 400 px */
    --shot-h: min(max(320px, calc(100vh - 72px - 2 * var(--page-top))), calc(var(--shot-w) * 16 / 9)); display: grid; grid-template-columns: fit-content(var(--shot-w)) minmax(0, 1fr); column-gap: var(--s7); align-items: start; }
  .result-fig { width: auto; }
  .result-fig .plate:has(> img) { display: block; width: fit-content; max-width: 100%; }
  .result-fig .plate > img { height: var(--shot-h); max-width: var(--shot-w); object-fit: contain; }
  .plate.result-fig { width: auto; aspect-ratio: 9 / 16; }
  .result-progress .result-side { order: 0; }

  dialog.sheet-bottom { margin: auto; border-width: 2px; width: calc(100% - 32px); }

  .toast { bottom: calc(24px + var(--strip-now, 0px)); }
  .consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s7); align-items: center; max-height: none; padding-block: var(--s4); }
  .consent > p, .consent > .consent-more { grid-column: 1; margin: 0; }
  .consent .small { font-size: 15px; }
  .consent .fine { font-size: 14px; }
  .consent .btn-group { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: none; grid-auto-flow: column; align-items: center; gap: var(--s3); }
  .consent .btn { padding: 0 var(--s4); white-space: nowrap; }
  .consent .btn-inline { grid-column: auto; }
  .consent [data-saas="gdpr.consent.panel"] { grid-column: 1 / -1; display: flex; gap: var(--s5); align-items: center; margin-top: var(--s3); }
  .consent [data-saas="gdpr.consent.panel"] .btn { width: auto; }

  .task { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: center; }
  .task > * { grid-column: 1; }
  .task .task-actions { grid-column: 2; grid-row: 1 / span 3; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .appbar { gap: var(--s3); }
  .appbar .row { gap: var(--s3); }
  .tabbar { font-size: 12px; letter-spacing: 0.02em; }
  .tabbar a { padding-inline: var(--s2); }
  .credits { padding-inline: 10px; }
}

.pricing-currency { display: flex; align-items: center; gap: var(--s3); font-size: 14px; }
.pricing-currency select { min-height: 44px; padding: 8px 12px; border: var(--hair); background: var(--ground); }

/* ---------- utilities: last, so they beat any component margin ---------- */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }