/* Review my portfolio: split card, one question per step (Dezerv "Step 1 of 4"
   pattern). Dark page + dark side panel, white working panel. Self-contained:
   does not depend on the homepage stylesheets. */
:root {
  --bg: #000000; --bg-2: #0B0B0C; --bg-3: #18181A;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --text: #FFFFFF; --mute: rgba(255,255,255,.72); --dim: rgba(255,255,255,.56);
  --card: #FFFFFF; --card-2: #F4F4F5; --ink: #0B0B0C; --ink-2: #47474C; --ink-3: #6B6B70;
  --line-ink: #E2E2E5; --line-ink-2: #D0D0D5; --sel: #F4F4F5; --warn: #B4412F; --ok: #2F7D4F;
  --f: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --spring: cubic-bezier(.2, .9, .25, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rv__panel :focus-visible { outline-color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* nav */
.rv-nav { max-width: 1180px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 700px) { .rv-nav { padding: 22px 32px; } }
.ic-logo { display: inline-flex; align-items: center; gap: .62em; font-family: "Poppins", "Geist", system-ui, sans-serif; font-size: 17px; color: var(--text); line-height: 1; text-decoration: none; min-height: 44px; }
.ic-logo__word { font-weight: 700; letter-spacing: .035em; }
.ic-logo__bar { width: 2px; height: 1.05em; background: #BE9338; border-radius: 1px; }
.ic-logo__cap { font-weight: 400; letter-spacing: .3em; margin-right: -.3em; opacity: .92; }
.rv-help { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 14px; transition: color .2s, border-color .2s; white-space: nowrap; }
.rv-help:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.rv-help .dot { width: 7px; height: 7px; border-radius: 50%; background: #3FBF6B; box-shadow: 0 0 0 3px rgba(63,191,107,.18); } /* semantic: online */

/* split card */
.rv { max-width: 1180px; margin: 8px auto 48px; display: grid; grid-template-columns: .82fr 1.18fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; min-height: 660px; }
@media (min-width: 700px) { .rv { margin: 8px 32px 64px; } }
@media (min-width: 1244px) { .rv { margin-inline: auto; } }
.rv__side { background: var(--bg-2); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; }
.rv__who { display: flex; align-items: center; gap: 14px; }
.rv__face { position: relative; flex: none; width: 64px; height: 64px; }
.rv__face img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--bg-3); }
.rv__cam { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg-2); }
.rv__name { display: grid; gap: 2px; min-width: 0; }
.rv__name b { font-weight: 500; font-size: 15.5px; }
.rv__name small { font-size: 13.5px; color: var(--dim); }
.rv__side h1 { font-size: clamp(28px, 2.7vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; margin-top: 26px; text-wrap: balance; }
.rv__meta { margin-top: 12px; font-size: 14.5px; color: var(--mute); }
.rv__meta span { margin: 0 6px; color: var(--dim); }
.rv__lede { margin-top: 14px; color: var(--mute); font-size: 15.5px; }
.rv__film { position: relative; margin-top: 28px; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.rv__film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.rv__play { position: absolute; inset: 0; display: block; width: 100%; text-align: left; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.rv__play:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 16px; }
.rv__playbtn { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 28px rgba(0,0,0,.45); transition: transform .25s var(--spring); }
.rv__playbtn svg { margin-left: 3px; }
.rv__play:hover .rv__playbtn { transform: scale(1.07); }
.rv__filmcap { position: absolute; left: 16px; right: 16px; bottom: 13px; display: grid; gap: 1px; }
.rv__filmcap b { font-weight: 500; font-size: 15px; }
.rv__filmcap small { font-size: 12.5px; color: rgba(255,255,255,.72); }
.rv__film.is-playing .rv__play { display: none; }
.rv__reg { margin-top: auto; padding-top: 30px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

.rv__panel { background: var(--card); color: var(--ink); padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; min-width: 0; outline: none; }
.rv__top { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-3); min-height: 38px; }
.rv__back { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-ink); color: var(--ink); display: grid; place-items: center; flex: none; transition: background .2s; }
.rv__back:hover { background: var(--card-2); }
.rv__count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv__bar { flex: 1; height: 4px; border-radius: 999px; background: #E8E8EA; overflow: hidden; }
.rv__bar i { display: block; height: 100%; width: 25%; background: var(--ink); border-radius: inherit; transition: width .6s var(--spring); }

.rv__step { margin-top: clamp(24px, 4.5vh, 44px); display: flex; flex-direction: column; animation: rvIn .45s var(--spring); min-width: 0; }
.rv__step[hidden] { display: none; }
@keyframes rvIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .rv__step { animation: none; } .rv__bar i { transition: none; } }
.rv__step h2 { font-size: clamp(25px, 2.6vw, 33px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; outline: none; }
.hint { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.hint b { color: var(--ink); font-weight: 500; }
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.link:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.err { color: var(--warn); font-size: 14px; margin-top: 12px; }
.err:empty { display: none; }
em { font-style: normal; color: var(--ink-3); }

.btn { margin-top: 24px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15.5px; text-decoration: none; transition: background .2s, transform .15s; }
.btn:hover { background: #2A2A2D; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-ink); }
.btn--ghost:hover { background: var(--card-2); }
.row-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.row-actions .btn { margin-top: 24px; }
.row-actions .link { margin-top: 24px; }

/* fields */
.field { display: grid; gap: 6px; margin-top: 18px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.field input, .field textarea, .rows input, .rows select { width: 100%; min-width: 0; border: 1px solid var(--line-ink); border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; }
.field input, .rows input, .rows select { height: 50px; padding: 0 14px; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 104px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .rows input:focus, .rows select:focus, .otp input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; }
.field input[aria-invalid="true"], .otp[aria-invalid="true"] input { border-color: var(--warn); }
.phone { display: flex; align-items: stretch; border: 1px solid var(--line-ink); border-radius: 12px; overflow: hidden; max-width: 360px; }
.phone:focus-within { outline: 2px solid var(--ink); border-color: transparent; }
.phone__cc { display: grid; place-items: center; padding: 0 14px; background: var(--card-2); color: var(--ink-2); font-size: 16px; border-right: 1px solid var(--line-ink); }
.phone input { border: 0; border-radius: 0; height: 52px; font-size: 18px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.phone input:focus { outline: none; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--ink); }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* otp */
.otp { border: 0; padding: 0; margin-top: 22px; display: flex; gap: 10px; }
.otp input { width: 52px; height: 60px; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums; border: 1px solid var(--line-ink); border-radius: 12px; color: var(--ink); background: #fff; min-width: 0; }
.dev { margin-top: 14px; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--card-2); color: var(--ink-2); align-self: flex-start; }

/* method cards */
.methods { border: 0; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.method { position: relative; cursor: pointer; }
.method input { position: absolute; opacity: 0; inset: 0; }
.method span { height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--line-ink); border-radius: 14px; transition: border-color .2s, background .2s; }
.method svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.method b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.method small { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.method:hover span { border-color: #B8B8BE; }
.method input:checked + span { border-color: var(--ink); background: var(--sel); box-shadow: inset 0 0 0 1px var(--ink); }
.method input:checked + span svg { stroke: var(--ink); }
.method input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pane { margin-top: 18px; min-width: 0; }
.pane[hidden] { display: none; }

/* upload */
.drop { border: 1.5px dashed var(--line-ink-2); border-radius: 16px; padding: 26px 18px; text-align: center; background: #FAFAFA; transition: border-color .2s, background .2s; }
.drop.is-over { border-color: var(--ink); background: var(--sel); }
.drop__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; }
.drop__btn:hover { background: #2A2A2D; }
#files:focus-visible + .drop__btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop p { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
.filelist { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; }
.filelist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-ink); border-radius: 12px; font-size: 14px; min-width: 0; }
.filelist .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist small { color: var(--ink-3); white-space: nowrap; }
.filelist li.bad { border-color: #E9C3BC; background: #FDF5F3; }
.filelist li.bad small { color: var(--warn); white-space: normal; }
.filelist button { width: 32px; height: 32px; border-radius: 50%; color: var(--ink-3); font-size: 18px; flex: none; }
.filelist button:hover { background: var(--card-2); color: var(--ink); }
.how { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.how summary { cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.how ul { margin-top: 8px; padding-left: 18px; display: grid; gap: 6px; }
.how b { font-weight: 500; color: var(--ink); }

/* manual rows */
.rows-head, .row { display: grid; grid-template-columns: 1.6fr 1fr .9fr 36px; gap: 8px; align-items: center; }
.rows-head { font-size: 12.5px; color: var(--ink-3); padding: 0 2px 6px; }
.rows { display: grid; gap: 8px; }
.row .del { width: 36px; height: 36px; border-radius: 50%; color: var(--ink-3); font-size: 20px; }
.row .del:hover { background: var(--card-2); color: var(--ink); }
.add { margin-top: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; padding: 8px 0; align-self: flex-start; }

/* chips */
.chips { border: 0; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line-ink); border-radius: 999px; font-size: 14.5px; transition: border-color .2s, background .2s; }
.chips input:checked + span { border-color: var(--ink); background: var(--sel); box-shadow: inset 0 0 0 1px var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt { font-size: 13.5px; padding: 7px 12px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); border: 1px dashed var(--line-ink-2); text-align: left; }
.prompt::before { content: "+ "; color: var(--ink-3); }
.prompt:hover { color: var(--ink); border-color: var(--ink); }
.prompt[aria-pressed="true"] { opacity: .5; }

.upl { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-3); }
.upl[hidden] { display: none; }
.upl__bar { flex: 1; max-width: 260px; height: 4px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.upl__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }

/* done */
.tick { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; margin-bottom: 18px; }
.tick svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.refbox { margin-top: 18px; padding: 14px 16px; background: var(--card-2); border-radius: 12px; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.refbox b { font-size: 18px; letter-spacing: .06em; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 18px 30px; display: grid; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-ink-2); background: #fff; }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: 2px; width: 1.5px; background: var(--line-ink); }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { background: var(--ink); border-color: var(--ink); }
.timeline b { font-weight: 500; font-size: 15px; }
.timeline small { color: var(--ink-3); font-size: 13.5px; }

.disc { margin-top: auto; padding-top: 30px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* responsive */
@media (max-width: 900px) {
  .rv { grid-template-columns: 1fr; min-height: 0; }
  .rv__side { padding-bottom: 26px; }
  .rv__reg { padding-top: 20px; }
}
@media (max-width: 640px) {
  .rv { margin: 4px 12px 32px; border-radius: 18px; }
  .rv__side h1 { font-size: 30px; }
  .methods { grid-template-columns: 1fr; }
  .method span { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 14px; }
  .method svg { grid-row: span 2; margin: 2px 0 0; }
  .two { grid-template-columns: 1fr; }
  .otp { gap: 6px; }
  .otp input { width: auto; flex: 1; height: 56px; max-width: 52px; }
  .rows-head { display: none; }
  .row { grid-template-columns: 1fr 1fr 36px; }
  .row .nm { grid-column: 1 / -1; }
  .row .unit { grid-column: 2; }
  .btn { width: 100%; justify-content: center; }
  .row-actions .btn { width: 100%; }
  .row-actions { gap: 0; }
  .row-actions .link { margin-top: 16px; }
}
@media (max-width: 380px) { .rv-help { padding: 8px 10px; font-size: 13px; } }
@media (max-width: 640px) { .ic-logo { font-size: 14px; gap: .5em; } .ic-logo__cap { letter-spacing: .22em; margin-right: -.22em; } }
@media (max-width: 440px) { .hide-sm { display: none; } }
.rv__back[hidden] { display: none; }
.rv__panel { color-scheme: light; }
.rv-help { gap: 0; }
.rv-help .dot { margin-right: 8px; }
/* phones: intro on top, the form next, the video and registration underneath */
@media (max-width: 640px) {
  .rv { background: var(--bg-2); display: flex; flex-direction: column; }
  .rv__side { display: contents; }
  .rv__side > * { margin-inline: 20px; }
  .rv__who { order: 0; padding-top: 22px; }
  .rv__side h1 { order: 1; margin-top: 18px; }
  .rv__meta { order: 2; font-size: 14px; }
  .rv__lede { order: 3; margin-top: 8px; margin-bottom: 20px; font-size: 15px; }
  .rv__panel { order: 4; }
  .rv__film { order: 5; margin-top: 24px; }
  .rv__reg { order: 6; padding: 20px 0 24px; }
}
@media (max-width: 640px) { .rows { gap: 12px; } .row { padding-bottom: 12px; border-bottom: 1px dashed var(--line-ink); } }

/* ── light theme (Oct 2026): page and side panel go to daylight tones; the white working panel stays white ── */
[data-theme="light"] {
  --bg: #F3F2EF; --bg-2: #FFFFFF; --bg-3: #ECEBE7;
  --line: rgba(14,12,10,.09); --line-2: rgba(14,12,10,.16);
  --text: #0E0C0A; --mute: rgba(14,12,10,.72); --dim: rgba(14,12,10,.58);
  color-scheme: light;
}
[data-theme="light"] :focus-visible { outline-color: #0E0C0A; }
[data-theme="light"] .rv-help:hover { border-color: rgba(14,12,10,.3); }
[data-theme="light"] .rv__panel { box-shadow: 0 0 0 1px rgba(14,12,10,.07), 0 24px 50px -30px rgba(40,38,34,.3); }
.rv-nav__end { display: flex; align-items: center; gap: 12px; }
/* theme toggle (same switch as the shared header; review.css is self-contained) */
.ic-toggle { position: relative; width: 52px; height: 28px; border-radius: 999px; border: 0; cursor: pointer; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); padding: 4px; display: inline-flex; }
.ic-toggle:focus-visible { outline: 1.5px solid var(--text); outline-offset: 3px; }
.ic-toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text); display: grid; place-items: center; transform: translateX(24px); transition: transform .35s var(--spring); }
[data-theme="light"] .ic-toggle__knob { transform: translateX(0); }
.ic-toggle__knob svg { width: 12px; height: 12px; color: var(--bg); }
.ic-toggle .ic-sun { display: none; } [data-theme="light"] .ic-toggle .ic-sun { display: block; } [data-theme="light"] .ic-toggle .ic-moon { display: none; }
@media (prefers-reduced-motion: reduce) { .ic-toggle__knob { transition: none; } }
.ic-toggle::after { content: ""; position: absolute; inset: -8px -4px; }   /* 44px+ hit area */
@media (max-width: 360px) { .rv-help { padding: 8px 10px; min-height: 44px; } .rv-nav__end { gap: 8px; } .rv-nav .ic-logo { font-size: 13px; } }
@media (max-width: 350px) { .rv-nav .ic-logo { font-size: 12px; gap: .4em; } .rv-nav .ic-logo__cap { letter-spacing: .14em; margin-right: -.14em; } .rv-help .dot { display: none; } .rv-help { padding: 8px; } }

/* Oct 5: back to the compact Dezerv-style card (the v2 landing page was rejected). One calm card,
   centred in the first screen; small headline, one question at a time. */
@media (min-width: 901px) {
  .rv { max-width: 1060px; min-height: 600px; grid-template-columns: .92fr 1.08fr; margin-top: clamp(8px, 3vh, 32px); }
  @media (min-width: 1124px) { .rv { margin-inline: auto; } }
  .rv__side { padding: 40px; }
  .rv__panel { padding: 40px 44px; }
}
.rv__side h1 { font-size: clamp(26px, 2.3vw, 31px); font-weight: 500; line-height: 1.15; margin-top: 22px; }
.rv__step h2 { font-size: clamp(23px, 2vw, 27px); font-weight: 500; }
.rv__lede { font-size: 15px; }
.rv__film { margin-top: 24px; }

/* what the visitor receives, under step 1 (16 Oct 2026) */
.rv__get { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(0,0,0,.08); display: grid; gap: 8px; }
.rv__get li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rv__get li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7'/%3E%3Cpath d='M4 7.2l2 2 4-4.4' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Ccircle cx='7' cy='7' r='7' fill='white'/%3E%3Cpath d='M4 7.2l2 2 4-4.4' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/mask%3E%3Ccircle cx='7' cy='7' r='7' mask='url(%23m)'/%3E%3C/svg%3E") center / 14px no-repeat; }