@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");

/* ===== Core (core) ===== */
/* Soft — a tiny interface library. Flat, round, calm, with a little bounce.
   Usage: <link rel="stylesheet" href="soft.css"> + optional <script src="soft.js" defer></script>
   Dark mode: <html data-sf-theme="dark"> */



/* ---------- Tokens ---------- */
:root {
  --sf-bg: #F5F5F7;
  --sf-surface: #FFFFFF;
  --sf-ink: #111111;
  --sf-on-ink: #FFFFFF;
  --sf-muted: #6E6E76;
  --sf-fill: #EBEBEE;
  --sf-line: #D9D9DE;
  --sf-danger: #E5484D;
  --sf-radius: 16px;
  --sf-radius-lg: 28px;
  --sf-pill: 999px;
  --sf-ease: cubic-bezier(.2, .8, .2, 1);
  --sf-spring: cubic-bezier(.3, 1.7, .5, 1);
  --sf-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-sf-theme="dark"] {
  --sf-bg: #0B0B0D;
  --sf-surface: #17171A;
  --sf-ink: #F2F2F5;
  --sf-on-ink: #0B0B0D;
  --sf-muted: #9A9AA3;
  --sf-fill: #232327;
  --sf-line: #2E2E33;
}

/* ---------- Base ---------- */
.sf, .sf * { box-sizing: border-box; }
.sf { font-family: var(--sf-font); color: var(--sf-ink); background: var(--sf-bg); -webkit-font-smoothing: antialiased; }
.sf-muted { color: var(--sf-muted); }
.sf-link { color: var(--sf-ink); text-decoration: none; font-weight: 500; display: inline-block; transition: transform .3s var(--sf-spring); }
.sf-link:hover { transform: translateY(-3px) rotate(-3deg); }

/* ---------- Scrollbars: thin, quiet, theme-aware ----------
   Everything inside .sf (and html.sf) gets a slim rounded scrollbar instead of the system default.
   Add .sf-noscrollbar to hide it entirely on scrollers that have their own affordance (arrows, drag, fades). */
html.sf, .sf, .sf * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sf-ink) 22%, transparent) transparent; }
.sf ::-webkit-scrollbar, html.sf::-webkit-scrollbar { width: 10px; height: 10px; }
.sf ::-webkit-scrollbar-track, .sf ::-webkit-scrollbar-corner { background: transparent; }
.sf ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sf-ink) 20%, transparent); background-clip: content-box; border: 3px solid transparent; border-radius: 999px; }
.sf ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--sf-ink) 38%, transparent); }
.sf-noscrollbar, .sf .sf-noscrollbar { scrollbar-width: none; }
.sf-noscrollbar::-webkit-scrollbar { display: none; }

/* ---------- Button ---------- */
.sf-btn {
  font: inherit; font-size: 16px; font-weight: 600;
  min-height: 48px; padding: 0 26px; cursor: pointer; border: 0;
  border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .2s var(--sf-spring), background .2s ease, opacity .2s ease;
}
.sf-btn:hover { transform: scale(1.05); }
.sf-btn:active { transform: scale(1.12, .84); }
.sf-btn:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-btn[disabled], .sf-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.sf-btn--light { background: var(--sf-fill); color: var(--sf-ink); }
.sf-btn--ghost { background: transparent; color: var(--sf-ink); box-shadow: inset 0 0 0 2px var(--sf-line); }
.sf-btn--danger { background: var(--sf-danger); color: #fff; }
.sf-btn--sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.sf-btn--lg { min-height: 58px; padding: 0 34px; font-size: 18px; }
.sf-btn--icon { width: 48px; padding: 0; }
.sf-btn--wrap { position: relative; display: inline-block; } /* wrapper that hosts confetti */

/* ---------- Field, Input, Textarea ---------- */
.sf-field { display: flex; flex-direction: column; gap: 8px; }
.sf-label { font-size: 14px; font-weight: 600; }
.sf-hint { font-size: 13px; color: var(--sf-muted); }
.sf-error { font-size: 13px; color: var(--sf-danger); }
.sf-input, .sf-textarea, .sf-select {
  font: inherit; font-size: 16px; width: 100%; color: var(--sf-ink);
  min-height: 50px; padding: 0 18px; border-radius: var(--sf-radius);
  border: 2px solid transparent; background: var(--sf-fill);
  transition: background .2s ease, border-color .2s ease, transform .4s var(--sf-spring);
}
.sf-textarea { padding: 14px 18px; min-height: 110px; resize: vertical; }
.sf-select { appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--sf-muted); opacity: .8; }
.sf-input:focus, .sf-textarea:focus, .sf-select:focus { outline: none; background: var(--sf-surface); border-color: var(--sf-ink); transform: scale(1.02); }
.sf-input[aria-invalid="true"], .sf-textarea[aria-invalid="true"] { border-color: var(--sf-danger); animation: sf-shake .4s var(--sf-ease); }

/* ---------- Toggle (button role="switch") ---------- */
.sf-toggle { position: relative; width: 58px; height: 32px; padding: 0; border: 0; cursor: pointer; border-radius: var(--sf-pill); background: var(--sf-line); transition: background .25s ease; flex: none; }
.sf-toggle:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-toggle__knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: var(--sf-pill); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sf-toggle[aria-checked="true"] { background: var(--sf-ink); }
.sf-toggle[aria-checked="true"] .sf-toggle__knob { transform: translateX(26px); }
.sf-toggle[data-sf-touched][aria-checked="true"] .sf-toggle__knob { animation: sf-stretch-on .55s cubic-bezier(.3,1.4,.5,1); }
.sf-toggle[data-sf-touched][aria-checked="false"] .sf-toggle__knob { animation: sf-stretch-off .55s cubic-bezier(.3,1.4,.5,1); }
.sf-toggle[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Checkbox + Radio ---------- */
.sf-check, .sf-radio { appearance: none; -webkit-appearance: none; margin: 0; width: 26px; height: 26px; flex: none; cursor: pointer; background: var(--sf-fill); transition: background .2s ease, transform .3s var(--sf-spring); display: inline-grid; place-content: center; }
.sf-check { border-radius: 9px; }
.sf-radio { border-radius: 50%; }
.sf-check:hover, .sf-radio:hover { transform: scale(1.1); }
.sf-check:checked, .sf-radio:checked { background: var(--sf-ink); animation: sf-tick .45s var(--sf-spring); }
.sf-check:checked::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--sf-on-ink); border-bottom: 3px solid var(--sf-on-ink); transform: translateY(-2px) rotate(-45deg); }
.sf-radio:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-on-ink); }
.sf-check:focus-visible, .sf-radio:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-option { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; }

/* ---------- Segmented (CSS-only, up to 4 options) ----------
   <div class="sf-seg" style="--sf-n:3"> <input type=radio id=a name=x checked><label for=a>A</label> ... </div> */
.sf-seg { --sf-n: 3; --sf-i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--sf-n)); border-radius: var(--sf-pill); background: var(--sf-surface); box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: transform .5s var(--sf-spring); transform: translateX(calc(var(--sf-i) * 100%)); }
.sf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sf-seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; font-weight: 600; font-size: 15px; color: var(--sf-muted); cursor: pointer; border-radius: var(--sf-pill); transition: color .2s ease; white-space: nowrap; }
.sf-seg input:checked + label { color: var(--sf-ink); }
.sf-seg input:focus-visible + label { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-seg:has(input:nth-of-type(2):checked) { --sf-i: 1; }
.sf-seg:has(input:nth-of-type(3):checked) { --sf-i: 2; }
.sf-seg:has(input:nth-of-type(4):checked) { --sf-i: 3; }

/* ---------- Card, Badge, Avatar ---------- */
.sf-card { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 28px 32px; }
.sf-card--hover { transition: transform .4s var(--sf-spring); }
.sf-card--hover:hover { transform: translateY(-6px) rotate(-.6deg); }
.sf-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 14px; border-radius: var(--sf-pill); font-size: 13px; font-weight: 600; background: var(--sf-fill); color: var(--sf-ink); }
.sf-badge--solid { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sf-fill); display: inline-grid; place-content: center; font-weight: 700; font-size: 15px; overflow: hidden; transition: transform .3s var(--sf-spring); }
.sf-avatar:hover { transform: scale(1.15) rotate(-6deg); }
.sf-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Progress + Skeleton ---------- */
.sf-progress { --sf-value: 50; height: 14px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-progress > span { display: block; height: 100%; width: calc(var(--sf-value) * 1%); border-radius: var(--sf-pill); background: var(--sf-ink); transition: width .8s var(--sf-spring); }
.sf-progress--busy > span { width: 40%; animation: sf-busy 1.4s var(--sf-ease) infinite; }
.sf-skeleton { border-radius: var(--sf-radius); background: linear-gradient(90deg, var(--sf-fill) 0%, var(--sf-line) 50%, var(--sf-fill) 100%); background-size: 200% 100%; animation: sf-shimmer 1.4s linear infinite; min-height: 16px; }

/* ---------- Tooltip ---------- */
[data-sf-tip] { position: relative; }
[data-sf-tip]::after { content: attr(data-sf-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) scale(.6); transform-origin: bottom center; opacity: 0; pointer-events: none; white-space: nowrap; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--sf-pill); transition: transform .35s var(--sf-spring), opacity .15s ease; z-index: 50; }
[data-sf-tip]:hover::after, [data-sf-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---------- Modal (<dialog class="sf-modal">) ---------- */
.sf-modal { border: 0; padding: 32px; width: min(92vw, 440px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.sf-modal[open] { animation: sf-modal-in .55s var(--sf-spring); }
.sf-modal::backdrop { background: rgba(10,10,12,.35); backdrop-filter: blur(6px); animation: sf-fade .3s ease; }
.sf-modal h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.sf-modal p { margin: 0 0 24px; color: var(--sf-muted); line-height: 1.5; }
.sf-modal__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.sf-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; pointer-events: none; }
.sf-toast { pointer-events: auto; background: var(--sf-ink); color: var(--sf-on-ink); padding: 14px 24px; border-radius: var(--sf-pill); font-weight: 600; font-size: 15px; animation: sf-toast-in .6s var(--sf-spring) both; }
.sf-toast.is-leaving { animation: sf-toast-out .3s ease both; }

/* ---------- Hero blob (needs soft.js or manual --sf-bx / --sf-by) ----------
   <section class="sf-hero" data-sf-blob><div class="sf-blob"></div><h1 class="sf-hero__title">...</h1></section> */
.sf-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sf-bg); }
.sf-hero { --sf-blob-size: clamp(180px, 30vw, 340px); }
.sf-blob { position: absolute; left: 0; top: 0; z-index: 0; width: var(--sf-blob-size); height: var(--sf-blob-size); margin: calc(var(--sf-blob-size) / -2) 0 0 calc(var(--sf-blob-size) / -2); background: var(--sf-ink); pointer-events: none; animation: sf-morph 7s ease-in-out infinite; transition: transform 1.1s cubic-bezier(.2, 1.5, .4, 1); transform: translate(var(--sf-bx, 70%), var(--sf-by, 40%)); }
/* Content sits above the blob by DOM order. No z-index here: a z-index would create a stacking context
   and stop the title's difference blend from seeing the blob behind it. */
.sf-hero > :not(.sf-blob) { position: relative; }
/* Text that sits over the blob: the title (and .sf-hero__lede) use difference blending so they stay readable on both the page and the blob. */
.sf-hero__lede { position: relative; color: #999; mix-blend-mode: difference; }
.sf-hero__title { margin: 0; color: #fff; mix-blend-mode: difference; font-size: clamp(52px, 10vw, 148px); line-height: 1.02; font-weight: 700; letter-spacing: -.05em; }

/* Words that hop when hovered, and pop in on load */
.sf-pop { display: inline-block; animation: sf-pop .9s cubic-bezier(.2,.9,.3,1) both; }
.sf-hop { display: inline-block; cursor: default; }
.sf-hop:hover { animation: sf-hop .7s cubic-bezier(.2,.9,.3,1.3); }

/* Staggered spring entrance for lists: add .sf-rise to children */
.sf-rise { animation: sf-rise .9s cubic-bezier(.2,.9,.3,1) both; }
.sf-rise:nth-child(2) { animation-delay: .08s; } .sf-rise:nth-child(3) { animation-delay: .16s; }
.sf-rise:nth-child(4) { animation-delay: .24s; } .sf-rise:nth-child(5) { animation-delay: .32s; }
.sf-rise:nth-child(6) { animation-delay: .4s; }

/* Idle bob (logo dots, status dots) */
.sf-bob { animation: sf-bob 1.8s ease-in-out infinite; }

/* Confetti pieces are created by soft.js */
.sf-bit { position: absolute; left: 50%; top: 50%; pointer-events: none; animation: sf-burst .8s cubic-bezier(.2,.8,.3,1) forwards; }

/* ---------- Keyframes ---------- */
@keyframes sf-pop { 0% { opacity: 0; transform: translateY(80px) scale(.5); } 60% { opacity: 1; transform: translateY(-14px) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes sf-hop { 0% { transform: none; } 35% { transform: translateY(-.22em) rotate(-5deg) scale(1.08,.96); } 65% { transform: translateY(0) scale(1.1,.88); } 100% { transform: none; } }
@keyframes sf-rise { 0% { opacity: 0; transform: translateY(48px); } 65% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-morph { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 25% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; } 50% { border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; } 75% { border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; } }
@keyframes sf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sf-stretch-on { 0% { transform: translateX(0); width: 26px; } 40% { transform: translateX(12px); width: 42px; } 100% { transform: translateX(26px); width: 26px; } }
@keyframes sf-stretch-off { 0% { transform: translateX(26px); width: 26px; } 40% { transform: translateX(0); width: 42px; } 100% { transform: translateX(0); width: 26px; } }
@keyframes sf-tick { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes sf-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sf-modal-in { 0% { opacity: 0; transform: translateY(40px) scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes sf-toast-in { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes sf-toast-out { to { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-busy { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sf-burst { 0% { transform: translate(0,0) scale(1.1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sf *, .sf-btn, .sf-blob, .sf-modal, .sf-toast, .sf-pop, .sf-rise, .sf-hop, .sf-bob, .sf-skeleton { animation: none !important; transition: none !important; }
  .sf-bit { display: none; }
}


/* ===== Inputs (forms-inputs) ===== */
/* Soft / forms-inputs — advanced form inputs.
   Needs soft.css (tokens, .sf-input, .sf-toggle, .sf-check, .sf-progress). Optional forms-inputs.js adds behaviour. */

/* ---------- Module tokens ---------- */
:root, [data-sf-theme] {
  --sf-forms-inputs-success: #2FBF71;
  --sf-forms-inputs-warning: #F5A524;
  --sf-forms-inputs-info: #3B82F6;
  --sf-forms-inputs-star: #FFC857;
  /* text-safe variants: mixed with ink so they stay readable in light and dark */
  --sf-forms-inputs-success-ink: color-mix(in srgb, #2FBF71 52%, var(--sf-ink));
  --sf-forms-inputs-warning-ink: color-mix(in srgb, #F5A524 52%, var(--sf-ink));
  --sf-forms-inputs-danger-ink: color-mix(in srgb, var(--sf-danger) 80%, var(--sf-ink));
  --sf-forms-inputs-pop-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}

.sf-fi-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Shared control shell (search, input group, tag input, multi-select) ---------- */
.sf-searchbox, .sf-igroup, .sf-taginput, .sf-multiselect__control {
  background: var(--sf-fill); border: 2px solid transparent; border-radius: var(--sf-radius);
  transition: background .2s ease, border-color .2s ease;
}
.sf-searchbox:focus-within, .sf-igroup:focus-within, .sf-taginput:focus-within, .sf-multiselect__control:focus-within {
  background: var(--sf-surface); border-color: var(--sf-ink);
}

/* =========================================================
   1. Slider
   <div class="sf-slider" data-sf-slider> track + fill + input[type=range] + output bubble
   ========================================================= */
.sf-slider, .sf-rangeslider { --sf-pct: 0; --sf-lo: 0; --sf-hi: 100; --sf-thumb: 28px; position: relative; box-sizing: border-box; width: 100%; height: 78px; padding-top: 34px; touch-action: pan-y; }
.sf-slider__track, .sf-rangeslider__track { position: absolute; left: 0; right: 0; top: 52px; height: 8px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; pointer-events: none; }
.sf-slider__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-pct) / 100); background: var(--sf-ink); border-radius: var(--sf-pill); }
.sf-rangeslider__fill { position: absolute; top: 0; bottom: 0; background: var(--sf-ink);
  left: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-lo) / 100);
  right: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * (100 - var(--sf-hi)) / 100); }
.sf-slider__input, .sf-rangeslider__input { -webkit-appearance: none; appearance: none; display: block; position: relative; z-index: 1; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.sf-rangeslider__input { position: absolute; left: 0; top: 34px; pointer-events: none; z-index: 2; }
.sf-rangeslider__input[data-sf-thumb="hi"] { z-index: 3; }
.sf-rangeslider[data-top="lo"] .sf-rangeslider__input[data-sf-thumb="lo"] { z-index: 4; }
.sf-slider__input:focus, .sf-rangeslider__input:focus { outline: none; }
.sf-slider__input::-webkit-slider-runnable-track, .sf-rangeslider__input::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.sf-slider__input::-moz-range-track, .sf-rangeslider__input::-moz-range-track { height: 44px; background: transparent; border: 0; }
.sf-slider__input::-webkit-slider-thumb, .sf-rangeslider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%;
  background: var(--sf-surface); border: 3px solid var(--sf-ink); cursor: grab; pointer-events: auto;
  transition: transform .3s var(--sf-spring);
}
.sf-slider__input::-moz-range-thumb, .sf-rangeslider__input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sf-surface); border: 3px solid var(--sf-ink); cursor: grab; pointer-events: auto;
  transition: transform .3s var(--sf-spring);
}
.sf-slider__input:hover::-webkit-slider-thumb, .sf-rangeslider__input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.sf-slider__input:hover::-moz-range-thumb, .sf-rangeslider__input:hover::-moz-range-thumb { transform: scale(1.12); }
.sf-slider__input:active::-webkit-slider-thumb, .sf-rangeslider__input:active::-webkit-slider-thumb { transform: scale(1.28, 1.1); cursor: grabbing; }
.sf-slider__input:active::-moz-range-thumb, .sf-rangeslider__input:active::-moz-range-thumb { transform: scale(1.28, 1.1); cursor: grabbing; }
.sf-slider__input:focus-visible::-webkit-slider-thumb, .sf-rangeslider__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-slider__input:focus-visible::-moz-range-thumb, .sf-rangeslider__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-slider__input:disabled, .sf-rangeslider__input:disabled { cursor: not-allowed; }
.sf-slider:has(:disabled), .sf-rangeslider:has(:disabled) { opacity: .4; }
.sf-slider__bubble, .sf-rangeslider__bubble {
  position: absolute; top: 4px; left: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-pct) / 100);
  min-width: 36px; padding: 0 12px; height: 28px; display: grid; place-content: center; border-radius: var(--sf-pill);
  background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none;
  /* --sf-bx: px nudge set by JS so the bubble never leaves the slider and two range bubbles never collide */
  transform: translateX(calc(-50% + var(--sf-bx, 0px))) translateY(8px) scale(.5); transform-origin: 50% 100%; opacity: 0;
  transition: transform .35s var(--sf-spring), opacity .15s ease;
}
.sf-rangeslider__bubble--lo { left: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-lo) / 100); }
.sf-rangeslider__bubble--hi { left: calc(var(--sf-thumb) / 2 + (100% - var(--sf-thumb)) * var(--sf-hi) / 100); }
.sf-slider:hover .sf-slider__bubble, .sf-slider:focus-within .sf-slider__bubble,
.sf-rangeslider:hover .sf-rangeslider__bubble, .sf-rangeslider:focus-within .sf-rangeslider__bubble,
.sf-slider--always .sf-slider__bubble, .sf-rangeslider--always .sf-rangeslider__bubble { opacity: 1; transform: translateX(calc(-50% + var(--sf-bx, 0px))); }

/* =========================================================
   3. Number stepper
   ========================================================= */
.sf-stepper { align-self: flex-start; display: inline-flex; align-items: center; padding: 4px; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-stepper__btn { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; display: grid; place-content: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .2s var(--sf-spring), opacity .2s ease; }
.sf-stepper__btn:hover { transform: scale(1.08); }
.sf-stepper__btn:active { transform: scale(.86); }
.sf-stepper__btn:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-stepper__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.sf-stepper__btn svg { display: block; }
.sf-stepper__input { width: 4.2em; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-size: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; border-radius: var(--sf-pill); }
.sf-stepper__input:focus { outline: none; background: var(--sf-surface); }
.sf-stepper__input.is-bump-up { animation: sf-forms-inputs-bump-up .45s var(--sf-spring); }
.sf-stepper__input.is-bump-down { animation: sf-forms-inputs-bump-down .45s var(--sf-spring); }
.sf-stepper--sm .sf-stepper__btn, .sf-stepper--sm .sf-stepper__input { width: 36px; height: 36px; font-size: 15px; }
.sf-stepper--sm .sf-stepper__input { width: 3.4em; }

/* =========================================================
   4. OTP / PIN input
   ========================================================= */
.sf-otp { display: flex; gap: clamp(6px, 2vw, 12px); max-width: 100%; }
.sf-otp__cell { flex: 1 1 0; min-width: 0; max-width: 58px; height: clamp(54px, 15vw, 62px); padding: 0; text-align: center; font: inherit; font-size: 26px; font-weight: 700; color: var(--sf-ink); caret-color: var(--sf-ink); background: var(--sf-fill); border: 2px solid transparent; border-radius: var(--sf-radius); transition: background .2s ease, border-color .2s ease, transform .35s var(--sf-spring); }
.sf-otp__cell:focus { outline: none; background: var(--sf-surface); border-color: var(--sf-ink); transform: translateY(-3px) scale(1.06); }
.sf-otp__cell.is-filled { border-color: var(--sf-line); animation: sf-forms-inputs-pop .4s var(--sf-spring); }
.sf-otp__cell.is-filled:focus { border-color: var(--sf-ink); }
.sf-otp[data-group="2"] > .sf-otp__cell:nth-child(2n):not(:last-child),
.sf-otp[data-group="3"] > .sf-otp__cell:nth-child(3n):not(:last-child),
.sf-otp[data-group="4"] > .sf-otp__cell:nth-child(4n):not(:last-child) { margin-right: clamp(6px, 3vw, 18px); }
.sf-otp.is-error .sf-otp__cell { border-color: var(--sf-danger); background: color-mix(in srgb, var(--sf-danger) 10%, var(--sf-surface)); }
.sf-otp.is-shake { animation: sf-shake .45s var(--sf-ease); }
.sf-otp.is-success .sf-otp__cell { border-color: var(--sf-forms-inputs-success); animation: sf-forms-inputs-pop .5s var(--sf-spring) both; animation-delay: calc(var(--sf-i, 0) * 50ms); }
.sf-otp.is-success .sf-otp__cell:nth-child(2) { --sf-i: 1; } .sf-otp.is-success .sf-otp__cell:nth-child(3) { --sf-i: 2; }
.sf-otp.is-success .sf-otp__cell:nth-child(4) { --sf-i: 3; } .sf-otp.is-success .sf-otp__cell:nth-child(5) { --sf-i: 4; }
.sf-otp.is-success .sf-otp__cell:nth-child(6) { --sf-i: 5; }
.sf-otp--mask .sf-otp__cell { -webkit-text-security: disc; }

/* =========================================================
   5. Password input + strength meter
   ========================================================= */
.sf-password { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sf-password__field { position: relative; }
.sf-password .sf-password__input { padding-right: 56px; }
.sf-password .sf-password__input:focus { transform: none; }
.sf-password__toggle { position: absolute; right: 4px; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); cursor: pointer; display: grid; place-content: center; transition: transform .25s var(--sf-spring), color .2s ease, background .2s ease; }
.sf-password__toggle:hover { color: var(--sf-ink); background: var(--sf-fill); transform: scale(1.08); }
.sf-password__toggle:active { transform: scale(.88); }
.sf-password__toggle:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-password__toggle svg { display: block; }
.sf-password__slash { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .35s var(--sf-ease); }
.sf-password__toggle[aria-pressed="true"] .sf-password__slash { stroke-dashoffset: 0; }
.sf-password__toggle[aria-pressed="true"] { color: var(--sf-ink); }
.sf-password__meter { --sf-seg: var(--sf-line); display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 6px; }
.sf-password__meter > span { position: relative; height: 6px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-password__meter > span::before { content: ""; position: absolute; inset: 0; background: var(--sf-seg); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sf-spring), background .25s ease; }
.sf-password__meter[data-level="1"] { --sf-seg: var(--sf-danger); }
.sf-password__meter[data-level="2"] { --sf-seg: var(--sf-forms-inputs-warning); }
.sf-password__meter[data-level="3"] { --sf-seg: var(--sf-forms-inputs-info); }
.sf-password__meter[data-level="4"] { --sf-seg: var(--sf-forms-inputs-success); }
.sf-password__meter[data-level="1"] > span:nth-child(-n+1)::before,
.sf-password__meter[data-level="2"] > span:nth-child(-n+2)::before,
.sf-password__meter[data-level="3"] > span:nth-child(-n+3)::before,
.sf-password__meter[data-level="4"] > span:nth-child(-n+4)::before { transform: scaleX(1); }
.sf-password__strength { grid-column: 5; min-width: 56px; padding-left: 6px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--sf-muted); text-align: right; }
.sf-password__meter[data-level="1"] .sf-password__strength { color: var(--sf-forms-inputs-danger-ink); }
.sf-password__meter[data-level="2"] .sf-password__strength { color: var(--sf-forms-inputs-warning-ink); }
.sf-password__meter[data-level="3"] .sf-password__strength { color: color-mix(in srgb, #3B82F6 60%, var(--sf-ink)); }
.sf-password__meter[data-level="4"] .sf-password__strength { color: var(--sf-forms-inputs-success-ink); }

/* =========================================================
   6. Search input
   ========================================================= */
.sf-searchbox { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 8px 0 16px; width: 100%; border-radius: var(--sf-pill); }
.sf-searchbox__icon { flex: none; color: var(--sf-muted); display: block; transition: transform .35s var(--sf-spring), color .2s ease; }
.sf-searchbox:focus-within .sf-searchbox__icon { color: var(--sf-ink); transform: scale(1.15) rotate(-8deg); }
.sf-searchbox__input { flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.sf-searchbox__input:focus { outline: none; }
.sf-searchbox__input::placeholder { color: var(--sf-muted); opacity: .85; }
.sf-searchbox__input::-webkit-search-cancel-button, .sf-searchbox__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.sf-searchbox__clear { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-line); color: var(--sf-ink); cursor: pointer; display: grid; place-content: center; animation: sf-forms-inputs-pop .35s var(--sf-spring); transition: transform .2s var(--sf-spring); }
.sf-searchbox__clear[hidden] { display: none; }
.sf-searchbox__clear:hover { transform: scale(1.12) rotate(90deg); }
.sf-searchbox__clear:active { transform: scale(.85); }
.sf-searchbox__clear:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-searchbox__kbd { flex: none; display: inline-grid; place-content: center; min-width: 28px; height: 28px; margin-right: 6px; padding: 0 8px; border-radius: 9px; background: var(--sf-surface); border: 1px solid var(--sf-line); color: var(--sf-muted); font: inherit; font-size: 12px; font-weight: 700; transition: opacity .2s ease, transform .3s var(--sf-spring); }
.sf-searchbox:focus-within .sf-searchbox__kbd, .sf-searchbox.has-value .sf-searchbox__kbd { opacity: 0; transform: scale(.6); pointer-events: none; width: 0; min-width: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; }

/* =========================================================
   7. Tag / chip input
   ========================================================= */
.sf-taginput { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 54px; padding: 6px 10px; cursor: text; width: 100%; }
.sf-taginput__list { display: contents; }
.sf-taginput__chip, .sf-multiselect__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; min-height: 34px; padding: 0 6px 0 14px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 14px; font-weight: 600; animation: sf-forms-inputs-chip-in .45s var(--sf-spring); transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-taginput__chip > span:first-child, .sf-multiselect__chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-taginput__chip.is-static, .sf-multiselect__chip.is-static { animation: none; }
.sf-taginput__chip.is-armed { background: var(--sf-danger); color: #fff; transform: scale(1.06); }
.sf-taginput__chip.is-dupe { animation: sf-forms-inputs-wiggle .4s var(--sf-ease); }
.sf-taginput__chip.is-leaving, .sf-multiselect__chip.is-leaving { animation: sf-forms-inputs-chip-out .38s cubic-bezier(.5, -0.4, .6, 1) forwards; pointer-events: none; overflow: hidden; }
.sf-taginput__remove, .sf-multiselect__remove { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sf-on-ink) 22%, transparent); color: inherit; cursor: pointer; display: grid; place-content: center; transition: transform .25s var(--sf-spring), background .2s ease; }
.sf-taginput__remove::after, .sf-multiselect__remove::after { content: ""; position: absolute; inset: -10px -4px; }
.sf-taginput__remove:hover, .sf-multiselect__remove:hover { transform: scale(1.18) rotate(90deg); background: color-mix(in srgb, var(--sf-on-ink) 38%, transparent); }
.sf-taginput__remove:focus-visible, .sf-multiselect__remove:focus-visible { outline: 2px solid var(--sf-on-ink); outline-offset: 1px; }
.sf-taginput__input { flex: 1 1 120px; min-width: 100px; min-height: 40px; padding: 0 6px; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-size: 16px; }
.sf-taginput__input:focus { outline: none; }
.sf-taginput__input::placeholder { color: var(--sf-muted); opacity: .85; }
.sf-taginput.is-full .sf-taginput__input { flex-basis: 0; min-width: 0; }
.sf-taginput.is-full .sf-taginput__input::placeholder { color: transparent; }
.sf-taginput.is-shake { animation: sf-shake .4s var(--sf-ease); }

/* =========================================================
   8. Combobox / autocomplete
   ========================================================= */
.sf-combobox { position: relative; width: 100%; }
.sf-combobox .sf-combobox__input { padding-right: 52px; }
.sf-combobox .sf-combobox__input:focus { transform: none; }
.sf-combobox__toggle { position: absolute; right: 4px; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); cursor: pointer; display: grid; place-content: center; }
.sf-combobox__toggle svg { display: block; transition: transform .4s var(--sf-spring); }
.sf-combobox__input[aria-expanded="true"] ~ .sf-combobox__toggle svg { transform: rotate(180deg); }
.sf-combobox__list, .sf-multiselect__pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: 272px; overflow-y: auto; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-forms-inputs-pop-shadow); transform-origin: 50% 0; animation: sf-forms-inputs-pop-in .38s var(--sf-spring); }
.sf-combobox__list[hidden], .sf-multiselect__pop[hidden] { display: none; }
.sf-combobox[data-placement="top"] .sf-combobox__list, .sf-multiselect[data-placement="top"] .sf-multiselect__pop { top: auto; bottom: calc(100% + 8px); transform-origin: 50% 100%; }
.sf-combobox__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer; font-size: 16px; transition: background .15s ease; }
.sf-combobox__option.is-active { background: var(--sf-fill); }
.sf-combobox__option[aria-selected="true"]::after { content: ""; flex: none; width: 12px; height: 7px; border-left: 3px solid var(--sf-ink); border-bottom: 3px solid var(--sf-ink); transform: translateY(-2px) rotate(-45deg); }
.sf-combobox__option[aria-disabled="true"] { color: var(--sf-muted); cursor: default; }
.sf-combobox__hint { color: var(--sf-muted); font-size: 13px; }
.sf-combobox__option mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* =========================================================
   9. Multi-select
   ========================================================= */
.sf-multiselect { position: relative; width: 100%; }
.sf-multiselect__control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 54px; padding: 6px 6px 6px 10px; }
.sf-multiselect__chips { display: contents; }
.sf-multiselect__trigger { flex: 1 1 100px; min-width: 100px; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 6px; border: 0; border-radius: var(--sf-radius); background: transparent; color: var(--sf-ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.sf-multiselect__trigger:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-multiselect__placeholder { color: var(--sf-muted); }
.sf-multiselect__chips:not(:empty) ~ .sf-multiselect__trigger { flex: 1 0 44px; min-width: 44px; padding: 0 8px; }
.sf-multiselect__chips:not(:empty) ~ .sf-multiselect__trigger .sf-multiselect__placeholder { display: none; }
.sf-multiselect__trigger svg { flex: none; margin-left: auto; color: var(--sf-muted); transition: transform .4s var(--sf-spring); }
.sf-multiselect__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.sf-multiselect__pop { padding: 8px 8px 0; max-height: 340px; display: flex; flex-direction: column; gap: 2px; }
.sf-multiselect__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 12px; cursor: pointer; font-size: 16px; transition: background .15s ease; }
.sf-multiselect__item:hover, .sf-multiselect__item:has(:focus-visible) { background: var(--sf-fill); }
.sf-multiselect__item:has(:disabled) { opacity: .45; cursor: not-allowed; }
.sf-multiselect__foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 4px; background: var(--sf-surface); border-top: 1px solid var(--sf-line); }
.sf-multiselect__count { font-size: 13px; color: var(--sf-muted); padding-left: 8px; }

/* =========================================================
   10. Date + time input
   ========================================================= */
.sf-dateinput { position: relative; width: 100%; }
.sf-dateinput .sf-dateinput__input { padding-left: 54px; min-width: 0; }
.sf-dateinput__input::-webkit-calendar-picker-indicator { display: none; }
.sf-dateinput__input::-webkit-datetime-edit { padding: 0; }
.sf-dateinput__input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.sf-dateinput__input::-webkit-datetime-edit-day-field:focus, .sf-dateinput__input::-webkit-datetime-edit-month-field:focus,
.sf-dateinput__input::-webkit-datetime-edit-year-field:focus, .sf-dateinput__input::-webkit-datetime-edit-hour-field:focus,
.sf-dateinput__input::-webkit-datetime-edit-minute-field:focus, .sf-dateinput__input::-webkit-datetime-edit-ampm-field:focus { background: var(--sf-ink); color: var(--sf-on-ink); border-radius: 6px; outline: none; }
[data-sf-theme="dark"] .sf-dateinput__input { color-scheme: dark; }
.sf-dateinput .sf-dateinput__input:focus { transform: none; }
.sf-dateinput__btn { position: absolute; left: 7px; top: 50%; margin-top: -18px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; display: grid; place-content: center; transition: transform .3s var(--sf-spring); }
.sf-dateinput__btn:hover { transform: scale(1.12) rotate(-6deg); }
.sf-dateinput__btn:active { transform: scale(.88); }
.sf-dateinput__btn:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-dateinput__btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

/* =========================================================
   11. Colour swatch picker
   ========================================================= */
.sf-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf-swatches__item { --sf-swatch: #111; position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; cursor: pointer; }
.sf-swatches__item input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-swatches__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--sf-swatch); border: 1px solid color-mix(in srgb, var(--sf-ink) 16%, transparent); pointer-events: none; transition: transform .35s var(--sf-spring); }
.sf-swatches__item::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--sf-ink); transform: scale(.55); opacity: 0; pointer-events: none; transition: transform .45s var(--sf-spring), opacity .15s ease; }
.sf-swatches__item:hover .sf-swatches__dot { transform: scale(1.14); }
.sf-swatches__item:has(input[type="radio"]:checked)::after { transform: scale(1); opacity: 1; }
.sf-swatches__item:has(input[type="radio"]:checked) .sf-swatches__dot { transform: scale(.88); }
.sf-swatches__item:has(input:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-swatches__item--custom .sf-swatches__dot { background: var(--sf-surface); border: 2px dashed var(--sf-muted); display: grid; place-content: center; color: var(--sf-muted); }
.sf-swatches__item--custom.is-set .sf-swatches__dot { background: var(--sf-swatch); border: 1px solid color-mix(in srgb, var(--sf-ink) 16%, transparent); color: transparent; }
.sf-swatches__item--custom.is-set .sf-swatches__plus { display: none; }
.sf-swatches__picker { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; z-index: 2; }
.sf-swatches__item--custom:has(.sf-swatches__picker:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-swatches__value { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--sf-muted); font-variant-numeric: tabular-nums; }

/* =========================================================
   12. Rating stars
   ========================================================= */
.sf-rating { --sf-star: 30px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--sf-star); touch-action: manipulation; border-radius: 12px; cursor: pointer; }
.sf-rating:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-rating__star { position: relative; width: 1em; height: 1em; flex: none; color: var(--sf-line); transition: transform .3s var(--sf-spring); }
.sf-rating__star svg { display: block; width: 1em; height: 1em; max-width: none; }
.sf-rating__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sf-star-fill, 0%); overflow: hidden; color: var(--sf-forms-inputs-star); }
.sf-rating:not(.sf-rating--readonly) .sf-rating__star:hover { transform: scale(1.18) rotate(-6deg); }
.sf-rating.is-preview .sf-rating__fill { opacity: .72; }
.sf-rating__star.is-pop { animation: sf-forms-inputs-star-pop .5s var(--sf-spring); animation-delay: calc(var(--sf-i, 0) * 45ms); }
.sf-rating--sm { --sf-star: 20px; min-height: 28px; gap: 3px; }
.sf-rating--lg { --sf-star: 40px; gap: 8px; }
.sf-rating--readonly { cursor: default; min-height: 0; }
.sf-rating__text { font-size: 14px; font-weight: 600; color: var(--sf-muted); margin-left: 4px; }

/* =========================================================
   13. Radio cards + checkbox cards
   ========================================================= */
.sf-choicegroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-choice { position: relative; display: flex; min-width: 0; cursor: pointer; }
.sf-choice__input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; inset: 0; cursor: pointer; z-index: 1; }
.sf-choice__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); border: 2px solid var(--sf-line); transition: transform .35s var(--sf-spring), border-color .2s ease, background .2s ease; }
.sf-choice:hover .sf-choice__body { transform: translateY(-3px); }
.sf-choice:active .sf-choice__body { transform: scale(.97); }
.sf-choice__icon { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--sf-fill); display: grid; place-content: center; transition: background .2s ease, color .2s ease, transform .4s var(--sf-spring); }
.sf-choice__title { font-size: 16px; font-weight: 700; padding-right: 28px; }
.sf-choice__desc { font-size: 14px; color: var(--sf-muted); line-height: 1.45; }
.sf-choice__price { margin-top: 6px; font-size: 14px; font-weight: 700; }
.sf-choice__badge { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--sf-ink); display: grid; place-content: center; transform: scale(0) rotate(-40deg); transition: transform .45s var(--sf-spring); pointer-events: none; }
.sf-choice__badge::after { content: ""; width: 11px; height: 6px; border-left: 3px solid var(--sf-on-ink); border-bottom: 3px solid var(--sf-on-ink); transform: translateY(-1px) rotate(-45deg); }
.sf-choice__input:checked ~ .sf-choice__body { border-color: var(--sf-ink); }
.sf-choice__input:checked ~ .sf-choice__body .sf-choice__icon { background: var(--sf-ink); color: var(--sf-on-ink); transform: rotate(-6deg) scale(1.06); }
.sf-choice__input:checked ~ .sf-choice__badge { transform: none; }
.sf-choice__input:focus-visible ~ .sf-choice__body { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-choice__input:disabled ~ .sf-choice__body { opacity: .45; cursor: not-allowed; }
.sf-choice--row .sf-choice__badge { top: 50%; margin-top: -13px; }
.sf-choice--row .sf-choice__body { flex-direction: row; align-items: center; gap: 14px; }
.sf-choice--row .sf-choice__icon { margin: 0; flex: none; }
.sf-choice--row .sf-choice__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* =========================================================
   14. File dropzone
   ========================================================= */
.sf-dropzone { width: 100%; }
.sf-dropzone__area { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; text-align: center; border: 2px dashed var(--sf-line); border-radius: var(--sf-radius-lg); background: var(--sf-surface); cursor: pointer; transition: transform .4s var(--sf-spring), border-color .2s ease, background .2s ease; }
.sf-dropzone__area:hover { border-color: var(--sf-muted); }
.sf-dropzone__area:has(.sf-dropzone__input:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sf-dropzone__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--sf-fill); display: grid; place-content: center; margin-bottom: 4px; transition: transform .45s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-dropzone__title { font-size: 16px; font-weight: 700; }
.sf-dropzone__title u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sf-dropzone__hint { font-size: 13px; color: var(--sf-muted); }
.sf-dropzone.is-over .sf-dropzone__area { border-color: var(--sf-ink); border-style: solid; background: var(--sf-fill); transform: scale(1.025); }
.sf-dropzone.is-over .sf-dropzone__icon { background: var(--sf-ink); color: var(--sf-on-ink); transform: translateY(-8px) scale(1.12); animation: sf-forms-inputs-hover-bob .8s ease-in-out infinite; }
.sf-dropzone__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-dropzone__item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 8px 10px 10px; border-radius: var(--sf-radius); background: var(--sf-surface); animation: sf-forms-inputs-chip-in .5s var(--sf-spring); }
.sf-dropzone__item.is-leaving { animation: sf-forms-inputs-row-out .35s var(--sf-ease) forwards; pointer-events: none; }
.sf-dropzone__thumb { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--sf-fill) center / cover no-repeat; display: grid; place-content: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-muted); overflow: hidden; }
.sf-dropzone__meta { min-width: 0; display: flex; flex-direction: column; }
.sf-dropzone__name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dropzone__status { font-size: 13px; color: var(--sf-muted); }
.sf-dropzone__bar { grid-column: 2; height: 6px; transition: opacity .3s ease, height .3s ease; }
.sf-dropzone__bar > span { transition: width .15s linear; }
.sf-dropzone__item.is-done .sf-dropzone__bar, .sf-dropzone__item.is-error .sf-dropzone__bar { display: none; }
.sf-dropzone__item.is-done .sf-dropzone__status { color: var(--sf-forms-inputs-success-ink); }
.sf-dropzone__item.is-error { background: color-mix(in srgb, var(--sf-danger) 9%, var(--sf-surface)); }
.sf-dropzone__item.is-error .sf-dropzone__status { color: var(--sf-forms-inputs-danger-ink); }
.sf-dropzone__remove { grid-row: 1 / span 2; grid-column: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); cursor: pointer; display: grid; place-content: center; transition: transform .25s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-dropzone__remove:hover { background: var(--sf-fill); color: var(--sf-ink); transform: scale(1.1) rotate(90deg); }
.sf-dropzone__remove:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 0; }

/* =========================================================
   15. Avatar uploader
   ========================================================= */
.sf-avatarup { --sf-avatarup-size: 112px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.sf-avatarup__circle { position: relative; width: var(--sf-avatarup-size); height: var(--sf-avatarup-size); border-radius: 50%; cursor: pointer; display: block; transition: transform .4s var(--sf-spring); }
.sf-avatarup__circle:hover { transform: scale(1.05); }
.sf-avatarup__circle:active { transform: scale(.95); }
.sf-avatarup__circle:has(.sf-avatarup__input:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: 4px; }
.sf-avatarup__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-avatarup__preview { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--sf-fill); display: grid; place-content: center; font-size: calc(var(--sf-avatarup-size) * .34); font-weight: 700; color: var(--sf-muted); }
.sf-avatarup__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-avatarup__preview.is-new { animation: sf-forms-inputs-avatar-in .6s var(--sf-spring); }
.sf-avatarup__overlay { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(10, 10, 12, .56); color: #fff; font-size: 13px; font-weight: 700; opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .4s var(--sf-spring); }
.sf-avatarup__circle:hover .sf-avatarup__overlay, .sf-avatarup__circle:has(.sf-avatarup__input:focus-visible) .sf-avatarup__overlay { opacity: 1; transform: none; }
.sf-avatarup__badge { position: absolute; right: 0; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--sf-ink); color: var(--sf-on-ink); border: 3px solid var(--sf-bg); display: grid; place-content: center; pointer-events: none; }
.sf-avatarup.is-over .sf-avatarup__overlay { opacity: 1; transform: none; }
.sf-avatarup.is-over .sf-avatarup__circle { transform: scale(1.1); }
.sf-avatarup__remove { border: 0; background: transparent; color: var(--sf-muted); font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 14px; border-radius: var(--sf-pill); cursor: pointer; transition: transform .25s var(--sf-spring), color .2s ease; }
.sf-avatarup__remove[hidden] { display: none; }
.sf-avatarup__remove:hover { color: var(--sf-forms-inputs-danger-ink); transform: scale(1.06); }
.sf-avatarup__remove:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }

/* =========================================================
   16. Textarea auto-grow + counter
   ========================================================= */
.sf-autogrow { position: relative; width: 100%; }
.sf-autogrow .sf-autogrow__input { display: block; resize: none; overflow-y: hidden; line-height: 1.5; padding-bottom: 38px; min-height: 96px; }
.sf-autogrow .sf-autogrow__input:focus { transform: none; }
.sf-autogrow__count { position: absolute; right: 12px; bottom: 8px; padding: 2px 6px; border-radius: var(--sf-pill); background: var(--sf-fill); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sf-muted); pointer-events: none; transition: color .2s ease, background .2s ease; }
.sf-autogrow:focus-within .sf-autogrow__count { background: var(--sf-surface); }
.sf-autogrow.is-near .sf-autogrow__count { color: var(--sf-forms-inputs-warning-ink); }
.sf-autogrow.is-over .sf-autogrow__count { color: var(--sf-forms-inputs-danger-ink); }
.sf-autogrow.is-over .sf-autogrow__input { border-color: var(--sf-danger); }
.sf-autogrow__count.is-bump { animation: sf-forms-inputs-bump-up .35s var(--sf-spring); }

/* =========================================================
   17. Input group
   ========================================================= */
.sf-igroup { display: flex; align-items: stretch; min-height: 50px; width: 100%; }
.sf-igroup > :first-child { border-top-left-radius: calc(var(--sf-radius) - 2px); border-bottom-left-radius: calc(var(--sf-radius) - 2px); }
.sf-igroup > :last-child { border-top-right-radius: calc(var(--sf-radius) - 2px); border-bottom-right-radius: calc(var(--sf-radius) - 2px); }
.sf-igroup__addon { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; color: var(--sf-muted); font-size: 15px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--sf-ink) 5%, transparent); }
.sf-igroup__addon:first-child { border-right: 1px solid var(--sf-line); }
.sf-igroup__addon:last-child:not(:first-child) { border-left: 1px solid var(--sf-line); }
.sf-igroup__input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-size: 16px; }
.sf-igroup__input:focus { outline: none; }
.sf-igroup__input::placeholder { color: var(--sf-muted); opacity: .85; }
.sf-igroup__select { flex: none; max-width: 40%; padding: 0 12px; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-left: 1px solid var(--sf-line); }
.sf-igroup__select:focus { outline: none; background: var(--sf-fill); }
.sf-igroup__btn { flex: none; align-self: center; margin: 0 5px 0 0; min-height: 38px; padding: 0 18px; border: 0; border-radius: calc(var(--sf-radius) - 4px); background: var(--sf-ink); color: var(--sf-on-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .2s var(--sf-spring), opacity .2s ease; }
.sf-igroup__btn:hover { transform: scale(1.05); }
.sf-igroup__btn:active { transform: scale(1.1, .86); }
.sf-igroup__btn:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-igroup > .sf-igroup__btn:last-child { border-radius: calc(var(--sf-radius) - 4px); }
.sf-igroup__btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.sf-igroup__btn.is-done { background: var(--sf-forms-inputs-success); color: #111; }
.sf-igroup:has(.sf-igroup__input[aria-invalid="true"]) { border-color: var(--sf-danger); }

/* =========================================================
   18. Form layout helpers
   ========================================================= */
.sf-form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.sf-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sf-fieldset__legend { padding: 0; margin-bottom: 2px; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.sf-fieldset__legend small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--sf-muted); }
.sf-fieldset--card { padding: 22px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; align-items: start; }
.sf-formrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-formrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-formrow--auto { grid-template-columns: 1fr auto; align-items: end; }
.sf-formrow__span { grid-column: 1 / -1; }
@media (max-width: 560px) { .sf-formrow--2, .sf-formrow--3, .sf-formrow--auto { grid-template-columns: 1fr; } }
.sf-formsection { display: grid; gap: 18px; padding: 28px 0; border-top: 1px solid var(--sf-line); }
.sf-formsection:first-child { border-top: 0; padding-top: 0; }
.sf-formsection__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.sf-formsection__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sf-muted); }
.sf-formsection__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 760px) { .sf-formsection { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 40px; } }
.sf-formscroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 0 8px; border-radius: var(--sf-radius); }
.sf-actionbar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 10px 10px 10px 22px; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--sf-surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--sf-line); transition: transform .5s var(--sf-spring), opacity .25s ease; }
.sf-actionbar__status { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.sf-actionbar__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-forms-inputs-warning); }
.sf-actionbar--dirty { transform: translateY(28px) scale(.94); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .5s var(--sf-spring), opacity .25s ease, visibility 0s linear .5s; }
[data-dirty="true"] .sf-actionbar--dirty, .sf-actionbar--dirty.is-visible { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (max-width: 560px) {
  /* too narrow for one pill row: status on top, buttons below, as a rounded card instead of a stretched pill */
  .sf-actionbar { border-radius: var(--sf-radius-lg); padding: 12px 12px 12px 18px; }
  .sf-actionbar__status { flex: 1 1 100%; }
}

/* =========================================================
   19. Switch group / settings rows
   ========================================================= */
.sf-settings { margin: 0; padding: 6px 0; list-style: none; border-radius: var(--sf-radius-lg); background: var(--sf-surface); overflow: hidden; }
.sf-setting { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 14px 24px; cursor: pointer; transition: background .2s ease; }
.sf-setting + .sf-setting { border-top: 1px solid var(--sf-line); }
.sf-setting:hover { background: color-mix(in srgb, var(--sf-fill) 55%, transparent); }
.sf-setting__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sf-fill); display: grid; place-content: center; }
.sf-setting__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-setting__label { font-size: 16px; font-weight: 600; }
.sf-setting__desc { font-size: 14px; line-height: 1.4; color: var(--sf-muted); }
.sf-setting:has(.sf-toggle[disabled]) { cursor: not-allowed; }
.sf-setting:has(.sf-toggle[disabled]) .sf-setting__text { opacity: .55; }
.sf-settings--flat { background: transparent; padding: 0; border-radius: 0; }
.sf-settings--flat .sf-setting { padding-left: 0; padding-right: 0; }
.sf-settings--flat .sf-setting:hover { background: transparent; }

/* =========================================================
   20. Segmented control extended
   ========================================================= */
.sf-segx { position: relative; display: flex; align-self: flex-start; max-width: 100%; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-segx__track { position: relative; display: flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--sf-pill); scroll-snap-type: x proximity; }
.sf-segx__track::-webkit-scrollbar { display: none; }
.sf-segx.can-scroll-start .sf-segx__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
.sf-segx.can-scroll-end .sf-segx__track { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 28px); mask-image: linear-gradient(270deg, transparent 0, #000 28px); }
.sf-segx.can-scroll-start.can-scroll-end .sf-segx__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.sf-segx__thumb { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--sf-w, 0); transform: translateX(var(--sf-x, 0)); border-radius: var(--sf-pill); background: var(--sf-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); pointer-events: none; opacity: 0; }
.sf-segx.is-ready .sf-segx__thumb { opacity: 1; transition: transform .5s var(--sf-spring), width .35s var(--sf-spring); }
.sf-segx__opt { position: relative; z-index: 1; flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--sf-pill); font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--sf-muted); cursor: pointer; transition: color .2s ease; }
.sf-segx__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sf-segx__opt:hover { color: var(--sf-ink); }
.sf-segx__opt:has(input:checked) { color: var(--sf-ink); }
.sf-segx:not(.is-ready) .sf-segx__opt:has(input:checked) { background: var(--sf-surface); }
.sf-segx__opt:has(input:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-segx__icon { display: grid; place-content: center; flex: none; transition: transform .4s var(--sf-spring); }
.sf-segx__opt:has(input:checked) .sf-segx__icon { transform: scale(1.18) rotate(-6deg); }
.sf-segx--block { display: flex; width: 100%; }
.sf-segx--block .sf-segx__track { width: 100%; }
.sf-segx--block .sf-segx__opt { flex: 1 0 auto; }

/* =========================================================
   21. Inline editable text
   ========================================================= */
.sf-editable { display: inline-block; max-width: 100%; margin: -2px -10px; vertical-align: bottom; }
.sf-editable__display { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 2px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; transition: background .2s ease; }
.sf-editable__display[hidden] { display: none; }
.sf-editable__display:hover { background: var(--sf-fill); }
.sf-editable__display:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-editable__text { overflow-wrap: anywhere; white-space: pre-wrap; }
.sf-editable__display.is-empty .sf-editable__text { color: var(--sf-muted); }
.sf-editable__pencil { flex: none; color: var(--sf-muted); opacity: 0; transform: scale(.5) rotate(-30deg); transition: opacity .2s ease, transform .4s var(--sf-spring); }
.sf-editable__display:hover .sf-editable__pencil, .sf-editable__display:focus-visible .sf-editable__pencil { opacity: 1; transform: none; }
@media (hover: none) { .sf-editable__pencil { opacity: .6; transform: none; } }
.sf-editable__display.is-saved .sf-editable__text { animation: sf-forms-inputs-saved .55s var(--sf-spring); }
.sf-editable__edit { display: inline-grid; max-width: 100%; min-width: 8ch; animation: sf-forms-inputs-pop-in .3s var(--sf-spring); }
.sf-editable__edit::after { content: attr(data-replicated) " "; grid-area: 1 / 1; visibility: hidden; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border: 2px solid transparent; font: inherit; }
.sf-editable__input { grid-area: 1 / 1; width: 100%; min-width: 0; padding: 8px 10px; margin: 0; resize: none; overflow: hidden; border: 2px solid var(--sf-ink); border-radius: 12px; background: var(--sf-surface); color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; }
.sf-editable__input:focus { outline: none; }
.sf-editable__edit.is-invalid .sf-editable__input { border-color: var(--sf-danger); animation: sf-shake .35s var(--sf-ease); }

/* =========================================================
   22. Floating label + validation states
   ========================================================= */
.sf-float { position: relative; width: 100%; transition: transform .4s var(--sf-spring); }
.sf-float:focus-within { transform: scale(1.02); }
.sf-float .sf-float__input { min-height: 58px; padding-top: 22px; padding-bottom: 6px; }
.sf-float .sf-float__input:focus { transform: none; }
.sf-float__input::placeholder { color: transparent; }
.sf-float__label { position: absolute; left: 20px; top: 17px; max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: var(--sf-muted); pointer-events: none; transform-origin: 0 0; transition: transform .4s var(--sf-spring), color .2s ease; }
.sf-float__input:focus ~ .sf-float__label, .sf-float__input:not(:placeholder-shown) ~ .sf-float__label { transform: translateY(-10px) scale(.76); }
.sf-float__input:focus ~ .sf-float__label { color: var(--sf-ink); }
.sf-float .sf-float__input[aria-invalid="true"] { animation: none; }

.sf-vfield { display: flex; flex-direction: column; width: 100%; --sf-state: var(--sf-muted); }
.sf-vfield__control { position: relative; }
.sf-vfield__control .sf-input { padding-right: 52px; }
.sf-vfield[data-state="success"] { --sf-state: var(--sf-forms-inputs-success-ink); }
.sf-vfield[data-state="warning"] { --sf-state: var(--sf-forms-inputs-warning-ink); }
.sf-vfield[data-state="error"] { --sf-state: var(--sf-forms-inputs-danger-ink); }
.sf-vfield[data-state="success"] .sf-input { border-color: var(--sf-forms-inputs-success); }
.sf-vfield[data-state="warning"] .sf-input { border-color: var(--sf-forms-inputs-warning); }
.sf-vfield[data-state="error"] .sf-input { border-color: var(--sf-danger); }
.sf-vfield[data-state="error"] .sf-vfield__control { animation: sf-shake .4s var(--sf-ease); }
.sf-vfield__icon { position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; }
.sf-vfield__icon svg { display: none; width: 24px; height: 24px; }
.sf-vfield[data-state="success"] .sf-vfield__ic--success, .sf-vfield[data-state="warning"] .sf-vfield__ic--warning, .sf-vfield[data-state="error"] .sf-vfield__ic--error { display: block; animation: sf-forms-inputs-icon-in .55s var(--sf-spring); }
.sf-vfield__ic--success { color: var(--sf-forms-inputs-success); }
.sf-vfield__ic--warning { color: var(--sf-forms-inputs-warning); }
.sf-vfield__ic--error { color: var(--sf-danger); }
.sf-vfield__ic--success path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: sf-forms-inputs-draw .5s .12s var(--sf-ease) forwards; }
.sf-vfield__msg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--sf-ease); }
.sf-vfield__msg > div { min-height: 0; overflow: hidden; }
.sf-vfield__msg span { display: block; padding-top: 8px; font-size: 13px; font-weight: 500; color: var(--sf-state); opacity: 0; transform: translateY(-10px); transition: transform .45s var(--sf-spring), opacity .2s ease; }
.sf-vfield[data-state="success"] .sf-vfield__msg, .sf-vfield[data-state="warning"] .sf-vfield__msg, .sf-vfield[data-state="error"] .sf-vfield__msg, .sf-vfield[data-state="info"] .sf-vfield__msg { grid-template-rows: 1fr; }
.sf-vfield[data-state="success"] .sf-vfield__msg span, .sf-vfield[data-state="warning"] .sf-vfield__msg span, .sf-vfield[data-state="error"] .sf-vfield__msg span, .sf-vfield[data-state="info"] .sf-vfield__msg span { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes sf-forms-inputs-bump-up { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.25); } 100% { transform: none; } }
@keyframes sf-forms-inputs-bump-down { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(7px) scale(1.25); } 100% { transform: none; } }
@keyframes sf-forms-inputs-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes sf-forms-inputs-chip-in { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes sf-forms-inputs-chip-out { 0% { transform: scale(1); } 30% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(.2); opacity: 0; max-width: 0; min-height: 0; padding: 0; margin-right: -6px; } }
@keyframes sf-forms-inputs-row-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes sf-forms-inputs-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg) scale(1.1); } 55% { transform: rotate(5deg) scale(1.1); } 80% { transform: rotate(-2deg); } }
@keyframes sf-forms-inputs-pop-in { 0% { opacity: 0; transform: translateY(-8px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes sf-forms-inputs-star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes sf-forms-inputs-hover-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sf-forms-inputs-avatar-in { 0% { transform: scale(.7) rotate(-8deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes sf-forms-inputs-saved { 0% { transform: scale(1); } 35% { transform: scale(1.06) translateY(-2px); } 100% { transform: none; } }
@keyframes sf-forms-inputs-icon-in { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 100% { opacity: 1; transform: none; } }
@keyframes sf-forms-inputs-draw { to { stroke-dashoffset: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-slider, .sf-slider *, .sf-rangeslider, .sf-rangeslider *, .sf-stepper, .sf-stepper *, .sf-otp, .sf-otp *,
  .sf-password, .sf-password *, .sf-searchbox, .sf-searchbox *, .sf-taginput, .sf-taginput *, .sf-combobox, .sf-combobox *,
  .sf-multiselect, .sf-multiselect *, .sf-dateinput, .sf-dateinput *, .sf-swatches, .sf-swatches *, .sf-rating, .sf-rating *,
  .sf-choice, .sf-choice *, .sf-dropzone, .sf-dropzone *, .sf-avatarup, .sf-avatarup *, .sf-autogrow, .sf-autogrow *,
  .sf-igroup, .sf-igroup *, .sf-actionbar, .sf-setting, .sf-segx, .sf-segx *, .sf-editable, .sf-editable *,
  .sf-float, .sf-float *, .sf-vfield, .sf-vfield * { animation: none !important; transition: none !important; }
  .sf-vfield__ic--success path { stroke-dashoffset: 0 !important; }
  .sf-taginput__chip.is-leaving, .sf-multiselect__chip.is-leaving, .sf-dropzone__item.is-leaving { display: none; }
}


/* ===== Feedback (forms-feedback) ===== */
/* Soft UI module: forms-feedback
   Feedback, status, overlays and guided flows. Needs soft.css (core tokens). */

:root {
  --sf-forms-feedback-success: #2FBF71;
  --sf-forms-feedback-warning: #F5A524;
  --sf-forms-feedback-info: #3B82F6;
}

/* ---------- Layout helpers (rows / columns for groups of examples) ---------- */
.sf-ffrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sf-ffcol { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Shared: status variants + icon tile ----------
   Every status block sets --sf-forms-feedback-c (colour) and -g (glyph). */
.sf-alert--info, .sf-callout--info, .sf-notice--info, .sf-dialog--info, .sf-valsummary--info { --sf-forms-feedback-c: var(--sf-forms-feedback-info); --sf-forms-feedback-g: "i"; --sf-forms-feedback-gc: #fff; }
.sf-alert--success, .sf-callout--success, .sf-notice--success, .sf-dialog--success { --sf-forms-feedback-c: var(--sf-forms-feedback-success); --sf-forms-feedback-g: "\2713"; --sf-forms-feedback-gc: #fff; }
.sf-alert--warning, .sf-callout--warning, .sf-notice--warning, .sf-dialog--warning { --sf-forms-feedback-c: var(--sf-forms-feedback-warning); --sf-forms-feedback-g: "!"; --sf-forms-feedback-gc: #111; }
.sf-alert--danger, .sf-callout--danger, .sf-notice--error, .sf-dialog--danger, .sf-valsummary { --sf-forms-feedback-c: var(--sf-danger); --sf-forms-feedback-g: "\00D7"; --sf-forms-feedback-gc: #fff; }

.sf-ficon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-content: center; background: var(--sf-forms-feedback-c, var(--sf-ink)); color: var(--sf-forms-feedback-gc, var(--sf-on-ink)); font-weight: 700; font-size: 15px; line-height: 1; }
.sf-ficon::before { content: var(--sf-forms-feedback-g, "i"); }

/* ---------- 1. Alert ---------- */
.sf-alert { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border-radius: var(--sf-radius); background: var(--sf-fill); background: color-mix(in srgb, var(--sf-forms-feedback-c, var(--sf-forms-feedback-info)) 14%, var(--sf-surface)); color: var(--sf-ink); font-size: 15px; line-height: 1.45; transform-origin: center top; animation: sf-forms-feedback-alert-in .55s var(--sf-spring) both; }
.sf-alert__body { flex: 1; min-width: 0; }
.sf-alert__title { display: block; font-weight: 700; }
.sf-alert__text { margin: 0; color: var(--sf-ink); opacity: .85; }
.sf-alert__action { flex: none; }
.sf-alert__close { flex: none; width: 44px; height: 44px; margin: -8px -4px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .25s var(--sf-spring), background .2s ease; }
.sf-alert__close:hover { background: var(--sf-fill); transform: rotate(90deg) scale(1.1); }
.sf-alert__close:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-alert.is-leaving, .sf-callout.is-leaving, .sf-undo.is-leaving { animation: sf-forms-feedback-spring-out .5s var(--sf-ease) forwards; pointer-events: none; }
.sf-alert.is-collapsing, .sf-callout.is-collapsing, .sf-undo.is-collapsing { overflow: hidden; height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; transition: height .3s var(--sf-ease), margin .3s var(--sf-ease), padding .3s var(--sf-ease); }
@media (max-width: 520px) {
  .sf-alert { flex-wrap: wrap; row-gap: 10px; }
  .sf-alert__body { flex-basis: calc(100% - 100px); }
  .sf-alert__close { order: 2; align-self: flex-start; margin-top: -6px; }
  .sf-alert__action { order: 3; margin-left: 42px; }
}

/* ---------- 2. Callout / inline banner ---------- */
.sf-callout { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); border: 2px solid var(--sf-line); border-left: 6px solid var(--sf-forms-feedback-c, var(--sf-forms-feedback-info)); color: var(--sf-ink); }
.sf-callout .sf-ficon { width: 32px; height: 32px; margin-top: 1px; }
.sf-callout__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sf-callout__body { margin: 0; color: var(--sf-muted); font-size: 15px; line-height: 1.55; }
.sf-callout__body a { color: var(--sf-ink); font-weight: 600; }
.sf-callout--tint { border-color: transparent; background: var(--sf-fill); background: color-mix(in srgb, var(--sf-forms-feedback-c, var(--sf-forms-feedback-info)) 12%, var(--sf-surface)); }
.sf-callout--tint .sf-callout__body { color: var(--sf-ink); opacity: .85; }

/* ---------- 3. Toast (notice) ---------- */
.sf-notices { position: fixed; z-index: 1100; max-height: 100vh; max-height: 100dvh; transition: bottom .35s var(--sf-ease); display: flex; flex-direction: column; gap: 10px; padding: 16px; width: min(100vw, 412px); pointer-events: none; --sf-forms-feedback-from: 24px; }
.sf-notices[data-sf-placement^="top"] { top: 0; --sf-forms-feedback-from: -24px; }
.sf-notices[data-sf-placement^="bottom"] { bottom: 0; }
.sf-notices[data-sf-placement$="left"] { left: 0; align-items: flex-start; }
.sf-notices[data-sf-placement$="right"] { right: 0; align-items: flex-end; }
.sf-notices[data-sf-placement$="center"] { left: 50%; transform: translateX(-50%); align-items: center; }
.sf-notice { --sf-forms-feedback-dur: 4500ms; position: relative; overflow: hidden; pointer-events: auto; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 8px 14px 16px; border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); border: 2px solid var(--sf-line); font-size: 15px; line-height: 1.4; animation: sf-forms-feedback-notice-in .6s var(--sf-spring) both; }
.sf-notice--loading { --sf-forms-feedback-c: var(--sf-muted); }
.sf-notice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-notice__title { font-weight: 700; }
.sf-notice__text { color: var(--sf-muted); }
.sf-notice__action { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .2s var(--sf-spring); }
.sf-notice__action:hover { transform: scale(1.06); }
.sf-notice__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); font: inherit; font-size: 20px; cursor: pointer; transition: transform .25s var(--sf-spring), color .2s ease; }
.sf-notice__close:hover { color: var(--sf-ink); transform: rotate(90deg); }
.sf-notice__action:focus-visible, .sf-notice__close:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-notice__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sf-forms-feedback-c, var(--sf-ink)); transform-origin: left center; animation: sf-forms-feedback-timer var(--sf-forms-feedback-dur) linear forwards; }
.sf-notice.is-paused .sf-notice__bar { animation-play-state: paused; }
.sf-notice--static .sf-notice__bar, .sf-notice--loading .sf-notice__bar { animation: none; display: none; }
.sf-notice.is-leaving { animation: sf-forms-feedback-notice-out .3s var(--sf-ease) both; pointer-events: none; }
.sf-notice.is-collapsing, .sf-snackbar.is-collapsing { height: 0 !important; min-height: 0; padding-block: 0; border-width: 0; margin-bottom: -10px; transition: height .25s var(--sf-ease), padding .25s var(--sf-ease), margin .25s var(--sf-ease); }

/* ---------- 4. Snackbar ---------- */
.sf-snackbars { position: fixed; z-index: 1101; left: 50%; bottom: 20px; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100vw - 32px), 460px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; pointer-events: none; }
.sf-snackbar { --sf-forms-feedback-dur: 6000ms; pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 22px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 15px; font-weight: 600; animation: sf-forms-feedback-snack-in .6s var(--sf-spring) both; }
.sf-snackbar__text { flex: 1; min-width: 0; }
.sf-snackbar__action { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--sf-pill); background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: transform .2s var(--sf-spring), background .2s ease; }
.sf-snackbar__action:hover { transform: scale(1.06); background: color-mix(in srgb, var(--sf-on-ink) 16%, transparent); }
.sf-snackbar__action:focus-visible { outline: 3px solid var(--sf-on-ink); outline-offset: -3px; }
.sf-snackbar__ring { flex: none; width: 36px; height: 36px; transform: rotate(-90deg); margin-right: 4px; }
.sf-snackbar__ring circle { fill: none; stroke-width: 3; }
.sf-snackbar__ring circle:first-child { stroke: currentColor; opacity: .25; }
.sf-snackbar__ring circle:last-child { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: sf-forms-feedback-ring-down var(--sf-forms-feedback-dur) linear forwards; }
.sf-snackbar.is-paused .sf-snackbar__ring circle:last-child { animation-play-state: paused; }
.sf-snackbar.is-leaving { animation: sf-forms-feedback-notice-out .3s var(--sf-ease) both; pointer-events: none; }
.sf-snackbar--static { position: relative; max-width: 460px; }
.sf-snackbar--static .sf-snackbar__ring circle:last-child { animation-iteration-count: infinite; }

/* ---------- 5. Empty state ---------- */
.sf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); }
.sf-empty__art { position: relative; width: 170px; height: 124px; margin-bottom: 14px; animation: sf-forms-feedback-float 3.4s ease-in-out infinite; }
.sf-empty__sheet { position: absolute; left: 20px; top: 14px; width: 86px; height: 98px; border-radius: 20px; background: var(--sf-fill); transform: rotate(-9deg); }
.sf-empty__sheet--front { left: 58px; top: 8px; background: var(--sf-ink); transform: rotate(5deg); }
.sf-empty__sheet--front::before, .sf-empty__sheet--front::after { content: ""; position: absolute; left: 16px; height: 8px; border-radius: 4px; background: var(--sf-on-ink); opacity: .85; }
.sf-empty__sheet--front::before { top: 24px; width: 46px; }
.sf-empty__sheet--front::after { top: 44px; width: 30px; opacity: .4; }
.sf-empty__dot { position: absolute; right: 14px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: #FFC857; animation: sf-bob 2.2s ease-in-out infinite; }
.sf-empty__dot--b { right: auto; left: 8px; top: auto; bottom: 4px; width: 16px; height: 16px; background: #5CC8FF; animation-delay: -.8s; }
.sf-empty__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sf-empty__text { margin: 0 0 14px; max-width: 34ch; color: var(--sf-muted); line-height: 1.5; }

/* ---------- 6. Error state ---------- */
.sf-errorstate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); }
.sf-errorstate__code { display: inline-flex; align-items: center; gap: .04em; font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.sf-errorstate__code i { display: inline-block; width: .6em; height: .7em; border: .14em solid var(--sf-danger); border-radius: 50%; animation: sf-forms-feedback-wobble 2.6s var(--sf-spring) infinite; }
.sf-errorstate__title { margin: 6px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sf-errorstate__text { margin: 0 0 14px; max-width: 38ch; color: var(--sf-muted); line-height: 1.5; }
.sf-errorstate__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- 7. Success checkmark and error cross (SVG stroke draw) ---------- */
.sf-drawmark { width: 72px; height: 72px; fill: none; stroke: var(--sf-forms-feedback-success); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; animation: sf-forms-feedback-mark-pop .5s var(--sf-spring) .75s both; }
.sf-drawmark--error { stroke: var(--sf-danger); }
.sf-drawmark--lg { width: 104px; height: 104px; }
.sf-drawmark--sm { width: 44px; height: 44px; }
.sf-drawmark circle, .sf-drawmark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sf-forms-feedback-draw .6s var(--sf-ease) forwards; }
.sf-drawmark path { animation-delay: .45s; animation-duration: .45s; }
.sf-drawmark path + path { animation-delay: .65s; }
.sf-drawmark--error { animation-name: sf-forms-feedback-mark-shake; animation-timing-function: var(--sf-ease); animation-duration: .45s; animation-delay: .8s; }
.sf-drawmark.is-reset, .sf-drawmark.is-reset * { animation: none; }
.sf-drawmark.is-reset circle, .sf-drawmark.is-reset path { stroke-dashoffset: 1; }

/* ---------- 8. Spinner set ---------- */
.sf-spinner { --sf-forms-feedback-s: 28px; display: inline-block; flex: none; width: var(--sf-forms-feedback-s); height: var(--sf-forms-feedback-s); color: var(--sf-ink); vertical-align: middle; box-sizing: border-box; border: calc(var(--sf-forms-feedback-s) / 9) solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor; border-radius: 50%; animation: sf-forms-feedback-spin .75s linear infinite; }
.sf-spinner--sm { --sf-forms-feedback-s: 18px; }
.sf-spinner--lg { --sf-forms-feedback-s: 44px; }
.sf-spinner--xl { --sf-forms-feedback-s: 64px; }
.sf-spinner--dots, .sf-spinner--bars { width: auto; border: 0; border-radius: 0; animation: none; display: inline-flex; align-items: center; gap: calc(var(--sf-forms-feedback-s) / 8); }
.sf-spinner--dots i { width: calc(var(--sf-forms-feedback-s) / 3.2); height: calc(var(--sf-forms-feedback-s) / 3.2); border-radius: 50%; background: currentColor; animation: sf-forms-feedback-dot .9s var(--sf-ease) infinite; }
.sf-spinner--dots i:nth-child(2) { animation-delay: .12s; } .sf-spinner--dots i:nth-child(3) { animation-delay: .24s; }
.sf-spinner--bars { gap: calc(var(--sf-forms-feedback-s) / 9); }
.sf-spinner--bars i { width: calc(var(--sf-forms-feedback-s) / 6); height: 100%; border-radius: var(--sf-pill); background: currentColor; animation: sf-forms-feedback-bar .9s ease-in-out infinite; }
.sf-spinner--bars i:nth-child(2) { animation-delay: .1s; } .sf-spinner--bars i:nth-child(3) { animation-delay: .2s; } .sf-spinner--bars i:nth-child(4) { animation-delay: .3s; }
.sf-spinner--pulse { position: relative; border: 0; background: currentColor; animation: sf-forms-feedback-pulse 1.1s var(--sf-ease) infinite; }
.sf-spinner--pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid currentColor; animation: sf-forms-feedback-ping 1.1s var(--sf-ease) infinite; }

/* ---------- 9. Progress ring + step progress ---------- */
.sf-ring { --sf-value: 0; --sf-forms-feedback-ring: 112px; position: relative; display: inline-grid; place-content: center; width: var(--sf-forms-feedback-ring); height: var(--sf-forms-feedback-ring); color: var(--sf-ink); }
.sf-ring--sm { --sf-forms-feedback-ring: 72px; }
.sf-ring--lg { --sf-forms-feedback-ring: 160px; }
.sf-ring--success { color: var(--sf-forms-feedback-success); }
.sf-ring--danger { color: var(--sf-danger); }
.sf-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sf-ring circle { fill: none; stroke-width: 9; }
.sf-ring__track { stroke: var(--sf-fill); }
.sf-ring__bar { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--sf-value) 100; transition: stroke-dasharray 1.1s var(--sf-spring); }
.sf-ring__label { position: relative; display: block; line-height: 1; text-align: center; font-size: calc(var(--sf-forms-feedback-ring) * .24); font-weight: 700; letter-spacing: -.03em; color: var(--sf-ink); font-variant-numeric: tabular-nums; }

.sf-stepbar { display: flex; flex-direction: column; gap: 10px; }
.sf-stepbar__track { display: flex; gap: 6px; }
.sf-stepbar__seg { position: relative; flex: 1; height: 10px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-stepbar__seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sf-ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--sf-spring); }
.sf-stepbar__seg.is-done::after { transform: scaleX(1); }
.sf-stepbar__seg.is-current:not(.is-done)::after { transform: scaleX(.5); }
.sf-stepbar__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--sf-muted); }

/* ---------- 10. Stepper ---------- */
.sf-wizsteps { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 6px; }
.sf-wizsteps__item { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-wizsteps__item:last-child { flex: none; }
.sf-wizsteps__item::after { content: ""; flex: 1; min-width: 14px; height: 3px; margin-right: 8px; border-radius: 2px; background: var(--sf-line); transition: background .4s ease; }
.sf-wizsteps__item:last-child::after { display: none; }
.sf-wizsteps__item[data-state="done"]::after { background: var(--sf-ink); }
.sf-wizsteps__dot { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; background: var(--sf-fill); color: var(--sf-ink); font-size: 15px; font-weight: 700; transition: background .3s ease, color .3s ease, transform .4s var(--sf-spring); }
.sf-wizsteps__item[data-state="done"] .sf-wizsteps__dot { background: var(--sf-ink); color: var(--sf-on-ink); font-size: 0; }
.sf-wizsteps__item[data-state="done"] .sf-wizsteps__dot::before { content: "\2713"; font-size: 17px; }
.sf-wizsteps__item[data-state="current"] .sf-wizsteps__dot { background: var(--sf-ink); color: var(--sf-on-ink); box-shadow: 0 0 0 4px var(--sf-line); transform: scale(1.1); }
.sf-wizsteps__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sf-wizsteps__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.sf-wizsteps__sub { font-size: 12px; color: var(--sf-muted); white-space: nowrap; }
.sf-wizsteps__item[data-state="todo"] .sf-wizsteps__label { color: var(--sf-muted); }
.sf-wizsteps--vertical { flex-direction: column; gap: 0; }
.sf-wizsteps--vertical .sf-wizsteps__item, .sf-wizsteps--vertical .sf-wizsteps__item:last-child { flex: none; align-items: flex-start; padding-bottom: 30px; }
.sf-wizsteps--vertical .sf-wizsteps__item:last-child { padding-bottom: 0; }
.sf-wizsteps--vertical .sf-wizsteps__item::after { position: absolute; min-width: 0; left: 17.5px; top: 46px; bottom: 8px; width: 3px; height: auto; margin: 0; flex: none; }
.sf-wizsteps--vertical .sf-wizsteps__text { padding-top: 2px; }
/* Responds to its own width (works inside narrow cards and the wizard, not only on phones) */
.sf-wizsteps:not(.sf-wizsteps--vertical) { container: sf-wizsteps / inline-size; }
@container sf-wizsteps (max-width: 560px) {
  .sf-wizsteps__item:not([data-state="current"]) .sf-wizsteps__text { display: none; }
  .sf-wizsteps__item { gap: 6px; }
  .sf-wizsteps__item[data-state="current"] { flex: 3 1 auto; }
  .sf-wizsteps__item:not([data-state="current"]):not(:last-child) { flex: 1 0 auto; }
  .sf-wizsteps__label, .sf-wizsteps__sub { overflow: hidden; text-overflow: ellipsis; }
  .sf-wizsteps__item::after { min-width: 8px; margin-right: 0; }
}
@container sf-wizsteps (max-width: 280px) {
  .sf-wizsteps__item .sf-wizsteps__text { display: none; }
  .sf-wizsteps__item, .sf-wizsteps__item[data-state="current"] { flex: 1; }
  .sf-wizsteps__item:last-child { flex: none; }
  .sf-wizsteps__dot { width: 34px; height: 34px; }
}

/* ---------- 11. Multi-step form wizard ---------- */
.sf-wizard { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); }
.sf-wizard__viewport { overflow: hidden; overflow: clip; margin: 0 -8px; transition: height .5s var(--sf-ease); }
.sf-wizard__track { display: flex; align-items: flex-start; transition: transform .65s var(--sf-spring); }
.sf-wizard__panel { flex: 0 0 100%; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 18px; }
.sf-wizard__panel[inert] { visibility: hidden; transition: visibility 0s .65s; }
.sf-wizard__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sf-wizard__lede { margin: -10px 0 0; color: var(--sf-muted); }
.sf-wizard__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; container: sf-wizfoot / inline-size; }
.sf-wizard__footer > .sf-btn:not(.sf-btn--light) { margin-left: auto; }
.sf-wizard__footer[hidden], .sf-wizard__footer [hidden] { display: none; }
.sf-wizard__status { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--sf-muted); }
@container sf-wizfoot (max-width: 420px) { .sf-wizard__status { order: -1; flex-basis: 100%; text-align: left; } }
@media (max-width: 520px) { .sf-wizard { padding: 22px 20px; } }
.sf-wizard__summary { margin: 0; display: flex; flex-direction: column; }
.sf-wizard__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 2px solid var(--sf-fill); }
.sf-wizard__row dt { grid-column: 1; font-size: 13px; color: var(--sf-muted); font-weight: 600; }
.sf-wizard__row dd { grid-column: 1; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sf-wizard__row button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--sf-pill); background: transparent; color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-wizard__row button:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-wizard__done { align-items: center; text-align: center; padding-block: 24px; }
.sf-wizard__choices { display: flex; flex-direction: column; gap: 10px; }
.sf-wizard__choices .sf-option { padding: 12px 16px; border-radius: var(--sf-radius); background: var(--sf-fill); }

/* ---------- 12. Confirm + alert dialogs (build on .sf-modal) ---------- */
.sf-dialog__icon { width: 52px; height: 52px; margin-bottom: 16px; font-size: 26px; }
.sf-dialog--center { text-align: center; }
.sf-dialog--center .sf-dialog__icon { margin-inline: auto; }
.sf-dialog--center .sf-modal__actions { justify-content: center; }
.sf-dialog.is-closing { animation: sf-forms-feedback-dialog-out .24s var(--sf-ease) forwards; }
.sf-dialog.is-closing::backdrop { opacity: 0; transition: opacity .24s ease; }

/* ---------- 13. Drawer / side sheet / bottom sheet (<dialog class="sf-drawer sf-drawer--right|left|bottom">) ---------- */
.sf-drawer { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--sf-ink); overflow: hidden; overflow: clip; } /* clip: focusing a control mid-slide must not scroll the dialog */
.sf-drawer::backdrop { background: rgba(10, 10, 12, .35); backdrop-filter: blur(6px); animation: sf-fade .3s ease; }
.sf-drawer.is-closing::backdrop { opacity: 0; transition: opacity .3s ease; }
.sf-drawer__panel { position: absolute; display: flex; flex-direction: column; min-height: 0; background: var(--sf-surface); }
.sf-drawer__panel::before { content: ""; position: absolute; background: inherit; pointer-events: none; } /* hides spring overshoot gap */
.sf-drawer--right .sf-drawer__panel { top: 0; right: 0; bottom: 0; width: min(92vw, 420px); border-radius: var(--sf-radius-lg) 0 0 var(--sf-radius-lg); }
.sf-drawer--right .sf-drawer__panel::before { top: 0; bottom: 0; left: calc(100% - 1px); width: 90px; }
.sf-drawer--left .sf-drawer__panel { top: 0; left: 0; bottom: 0; width: min(92vw, 420px); border-radius: 0 var(--sf-radius-lg) var(--sf-radius-lg) 0; }
.sf-drawer--left .sf-drawer__panel::before { top: 0; bottom: 0; right: calc(100% - 1px); width: 90px; }
.sf-drawer--bottom .sf-drawer__panel { left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(100%, 640px); max-height: 86vh; max-height: 86dvh; border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0; touch-action: pan-y; }
.sf-drawer--bottom .sf-drawer__panel::before { left: 0; right: 0; top: calc(100% - 1px); height: 90px; }
.sf-drawer[open] .sf-drawer__panel { animation: sf-forms-feedback-drawer-r .6s var(--sf-spring) backwards; }
.sf-drawer--left[open] .sf-drawer__panel { animation-name: sf-forms-feedback-drawer-l; }
.sf-drawer--bottom[open] .sf-drawer__panel { animation-name: sf-forms-feedback-drawer-b; }
.sf-drawer.is-closing .sf-drawer__panel { animation: sf-forms-feedback-drawer-r-out .3s var(--sf-ease) forwards; }
.sf-drawer--left.is-closing .sf-drawer__panel { animation-name: sf-forms-feedback-drawer-l-out; }
.sf-drawer--bottom.is-closing .sf-drawer__panel { animation-name: sf-forms-feedback-drawer-b-out; }
.sf-drawer__handle { display: none; flex: none; height: 28px; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.sf-drawer__handle::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--sf-line); transition: width .25s var(--sf-spring), background .2s ease; }
.sf-drawer__handle:hover::before, .sf-drawer__handle.is-dragging::before { width: 60px; background: var(--sf-muted); }
.sf-drawer--bottom .sf-drawer__handle { display: flex; }
.sf-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 8px 28px; }
.sf-drawer--bottom .sf-drawer__head { padding-top: 4px; }
.sf-drawer__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sf-drawer__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 28px 24px; line-height: 1.55; color: var(--sf-muted); }
.sf-drawer__body > * + * { margin-top: 16px; }
.sf-drawer__body .sf-option { display: flex; }
.sf-drawer__foot { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 28px 24px; border-top: 2px solid var(--sf-fill); }

/* ---------- 14. Popover ---------- */
.sf-popover { position: fixed; z-index: 1200; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 16px 18px; border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); border: 2px solid var(--sf-line); box-shadow: 0 16px 48px rgba(0, 0, 0, .16); font-size: 15px; line-height: 1.5; transform-origin: var(--sf-forms-feedback-ox, 50%) var(--sf-forms-feedback-oy, 0); }
.sf-popover[hidden] { display: none; }
.sf-popover.is-open { animation: sf-forms-feedback-popover-in .4s var(--sf-spring) both; }
.sf-popover__title { display: block; margin-bottom: 4px; font-weight: 700; }
.sf-popover p { margin: 0; color: var(--sf-muted); }
.sf-popover__actions { display: flex; gap: 8px; margin-top: 14px; }
.sf-popover__arrow { position: absolute; width: 14px; height: 14px; background: var(--sf-surface); border: 2px solid var(--sf-line); transform: rotate(45deg); border-radius: 3px; pointer-events: none; }
.sf-popover[data-sf-side="bottom"] .sf-popover__arrow { top: -9px; left: var(--sf-forms-feedback-ax, 50%); margin-left: -7px; border-right-color: transparent; border-bottom-color: transparent; }
.sf-popover[data-sf-side="top"] .sf-popover__arrow { bottom: -9px; left: var(--sf-forms-feedback-ax, 50%); margin-left: -7px; border-left-color: transparent; border-top-color: transparent; }
.sf-popover[data-sf-side="right"] .sf-popover__arrow { left: -9px; top: var(--sf-forms-feedback-ay, 50%); margin-top: -7px; border-right-color: transparent; border-top-color: transparent; }
.sf-popover[data-sf-side="left"] .sf-popover__arrow { right: -9px; top: var(--sf-forms-feedback-ay, 50%); margin-top: -7px; border-left-color: transparent; border-bottom-color: transparent; }

/* ---------- 15. Tooltip upgrade (placement + rich) ----------
   Core tooltip is top-only. Add data-sf-placement="top|bottom|left|right" on [data-sf-tip].
   JS flips the side when there is no room and nudges top/bottom tips inside the viewport (--sf-forms-feedback-tipx). */
[data-sf-tip]::after { transform: translateX(calc(-50% + var(--sf-forms-feedback-tipx, 0px))) scale(.6); }
[data-sf-tip]:hover::after, [data-sf-tip]:focus-visible::after { transform: translateX(calc(-50% + var(--sf-forms-feedback-tipx, 0px))) scale(1); }
[data-sf-tip][data-sf-placement="bottom"]::after { bottom: auto; top: calc(100% + 10px); transform-origin: top center; }
[data-sf-tip][data-sf-placement="left"]::after, [data-sf-tip][data-sf-placement="right"]::after { bottom: auto; top: 50%; transform: translateY(-50%) scale(.6); }
[data-sf-tip][data-sf-placement="left"]::after { left: auto; right: calc(100% + 10px); transform-origin: right center; }
[data-sf-tip][data-sf-placement="right"]::after { left: calc(100% + 10px); transform-origin: left center; }
[data-sf-tip][data-sf-placement="bottom"]:hover::after, [data-sf-tip][data-sf-placement="bottom"]:focus-visible::after { transform: translateX(calc(-50% + var(--sf-forms-feedback-tipx, 0px))) scale(1); }
[data-sf-tip][data-sf-placement="left"]:hover::after, [data-sf-tip][data-sf-placement="left"]:focus-visible::after,
[data-sf-tip][data-sf-placement="right"]:hover::after, [data-sf-tip][data-sf-placement="right"]:focus-visible::after { transform: translateY(-50%) scale(1); }

.sf-tipcard { position: relative; display: inline-block; --sf-forms-feedback-tx: -50%; --sf-forms-feedback-ty: 0; }
.sf-tipcard__bubble { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: min(260px, 80vw); padding: 14px 16px; border-radius: var(--sf-radius); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 14px; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(var(--sf-forms-feedback-tx), var(--sf-forms-feedback-ty)) scale(.85); transform-origin: bottom center; transition: transform .35s var(--sf-spring), opacity .15s ease, visibility 0s .15s; }
.sf-tipcard__bubble strong { display: block; margin-bottom: 2px; }
.sf-tipcard__bubble kbd { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 6px; background: color-mix(in srgb, var(--sf-on-ink) 20%, transparent); font: inherit; font-size: 12px; font-weight: 700; }
.sf-tipcard:hover .sf-tipcard__bubble, .sf-tipcard:focus-within .sf-tipcard__bubble { opacity: 1; visibility: visible; transform: translate(var(--sf-forms-feedback-tx), var(--sf-forms-feedback-ty)) scale(1); transition: transform .35s var(--sf-spring), opacity .15s ease; }
.sf-tipcard[data-sf-placement="bottom"] .sf-tipcard__bubble { bottom: auto; top: calc(100% + 12px); transform-origin: top center; }
.sf-tipcard[data-sf-placement="left"] .sf-tipcard__bubble, .sf-tipcard[data-sf-placement="right"] .sf-tipcard__bubble { bottom: auto; top: 50%; --sf-forms-feedback-tx: 0; --sf-forms-feedback-ty: -50%; }
.sf-tipcard[data-sf-placement="left"] .sf-tipcard__bubble { left: auto; right: calc(100% + 12px); transform-origin: right center; }
.sf-tipcard[data-sf-placement="right"] .sf-tipcard__bubble { left: calc(100% + 12px); transform-origin: left center; }

/* ---------- 16. Status dot / presence ---------- */
.sf-status { --sf-forms-feedback-c: var(--sf-forms-feedback-success); position: relative; display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sf-forms-feedback-c); vertical-align: middle; }
.sf-status--away { --sf-forms-feedback-c: var(--sf-forms-feedback-warning); }
.sf-status--busy { --sf-forms-feedback-c: var(--sf-danger); }
.sf-status--offline { --sf-forms-feedback-c: var(--sf-muted); }
.sf-status--sm { width: 8px; height: 8px; }
.sf-status--lg { width: 18px; height: 18px; }
.sf-status--ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sf-forms-feedback-c); animation: sf-forms-feedback-ping 1.7s var(--sf-ease) infinite; }
.sf-status--busy::before { content: ""; position: absolute; left: 25%; right: 25%; top: 43%; height: 14%; border-radius: 2px; background: #fff; }
.sf-status-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sf-presence { position: relative; display: inline-block; }
.sf-presence > .sf-status { position: absolute; right: -3px; bottom: -3px; box-sizing: content-box; border: 3px solid var(--sf-surface); }

/* ---------- 17. Notification bell ---------- */
.sf-bell { position: relative; display: inline-block; }
.sf-bell__btn { position: relative; }
.sf-bell__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
.sf-bell.is-ringing .sf-bell__btn svg { animation: sf-forms-feedback-ring-bell .8s var(--sf-ease); }
.sf-bell__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-content: center; border-radius: var(--sf-pill); border: 2px solid var(--sf-bg); background: var(--sf-danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bell__count[hidden] { display: none; }
.sf-bell.is-ringing .sf-bell__count { animation: sf-forms-feedback-bounce .7s var(--sf-spring); }
.sf-bell__menu { position: absolute; z-index: 80; right: 0; top: calc(100% + 12px); width: min(calc(100vw - 16px), 360px); translate: var(--sf-forms-feedback-shift, 0px) 0; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); border: 2px solid var(--sf-line); box-shadow: 0 20px 60px rgba(0, 0, 0, .16); transform-origin: top right; animation: sf-forms-feedback-popover-in .45s var(--sf-spring) both; }
.sf-bell--left .sf-bell__menu { right: auto; left: 0; transform-origin: top left; }
.sf-bell__menu.is-up { top: auto; bottom: calc(100% + 12px); transform-origin: bottom right; }
.sf-bell--left .sf-bell__menu.is-up { transform-origin: bottom left; }
.sf-bell__menu[hidden] { display: none; }
.sf-bell__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 6px 22px; }
.sf-bell__head strong { font-size: 17px; }
.sf-bell__read { min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--sf-pill); background: transparent; color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-bell__read:focus-visible, .sf-bell__item:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-bell__list { list-style: none; margin: 0; padding: 6px; max-height: min(320px, 55vh); overflow: auto; overscroll-behavior: contain; }
.sf-bell__item { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 12px 36px 12px 14px; border: 0; border-radius: var(--sf-radius); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s ease; }
.sf-bell__item:hover { background: var(--sf-fill); }
.sf-bell__item.is-unread::after { content: ""; position: absolute; right: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--sf-forms-feedback-info); }
.sf-bell__item.is-new { animation: sf-forms-feedback-notice-in .55s var(--sf-spring); }
.sf-bell__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sf-bell__time { display: block; font-size: 13px; color: var(--sf-muted); }
.sf-bell__empty { padding: 28px 20px; text-align: center; color: var(--sf-muted); }

/* ---------- 18. Onboarding tour / coachmark ---------- */
.sf-tour { position: fixed; inset: 0; z-index: 1300; }
.sf-tour[hidden] { display: none; }
.sf-tour__veil { position: absolute; inset: 0; }
.sf-tour__spot { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: var(--sf-radius); box-shadow: 0 0 0 9999px rgba(10, 10, 12, .6); pointer-events: none; transition: left .5s var(--sf-spring), top .5s var(--sf-spring), width .5s var(--sf-spring), height .5s var(--sf-spring), opacity .3s ease; }
.sf-tour.is-tracking .sf-tour__spot, .sf-tour.is-tracking .sf-tour__card { transition: none; }
.sf-tour__card { position: fixed; max-height: calc(100vh - 16px); overflow: auto; left: 0; top: 0; width: min(calc(100vw - 24px), 340px); padding: 22px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); transition: left .5s var(--sf-spring), top .5s var(--sf-spring); animation: sf-forms-feedback-popover-in .5s var(--sf-spring) both; }
.sf-tour__count { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--sf-muted); }
.sf-tour__title { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sf-tour__text { margin: 0 0 18px; color: var(--sf-muted); line-height: 1.5; font-size: 15px; }
.sf-tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-tour__dots { display: flex; gap: 6px; }
.sf-tour__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-line); transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-tour__dots i.is-on { background: var(--sf-ink); transform: scale(1.3); }
.sf-tour__btns { display: flex; gap: 8px; align-items: center; }
.sf-tour__skip { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--sf-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--sf-pill); }
.sf-tour__skip:hover { color: var(--sf-ink); }
.sf-tour__skip:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }

/* ---------- 19. Emoji reaction / feedback widget ---------- */
.sf-fbreact { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); text-align: center; }
.sf-fbreact__q { margin: 0; font-weight: 700; }
.sf-fbreact__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sf-fbreact__btn { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-content: center; background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-fbreact__btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-fbreact__btn--down svg { transform: scaleY(-1); }
@media (max-width: 420px) { .sf-fbreact { padding: 20px 16px; } .sf-fbreact__row { gap: 6px; } .sf-fbreact__btn { width: 48px; height: 48px; } }
.sf-fbreact__btn:hover { transform: scale(1.18) rotate(-6deg); }
.sf-fbreact__btn:active { transform: scale(1.1, .86); }
.sf-fbreact__btn:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-fbreact__btn[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); animation: sf-tick .5s var(--sf-spring); }
.sf-fbreact__thanks { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sf-fbreact__thanks[hidden] { display: none; }
.sf-fbreact__change { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--sf-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; border-radius: var(--sf-pill); }
.sf-fbreact__change:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-fbreact.is-done .sf-fbreact__q, .sf-fbreact.is-done .sf-fbreact__row { display: none; }

/* ---------- 20. Undo bar / inline confirmation ---------- */
.sf-undo { position: relative; }
.sf-undo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 10px 8px 18px; border-radius: var(--sf-radius); background: var(--sf-surface); border: 2px solid var(--sf-line); color: var(--sf-ink); font-weight: 600; }
.sf-undo__row[hidden], .sf-undo__bar[hidden] { display: none; }
.sf-undo__bar { --sf-forms-feedback-dur: 5000ms; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 12px 10px 20px; border-radius: var(--sf-radius); background: var(--sf-ink); color: var(--sf-on-ink); font-weight: 600; animation: sf-forms-feedback-notice-in .5s var(--sf-spring) both; }
.sf-undo__btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: var(--sf-on-ink); color: var(--sf-ink); font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s var(--sf-spring); }
.sf-undo__btn:hover { transform: scale(1.06); }
.sf-undo__btn:focus-visible { outline: 3px solid var(--sf-on-ink); outline-offset: 3px; }
.sf-undo__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sf-on-ink); opacity: .55; transform-origin: left center; animation: sf-forms-feedback-timer var(--sf-forms-feedback-dur) linear forwards; }

/* ---------- 21. Validation summary + field error animations ---------- */
.sf-valsummary { padding: 16px 18px; border-radius: var(--sf-radius); border-left: 6px solid var(--sf-forms-feedback-c); background: var(--sf-fill); background: color-mix(in srgb, var(--sf-forms-feedback-c, var(--sf-danger)) 12%, var(--sf-surface)); color: var(--sf-ink); animation: sf-forms-feedback-alert-in .5s var(--sf-spring) both; }
.sf-valsummary[hidden] { display: none; }
.sf-valsummary__title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.sf-valsummary__title .sf-ficon { width: 24px; height: 24px; font-size: 14px; animation: sf-forms-feedback-icon-pop .5s var(--sf-spring) both; }
.sf-valsummary ul { margin: 0; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 2px; }
.sf-valsummary li { font-size: 14px; }
.sf-valsummary a { display: inline-block; min-height: 28px; line-height: 28px; color: var(--sf-ink); font-weight: 600; text-underline-offset: 3px; }
.sf-valsummary a:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; border-radius: 4px; }
.sf-error--anim { display: flex; align-items: center; gap: 8px; font-weight: 500; animation: sf-forms-feedback-error-in .4s var(--sf-spring) both; }
.sf-error--anim::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-content: center; background: var(--sf-danger); color: #fff; font-size: 12px; font-weight: 700; animation: sf-forms-feedback-icon-pop .5s var(--sf-spring) .1s both; }
.sf-select[aria-invalid="true"] { border-color: var(--sf-danger); animation: sf-shake .4s var(--sf-ease); }
.sf-field.is-shaking { animation: sf-shake .4s var(--sf-ease); }

/* ---------- 22. Rate / usage meter ---------- */
.sf-usage { --sf-value: 60; --sf-forms-feedback-segs: 10; --sf-forms-feedback-warn: 70; --sf-forms-feedback-crit: 90; display: flex; flex-direction: column; gap: 8px; color: var(--sf-ink); }
.sf-usage__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.sf-usage__head span:last-child { color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-usage__track { height: 16px; border-radius: var(--sf-pill); overflow: hidden; }
.sf-usage__segs { height: 100%; background: var(--sf-fill); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--sf-forms-feedback-segs) - 4px), transparent 0 calc(100% / var(--sf-forms-feedback-segs))); mask-image: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--sf-forms-feedback-segs) - 4px), transparent 0 calc(100% / var(--sf-forms-feedback-segs))); }
.sf-usage__fill { height: 100%; width: calc(var(--sf-value) * 1%); background: linear-gradient(90deg, var(--sf-forms-feedback-success) calc(var(--sf-forms-feedback-warn) * 1%), var(--sf-forms-feedback-warning) 0 calc(var(--sf-forms-feedback-crit) * 1%), var(--sf-danger) 0); background-size: calc(10000% / var(--sf-value)) 100%; background-repeat: no-repeat; transition: width .8s var(--sf-spring), background-size .8s var(--sf-spring); }
.sf-usage__note { margin: 0; font-size: 13px; color: var(--sf-muted); }
.sf-usage[data-level="warn"] .sf-usage__note { color: var(--sf-ink); }
.sf-usage[data-level="crit"] .sf-usage__note { color: var(--sf-danger); font-weight: 600; }

/* ---------- 23. Skeleton variants (build on core .sf-skeleton shimmer) ---------- */
.sf-skel { display: flex; flex-direction: column; gap: 12px; }
.sf-skel__line { height: 14px; border-radius: 7px; }
.sf-skel__line--title { height: 22px; width: 50%; border-radius: 11px; }
.sf-skel__line--short { width: 60%; }
.sf-skel__line--mid { width: 82%; }
.sf-skel--row { flex-direction: row; align-items: center; gap: 14px; }
.sf-skel__stack { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf-skel__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.sf-skel__media { height: 140px; border-radius: var(--sf-radius); }
.sf-skel--card { padding: 18px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); gap: 14px; }
.sf-skel__tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr .6fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--sf-fill); }
.sf-skel__tr:last-child { border-bottom: 0; }
.sf-skel__cell { height: 14px; border-radius: 7px; }
.sf-skel--table { gap: 0; padding: 8px 22px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-skel--table .sf-skel__tr:nth-child(2) .sf-skeleton { animation-delay: -.2s; }
.sf-skel--table .sf-skel__tr:nth-child(3) .sf-skeleton { animation-delay: -.4s; }
.sf-skel--table .sf-skel__tr:nth-child(4) .sf-skeleton { animation-delay: -.6s; }

/* ---------- 24. Loading overlay + button loading ---------- */
.sf-loadable { position: relative; }
.sf-loadable__veil { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: inherit; background: var(--sf-surface); background: color-mix(in srgb, var(--sf-surface) 74%, transparent); backdrop-filter: blur(3px); font-weight: 600; font-size: 15px; color: var(--sf-ink); animation: sf-fade .25s ease; }
.sf-loadable[aria-busy="true"] > .sf-loadable__veil { display: flex; }
.sf-loadable[aria-busy="true"] > :not(.sf-loadable__veil) { user-select: none; }
.sf-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; opacity: 1; cursor: progress; }
.sf-btn[aria-busy="true"] > :not(.sf-btnspin) { visibility: hidden; }
.sf-btnspin { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; box-sizing: border-box; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--sf-forms-feedback-spin, var(--sf-on-ink)) 25%, transparent); border-top-color: var(--sf-forms-feedback-spin, var(--sf-on-ink)); animation: sf-forms-feedback-spin .7s linear infinite; }
.sf-btn--light, .sf-btn--ghost { --sf-forms-feedback-spin: var(--sf-ink); }
.sf-btn--danger { --sf-forms-feedback-spin: #fff; }

/* ---------- Keyframes ---------- */
@keyframes sf-forms-feedback-alert-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sf-forms-feedback-spring-out { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: translateY(-8px) scale(.8); } }
@keyframes sf-forms-feedback-notice-in { from { opacity: 0; transform: translateY(var(--sf-forms-feedback-from, 24px)) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes sf-forms-feedback-notice-out { to { opacity: 0; transform: scale(.88); } }
@keyframes sf-forms-feedback-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes sf-forms-feedback-snack-in { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sf-forms-feedback-ring-down { to { stroke-dashoffset: 100; } }
@keyframes sf-forms-feedback-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sf-forms-feedback-wobble { 0%, 36%, 100% { transform: none; } 8% { transform: rotate(-16deg) translateY(-4px); } 16% { transform: rotate(12deg); } 24% { transform: rotate(-6deg); } 30% { transform: rotate(3deg); } }
@keyframes sf-forms-feedback-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-forms-feedback-mark-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sf-forms-feedback-mark-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sf-forms-feedback-spin { to { transform: rotate(360deg); } }
@keyframes sf-forms-feedback-dot { 0%, 80%, 100% { transform: translateY(0) scale(.7); opacity: .5; } 40% { transform: translateY(-100%) scale(1); opacity: 1; } }
@keyframes sf-forms-feedback-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes sf-forms-feedback-pulse { 0%, 100% { transform: scale(.5); } 50% { transform: scale(.75); } }
@keyframes sf-forms-feedback-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sf-forms-feedback-drawer-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sf-forms-feedback-drawer-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sf-forms-feedback-drawer-b { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sf-forms-feedback-drawer-r-out { to { transform: translateX(100%); } }
@keyframes sf-forms-feedback-drawer-l-out { to { transform: translateX(-100%); } }
@keyframes sf-forms-feedback-drawer-b-out { from { transform: translateY(var(--sf-forms-feedback-dy, 0px)); } to { transform: translateY(100%); } }
@keyframes sf-forms-feedback-dialog-out { to { opacity: 0; transform: translateY(20px) scale(.92); } }
@keyframes sf-forms-feedback-popover-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sf-forms-feedback-ring-bell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-18deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes sf-forms-feedback-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes sf-forms-feedback-error-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sf-forms-feedback-icon-pop { 0% { transform: scale(0); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-notices, .sf-alert, .sf-callout, .sf-undo, .sf-undo *, .sf-notice, .sf-notice *, .sf-snackbar, .sf-snackbar *, .sf-empty__art, .sf-empty__art *, .sf-errorstate__code i,
  .sf-drawmark, .sf-drawmark *, .sf-spinner, .sf-spinner *, .sf-spinner::after, .sf-ring__bar, .sf-stepbar__seg::after, .sf-wizsteps__dot,
  .sf-wizard__viewport, .sf-wizard__track, .sf-wizard__panel, .sf-drawer, .sf-drawer__panel, .sf-dialog, .sf-popover, .sf-tipcard__bubble,
  [data-sf-tip]::after, .sf-status--ping::after, .sf-bell *, .sf-bell__menu, .sf-tour *, .sf-fbreact *, .sf-usage__fill, .sf-valsummary, .sf-valsummary *,
  .sf-error--anim, .sf-error--anim::before, .sf-field.is-shaking, .sf-btnspin, .sf-loadable__veil, .sf-skel .sf-skeleton, .sf-alert__close, .sf-notice__close {
    animation: none !important; transition: none !important;
  }
  .sf-drawmark circle, .sf-drawmark path { stroke-dashoffset: 0; }
  .sf-notice__bar, .sf-undo__timer { display: none; }
  .sf-btnspin, .sf-spinner { animation: none; }
}


/* ===== Navigation (app-nav) ===== */
/* Soft UI module: app-nav. Application navigation, layout and menus.
   Requires soft.css. Optional behaviour: app-nav.js (data-sf-* attributes). */

@property --sf-fade-t { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sf-fade-b { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --sf-app-nav-pop: 0 14px 44px rgba(0, 0, 0, .16);
  --sf-app-nav-hover: color-mix(in srgb, var(--sf-ink) 7%, transparent);
  --sf-app-nav-danger: color-mix(in srgb, var(--sf-danger) 78%, var(--sf-ink));
}
[data-sf-theme="dark"] { --sf-app-nav-pop: 0 14px 44px rgba(0, 0, 0, .6); }

/* ---------- Shared: icon + collapse ---------- */
.sf-navicon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Smooth height animation: <div class="sf-collapse" data-state="open|closed"><div>content</div></div> */
.sf-collapse { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--sf-ease), visibility 0s linear .5s; }
.sf-collapse > * { min-height: 0; overflow: hidden; }
.sf-collapse[data-state="open"] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--sf-spring), visibility 0s; }
/* once the open animation has settled (JS/React add .is-settled) content may overflow, so focus rings and hover lifts are not cut */
.sf-collapse.is-settled[data-state="open"] > * { overflow: visible; }

/* ---------- Kbd + shortcut hints ---------- */
.sf-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; font-family: var(--sf-font); font-size: 12px; font-weight: 700; line-height: 1; color: var(--sf-ink); background: var(--sf-surface); border: 1px solid var(--sf-line); border-bottom-width: 3px; border-radius: 8px; transition: transform .2s var(--sf-spring); }
.sf-kbd:active, .sf-kbd.is-pressed { transform: translateY(2px); border-bottom-width: 1px; }
.sf-kbd--sm { min-width: 22px; height: 22px; padding: 0 5px; font-size: 11px; border-radius: 6px; }
.sf-kbd--lg { min-width: 40px; height: 40px; padding: 0 12px; font-size: 16px; border-radius: 12px; }
.sf-kbd--fill { background: var(--sf-fill); border-color: transparent; border-bottom-color: var(--sf-line); }
.sf-kbd-group { display: inline-flex; align-items: center; gap: 4px; }
.sf-kbd-group > .sf-kbd-group__plus { font-size: 12px; color: var(--sf-muted); }
.sf-shortcut { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sf-muted); }
.sf-shortcut--between { display: flex; justify-content: space-between; width: 100%; }

/* ---------- Divider ---------- */
.sf-divider { display: block; width: 100%; height: 0; margin: 16px 0; border: 0; border-top: 2px solid var(--sf-line); border-radius: 2px; }
.sf-divider--dotted { border-top: 4px dotted var(--sf-line); }
.sf-divider--dashed { border-top: 2px dashed var(--sf-line); }
.sf-divider--label { display: flex; align-items: center; gap: 14px; height: auto; border: 0; color: var(--sf-muted); font-size: 13px; font-weight: 600; }
.sf-divider--label::before, .sf-divider--label::after { content: ""; flex: 1; border-top: 2px solid var(--sf-line); border-radius: 2px; }
.sf-divider--label.sf-divider--dotted::before, .sf-divider--label.sf-divider--dotted::after { border-top: 4px dotted var(--sf-line); }
.sf-divider--label.sf-divider--dashed::before, .sf-divider--label.sf-divider--dashed::after { border-top: 2px dashed var(--sf-line); }
.sf-divider--label[data-align="start"]::before { flex: 0 0 24px; }
.sf-divider--vertical { display: inline-block; width: 0; height: 1.6em; min-height: 20px; margin: 0 12px; vertical-align: middle; border-top: 0; border-left: 2px solid var(--sf-line); align-self: stretch; }
.sf-divider--vertical.sf-divider--dotted { border-left: 4px dotted var(--sf-line); }
.sf-divider--vertical.sf-divider--dashed { border-left: 2px dashed var(--sf-line); }

/* ---------- Scroll area ---------- */
.sf-scroll { position: relative; display: flex; flex-direction: column; min-height: 0; max-height: var(--sf-scroll-h, 280px); border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); }
.sf-scroll__viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: inherit; scrollbar-width: thin; scrollbar-color: var(--sf-line) transparent; --sf-fade-t: 0px; --sf-fade-b: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sf-fade-t), #000 calc(100% - var(--sf-fade-b)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--sf-fade-t), #000 calc(100% - var(--sf-fade-b)), transparent); transition: --sf-fade-t .3s ease, --sf-fade-b .3s ease; }
.sf-scroll[data-axis="x"] .sf-scroll__viewport { overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sf-fade-t), #000 calc(100% - var(--sf-fade-b)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--sf-fade-t), #000 calc(100% - var(--sf-fade-b)), transparent); }
.sf-scroll[data-start="false"] .sf-scroll__viewport { --sf-fade-t: 32px; }
.sf-scroll[data-end="false"] .sf-scroll__viewport { --sf-fade-b: 32px; }
.sf-scroll:not([data-sf-scroll-ready]) .sf-scroll__viewport { -webkit-mask-image: none; mask-image: none; }
.sf-scroll__viewport::-webkit-scrollbar { width: 10px; height: 10px; }
.sf-scroll__viewport::-webkit-scrollbar-track { background: transparent; }
.sf-scroll__viewport::-webkit-scrollbar-thumb { background: var(--sf-line); border-radius: var(--sf-pill); border: 3px solid transparent; background-clip: padding-box; transition: background .2s ease; }
.sf-scroll__viewport::-webkit-scrollbar-thumb:hover { background: var(--sf-muted); background-clip: padding-box; }
/* scroll-shadow variant: hairline edges instead of fades */
.sf-scroll--shadow .sf-scroll__viewport { -webkit-mask-image: none !important; mask-image: none !important; }
.sf-scroll--shadow::before, .sf-scroll--shadow::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.sf-scroll--shadow::before { top: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(0, 0, 0, .12), transparent); }
.sf-scroll--shadow::after { bottom: 0; border-radius: inherit; background: linear-gradient(to top, rgba(0, 0, 0, .12), transparent); }
.sf-scroll--shadow[data-start="false"]::before, .sf-scroll--shadow[data-end="false"]::after { opacity: 1; }
[data-sf-theme="dark"] .sf-scroll--shadow::before { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent); }
[data-sf-theme="dark"] .sf-scroll--shadow::after { background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
.sf-scroll--shadow[data-axis="x"]::before, .sf-scroll--shadow[data-axis="x"]::after { display: none; }

/* ---------- Navbar + burger ---------- */
.sf-navbar { position: relative; container-type: inline-size; container-name: sf-navbar; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-navbar__bar { display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 8px 10px 8px 22px; background: var(--sf-surface); border-radius: var(--sf-pill); }
.sf-navbar--flat .sf-navbar__bar { border-radius: 0; border-bottom: 1px solid var(--sf-line); }
.sf-navbar__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: 12px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.sf-navbar__mark { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sf-ink); transition: transform .45s var(--sf-spring); }
.sf-navbar__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-on-ink); }
.sf-navbar__logo:hover .sf-navbar__mark { transform: rotate(-14deg) scale(1.12); }
.sf-navbar__links { display: flex; gap: 4px; flex: 1; min-width: 0; }
.sf-navbar__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--sf-pill); font-weight: 600; font-size: 15px; color: var(--sf-muted); text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease, transform .3s var(--sf-spring); }
.sf-navbar__link:hover { color: var(--sf-ink); background: var(--sf-fill); transform: translateY(-2px); }
.sf-navbar__link[aria-current="page"] { color: var(--sf-ink); background: var(--sf-fill); }
.sf-navbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sf-navbar__links + .sf-navbar__actions { margin-left: 0; }
.sf-navbar__sheet { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; flex-direction: column; gap: 4px; padding: 12px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-app-nav-pop); transform-origin: top right; }
.sf-navbar__sheet .sf-navbar__link { min-height: 52px; font-size: 17px; padding: 0 20px; }
.sf-navbar__sheet-actions { display: flex; gap: 8px; padding: 8px 4px 4px; border-top: 1px solid var(--sf-line); margin-top: 6px; }
.sf-navbar__sheet-actions > * { flex: 1; }
.sf-navbar__actions .sf-btn, .sf-navbar__sheet-actions .sf-btn, .sf-pagehead__actions .sf-btn { text-decoration: none; }

.sf-burger { position: relative; display: inline-block; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease; }
.sf-burger:hover { transform: scale(1.08); }
.sf-burger:active { transform: scale(.88); }
.sf-burger span { position: absolute; left: 15px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--sf-spring), opacity .2s ease, top .35s var(--sf-ease); }
.sf-burger span:nth-child(1) { top: 17px; }
.sf-burger span:nth-child(2) { top: 23px; }
.sf-burger span:nth-child(3) { top: 29px; }
.sf-burger[aria-expanded="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.sf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sf-burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
.sf-navbar .sf-burger { display: none; margin-left: auto; }
@container sf-navbar (max-width: 720px) {
  .sf-navbar .sf-burger { display: inline-block; }
  .sf-navbar__links, .sf-navbar__bar > .sf-navbar__actions { display: none; }
  .sf-navbar__sheet[data-state="open"] { display: flex; animation: sf-app-nav-sheet .55s var(--sf-spring); }
  .sf-navbar__sheet[data-state="open"] > * { animation: sf-app-nav-rise .5s var(--sf-spring) both; }
  .sf-navbar__sheet[data-state="open"] > :nth-child(2) { animation-delay: .04s; }
  .sf-navbar__sheet[data-state="open"] > :nth-child(3) { animation-delay: .08s; }
  .sf-navbar__sheet[data-state="open"] > :nth-child(4) { animation-delay: .12s; }
  .sf-navbar__sheet[data-state="open"] > :nth-child(5) { animation-delay: .16s; }
}

/* ---------- Sidebar ---------- */
.sf-sidebar { display: flex; flex-direction: column; gap: 8px; width: 264px; min-height: 0; padding: 12px; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); font-family: var(--sf-font); transition: width .55s var(--sf-spring); }
.sf-sidebar[data-state="collapsed"] { width: 80px; }
.sf-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 0 0 6px; }
.sf-sidebar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.sf-sidebar__brand .sf-navbar__mark { flex: none; }
.sf-sidebar__toggle { display: grid; place-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-sidebar__toggle:hover { background: var(--sf-fill); color: var(--sf-ink); }
.sf-sidebar__toggle:active { transform: scale(.88); }
.sf-sidebar__toggle .sf-navicon { transition: transform .5s var(--sf-spring); }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__toggle .sf-navicon { transform: rotate(180deg); }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__head { padding-left: 0; justify-content: center; }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__brand { display: none; }
.sf-sidebar__nav { position: relative; display: flex; flex: 1; flex-direction: column; gap: 2px; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sf-line) transparent; }
.sf-sidebar__section { display: flex; flex-direction: column; gap: 2px; }
.sf-sidebar__section + .sf-sidebar__section { margin-top: 10px; }
.sf-sidebar__label { margin: 0; padding: 10px 18px 6px; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); transition: opacity .2s ease, max-height .3s var(--sf-ease), padding .3s var(--sf-ease); max-height: 40px; }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__label { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.sf-sidebar__pill { position: absolute; left: 0; top: 0; z-index: 0; width: var(--sf-w, 100%); height: var(--sf-h, 44px); border-radius: var(--sf-radius); background: var(--sf-fill); transform: translate(var(--sf-x, 0), var(--sf-y, 0)); opacity: 0; pointer-events: none; }
.sf-sidebar.is-ready .sf-sidebar__pill { opacity: 1; }
.sf-sidebar.is-animated .sf-sidebar__pill { transition: transform .55s var(--sf-spring), height .4s var(--sf-spring), width .4s var(--sf-spring); }
.sf-sidebar__item { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-radius); background: transparent; font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap; color: var(--sf-muted); cursor: pointer; transition: color .2s ease, background .2s ease, transform .3s var(--sf-spring); }
.sf-sidebar__item:hover { color: var(--sf-ink); background: var(--sf-app-nav-hover); }
.sf-sidebar__item:active { transform: scale(.97); }
.sf-sidebar__item[aria-current="page"] { color: var(--sf-ink); background: transparent; }
.sf-sidebar:not(.is-ready) .sf-sidebar__item[aria-current="page"] { background: var(--sf-fill); }
.sf-sidebar__text { margin-left: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease, max-width .3s var(--sf-ease), margin .3s var(--sf-ease); max-width: 200px; }
.sf-sidebar__badge { margin-left: 8px; min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--sf-pill); display: inline-grid; place-content: center; font-size: 12px; font-weight: 700; background: var(--sf-ink); color: var(--sf-on-ink); transition: opacity .2s ease; }
.sf-sidebar__chev { margin-left: 8px; width: 16px; height: 16px; transition: transform .5s var(--sf-spring); }
.sf-sidebar__trigger[aria-expanded="true"] .sf-sidebar__chev { transform: rotate(90deg); }
.sf-sidebar__sub > div { padding: 2px 0 4px 22px; }
.sf-sidebar__sub .sf-sidebar__item { min-height: 40px; padding-left: 22px; font-size: 14px; }
.sf-sidebar__sub .sf-sidebar__item::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 2px solid var(--sf-line); }
.sf-sidebar__foot { padding-top: 8px; border-top: 1px solid var(--sf-line); }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__text { max-width: 0; margin-left: 0; opacity: 0; }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__badge, .sf-sidebar[data-state="collapsed"] .sf-sidebar__chev { display: none; }
.sf-sidebar[data-state="collapsed"] .sf-sidebar__sub { display: none; }

/* ---------- Tabs ---------- */
.sf-tabs { display: block; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-tabs__list { position: relative; display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-shadow: inset 0 -2px 0 var(--sf-line); overscroll-behavior-x: contain; }
/* horizontal strips that overflow fade at the scrollable edge(s) instead of showing a scrollbar */
.sf-tabs__list[data-start="false"], .sf-tabs__list[data-end="false"] { --sf-fl: 0px; --sf-fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sf-fl), #000 calc(100% - var(--sf-fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--sf-fl), #000 calc(100% - var(--sf-fr)), transparent); }
.sf-tabs__list[data-start="false"] { --sf-fl: 28px; }
.sf-tabs__list[data-end="false"] { --sf-fr: 28px; }
.sf-tabs__list::-webkit-scrollbar { display: none; }
.sf-tabs__tab { position: relative; z-index: 1; flex: none; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: transparent; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--sf-muted); cursor: pointer; transition: color .2s ease, transform .3s var(--sf-spring); }
.sf-tabs__tab:hover { color: var(--sf-ink); }
.sf-tabs__tab:active { transform: scale(.94); }
.sf-tabs__tab[aria-selected="true"] { color: var(--sf-ink); }
.sf-tabs__tab[aria-disabled="true"], .sf-tabs__tab:disabled { opacity: .4; cursor: not-allowed; }
.sf-tabs__ind { position: absolute; z-index: 0; left: 0; bottom: 0; width: var(--sf-w, 0); height: 3px; border-radius: 3px; background: var(--sf-ink); transform: translateX(var(--sf-x, 0)); pointer-events: none; opacity: 0; }
.sf-tabs__list.is-ready .sf-tabs__ind { opacity: 1; }
.sf-tabs__list.is-animated .sf-tabs__ind { transition: transform .55s var(--sf-spring), width .55s var(--sf-spring), height .55s var(--sf-spring); }
.sf-tabs__panel { padding-top: 20px; animation: sf-app-nav-rise .45s var(--sf-spring); }
.sf-tabs__panel[hidden] { display: none; }
.sf-tabs--pill .sf-tabs__list { display: inline-flex; max-width: 100%; padding: 4px; box-shadow: none; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-tabs--pill .sf-tabs__ind { top: 0; bottom: auto; height: var(--sf-h, 0); background: var(--sf-surface); border-radius: var(--sf-pill); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transform: translate(var(--sf-x, 0), var(--sf-y, 0)); }
.sf-tabs--vertical { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.sf-tabs--vertical .sf-tabs__list { flex-direction: column; overflow: visible; box-shadow: none; border-left: 2px solid var(--sf-line); gap: 2px; -webkit-mask-image: none; mask-image: none; }
.sf-tabs--vertical .sf-tabs__tab { text-align: left; border-radius: 0 var(--sf-radius) var(--sf-radius) 0; padding: 0 22px; }
.sf-tabs--vertical .sf-tabs__ind { left: -2px; top: 0; bottom: auto; width: 3px; height: var(--sf-h, 0); transform: translateY(var(--sf-y, 0)); }
.sf-tabs--vertical .sf-tabs__panel { padding-top: 0; }
@media (max-width: 560px) {
  .sf-tabs__tab { padding: 0 14px; }
  .sf-tabs--vertical { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- Breadcrumbs ---------- */
.sf-crumbs { font-family: var(--sf-font); font-size: 15px; }
.sf-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.sf-crumbs__item { display: inline-flex; align-items: center; }
.sf-crumbs__item + .sf-crumbs__item::before { content: ""; width: 7px; height: 7px; margin: 0 6px 0 4px; border-top: 2px solid var(--sf-muted); border-right: 2px solid var(--sf-muted); transform: rotate(45deg); opacity: .6; flex: none; }
.sf-crumbs__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--sf-pill); color: var(--sf-muted); font-weight: 500; text-decoration: none; transition: color .2s ease, background .2s ease, transform .3s var(--sf-spring); }
.sf-crumbs__link:hover { color: var(--sf-ink); background: var(--sf-fill); transform: translateY(-2px); }
.sf-crumbs__link[aria-current="page"] { color: var(--sf-ink); font-weight: 700; pointer-events: none; }
.sf-crumbs__more { display: inline-grid; place-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); cursor: pointer; transition: background .2s ease, transform .3s var(--sf-spring), color .2s ease; }
.sf-crumbs__more:hover, .sf-crumbs__more[aria-expanded="true"] { background: var(--sf-fill); color: var(--sf-ink); }
.sf-crumbs__more:active { transform: scale(.88); }

/* ---------- Pagination (JS renders buttons; data-total, data-page, data-siblings) ---------- */
.sf-pagination { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-family: var(--sf-font); }
.sf-pagination__pages { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-pagination__thumb { position: absolute; left: 0; top: 0; width: var(--sf-w, 44px); height: var(--sf-h, 44px); border-radius: var(--sf-pill); background: var(--sf-ink); transform: translate(var(--sf-x, 4px), var(--sf-y, 4px)); pointer-events: none; opacity: 0; }
.sf-pagination.is-ready .sf-pagination__thumb { opacity: 1; }
.sf-pagination.is-animated .sf-pagination__thumb { transition: transform .5s var(--sf-spring), width .4s var(--sf-spring); }
.sf-pagination__page { position: relative; z-index: 1; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--sf-pill); background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--sf-ink); cursor: pointer; transition: color .2s ease, transform .3s var(--sf-spring); }
.sf-pagination__page:hover { transform: translateY(-2px); }
.sf-pagination__page[aria-current="page"] { color: var(--sf-on-ink); transform: none; }
.sf-pagination:not(.is-ready) .sf-pagination__page[aria-current="page"] { background: var(--sf-ink); }
.sf-pagination__gap { position: relative; z-index: 1; display: inline-grid; place-content: center; min-width: 32px; height: 44px; color: var(--sf-muted); letter-spacing: .1em; user-select: none; }
.sf-pagination__nav { display: inline-grid; place-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), opacity .2s ease; }
.sf-pagination__nav:hover { transform: scale(1.1); }
.sf-pagination__nav:active { transform: scale(.88); }
.sf-pagination__nav[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.sf-pagination__status { min-width: 110px; padding: 0 8px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-pagination--compact .sf-pagination__pages { display: none; }
.sf-pagination:not(.sf-pagination--compact) .sf-pagination__status { display: none; }
@media (max-width: 520px) {
  .sf-pagination:not(.sf-pagination--compact) .sf-pagination__pages { display: none; }
  .sf-pagination:not(.sf-pagination--compact) .sf-pagination__status { display: block; }
}

/* ---------- Accordion + Collapsible ---------- */
.sf-accordion { display: flex; flex-direction: column; gap: 8px; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-accordion__item { border-radius: var(--sf-radius); background: var(--sf-surface); transition: background .3s ease; }
.sf-accordion__head { margin: 0; }
.sf-accordion__trigger, .sf-collapsible__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 0 22px; border: 0; border-radius: var(--sf-radius); background: transparent; font: inherit; font-size: 16px; font-weight: 600; text-align: left; color: inherit; cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-accordion__trigger:active, .sf-collapsible__trigger:active { transform: scale(.985); }
.sf-accordion__chev, .sf-collapsible__chev { flex: none; width: 20px; height: 20px; color: var(--sf-muted); transition: transform .6s var(--sf-spring); }
[aria-expanded="true"] > .sf-accordion__chev, [aria-expanded="true"] > .sf-collapsible__chev { transform: rotate(180deg); }
.sf-accordion__body { padding: 0 22px 22px; color: var(--sf-muted); line-height: 1.6; font-size: 15px; }
.sf-accordion--flat { gap: 0; }
.sf-accordion--flat .sf-accordion__item { border-radius: 0; background: transparent; border-bottom: 1px solid var(--sf-line); }
.sf-accordion--flat .sf-accordion__trigger { border-radius: 0; padding: 0 4px; }
.sf-accordion--flat .sf-accordion__body { padding: 0 4px 22px; }
.sf-collapsible { border-radius: var(--sf-radius); background: var(--sf-surface); font-family: var(--sf-font); color: var(--sf-ink); }
.sf-collapsible--inline { background: transparent; }
.sf-collapsible--inline .sf-collapsible__trigger { width: auto; min-height: 44px; padding: 0 14px; gap: 8px; border-radius: var(--sf-pill); }
.sf-collapsible--inline .sf-collapsible__trigger:hover { background: var(--sf-fill); }
.sf-collapsible__body { padding: 0 22px 20px; color: var(--sf-muted); line-height: 1.6; font-size: 15px; }
.sf-collapsible--inline .sf-collapsible__body { padding: 4px 14px 8px; }

/* ---------- Bottom tab bar ---------- */
.sf-tabbar { position: relative; display: flex; align-items: stretch; gap: 0; width: min(100%, 420px); padding: 6px; border-radius: var(--sf-pill); background: var(--sf-surface); border: 1px solid var(--sf-line); font-family: var(--sf-font); }
.sf-tabbar--fixed { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; }
.sf-tabbar__bubble { position: absolute; left: 0; top: 6px; bottom: 6px; z-index: 0; width: var(--sf-w, 0); border-radius: var(--sf-pill); background: var(--sf-ink); transform: translateX(var(--sf-x, 0)); opacity: 0; pointer-events: none; }
.sf-tabbar.is-ready .sf-tabbar__bubble { opacity: 1; }
.sf-tabbar.is-animated .sf-tabbar__bubble { transition: transform .55s var(--sf-spring), width .55s var(--sf-spring); }
.sf-tabbar.is-moving .sf-tabbar__bubble { animation: sf-app-nav-squash .55s var(--sf-ease); }
.sf-tabbar__item { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 56px; padding: 6px 4px; border-radius: var(--sf-pill); font-size: 11px; font-weight: 600; color: var(--sf-muted); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: inherit; transition: color .25s ease, transform .3s var(--sf-spring); }
.sf-tabbar__item:active { transform: scale(.9); }
.sf-tabbar__item[aria-current="page"] { color: var(--sf-on-ink); }
.sf-tabbar:not(.is-ready) .sf-tabbar__item[aria-current="page"] { background: var(--sf-ink); }
.sf-tabbar__item .sf-navicon { transition: transform .5s var(--sf-spring); }
.sf-tabbar__item[aria-current="page"] .sf-navicon { transform: translateY(-1px) scale(1.12); }
.sf-tabbar__dot { position: absolute; top: 8px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--sf-danger); border: 2px solid var(--sf-surface); }

/* ---------- Dropdown menu + context menu ---------- */
.sf-dropdown { position: relative; display: inline-block; }
.sf-menu { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: min(220px, calc(100vw - 16px)); max-width: min(92vw, 320px); translate: var(--sf-menu-dx, 0px) var(--sf-menu-dy, 0px); padding: 6px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-app-nav-pop); font-family: var(--sf-font); transform-origin: top left; text-align: left; }
.sf-menu[hidden] { display: none; }
.sf-menu:not([hidden]) { animation: sf-app-nav-menu .4s var(--sf-spring); }
.sf-menu[data-align="end"] { left: auto; right: 0; transform-origin: top right; }
.sf-menu[data-side="top"] { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.sf-menu[data-side="top"][data-align="end"] { transform-origin: bottom right; }
.sf-menu--fixed { position: fixed; top: 0; left: 0; margin: 0; }
.sf-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; color: inherit; cursor: pointer; transition: background .15s ease, transform .25s var(--sf-spring); }
.sf-menu__item:hover, .sf-menu__item.is-active, .sf-menu__item:focus { background: var(--sf-fill); outline: none; }
.sf-menu__item:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-menu__item:active { transform: scale(.97); }
.sf-menu__item .sf-navicon { color: var(--sf-muted); width: 18px; height: 18px; }
.sf-menu__item[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.sf-menu__item--danger, .sf-menu__item--danger .sf-navicon { color: var(--sf-app-nav-danger); }
.sf-menu__kbd { margin-left: auto; padding-left: 16px; font-size: 13px; font-weight: 500; color: var(--sf-muted); white-space: nowrap; }
.sf-menu__kbd [data-sf-mod] { margin-right: .25em; }
.sf-menu__sep { height: 1px; margin: 6px 8px; background: var(--sf-line); }
.sf-menu__label { padding: 10px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-menu__check { position: relative; flex: none; width: 18px; height: 18px; }
[aria-checked="true"] > .sf-menu__check::after { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 6px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); animation: sf-app-nav-tick .4s var(--sf-spring); }
[role="menuitemradio"][aria-checked="true"] > .sf-menu__check::after { left: 4px; top: 4px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: currentColor; transform: none; }
.sf-menu__sub { position: relative; }
.sf-menu__arrow { margin-left: auto; width: 16px !important; height: 16px !important; }
.sf-menu--sub { top: -7px; left: calc(100% + 4px); transform-origin: top left; min-width: 200px; }
.sf-menu--sub[data-flip] { left: auto; right: calc(100% + 4px); transform-origin: top right; }
/* no room on either side (phones): the submenu drops below its item, slightly inset, over the rest of the parent menu */
.sf-menu--sub[data-flip="stack"] { top: calc(100% + 2px); left: 18px; right: auto; transform-origin: top left; }
[data-sf-context] { -webkit-touch-callout: none; }

/* ---------- Command palette + searchbar ---------- */
.sf-command { width: min(92vw, 620px); max-height: min(72vh, 540px); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 0; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); font-family: var(--sf-font); }
.sf-command[open] { display: flex; flex-direction: column; animation: sf-app-nav-cmd .5s var(--sf-spring); }
.sf-command::backdrop { background: rgba(10, 10, 12, .35); backdrop-filter: blur(6px); animation: sf-fade .3s ease; }
.sf-command__search, .sf-searchbar__field { display: flex; align-items: center; gap: 12px; padding: 0 20px; min-height: 64px; border-bottom: 1px solid var(--sf-line); color: var(--sf-muted); }
.sf-command__input, .sf-searchbar__input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--sf-ink); }
.sf-command__input::placeholder, .sf-searchbar__input::placeholder { color: var(--sf-muted); }
.sf-command__list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: var(--sf-line) transparent; overscroll-behavior: contain; }
.sf-command__group[hidden], .sf-command__item[hidden] { display: none; }
.sf-command__heading { padding: 12px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-command__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 500; transition: background .12s ease, transform .25s var(--sf-spring); }
.sf-command__item .sf-navicon { color: var(--sf-muted); }
.sf-command__item[aria-selected="true"] { background: var(--sf-fill); transform: translateX(3px); }
.sf-command__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-command__shortcut { display: inline-flex; gap: 4px; flex: none; }
.sf-command__hit { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sf-command__empty { padding: 36px 20px; text-align: center; color: var(--sf-muted); font-size: 15px; }
.sf-command__foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--sf-line); font-size: 13px; color: var(--sf-muted); }
.sf-command__foot span { display: inline-flex; align-items: center; gap: 6px; }
.sf-searchbar { position: relative; width: 100%; max-width: 560px; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-searchbar__field { min-height: 52px; padding: 0 16px; border: 2px solid transparent; border-radius: var(--sf-pill); background: var(--sf-fill); transition: background .2s ease, border-color .2s ease, transform .4s var(--sf-spring); }
.sf-searchbar:focus-within .sf-searchbar__field { background: var(--sf-surface); border-color: var(--sf-ink); transform: scale(1.015); }
.sf-searchbar__input { height: 48px; font-size: 16px; }
.sf-searchbar__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; max-height: 340px; padding: 8px; overflow-y: auto; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); background: var(--sf-surface); box-shadow: var(--sf-app-nav-pop); transform-origin: top center; }
.sf-searchbar__panel[hidden] { display: none; }
.sf-searchbar__panel:not([hidden]) { animation: sf-app-nav-menu .4s var(--sf-spring); }

/* ---------- App shell + page header ---------- */
.sf-shell { --sf-shell-h: 100dvh; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: var(--sf-shell-h); overflow: hidden; overflow: clip; container-type: inline-size; container-name: sf-shell; background: var(--sf-bg); color: var(--sf-ink); font-family: var(--sf-font); }
.sf-shell__header { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; background: var(--sf-bg); }
.sf-shell__header .sf-shell__menu { display: none; }
.sf-shell__side { grid-row: 2; min-height: 0; padding: 0 0 12px 12px; display: flex; z-index: 25; }
.sf-shell__side > .sf-sidebar { height: 100%; }
.sf-shell__main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; padding: 4px 16px 16px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--sf-line) transparent; }
.sf-shell__main > .sf-shell__panel { min-height: 100%; padding: 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-shell__scrim { display: none; }
.sf-shell--no-side .sf-shell__main { grid-column: 1 / -1; }
@container sf-shell (max-width: 760px) {
  .sf-shell { grid-template-columns: minmax(0, 1fr); }
  .sf-shell__main { grid-column: 1; }
  .sf-shell__header .sf-shell__menu { display: inline-flex; }
  .sf-shell__side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 45; padding: 12px; transform: translateX(-110%); visibility: hidden; transition: transform .5s var(--sf-spring), visibility 0s linear .5s; }
  .sf-shell.is-drawer-open .sf-shell__side { transform: none; visibility: visible; transition: transform .5s var(--sf-spring), visibility 0s; }
  .sf-shell__scrim { display: block; position: absolute; inset: 0; z-index: 40; background: rgba(10, 10, 12, .35); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .sf-shell.is-drawer-open .sf-shell__scrim { opacity: 1; pointer-events: auto; }
}
.sf-pagehead { display: flex; flex-direction: column; gap: 14px; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.sf-pagehead__text { flex: 1 1 280px; min-width: 0; }
.sf-pagehead__title { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sf-pagehead__desc { margin: 8px 0 0; max-width: 60ch; color: var(--sf-muted); font-size: 16px; line-height: 1.5; }
.sf-pagehead__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pagehead__tabs { margin-top: 4px; }
.sf-pagehead__tabs .sf-tabs__list { margin-bottom: 0; }

/* ---------- Tree view ---------- */
.sf-tree, .sf-tree__group { margin: 0; padding: 0; list-style: none; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-tree__node { outline: none; }
.sf-tree__row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 6px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease; }
.sf-tree__row:hover { background: var(--sf-app-nav-hover); }
.sf-tree__node:focus-visible > .sf-tree__row { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-tree__node[aria-selected="true"] > .sf-tree__row { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-tree__node[aria-selected="true"] > .sf-tree__row .sf-navicon { color: inherit; }
.sf-tree__toggle { display: inline-grid; place-content: center; flex: none; width: 24px; height: 24px; color: var(--sf-muted); }
.sf-tree__toggle .sf-navicon { width: 14px; height: 14px; transition: transform .45s var(--sf-spring); }
.sf-tree__node[aria-expanded="true"] > .sf-tree__row .sf-tree__toggle .sf-navicon { transform: rotate(90deg); }
.sf-tree__node:not([aria-expanded]) > .sf-tree__row .sf-tree__toggle { visibility: hidden; }
.sf-tree__row > .sf-navicon { color: var(--sf-muted); width: 18px; height: 18px; }
.sf-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tree__group { margin-left: 17px; padding-left: 8px; border-left: 2px solid var(--sf-line); }
.sf-tree__node[aria-expanded="false"] > .sf-tree__group { display: none; }
.sf-tree__node[aria-expanded="true"] > .sf-tree__group { animation: sf-app-nav-rise .4s var(--sf-spring); }
@media (pointer: coarse) { .sf-tree__row { min-height: 44px; } }

/* ---------- Split pane ---------- */
.sf-split { --sf-split: 50%; display: grid; grid-template-columns: var(--sf-split) 16px minmax(0, 1fr); min-height: 0; height: var(--sf-split-h, 260px); font-family: var(--sf-font); color: var(--sf-ink); }
.sf-split[data-orientation="vertical"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--sf-split) 16px minmax(0, 1fr); }
.sf-split__pane { min-width: 0; min-height: 0; padding: 18px; overflow: auto; border-radius: var(--sf-radius); background: var(--sf-surface); }
.sf-split__handle { position: relative; display: grid; place-content: center; cursor: col-resize; touch-action: none; border-radius: var(--sf-pill); outline: none; }
.sf-split[data-orientation="vertical"] .sf-split__handle { cursor: row-resize; }
.sf-split__handle::before { content: ""; position: absolute; inset: 0 -14px; }
.sf-split[data-orientation="vertical"] .sf-split__handle::before { inset: -14px 0; }
.sf-split__handle::after { content: ""; width: 4px; height: 44px; border-radius: var(--sf-pill); background: var(--sf-line); transition: background .2s ease, transform .35s var(--sf-spring); }
.sf-split[data-orientation="vertical"] .sf-split__handle::after { width: 44px; height: 4px; }
.sf-split__handle:hover::after, .sf-split__handle:focus-visible::after, .sf-split.is-dragging .sf-split__handle::after { background: var(--sf-ink); transform: scale(1.35, 1.1); }
.sf-split[data-orientation="vertical"] .sf-split__handle:hover::after, .sf-split[data-orientation="vertical"].is-dragging .sf-split__handle::after { transform: scale(1.1, 1.35); }
.sf-split__handle:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 0; }
.sf-split.is-dragging { user-select: none; cursor: col-resize; }
.sf-split.is-dragging .sf-split__pane { pointer-events: none; }

/* ---------- Toolbar ---------- */
.sf-toolbar { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px; border-radius: var(--sf-pill); background: var(--sf-surface); border: 1px solid var(--sf-line); font-family: var(--sf-font); color: var(--sf-ink); }
.sf-toolbar__main { display: flex; flex: 1; align-items: center; gap: 4px; min-width: 0; overflow: hidden; padding: 6px; margin: -6px; }
.sf-toolbar__group { display: inline-flex; align-items: center; gap: 2px; }
.sf-toolbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--sf-pill); background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--sf-ink); cursor: pointer; transition: background .2s ease, color .2s ease, transform .25s var(--sf-spring); }
.sf-toolbar__btn:hover { background: var(--sf-fill); }
.sf-toolbar__btn:active { transform: scale(.88); }
.sf-toolbar__btn[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-toolbar__btn[aria-disabled="true"], .sf-toolbar__btn:disabled { opacity: .4; pointer-events: none; }
.sf-toolbar__btn[hidden] { display: none; }
.sf-toolbar__sep { flex: none; width: 2px; height: 24px; margin: 0 6px; border-radius: 2px; background: var(--sf-line); }
.sf-toolbar__more { flex: none; margin-left: 2px; }
.sf-toolbar__more[hidden] { display: none; }

.sf-toolbar--fill { display: flex; width: 100%; }
.sf-toolbar__group[hidden], .sf-toolbar__sep[hidden] { display: none; }

/* ---------- Floating dock ---------- */
.sf-dock { --sf-dock-size: clamp(34px, 9vw, 52px); display: inline-flex; align-items: flex-end; gap: clamp(5px, 1.5vw, 8px); max-width: 100%; height: calc(var(--sf-dock-size) + 24px); padding: 10px clamp(8px, 2.4vw, 12px); border-radius: 26px; background: var(--sf-surface); border: 1px solid var(--sf-line); font-family: var(--sf-font); }
.sf-dock__item { --sf-s: 1; position: relative; display: block; flex: none; width: calc(var(--sf-dock-size) * var(--sf-s)); height: calc(var(--sf-dock-size) * var(--sf-s)); padding: 0; border: 0; border-radius: 28%; background: transparent; cursor: pointer; color: inherit; text-decoration: none; transition: width .12s linear, height .12s linear; }
.sf-dock__icon { display: grid; place-content: center; width: 100%; height: 100%; border-radius: 28%; background: var(--sf-fill); color: var(--sf-ink); transition: transform .3s var(--sf-spring); }
.sf-dock__icon .sf-navicon { width: calc(var(--sf-dock-size) * var(--sf-s) * .46); height: calc(var(--sf-dock-size) * var(--sf-s) * .46); transition: width .12s linear, height .12s linear; }
.sf-dock__item:active .sf-dock__icon { transform: scale(.88); }
.sf-dock__item.is-hot .sf-dock__icon { animation: sf-app-nav-hop .6s var(--sf-ease); }
.sf-dock__item.is-active::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--sf-ink); }
.sf-dock__label { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 12px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%) scale(.7); transition: opacity .15s ease, transform .3s var(--sf-spring); }
.sf-dock__item:hover .sf-dock__label, .sf-dock__item:focus-visible .sf-dock__label { opacity: 1; transform: translateX(-50%) scale(1); }
.sf-dock__sep { flex: none; align-self: center; width: 2px; height: 36px; border-radius: 2px; background: var(--sf-line); }

/* ---------- Floating action button + speed dial ---------- */
.sf-fab { position: relative; display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 12px; font-family: var(--sf-font); }
.sf-fab--fixed { position: fixed; right: 24px; bottom: 24px; z-index: 70; }
.sf-fab__main { position: relative; z-index: 2; display: grid; place-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 22px; background: var(--sf-ink); color: var(--sf-on-ink); cursor: pointer; transition: transform .3s var(--sf-spring), border-radius .4s var(--sf-spring); }
.sf-fab__main:hover { transform: scale(1.08); }
.sf-fab__main:active { transform: scale(1.12, .86); }
.sf-fab__main .sf-navicon { width: 26px; height: 26px; transition: transform .55s var(--sf-spring); }
.sf-fab__main[aria-expanded="true"] { border-radius: 50%; }
.sf-fab__main[aria-expanded="true"] .sf-navicon { transform: rotate(135deg); }
.sf-fab__actions { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
.sf-fab__action { position: relative; display: grid; place-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); box-shadow: inset 0 0 0 2px var(--sf-line); cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(24px) scale(.3); transition: transform .45s var(--sf-spring), opacity .2s ease, visibility 0s linear .45s; transition-delay: calc((var(--sf-n, 3) - var(--i, 0) - 1) * 30ms), calc((var(--sf-n, 3) - var(--i, 0) - 1) * 30ms), .6s; }
.sf-fab.is-open .sf-fab__action { visibility: visible; opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s; }
.sf-fab__action:hover { background: var(--sf-fill); }
.sf-fab.is-open .sf-fab__action:hover { transform: scale(1.12); }
.sf-fab__tip { position: absolute; right: calc(100% + 12px); top: 50%; padding: 6px 12px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-50%) translateX(8px); transition: opacity .15s ease, transform .3s var(--sf-spring); }
.sf-fab__action:hover .sf-fab__tip, .sf-fab__action:focus-visible .sf-fab__tip { opacity: 1; transform: translateY(-50%); }
.sf-fab[data-tip="right"] .sf-fab__tip { right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-8px); }
.sf-fab[data-tip="right"] .sf-fab__action:hover .sf-fab__tip, .sf-fab[data-tip="right"] .sf-fab__action:focus-visible .sf-fab__tip { transform: translateY(-50%); }
.sf-fab[data-direction="left"] { flex-direction: row-reverse; }
.sf-fab[data-direction="left"] .sf-fab__actions { flex-direction: row-reverse; }
.sf-fab[data-direction="left"] .sf-fab__tip { right: auto; left: 50%; top: auto; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px); }
.sf-fab[data-direction="left"] .sf-fab__action:hover .sf-fab__tip, .sf-fab[data-direction="left"] .sf-fab__action:focus-visible .sf-fab__tip { transform: translateX(-50%); }
.sf-fab[data-direction="left"] .sf-fab__action { transform: translateX(24px) scale(.3); }
.sf-fab[data-direction="left"].is-open .sf-fab__action { transform: none; }
.sf-fab[data-direction="left"].is-open .sf-fab__action:hover { transform: scale(1.12); }

/* ---------- Table of contents / scrollspy ---------- */
.sf-toc { position: relative; font-family: var(--sf-font); color: var(--sf-ink); }
.sf-toc__title { margin: 0 0 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-toc__list { position: relative; margin: 0; padding: 0 0 0 2px; list-style: none; border-left: 2px solid var(--sf-line); }
.sf-toc__marker { position: absolute; left: -2px; top: 0; width: 2px; height: var(--sf-h, 0); border-radius: 2px; background: var(--sf-ink); transform: translateY(var(--sf-y, 0)); opacity: 0; pointer-events: none; }
.sf-toc.is-ready .sf-toc__marker { opacity: 1; }
.sf-toc.is-animated .sf-toc__marker { transition: transform .5s var(--sf-spring), height .4s var(--sf-spring); }
.sf-toc__link { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--sf-muted); text-decoration: none; border-radius: 0 12px 12px 0; transition: color .2s ease, transform .35s var(--sf-spring), background .2s ease; }
.sf-toc__link:hover { color: var(--sf-ink); background: var(--sf-app-nav-hover); }
.sf-toc__link[aria-current="location"] { color: var(--sf-ink); font-weight: 700; transform: translateX(4px); }
.sf-toc__link[data-level="2"] { padding-left: 32px; font-size: 13.5px; }
.sf-toc__link[data-level="3"] { padding-left: 48px; font-size: 13px; }
.sf-toc:not(.is-ready) .sf-toc__link[aria-current="location"] { box-shadow: inset 2px 0 0 var(--sf-ink); }

/* ---------- Workspace / account switcher ---------- */
.sf-switcher__trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 220px; min-height: 56px; padding: 6px 14px 6px 8px; border: 0; border-radius: var(--sf-radius); background: var(--sf-surface); font: inherit; text-align: left; color: var(--sf-ink); cursor: pointer; transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-switcher__trigger:hover, .sf-switcher__trigger[aria-expanded="true"] { background: var(--sf-fill); }
.sf-switcher__trigger:active { transform: scale(.97); }
.sf-switcher__avatar { display: inline-grid; place-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 14px; font-weight: 700; transition: transform .35s var(--sf-spring); }
.sf-switcher__avatar--round { border-radius: 50%; }
.sf-switcher__trigger[aria-expanded="true"] .sf-switcher__avatar { transform: rotate(-8deg) scale(1.08); }
.sf-switcher__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.sf-switcher__name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-switcher__sub { font-size: 13px; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-switcher__trigger > .sf-navicon { color: var(--sf-muted); width: 18px; height: 18px; }
.sf-switcher__menu { min-width: 280px; }
.sf-switcher__menu .sf-switcher__avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.sf-switcher__menu .sf-switcher__avatar--fill { background: var(--sf-fill); color: var(--sf-ink); }
.sf-switcher__account { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.sf-switcher__account .sf-switcher__avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---------- Demo helpers ---------- */
.sf-navdemo { color: var(--sf-ink); font-family: var(--sf-font); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sf-navdemo > :not(.sf-menu) { min-width: 0; max-width: 100%; }
.sf-tabs { min-width: 0; }
.sf-navdemo--row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sf-navdemo--center { display: flex; justify-content: center; align-items: center; }
.sf-navdemo--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.sf-navdemo--toc { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: start; }
.sf-navdemo__fill { flex: 1; min-width: 0; display: grid; align-content: start; gap: 14px; }
@media (max-width: 640px) {
  .sf-navdemo--toc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sf-navdemo--toc > .sf-toc { order: -1; }
  .sf-navdemo__fill { display: none; }
}

/* ---------- Keyframes ---------- */
@keyframes sf-app-nav-sheet { 0% { opacity: 0; transform: translateY(-14px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-nav-rise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-nav-menu { 0% { opacity: 0; transform: scale(.85) translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-nav-cmd { 0% { opacity: 0; transform: translateY(-24px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-nav-tick { 0% { transform: rotate(-45deg) scale(0); } 100% { transform: rotate(-45deg) scale(1); } }
@keyframes sf-app-nav-squash { 0%, 100% { scale: 1 1; } 35% { scale: 1.18 .82; } }
@keyframes sf-app-nav-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-18px) scale(.95, 1.08); } 55% { transform: translateY(0) scale(1.1, .88); } 75% { transform: translateY(-6px); } }

/* ---------- Focus ---------- */
.sf-burger:focus-visible, .sf-navbar__link:focus-visible, .sf-navbar__logo:focus-visible, .sf-sidebar__toggle:focus-visible,
.sf-tabs__tab:focus-visible, .sf-tabs__panel:focus-visible, .sf-crumbs__link:focus-visible, .sf-crumbs__more:focus-visible,
.sf-pagination__page:focus-visible, .sf-pagination__nav:focus-visible, .sf-accordion__trigger:focus-visible,
.sf-collapsible__trigger:focus-visible, .sf-tabbar__item:focus-visible, .sf-toolbar__btn:focus-visible,
.sf-dock__item:focus-visible, .sf-fab__main:focus-visible, .sf-fab__action:focus-visible, .sf-toc__link:focus-visible,
.sf-switcher__trigger:focus-visible, .sf-scroll__viewport:focus-visible, .sf-searchbar__input:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-sidebar__item:focus-visible, .sf-tabs__tab:focus-visible, .sf-toc__link:focus-visible { outline-offset: -3px; }
.sf-searchbar__input:focus-visible { outline: none; }
.sf-command__input:focus-visible { outline: none; }
.sf-accordion__trigger:focus-visible, .sf-collapsible__trigger:focus-visible { outline-offset: -3px; }
.sf-sidebar__item:focus-visible { outline: 3px solid var(--sf-ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-collapse, .sf-burger, .sf-burger span, .sf-navbar__mark, .sf-navbar__link, .sf-navbar__sheet, .sf-navbar__sheet > *, .sf-sidebar, .sf-sidebar *,
  .sf-tabs *, .sf-crumbs *, .sf-pagination *, .sf-accordion *, .sf-collapsible *, .sf-tabbar, .sf-tabbar *, .sf-menu, .sf-menu *,
  .sf-command, .sf-command *, .sf-searchbar *, .sf-searchbar__panel, .sf-shell *, .sf-tree *, .sf-split *, .sf-toolbar *, .sf-dock *, .sf-fab *,
  .sf-toc *, .sf-switcher__trigger, .sf-switcher__avatar, .sf-kbd, .sf-scroll__viewport { animation: none !important; transition: none !important; }
  .sf-command::backdrop { animation: none !important; }
  .sf-fab__action { transition-delay: 0s !important; }
}


/* ===== Data (app-data) ===== */
/* Soft UI: app-data module (data display, charts, content widgets).
   Needs soft.css. Behaviour: app-data.js. Icons are CSS masks: <i class="sf-dico" data-dico="check"></i> */

/* ---------- Tokens ---------- */
:root {
  --sf-app-data-c1: var(--sf-ink);
  --sf-app-data-c2: #5CC8FF;
  --sf-app-data-c3: #FF5C8A;
  --sf-app-data-c4: #FFC857;
  --sf-app-data-c5: #7AE582;
  --sf-app-data-c6: var(--sf-muted);
  --sf-app-data-up: color-mix(in srgb, #2FBF71 70%, var(--sf-ink));
  --sf-app-data-down: color-mix(in srgb, var(--sf-danger) 75%, var(--sf-ink));
  --sf-app-data-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sf-app-data-dock: 0 20px 50px rgba(0, 0, 0, .18);
}
[data-tone="pink"] { --sf-app-data-tone: #FF5C8A; }
[data-tone="yellow"] { --sf-app-data-tone: #FFC857; }
[data-tone="blue"] { --sf-app-data-tone: #5CC8FF; }
[data-tone="green"] { --sf-app-data-tone: #7AE582; }

.sf-adsr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* shared focus ring for module controls */
.sf-table__sort:focus-visible, .sf-gridbar__d:focus-visible, .sf-gridbar__menuitem:focus-visible, .sf-list__action:focus-visible,
.sf-swipe__action:focus-visible, .sf-notif__main:focus-visible, .sf-cal__day:focus-visible, .sf-cal__nav:focus-visible,
.sf-datepicker__toggle:focus-visible, .sf-kanban__card:focus-visible, .sf-kanban__grip:focus-visible, .sf-chip:focus-visible,
.sf-chip__x:focus-visible, .sf-reactions:focus-visible, .sf-comment__btn:focus-visible, .sf-carousel__arrow:focus-visible,
.sf-carousel__dot:focus-visible, .sf-carousel__play:focus-visible, .sf-gallery__item:focus-visible, .sf-lightbox__btn:focus-visible,
.sf-reviewsum__row:focus-visible, .sf-chart svg:focus-visible, .sf-code__pre:focus-visible, .sf-hovercard__trigger:focus-visible,
.sf-chat__log:focus-visible, .sf-composer__input:focus-visible, .sf-avgroup__more:focus-visible, .sf-chips__input:focus-visible,
.sf-leader__item:focus-visible {
  outline: 3px solid var(--sf-ink); outline-offset: 3px;
}

/* ---------- Data tooltip (charts, heatmap) ---------- */
.sf-datatip { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 500; line-height: 1.35; padding: 8px 12px; border-radius: 12px; white-space: nowrap; opacity: 0; transform: scale(.8); transform-origin: bottom center; transition: opacity .15s ease, transform .35s var(--sf-spring), translate .12s var(--sf-ease); }
.sf-datatip.is-on { opacity: 1; transform: scale(1); }
.sf-datatip b { display: block; font-weight: 700; }
.sf-datatip__row { display: flex; align-items: center; gap: 6px; }
.sf-datatip__row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sf-on-ink)); box-shadow: 0 0 0 1.5px var(--sf-on-ink); }

/* ---------- Edge fade for horizontal scrollers (JS toggles .is-fade-l / .is-fade-r) ---------- */
.sf-adfade.is-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.sf-adfade.is-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.sf-adfade.is-fade-l.is-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* ---------- Table ---------- */
.sf-table-wrap { position: relative; --sf-table-h: none; max-height: var(--sf-table-h); overflow: auto; background: var(--sf-surface); border-radius: var(--sf-radius-lg); }
.sf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums; --sf-table-pad: 14px; color: var(--sf-ink); }
.sf-table[data-density="compact"] { --sf-table-pad: 6px; }
.sf-table[data-density="roomy"] { --sf-table-pad: 22px; }
.sf-table th, .sf-table td { text-align: left; padding: var(--sf-table-pad) 18px; white-space: nowrap; border-bottom: 1px solid var(--sf-line); transition: padding .4s var(--sf-spring); }
.sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-table thead th { position: sticky; top: 0; z-index: 2; background: var(--sf-surface); color: var(--sf-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; border-bottom: 2px solid var(--sf-line); }
.sf-table th:has(.sf-table__sort) { padding-block: 0; }
.sf-table tbody tr { transition: background .2s ease; }
.sf-table tbody tr:hover { background: var(--sf-fill); }
.sf-table tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--sf-ink) 7%, transparent); }
.sf-table tr[hidden] { display: none; }
.sf-table [data-col-hidden] { display: none; }
.sf-table__num { text-align: right !important; }
.sf-table__select { width: 52px; padding-right: 0 !important; }
.sf-table__sort { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: color .2s ease; }
.sf-table__sort:hover, th[aria-sort="ascending"] .sf-table__sort, th[aria-sort="descending"] .sf-table__sort { color: var(--sf-ink); }
.sf-table__arrow { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .35; transition: transform .6s var(--sf-spring), opacity .2s ease; }
.sf-table__sort:hover .sf-table__arrow { opacity: .7; }
th[aria-sort="descending"] .sf-table__arrow { opacity: 1; transform: translateY(-2px) rotate(45deg); }
th[aria-sort="ascending"] .sf-table__arrow { opacity: 1; transform: translateY(2px) rotate(225deg); }
.sf-table__empty { padding: 36px 20px; text-align: center; color: var(--sf-muted); }
.sf-table__empty[hidden] { display: none; }
.sf-table .sf-badge { white-space: nowrap; }

@media (max-width: 640px) {
  .sf-table-wrap { max-height: none; }
  .sf-table--stack, .sf-table--stack tbody, .sf-table--stack tr, .sf-table--stack td, .sf-table--stack thead { display: block; }
  .sf-table--stack thead tr { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 14px 4px; }
  .sf-table--stack thead th { display: none; position: static; padding: 0; border: 0; background: none; }
  .sf-table--stack thead th:has(.sf-table__sort) { display: block; }
  .sf-table--stack thead .sf-table__sort { background: var(--sf-fill); border-radius: var(--sf-pill); padding: 0 16px; }
  .sf-table--stack thead th.sf-table__select { display: flex; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 0 16px 0 9px !important; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); font-size: 14px; }
  .sf-table--stack thead th.sf-table__select::after { content: "All"; }
  .sf-table--stack thead th.sf-table__select .sf-check { background: var(--sf-surface); }
  .sf-table--stack thead th.sf-table__select .sf-check:checked { background: var(--sf-ink); }
  .sf-table--stack tbody tr { margin: 10px 14px; padding: 8px 0; border-radius: var(--sf-radius); background: var(--sf-fill); }
  .sf-table--stack tbody tr:hover { background: var(--sf-fill); }
  .sf-table--stack tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--sf-ink) 12%, var(--sf-fill)); }
  .sf-table--stack td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 16px; border: 0; text-align: right; white-space: normal; }
  .sf-table--stack td::before { content: attr(data-label); color: var(--sf-muted); font-size: 13px; font-weight: 600; text-align: left; }
  .sf-table--stack td.sf-table__select { width: auto; padding-right: 16px !important; }
  .sf-table--stack td.sf-table__select::before { content: "Select"; }
  .sf-table--stack [data-col-hidden] { display: none; }
  .sf-table--stack td .sf-check, .sf-table--stack td .sf-badge { background: var(--sf-surface); }
  .sf-table--stack td .sf-check:checked { background: var(--sf-ink); }
}

/* ---------- Data grid toolbar ---------- */
.sf-gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.sf-gridbar__search { position: relative; flex: 1 1 220px; min-width: 0; }
.sf-gridbar__search .sf-input { padding-left: 48px; }
.sf-gridbar__search .sf-dico { position: absolute; left: 18px; top: 50%; margin-top: -10px; color: var(--sf-muted); pointer-events: none; }
.sf-gridbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-gridbar__density { display: inline-flex; padding: 4px; gap: 2px; background: var(--sf-fill); border-radius: var(--sf-pill); }
.sf-gridbar__d { width: 44px; height: 40px; border: 0; background: none; color: var(--sf-muted); border-radius: var(--sf-pill); cursor: pointer; display: grid; place-items: center; transition: background .2s ease, color .2s ease, transform .3s var(--sf-spring); }
.sf-gridbar__d:hover { transform: scale(1.08); }
.sf-gridbar__d[aria-pressed="true"] { background: var(--sf-surface); color: var(--sf-ink); }
.sf-gridbar__menuwrap { position: relative; }
.sf-gridbar__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; padding: 8px; background: var(--sf-surface); border-radius: var(--sf-radius); border: 1px solid var(--sf-line); box-shadow: var(--sf-app-data-dock); animation: sf-app-data-pop .4s var(--sf-spring); transform-origin: top right; }
.sf-gridbar__menu[hidden] { display: none; }
.sf-gridbar__menuitem { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 500; color: var(--sf-ink); background: none; border: 0; border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s ease; }
.sf-gridbar__menuitem:hover { background: var(--sf-fill); }
.sf-gridbar__tick { width: 22px; height: 22px; border-radius: 7px; background: var(--sf-fill); display: grid; place-items: center; transition: background .2s ease, transform .3s var(--sf-spring); }
[aria-checked="true"] > .sf-gridbar__tick { background: var(--sf-ink); transform: scale(1.05); }
[aria-checked="true"] > .sf-gridbar__tick::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--sf-on-ink); border-bottom: 2.5px solid var(--sf-on-ink); transform: translateY(-1px) rotate(-45deg); }
.sf-gridbar__status { font-size: 13px; color: var(--sf-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Chip / tag ---------- */
.sf-chip { --tone: var(--sf-app-data-tone, var(--sf-fill)); position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--sf-pill); border: 0; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; background: var(--sf-fill); color: var(--sf-ink); transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-chip[data-tone] { background: color-mix(in srgb, var(--tone) 38%, var(--sf-fill)); }
button.sf-chip { cursor: pointer; }
button.sf-chip::after { content: ""; position: absolute; inset: -4px -2px; }
button.sf-chip:hover { transform: scale(1.06); }
button.sf-chip:active { transform: scale(1.1, .86); }
.sf-chip[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-chip[aria-pressed]::before { content: ""; width: 0; height: 7px; margin-right: -6px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); opacity: 0; transition: width .35s var(--sf-spring), margin .35s var(--sf-spring), opacity .2s ease; }
.sf-chip[aria-pressed="true"]::before { width: 12px; margin-right: 0; opacity: 1; }
.sf-chip--removable { padding-right: 6px; }
.sf-chip__x { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 10%, transparent); color: inherit; cursor: pointer; display: grid; place-items: center; font-size: 12px; transition: transform .3s var(--sf-spring), background .2s ease; }
.sf-chip__x::before { content: ""; position: absolute; inset: -9px; }
.sf-chip__x:hover { background: var(--sf-ink); color: var(--sf-on-ink); transform: rotate(90deg) scale(1.1); }
.sf-chip.is-leaving { animation: sf-app-data-chip-out .24s var(--sf-ease) forwards; pointer-events: none; }
.sf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; min-height: 52px; background: var(--sf-fill); border-radius: var(--sf-radius); }
.sf-chips:focus-within { background: var(--sf-surface); box-shadow: inset 0 0 0 2px var(--sf-ink); }
.sf-chips .sf-chip { background: var(--sf-surface); animation: sf-app-data-chip-in .4s var(--sf-spring); }
.sf-chips .sf-chip[data-tone] { background: color-mix(in srgb, var(--tone) 55%, var(--sf-surface)); }
.sf-chips__input { flex: 1 1 120px; min-width: 100px; min-height: 36px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--sf-ink); padding: 0 8px; }
.sf-chips__input:focus { outline: none; }
.sf-chips__input:focus-visible { outline: none; }
.sf-chips__input::placeholder { color: var(--sf-muted); }
.sf-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- List ---------- */
.sf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; color: var(--sf-ink); }
.sf-list--card { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 8px; overflow: hidden; }
.sf-list__item, .sf-list__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: var(--sf-radius); transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-list__item:not(.sf-swipe):hover, .sf-list__row:hover { background: var(--sf-fill); }
.sf-list--divided .sf-list__item + .sf-list__item { border-top: 1px solid var(--sf-line); border-top-left-radius: 0; border-top-right-radius: 0; }
.sf-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-list__title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-list__meta { font-size: 14px; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-list__trail { flex: none; display: flex; align-items: center; gap: 8px; color: var(--sf-muted); font-size: 14px; }
.sf-list__action { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--sf-muted); cursor: pointer; display: grid; place-items: center; transition: background .2s ease, color .2s ease, transform .3s var(--sf-spring); }
.sf-list__action:hover { background: var(--sf-fill); color: var(--sf-ink); transform: scale(1.1); }
.sf-list__item.sf-swipe { display: block; padding: 0; min-height: 0; }

/* ---------- Swipe (list reveal + notification commit) ---------- */
.sf-swipe { position: relative; overflow: hidden; }
.sf-swipe__body { position: relative; z-index: 1; background: var(--sf-surface); touch-action: pan-y; transition: transform .5s var(--sf-spring); will-change: transform; cursor: grab; }
.sf-swipe.is-dragging .sf-swipe__body { transition: none; cursor: grabbing; }
.sf-swipe.is-open > .sf-swipe__body { transform: translateX(calc(-1 * var(--sf-swipe-w, 160px))); }
.sf-swipe__actions { position: absolute; inset: 0 0 0 auto; display: flex; opacity: 0; transition: opacity .2s ease .15s; }
.sf-swipe.is-open > .sf-swipe__actions, .sf-swipe.is-dragging > .sf-swipe__actions, .sf-swipe__actions:focus-within { opacity: 1; transition-delay: 0s; }
.sf-swipe__action { min-width: 80px; padding: 0 16px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--sf-fill); color: var(--sf-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: filter .2s ease; }
.sf-swipe__action:hover { filter: brightness(.95); }
.sf-swipe__action--danger { background: var(--sf-danger); color: #fff; }
.sf-swipe__action:focus-visible { outline-offset: -4px; }
.sf-swipe__under { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding-left: 22px; font-size: 14px; font-weight: 700; opacity: 0; background: color-mix(in srgb, #2FBF71 32%, var(--sf-surface)); color: var(--sf-ink); }

/* ---------- Stat / KPI card ---------- */
.sf-stat { position: relative; display: grid; gap: 4px; min-width: 0; padding: 22px 24px; background: var(--sf-surface); border-radius: var(--sf-radius-lg); color: var(--sf-ink); }
.sf-stat__label { font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.sf-stat__value { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-stat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 8px; min-width: 0; }
.sf-stat__foot .sf-spark { flex: 0 1 96px; min-width: 56px; margin-left: auto; }
.sf-stat__foot .sf-spark svg { width: 100%; height: auto; }
.sf-stat__delta { --c: var(--sf-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--sf-pill); font-size: 13px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sf-stat__delta::before { content: ""; width: 9px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sf-stat__delta--up { --c: var(--sf-app-data-up); animation: sf-app-data-nudge-up 2.4s var(--sf-ease) infinite; }
.sf-stat__delta--down { --c: var(--sf-app-data-down); animation: sf-app-data-nudge-down 2.4s var(--sf-ease) infinite; }
.sf-stat__delta--down::before { transform: rotate(180deg); }
.sf-stat__delta--flat::before { clip-path: none; height: 3px; border-radius: 2px; }
.sf-stat .sf-spark { color: var(--sf-ink); }

/* ---------- Sparkline ---------- */
.sf-spark { display: inline-block; line-height: 0; color: var(--sf-ink); max-width: 100%; }
.sf-spark svg { max-width: 100%; height: auto; }
.sf-spark svg { overflow: visible; }
.sf-spark--fluid { display: block; }
.sf-spark--fluid svg { width: 100%; height: auto; }
.sf-spark__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sf-spark__area { fill: currentColor; opacity: .1; }
.sf-spark__dot { fill: currentColor; }
[data-sf-armed]:not(.is-in) .sf-spark__line, [data-sf-armed]:not(.is-in) .sf-spark__dot, [data-sf-armed]:not(.is-in) .sf-spark__area { animation-play-state: paused; }
.sf-spark__line { animation: sf-app-data-draw 1.2s var(--sf-ease) .1s both; }
.sf-spark__area { animation: sf-app-data-fade-area 1s ease .5s both; }
.sf-spark__dot { transform-box: fill-box; transform-origin: center; animation: sf-app-data-dot .6s var(--sf-spring) 1s both; }

/* ---------- Charts (bar, line, area, donut, pie) ---------- */
.sf-chart { position: relative; min-width: 0; color: var(--sf-ink); }
.sf-chart__stage { position: relative; max-width: 100%; }
.sf-chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.sf-chart svg:focus { outline: none; }
.sf-chart__grid { stroke: var(--sf-line); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
.sf-chart__axis { fill: var(--sf-muted); font-size: 12px; font-weight: 500; }
.sf-chart__axis--cat { font-size: 13px; fill: var(--sf-ink); }
.sf-chart__value { fill: var(--sf-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-chart__bar { fill: var(--c, var(--sf-ink)); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .2s ease; animation: sf-app-data-grow .8s var(--sf-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.sf-chart__bar--h { transform-origin: 0 50%; animation-name: sf-app-data-grow-x; }
.sf-chart.has-hot .sf-chart__bar:not(.is-hot) { opacity: .3; }
.sf-chart__line { fill: none; stroke: var(--c, var(--sf-ink)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: sf-app-data-draw 1.4s var(--sf-ease) both; animation-delay: calc(var(--i, 0) * 160ms); }
.sf-chart__area { fill: var(--c, var(--sf-ink)); opacity: .13; animation: sf-app-data-fade-area 1.2s ease .5s both; }
.sf-chart__pt { fill: var(--sf-surface); stroke: var(--c); stroke-width: 2; animation: sf-app-data-fade .4s ease 1.1s both; }
.sf-chart__cursor { opacity: 0; transition: transform .12s var(--sf-ease), opacity .15s ease; pointer-events: none; }
.sf-chart__cursor.is-on { opacity: 1; }
.sf-chart__cursor line { stroke: var(--sf-muted); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sf-chart__dot { fill: var(--sf-surface); stroke: var(--c); stroke-width: 3; transition: transform .12s var(--sf-ease); }
.sf-chart__segwrap { animation: sf-app-data-seg .9s var(--sf-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
.sf-chart__seg { fill: var(--c); cursor: pointer; transition: transform .4s var(--sf-spring), opacity .2s ease; }
.sf-chart__seg.is-hot { transform: translate(var(--dx), var(--dy)); }
.sf-chart.has-hot .sf-chart__seg:not(.is-hot) { opacity: .45; }
.sf-chart--static .sf-chart__bar, .sf-chart--static .sf-chart__line, .sf-chart--static .sf-chart__area, .sf-chart--static .sf-chart__pt, .sf-chart--static .sf-chart__segwrap { animation: none; }
[data-sf-armed]:not(.is-in) .sf-chart__bar, [data-sf-armed]:not(.is-in) .sf-chart__line, [data-sf-armed]:not(.is-in) .sf-chart__area, [data-sf-armed]:not(.is-in) .sf-chart__pt, [data-sf-armed]:not(.is-in) .sf-chart__segwrap { animation-play-state: paused; }
.sf-chart__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 20%; }
.sf-chart__center strong { font-size: clamp(15px, calc(var(--sf-chart-size, 220px) * .12), 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-chart__center span { font-size: 13px; color: var(--sf-muted); font-weight: 500; }
.sf-chart--round { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.sf-chart--round .sf-chart__stage { margin-inline: auto; flex: none; }
.sf-chart__legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.sf-chart--round .sf-chart__legend { flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 4px; min-width: 140px; flex: 1 1 140px; }
.sf-chart__legend-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 10px; transition: background .2s ease; }
.sf-chart__legend-item b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.sf-chart__legend-item.is-hot { background: var(--sf-fill); }
.sf-chart__swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sf-ink) 20%, transparent); }
.sf-chart__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Progress group, stacked bar, goal meter ---------- */
.sf-meters { display: grid; gap: 20px; }
.sf-dmeter { --c: var(--sf-app-data-tone, var(--sf-ink)); display: grid; gap: 8px; }
.sf-dmeter__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.sf-dmeter__head span:last-child { color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-dmeter__track { height: 12px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-dmeter__fill { display: block; height: 100%; width: calc(var(--sf-value, 50) * 1%); border-radius: var(--sf-pill); background: var(--c); transition: width 1.1s var(--sf-spring); transition-delay: calc(var(--n, 0) * 90ms); }
[data-sf-armed]:not(.is-in) .sf-dmeter__fill { width: 0; }
.sf-stack { display: grid; gap: 14px; }
.sf-stack__bar { display: flex; gap: 3px; height: 18px; }
.sf-stack__seg { --c: var(--sf-ink); flex: var(--v, 1) 1 0; min-width: 6px; border-radius: 6px; background: var(--c); transition: flex-grow 1s var(--sf-spring), transform .3s var(--sf-spring); transition-delay: calc(var(--n, 0) * 80ms), 0s; }
.sf-stack__seg:first-child { border-radius: var(--sf-pill) 6px 6px var(--sf-pill); }
.sf-stack__seg:last-child { border-radius: 6px var(--sf-pill) var(--sf-pill) 6px; }
.sf-stack__seg:hover { transform: scaleY(1.35); }
[data-sf-armed]:not(.is-in) .sf-stack__seg { flex-grow: 0.001; }
.sf-stack__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.sf-stack__legend li { display: flex; align-items: center; gap: 8px; }
.sf-stack__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.sf-stack__legend b { font-variant-numeric: tabular-nums; }
.sf-stack__seg[data-tone], .sf-dmeter[data-tone], .sf-stack__legend [data-tone] { --c: var(--sf-app-data-tone); }
.sf-goal { position: relative; width: min(100%, 280px); text-align: center; color: var(--sf-ink); }
.sf-goal svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-goal__track, .sf-goal__fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.sf-goal__track { stroke: var(--sf-fill); }
.sf-goal__fill { stroke: var(--sf-ink); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 1.4s var(--sf-spring); }
[data-sf-armed]:not(.is-in) .sf-goal__fill { stroke-dashoffset: 100; }
.sf-goal__text { margin-top: -54px; padding-inline: 12%; display: grid; gap: 2px; }
.sf-goal__text strong { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sf-goal__text span { font-size: 13px; color: var(--sf-muted); font-weight: 500; }

/* ---------- Heatmap ---------- */
.sf-heat { --cell: 14px; --gap: 4px; color: var(--sf-ink); min-width: 0; }
.sf-heat__wrap { position: relative; }
.sf-heat__frame { display: flex; align-items: flex-start; gap: 2px; }
.sf-heat__scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 6px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-heat__scroll::-webkit-scrollbar { display: none; }
.sf-heat__body { display: grid; grid-template-rows: 18px max-content; row-gap: 4px; width: max-content; }
.sf-heat__months { display: grid; gap: var(--gap); font-size: 12px; color: var(--sf-muted); font-weight: 500; }
.sf-heat__months span { white-space: nowrap; }
.sf-heat__days { flex: none; width: 30px; margin-top: 26px; display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); font-size: 11px; color: var(--sf-muted); line-height: var(--cell); font-weight: 500; }
.sf-heat__grid { display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; grid-auto-columns: var(--cell); gap: var(--gap); }
.sf-heat__cell { --lvl-c: var(--sf-app-data-tone, var(--sf-ink)); display: block; width: var(--cell); height: var(--cell); border-radius: 4px; background: var(--sf-fill); transition: transform .3s var(--sf-spring); }
.sf-heat__cell[data-level="1"] { background: color-mix(in srgb, var(--lvl-c) 25%, var(--sf-fill)); }
.sf-heat__cell[data-level="2"] { background: color-mix(in srgb, var(--lvl-c) 50%, var(--sf-fill)); }
.sf-heat__cell[data-level="3"] { background: color-mix(in srgb, var(--lvl-c) 75%, var(--sf-fill)); }
.sf-heat__cell[data-level="4"] { background: var(--lvl-c); }
.sf-heat__grid .sf-heat__cell:hover { transform: scale(1.5); position: relative; z-index: 2; }
.sf-heat__grid .sf-heat__cell { opacity: 0; transform: scale(.4); }
.sf-heat__wrap.is-in .sf-heat__grid .sf-heat__cell { opacity: 1; transform: none; transition: opacity .3s ease, transform .5s var(--sf-spring); transition-delay: calc(var(--col, 0) * 14ms); }
.sf-heat__wrap.is-in .sf-heat__grid .sf-heat__cell:hover { transform: scale(1.5); transition-delay: 0s; }
.sf-heat__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; color: var(--sf-muted); margin-top: 4px; }
.sf-heat__legend span:first-child { margin-right: 4px; }
.sf-heat__legend span:last-child { margin-left: 4px; }

/* ---------- Calendar ---------- */
.sf-cal { --cell-h: 44px; width: min(100%, 372px); min-width: 0; padding: clamp(14px, 4vw, 20px); background: var(--sf-surface); border-radius: var(--sf-radius-lg); color: var(--sf-ink); }
.sf-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sf-cal__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sf-cal__nav { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--sf-spring), background .2s ease; }
.sf-cal__nav:hover { transform: scale(1.1); }
.sf-cal__nav:active { transform: scale(.88); }
.sf-cal__nav:disabled { opacity: .35; cursor: not-allowed; }
.sf-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: 600; color: var(--sf-muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
.sf-cal__port { position: relative; height: calc(6 * var(--cell-h)); margin-inline: -8px; padding-inline: 8px; overflow: clip visible; }
.sf-cal__month { display: grid; grid-auto-rows: var(--cell-h); }
.sf-cal__month.is-out-next, .sf-cal__month.is-out-prev { position: absolute; inset: 0 8px; pointer-events: none; }
.sf-cal__month.is-out-next { animation: sf-app-data-out-l .3s var(--sf-ease) forwards; }
.sf-cal__month.is-out-prev { animation: sf-app-data-out-r .3s var(--sf-ease) forwards; }
.sf-cal__month.is-in-next { animation: sf-app-data-in-r .5s var(--sf-spring) both; }
.sf-cal__month.is-in-prev { animation: sf-app-data-in-l .5s var(--sf-spring) both; }
.sf-cal__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.sf-cal__cell { display: grid; place-items: center; height: var(--cell-h); }
.sf-cal__day { position: relative; width: min(40px, 100%); height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-cal__day:hover { background: var(--sf-fill); transform: scale(1.12); }
.sf-cal__day:disabled { opacity: .3; cursor: not-allowed; transform: none; background: none; }
.sf-cal__cell.is-out .sf-cal__day { color: var(--sf-muted); }
.sf-cal__cell.is-today .sf-cal__day { box-shadow: inset 0 0 0 2px var(--sf-ink); font-weight: 700; }
.sf-cal__cell.is-selected .sf-cal__day { background: var(--sf-ink); color: var(--sf-on-ink); font-weight: 700; box-shadow: none; }
.sf-cal__day.is-pop { animation: sf-app-data-pop .5s var(--sf-spring); }
.sf-cal__dots { position: absolute; left: 50%; bottom: 3px; display: flex; gap: 2px; transform: translateX(-50%); }
.sf-cal__dots i, .sf-cal__agenda i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #FF5C8A; }
.sf-cal__dots i[data-k="1"], .sf-cal__agenda i[data-k="1"] { background: #5CC8FF; }
.sf-cal__dots i[data-k="2"], .sf-cal__agenda i[data-k="2"] { background: #FFC857; }
.sf-cal__cell.is-range { background: var(--sf-fill); }
.sf-cal__cell.is-range.is-start { border-top-left-radius: var(--sf-pill); border-bottom-left-radius: var(--sf-pill); }
.sf-cal__cell.is-range.is-end { border-top-right-radius: var(--sf-pill); border-bottom-right-radius: var(--sf-pill); }
.sf-cal__row > .sf-cal__cell.is-range:first-child { border-top-left-radius: var(--sf-pill); border-bottom-left-radius: var(--sf-pill); }
.sf-cal__row > .sf-cal__cell.is-range:last-child { border-top-right-radius: var(--sf-pill); border-bottom-right-radius: var(--sf-pill); }
.sf-cal__cell.is-range:not(.is-selected) .sf-cal__day:hover { background: var(--sf-line); }
.sf-cal__agenda { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sf-line); font-size: 14px; }
.sf-cal__agenda p { margin: 6px 0 0; }
.sf-cal__agenda ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sf-cal__agenda li { display: flex; align-items: center; gap: 10px; }

/* ---------- Date picker / range picker ---------- */
.sf-datepicker { position: relative; display: inline-block; width: min(100%, 300px); }
.sf-datepicker__field { position: relative; }
.sf-datepicker__input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.sf-datepicker__toggle { position: absolute; right: 4px; top: 50%; margin-top: -22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--sf-ink); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--sf-spring), background .2s ease; }
.sf-datepicker__toggle:hover { background: var(--sf-surface); transform: scale(1.1); }
.sf-datepicker__pop { position: absolute; z-index: 50; left: 0; top: calc(100% + 8px); padding: 14px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-app-data-dock); width: max-content; max-width: calc(100vw - 24px); translate: var(--sf-dp-x, 0px) 0; visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.94); transform-origin: top left; transition: opacity .2s ease, transform .5s var(--sf-spring), visibility 0s .5s; }
.sf-datepicker[data-placement="top"] .sf-datepicker__pop { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; transform: translateY(10px) scale(.94); }
.sf-datepicker[data-open] .sf-datepicker__pop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.sf-datepicker__pop .sf-cal { padding: 0; width: min(320px, calc(100vw - 54px)); max-width: 100%; background: none; }
.sf-datepicker__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--sf-line); }
.sf-datepicker--range { width: min(100%, 340px); }

/* ---------- Kanban ---------- */
.sf-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(240px, 84%), 1fr); gap: 16px; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 16px; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-x: contain; color: var(--sf-ink); }
@media (max-width: 640px) { .sf-kanban { gap: 12px; scrollbar-width: none; } .sf-kanban::-webkit-scrollbar { display: none; } }
.sf-kanban__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; background: var(--sf-fill); border-radius: var(--sf-radius-lg); scroll-snap-align: start; transition: outline-color .2s ease, background .2s ease; outline: 2px dashed transparent; outline-offset: -2px; }
.sf-kanban__col.is-over { outline-color: var(--sf-muted); background: color-mix(in srgb, var(--sf-ink) 6%, var(--sf-fill)); }
.sf-kanban__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.sf-kanban__name { margin: 0; font-size: 15px; font-weight: 700; }
.sf-kanban__count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--sf-pill); background: var(--sf-surface); font-size: 13px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.sf-kanban__cards { display: flex; flex-direction: column; gap: 10px; min-height: 64px; flex: 1; }
.sf-kanban__card { position: relative; padding: 14px 44px 14px 16px; background: var(--sf-surface); border-radius: var(--sf-radius); box-shadow: 0 0 0 1px var(--sf-line); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .35s var(--sf-spring), box-shadow .2s ease; }
.sf-kanban__card:hover { transform: translateY(-2px); }
.sf-kanban__card.is-grabbed { box-shadow: 0 0 0 2px var(--sf-ink); transform: scale(1.03) rotate(-1deg); }
.sf-kanban__card[popover] { inset: auto; margin: 0; border: 0; overflow: visible; color: inherit; background: var(--sf-surface); padding: 14px 44px 14px 16px; }
.sf-kanban__card.is-dragging { cursor: grabbing; pointer-events: none; transform: rotate(2.5deg) scale(1.04); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); transition: transform .25s var(--sf-spring); margin: 0; }
.sf-kanban__card.is-dropping { pointer-events: none; transform: none; z-index: 200; }
.sf-kanban__card.is-landed { animation: sf-app-data-land .5s var(--sf-spring); }
.sf-kanban__grip { position: absolute; top: 4px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--sf-muted); touch-action: none; cursor: grab; border-radius: 12px; }
.sf-kanban__grip:hover { color: var(--sf-ink); }
.sf-kanban__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sf-kanban__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--sf-muted); }
.sf-kanban__ghost { border: 2px dashed var(--sf-line); border-radius: var(--sf-radius); background: color-mix(in srgb, var(--sf-ink) 4%, transparent); }
.sf-kanban.is-dragging { scroll-snap-type: none; }
.sf-kanban .sf-avgroup { --sf-avs: 28px; --sf-avg-overlap: -8px; padding-left: 8px; }
.sf-kanban .sf-avatar { font-size: 11px; }
/* ---------- Icons (CSS masks, 24px grid) ---------- */
.sf-dico { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor; vertical-align: -.22em; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.sf-dico[data-dico="check"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012.5l4.5%204.5L19%207.5%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="x"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="plus"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="chevron-down"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="chevron-left"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%206l-6%206%206%206%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="chevron-right"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="arrow-up"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2019V5M6%2011l6-6%206%206%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="arrow-down"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M6%2013l6%206%206-6%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="search"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%205a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zM20%2020l-4.2-4.2%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="filter"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M7%2012h10M10%2018h4%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="columns"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205h16v14H4zM9.5%205v14M14.5%205v14%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="calendar"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%206h14v13H5zM5%2010h14M9%204v4M15%204v4%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="comment"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%206h14v10H10l-4%203.5V16H5z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="upload"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2016V5M7%2010l5-5%205%205M5%2019h14%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="download"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v11M7%2011l5%205%205-5M5%2019h14%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="user"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2012a4%204%200%201%200%200-8%204%204%200%200%200%200%208zM5%2020c1-4%204-5.5%207-5.5s6%201.5%207%205.5%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="bell"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2017v-6a6%206%200%200%201%2012%200v6l1.5%201.5h-15zM10%2021h4%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="star"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l2.5%205.2%205.7.8-4.1%204%201%205.7L12%2017l-5.1%202.7%201-5.7-4.1-4%205.7-.8z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="heart"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2019s-7-4.4-7-9.5A4%204%200%200%201%2012%207a4%204%200%200%201%207%202.5C19%2014.6%2012%2019%2012%2019z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="file"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h7l4%204v14H7zM14%203v4h4%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="send"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012l16-8-6%2016-3-7z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="copy"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%209h10v11H9zM5%2015V4h10%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="reply"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%208L4%2013l6%205M4%2013h10a6%206%200%200%201%206%206%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="more"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2012h.01M12%2012h.01M18%2012h.01%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="trash"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%207h14M10%207V4h4v3M7%207l1%2013h8l1-13M10%2011v6M14%2011v6%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="image"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205h16v14H4zM4%2016l5-5%204%204%203-3%204%204M9%209h.01%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="commit"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206zM3%2012h6M15%2012h6%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="pause"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%205v14M16%205v14%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="play"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%205l11%207-11%207z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="alert"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l9%2016H3zM12%2010v4M12%2017h.01%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="grip"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206h.01M9%2012h.01M9%2018h.01M15%206h.01M15%2012h.01M15%2018h.01%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="archive"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16v4H4zM6%2010v9h12v-9M10%2014h4%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="clock"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204a8%208%200%201%200%200%2016%208%208%200%200%200%200-16zM12%208v4l3%202%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="folder"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h6l2%202h8v11H4z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="rows-compact"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209h16M4%2012h16M4%2015h16%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="rows-cozy"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208h16M4%2012h16M4%2016h16%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="rows-roomy"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M4%2012h16M4%2018h16%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="pin"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s-6-5.5-6-10a6%206%200%200%201%2012%200c0%204.5-6%2010-6%2010zM12%208.5a2.5%202.5%200%201%200%200%205%202.5%202.5%200%200%200%200-5z%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="link"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="flag"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2021V4M6%205h11l-2%204%202%204H6%27%2F%3E%3C%2Fsvg%3E"); }
.sf-dico[data-dico="music"] { --m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018V6l10-2v12M9%2018a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200zM19%2016a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200z%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- Timeline / activity feed ---------- */
.sf-timeline { color: var(--sf-ink); }
.sf-timeline__day { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-timeline__group + .sf-timeline__group { margin-top: 18px; }
.sf-timeline__list { list-style: none; margin: 0; padding: 0; }
.sf-timeline__item { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding-bottom: 22px; }
.sf-timeline__item::before { content: ""; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--sf-line); }
.sf-timeline__item:last-child { padding-bottom: 4px; }
.sf-timeline__item:last-child::before { display: none; }
.sf-timeline__icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sf-app-data-tone, var(--sf-ink)) 38%, var(--sf-fill)); transition: transform .4s var(--sf-spring); }
.sf-timeline__icon:not([data-tone]) { background: var(--sf-fill); }
.sf-timeline__item:hover .sf-timeline__icon { transform: scale(1.12) rotate(-6deg); }
.sf-timeline__text { margin: 6px 0 2px; font-size: 15px; line-height: 1.45; }
.sf-timeline__time { font-size: 13px; color: var(--sf-muted); }
.sf-timeline__card { margin-top: 8px; padding: 12px 14px; border-radius: var(--sf-radius); background: var(--sf-fill); font-size: 14px; color: var(--sf-muted); }

/* ---------- Avatar group ---------- */
.sf-avgroup { --sf-avs: 44px; --sf-avg-overlap: -12px; --sf-avg-ring: var(--sf-surface); display: inline-flex; align-items: center; padding-left: calc(-1 * var(--sf-avg-overlap)); }
.sf-avgroup > * { box-sizing: border-box; width: var(--sf-avs); height: var(--sf-avs); margin-left: var(--sf-avg-overlap); border: 3px solid var(--sf-avg-ring); transition: margin .45s var(--sf-spring), transform .3s var(--sf-spring); }
.sf-avgroup > .sf-avatar[hidden] { display: none; }
.sf-avgroup:hover > *, .sf-avgroup:focus-within > * { margin-left: 4px; }
.sf-avgroup:hover, .sf-avgroup:focus-within { padding-left: 0; }
.sf-avgroup > .sf-avatar:hover { transform: translateY(-4px) scale(1.12); z-index: 2; }
.sf-avgroup__more { border-radius: 50%; background: var(--sf-ink); color: var(--sf-on-ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; cursor: default; }
.sf-avatar[data-tone] { background: var(--sf-app-data-tone); color: #111; }
.sf-avgroup--sm { --sf-avs: 32px; --sf-avg-overlap: -9px; }
.sf-avgroup--sm .sf-avatar, .sf-avgroup--sm .sf-avgroup__more { font-size: 11px; }
.sf-avgroup--lg { --sf-avs: 56px; --sf-avg-overlap: -16px; }

/* ---------- Chat ---------- */
.sf-chat { display: flex; flex-direction: column; height: min(540px, 80vh); background: var(--sf-surface); border-radius: var(--sf-radius-lg); overflow: hidden; color: var(--sf-ink); }
.sf-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sf-line); }
.sf-chat__who { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; line-height: 1.25; }
.sf-chat__who small { font-weight: 500; font-size: 13px; color: var(--sf-muted); }
.sf-chat__log { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; overscroll-behavior: contain; }
.sf-chat__day { align-self: center; margin: 4px 0 10px; font-size: 12px; font-weight: 600; color: var(--sf-muted); }
.sf-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 420px); animation: sf-app-data-msg .5s var(--sf-spring) both; transform-origin: bottom left; }
.sf-msg--me { align-self: flex-end; align-items: flex-end; transform-origin: bottom right; }
.sf-msg__bubble { padding: 10px 16px; border-radius: 20px 20px 20px 6px; background: var(--sf-fill); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.sf-msg--me .sf-msg__bubble { background: var(--sf-ink); color: var(--sf-on-ink); border-radius: 20px 20px 6px 20px; }
.sf-msg__meta { margin: 3px 6px 8px; font-size: 12px; color: var(--sf-muted); }
.sf-typing { display: inline-flex; align-items: center; gap: 5px; padding: 15px 16px; border-radius: 20px 20px 20px 6px; background: var(--sf-fill); }
.sf-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-muted); animation: sf-app-data-typing 1.1s ease-in-out infinite; }
.sf-typing span:nth-child(2) { animation-delay: .15s; }
.sf-typing span:nth-child(3) { animation-delay: .3s; }
.sf-composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid var(--sf-line); }
.sf-composer__input { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; padding: 13px 18px; border: 2px solid transparent; border-radius: 24px; background: var(--sf-fill); font: inherit; font-size: 16px; color: var(--sf-ink); resize: none; line-height: 1.35; transition: background .2s ease, border-color .2s ease; }
.sf-composer__input:focus { outline: none; background: var(--sf-surface); border-color: var(--sf-ink); }
.sf-composer__input:focus-visible { outline: none; }
.sf-composer__input::placeholder { color: var(--sf-muted); }

/* ---------- Comment thread ---------- */
.sf-thread { display: flex; flex-direction: column; gap: 18px; color: var(--sf-ink); }
.sf-comment { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; }
.sf-comment.is-new { animation: sf-app-data-msg .55s var(--sf-spring) both; }
.sf-comment__main { min-width: 0; }
.sf-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.sf-comment__head .sf-muted { font-size: 13px; }
.sf-comment__body { margin: 4px 0 8px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-comment__btn { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--sf-pill); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--sf-muted); cursor: pointer; position: relative; transition: background .2s ease, color .2s ease, transform .3s var(--sf-spring); }
.sf-comment__btn::after { content: ""; position: absolute; inset: -4px 0; }
.sf-comment__btn:hover { background: var(--sf-fill); color: var(--sf-ink); transform: scale(1.06); }
.sf-reactions { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease, transform .3s var(--sf-spring); }
.sf-reactions::after { content: ""; position: absolute; inset: -4px 0; }
.sf-reactions:hover { transform: scale(1.07); }
.sf-reactions[aria-pressed="true"] { background: #FF5C8A; color: #111; }
.sf-reactions.is-bump .sf-dico { animation: sf-app-data-bump .5s var(--sf-spring); }
.sf-reactions__n { font-variant-numeric: tabular-nums; min-width: 1ch; }
.sf-comment__replies { grid-column: 2; display: flex; flex-direction: column; gap: 16px; margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--sf-line); }
.sf-comment__form { display: grid; gap: 10px; margin-top: 10px; animation: sf-app-data-msg .45s var(--sf-spring) both; }
.sf-comment__formrow { display: flex; gap: 8px; }

/* ---------- Notification list ---------- */
.sf-notifs { color: var(--sf-ink); }
.sf-notifs__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sf-notifs__title { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sf-notifs__count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 700; display: inline-grid; place-items: center; }
.sf-notifs__count[hidden] { display: none; }
.sf-notifs__group { margin-bottom: 14px; }
.sf-notifs__label { margin: 0 0 6px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-notifs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-notif { border-radius: var(--sf-radius); }
.sf-notif .sf-swipe__body { border-radius: var(--sf-radius); }
.sf-notif__main { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px 14px 34px; position: relative; cursor: pointer; border-radius: var(--sf-radius); transition: background .2s ease; }
.sf-notif__main:hover { background: var(--sf-fill); }
.sf-notif__main:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-notif__main::before { content: ""; position: absolute; left: 14px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: #3B82F6; transform: scale(0); transition: transform .4s var(--sf-spring); }
.sf-notif[data-unread] .sf-notif__main::before { transform: scale(1); }
.sf-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-notif__title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.sf-notif[data-unread] .sf-notif__title { font-weight: 700; }
.sf-notif__meta { font-size: 13px; color: var(--sf-muted); }
.sf-notif__time { flex: none; font-size: 13px; color: var(--sf-muted); padding-top: 2px; }

/* ---------- Profile card + hover card ---------- */
.sf-profile { width: min(100%, 340px); background: var(--sf-surface); border-radius: var(--sf-radius-lg); overflow: hidden; text-align: center; color: var(--sf-ink); }
.sf-profile__cover { position: relative; height: 96px; overflow: hidden; background: var(--sf-app-data-tone, var(--sf-fill)); }
.sf-profile__cover::before, .sf-profile__cover::after { content: ""; position: absolute; border-radius: 50%; }
.sf-profile__cover::before { width: 120px; height: 120px; right: -24px; top: -50px; background: rgba(255, 255, 255, .38); }
.sf-profile__cover::after { width: 64px; height: 64px; left: 22px; bottom: -28px; background: rgba(17, 17, 17, .12); }
.sf-profile__avatar { width: 80px; height: 80px; margin: -40px auto 0; border: 4px solid var(--sf-surface); font-size: 26px; position: relative; z-index: 1; }
.sf-profile__body { padding: 12px 24px 24px; }
.sf-profile__name { margin: 8px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sf-profile__handle { color: var(--sf-muted); font-size: 14px; }
.sf-profile__bio { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; padding: 14px 0; border-block: 1px solid var(--sf-line); }
.sf-profile__stats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.sf-profile__stats span { font-size: 12px; color: var(--sf-muted); font-weight: 500; }
.sf-profile__actions { display: flex; gap: 8px; justify-content: center; }
.sf-hovercard { position: relative; display: inline-block; }
.sf-hovercard__trigger { color: var(--sf-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sf-line); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.sf-hovercard__trigger:hover { text-decoration-color: var(--sf-ink); }
.sf-hovercard__card { position: absolute; z-index: 60; left: 0; top: calc(100% + 10px); translate: var(--sf-hc-x, 0px) 0; width: 300px; max-width: calc(100vw - 16px); padding: 18px; background: var(--sf-surface); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-app-data-dock); text-align: left; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.9); transform-origin: top left; pointer-events: none; transition: opacity .15s ease, transform .45s var(--sf-spring), visibility 0s .2s; }
.sf-hovercard::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.sf-hovercard[data-placement="top"] .sf-hovercard__card { top: auto; bottom: calc(100% + 10px); transform-origin: bottom left; transform: translateY(8px) scale(.9); }
.sf-hovercard:hover:not(.is-dismissed) .sf-hovercard__card, .sf-hovercard:focus-within:not(.is-dismissed) .sf-hovercard__card { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s, .18s, 0s; }
.sf-hovercard__top { display: flex; gap: 12px; align-items: center; }
.sf-hovercard__name { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.sf-hovercard__card p { margin: 12px 0; font-size: 14px; line-height: 1.5; color: var(--sf-muted); }
.sf-hovercard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--sf-muted); }

/* ---------- File list / tile ---------- */
.sf-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-file { --c: var(--sf-muted); position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--sf-radius); color: var(--sf-ink); transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-file:hover { background: var(--sf-fill); }
.sf-file__icon { position: relative; flex: none; width: 40px; height: 48px; display: grid; place-items: end center; padding-bottom: 7px; background: color-mix(in srgb, var(--c) 24%, var(--sf-fill)); border-radius: 7px; clip-path: polygon(0 0, 24px 0, 100% 14px, 100% 100%, 0 100%); transition: transform .4s var(--sf-spring); }
.sf-file__icon::before { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: color-mix(in srgb, var(--c) 45%, var(--sf-fill)); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.sf-file__icon::after { content: attr(data-ext); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 40%, var(--sf-ink)); }
.sf-file:hover .sf-file__icon { transform: translateY(-3px) rotate(-4deg); }
.sf-file[data-type="pdf"] { --c: var(--sf-danger); }
.sf-file[data-type="doc"] { --c: #3B82F6; }
.sf-file[data-type="xls"] { --c: #2FBF71; }
.sf-file[data-type="img"] { --c: #FF5C8A; }
.sf-file[data-type="zip"] { --c: #F5A524; }
.sf-file[data-type="code"] { --c: var(--sf-ink); }
.sf-file[data-type="video"] { --c: #5CC8FF; }
.sf-file[data-type="audio"] { --c: #7AE582; }
.sf-file__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-file__name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-file__meta { font-size: 13px; color: var(--sf-muted); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.sf-file__bar { display: none; height: 6px; border-radius: var(--sf-pill); background: var(--sf-line); overflow: hidden; margin-top: 4px; }
.sf-file__bar::before { content: ""; display: block; height: 100%; width: calc(var(--sf-value, 40) * 1%); border-radius: inherit; background: var(--sf-ink); transition: width .3s ease; }
.sf-file__state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.sf-file[data-status="uploading"] .sf-file__bar { display: block; }
.sf-file[data-status="done"] .sf-file__state { color: var(--sf-app-data-up); }
.sf-file[data-status="done"] .sf-file__state::before { content: ""; width: 8px; height: 5px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); animation: sf-app-data-pop .5s var(--sf-spring); }
.sf-file[data-status="error"] .sf-file__state { color: var(--sf-app-data-down); }
.sf-file__retry { display: none; font: inherit; font-size: 13px; font-weight: 700; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-file[data-status="error"] .sf-file__retry { display: inline-flex; align-items: center; }
.sf-file__retry:hover { transform: scale(1.07); }
.sf-file__retry:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-file--tile { flex-direction: column; align-items: flex-start; gap: 14px; width: auto; min-width: 0; padding: 18px; background: var(--sf-surface); border-radius: var(--sf-radius-lg); }
.sf-file--tile:hover { background: var(--sf-surface); transform: translateY(-6px) rotate(-.6deg); }
.sf-file--tile .sf-file__icon { width: 52px; height: 62px; clip-path: polygon(0 0, 32px 0, 100% 18px, 100% 100%, 0 100%); }
.sf-file--tile .sf-file__icon::before { width: 20px; height: 20px; }
.sf-file--tile .sf-file__main { width: 100%; }
.sf-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 14px; }

/* ---------- Code block ---------- */
.sf-code { margin: 0; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; color: var(--sf-ink); min-width: 0; }
.sf-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--sf-line); }
.sf-code__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: var(--sf-pill); background: var(--sf-fill); font-size: 13px; font-weight: 600; font-family: var(--sf-app-data-mono); }
.sf-code__copy { gap: 6px; }
.sf-code__copy.is-copied { animation: sf-app-data-pop .5s var(--sf-spring); }
.sf-code__pre { margin: 0; padding: 14px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; font-family: var(--sf-app-data-mono); font-size: 13.5px; line-height: 1.65; tab-size: 2; counter-reset: sf-app-data-line; }
.sf-code__pre code { display: block; width: max-content; min-width: 100%; font: inherit; }
.sf-code__line { display: block; position: relative; padding: 0 18px 0 58px; min-height: 1.65em; white-space: pre; counter-increment: sf-app-data-line; }
.sf-code__line::before { content: counter(sf-app-data-line); position: absolute; left: 0; width: 40px; text-align: right; color: var(--sf-muted); user-select: none; -webkit-user-select: none; font-variant-numeric: tabular-nums; }
.sf-code--plain .sf-code__line { padding-left: 18px; }
@media (max-width: 640px), (hover: none) { .sf-code__pre { scrollbar-width: none; } .sf-code__pre::-webkit-scrollbar { display: none; } }
@media (max-width: 640px) { .sf-code__line { padding: 0 14px 0 44px; } .sf-code__line::before { width: 28px; } .sf-code--plain .sf-code__line { padding-left: 14px; } }
.sf-code--plain .sf-code__line::before { display: none; }
.sf-code .sf-code__pre:focus-visible { outline-offset: -3px; border-radius: 0 0 var(--sf-radius) var(--sf-radius); }
.sf-code__line.is-hl { background: color-mix(in srgb, var(--sf-ink) 7%, transparent); box-shadow: inset 3px 0 0 var(--sf-ink); }
.sf-tok--c { color: var(--sf-muted); font-style: italic; }
.sf-tok--s { color: color-mix(in srgb, #2FBF71 55%, var(--sf-ink)); }
.sf-tok--n { color: color-mix(in srgb, #3B82F6 55%, var(--sf-ink)); }
.sf-tok--k { color: color-mix(in srgb, #FF5C8A 55%, var(--sf-ink)); font-weight: 600; }
.sf-tok--f { color: color-mix(in srgb, #F5A524 55%, var(--sf-ink)); }
.sf-tok--p { color: color-mix(in srgb, #5CC8FF 45%, var(--sf-ink)); }

/* ---------- Description list / spec table ---------- */
.sf-dl { margin: 0; color: var(--sf-ink); }
.sf-dl__row { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--sf-line); }
.sf-dl__row:last-child { border-bottom: 0; }
.sf-dl dt { font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.sf-dl dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.sf-dl--stack .sf-dl__row { grid-template-columns: 1fr; padding: 10px 0; }
.sf-dl--spec { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 6px 24px; }
.sf-dl--spec .sf-dl__row { grid-template-columns: minmax(110px, 40%) 1fr; }
.sf-dl--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sf-dl--tiles .sf-dl__row { grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; border: 0; border-radius: var(--sf-radius); background: var(--sf-surface); }
.sf-dl--tiles dd { font-size: 17px; font-weight: 700; }
@media (max-width: 480px) { .sf-dl__row, .sf-dl--spec .sf-dl__row { grid-template-columns: 1fr; } }

/* ---------- Image gallery + lightbox ---------- */
.sf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 40%), 1fr)); grid-auto-rows: 140px; grid-auto-flow: dense; gap: 12px; }
.sf-gallery__item { position: relative; display: block; padding: 0; border: 0; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-fill); cursor: zoom-in; transition: transform .4s var(--sf-spring); }
.sf-gallery__item:hover { transform: scale(1.04) rotate(-.8deg); z-index: 1; }
.sf-gallery__item:active { transform: scale(.96); }
.sf-gallery__item--wide { grid-column: span 2; }
.sf-gallery__item--tall { grid-row: span 2; }
.sf-gallery__art { --bg: color-mix(in srgb, var(--sf-app-data-tone, #888) 30%, #fff); --a: var(--sf-app-data-tone, #888); --b: color-mix(in srgb, var(--sf-app-data-tone, #888) 55%, #111); position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.sf-gallery__art::before, .sf-gallery__art::after { content: ""; position: absolute; }
.sf-gallery__art[data-shape="sun"]::before { width: 34%; aspect-ratio: 1; left: 56%; top: 14%; border-radius: 50%; background: var(--a); }
.sf-gallery__art[data-shape="sun"]::after { width: 130%; aspect-ratio: 2.4; left: -15%; bottom: -34%; border-radius: 50%; background: var(--b); }
.sf-gallery__art[data-shape="tri"]::before { width: 52%; aspect-ratio: 1; left: 24%; top: 22%; background: var(--a); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sf-gallery__art[data-shape="tri"]::after { width: 22%; aspect-ratio: 1; left: 66%; top: 58%; border-radius: 50%; background: var(--b); }
.sf-gallery__art[data-shape="ring"]::before { width: 50%; aspect-ratio: 1; left: 25%; top: 50%; translate: 0 -50%; border-radius: 50%; border: 12px solid var(--a); box-sizing: border-box; }
.sf-gallery__art[data-shape="ring"]::after { width: 14%; aspect-ratio: 1; left: 43%; top: 50%; translate: 0 -50%; border-radius: 50%; background: var(--b); }
.sf-gallery__art[data-shape="bars"]::before { left: 28%; width: 16%; height: 52%; bottom: 20%; border-radius: 8px; background: var(--a); }
.sf-gallery__art[data-shape="bars"]::after { left: 52%; width: 16%; height: 34%; bottom: 20%; border-radius: 8px; background: var(--b); }
.sf-gallery__art[data-shape="diamond"]::before { width: 40%; aspect-ratio: 1; left: 30%; top: 50%; translate: 0 -50%; rotate: 45deg; border-radius: 12%; background: var(--a); }
.sf-gallery__art[data-shape="diamond"]::after { width: 40%; aspect-ratio: 1; left: 30%; top: 50%; translate: 24% -24%; rotate: 45deg; border-radius: 12%; background: var(--b); opacity: .55; }
.sf-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.sf-lightbox::backdrop { background: rgba(8, 8, 10, .88); backdrop-filter: blur(8px); animation: sf-app-data-fade .3s ease; }
.sf-lightbox[open] { animation: sf-app-data-fade .25s ease; }
.sf-lightbox.is-closing { opacity: 0; transition: opacity .3s ease; }
.sf-lightbox__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 72px 16px 88px; }
.sf-lightbox__pic { position: relative; width: min(100%, 880px); max-height: 100%; aspect-ratio: 4 / 3; border-radius: var(--sf-radius-lg); overflow: hidden; touch-action: pan-y; will-change: transform; }
.sf-lightbox__pic .sf-gallery__art { position: absolute; inset: 0; }
.sf-lightbox__btn { position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--sf-spring), background .2s ease; }
.sf-lightbox__btn:hover { background: rgba(255, 255, 255, .28); transform: scale(1.1); }
.sf-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sf-lightbox__close { top: 16px; right: 16px; }
.sf-lightbox__prev, .sf-lightbox__next { top: 50%; margin-top: -26px; }
.sf-lightbox__prev { left: 16px; }
.sf-lightbox__next { right: 16px; }
.sf-lightbox.is-single .sf-lightbox__prev, .sf-lightbox.is-single .sf-lightbox__next { display: none; }
.sf-lightbox__cap { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; font-size: 15px; font-weight: 600; padding: 0 80px; }
@media (max-width: 640px) { .sf-lightbox__prev, .sf-lightbox__next { top: auto; bottom: 20px; margin: 0; } .sf-lightbox__cap { bottom: 86px; padding: 0 24px; } .sf-lightbox__stage { padding-bottom: 150px; } }

/* ---------- Carousel ---------- */
.sf-carousel { position: relative; min-width: 0; max-width: 100%; color: var(--sf-ink); }
.sf-carousel__track { position: relative; min-width: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--sf-radius-lg); cursor: grab; }
.sf-carousel__track::-webkit-scrollbar { display: none; }
.sf-carousel__track.is-grabbing { cursor: grabbing; }
.sf-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 220px; border-radius: var(--sf-radius-lg); overflow: hidden; background: var(--sf-surface); user-select: none; -webkit-user-select: none; }
.sf-carousel--multi .sf-carousel__slide { flex-basis: min(82%, 340px); }
.sf-carousel__arrow { position: absolute; top: calc(50% - 22px); width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--sf-line); transition: transform .3s var(--sf-spring), opacity .2s ease; z-index: 2; }
.sf-carousel__arrow:hover { transform: scale(1.12); }
.sf-carousel__arrow:active { transform: scale(.9); }
.sf-carousel__arrow:disabled { opacity: 0; pointer-events: none; }
.sf-carousel__prev { left: 12px; }
.sf-carousel__next { right: 12px; }
.sf-carousel__dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.sf-carousel__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .45s var(--sf-spring); }
.sf-carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: var(--sf-pill); background: var(--sf-line); transition: width .45s var(--sf-spring), margin .45s var(--sf-spring), background .2s ease; }
.sf-carousel__dot[aria-current="true"] { width: 40px; }
.sf-carousel__dot[aria-current="true"]::before { width: 28px; margin-left: -14px; background: var(--sf-ink); }
.sf-carousel__play { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--sf-line); transition: transform .3s var(--sf-spring); }
.sf-carousel__play:hover { transform: scale(1.1); }
.sf-carousel__slide-art { display: grid; place-content: center; text-align: center; min-height: 220px; padding: 28px 56px; gap: 6px; background: color-mix(in srgb, var(--sf-app-data-tone, var(--sf-fill)) 42%, var(--sf-surface)); }
.sf-carousel__slide-art h4 { margin: 0; font-size: clamp(20px, 3.4vw, 28px); letter-spacing: -.02em; }
.sf-carousel__slide-art p { margin: 0; color: var(--sf-muted); }

/* ---------- Stars + rating summary ---------- */
.sf-stars { --sf-rate: 4; display: inline-block; width: 6em; height: 1.2em; font-size: 20px; background: linear-gradient(90deg, #F5A524 calc(var(--sf-rate) / 5 * 100%), var(--sf-line) 0); -webkit-mask: var(--sf-star) 0 0 / 1.2em 1.2em repeat-x; mask: var(--sf-star) 0 0 / 1.2em 1.2em repeat-x; vertical-align: middle; --sf-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.9-4.7 4.5 1.2 6.4L12 17.4l-5.7 3.1 1.2-6.4-4.7-4.5 6.4-.9z' fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sf-stars--sm { font-size: 14px; }
.sf-reviewsum { display: grid; grid-template-columns: auto 1fr; gap: 20px 36px; align-items: center; color: var(--sf-ink); }
.sf-reviewsum__sum { display: grid; justify-items: start; gap: 6px; }
.sf-reviewsum__avg { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.sf-reviewsum__total { font-size: 14px; color: var(--sf-muted); }
.sf-reviewsum__bars { display: grid; gap: 2px; min-width: 0; }
.sf-reviewsum__row { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: 12px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; color: var(--sf-ink); cursor: pointer; text-align: left; transition: background .2s ease; }
.sf-reviewsum__row:hover, .sf-reviewsum__row[aria-pressed="true"] { background: var(--sf-fill); }
.sf-reviewsum__label { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.sf-reviewsum__label .sf-dico { font-size: 12px; color: #F5A524; }
.sf-reviewsum__track { height: 10px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-reviewsum__row:hover .sf-reviewsum__track, .sf-reviewsum__row[aria-pressed="true"] .sf-reviewsum__track { background: var(--sf-surface); }
.sf-reviewsum__track span { display: block; height: 100%; width: calc(var(--sf-value, 0) * 1%); border-radius: inherit; background: var(--sf-ink); transition: width 1s var(--sf-spring); }
[data-sf-armed]:not(.is-in) .sf-reviewsum__track span { width: 0; }
.sf-reviewsum__count { text-align: right; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .sf-reviewsum { grid-template-columns: 1fr; } }

/* ---------- Leaderboard ---------- */
.sf-leader { color: var(--sf-ink); }
.sf-leader__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-leader__item { position: relative; display: grid; grid-template-columns: 36px 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; background: var(--sf-surface); border-radius: var(--sf-radius); will-change: transform; }
.sf-leader__rank { width: 36px; height: 36px; border-radius: 50%; background: var(--sf-fill); display: grid; place-items: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.sf-leader__item[data-rank="1"] .sf-leader__rank { background: #FFC857; color: #111; }
.sf-leader__item[data-rank="2"] .sf-leader__rank { background: #5CC8FF; color: #111; }
.sf-leader__item[data-rank="3"] .sf-leader__rank { background: #FF5C8A; color: #111; }
.sf-leader__who { min-width: 0; display: grid; gap: 6px; }
.sf-leader__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-leader__bar { height: 6px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-leader__bar span { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--sf-ink); transition: width .9s var(--sf-spring); }
[data-sf-armed]:not(.is-in) .sf-leader__bar span { width: 0; }
.sf-leader__score { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.sf-leader__tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* ---------- Dashboard layout + metric tiles ---------- */
.sf-dash { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.sf-dash > * { min-width: 0; }
.sf-tile { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: var(--sf-surface); border-radius: var(--sf-radius-lg); color: var(--sf-ink); transition: transform .4s var(--sf-spring); }
.sf-tile:hover { transform: translateY(-4px); }
.sf-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-tile__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sf-tile__sub { margin: 2px 0 0; font-size: 13px; color: var(--sf-muted); }
.sf-tile__body { flex: 1; min-width: 0; }
.sf-tile .sf-stat, .sf-tile .sf-list--card { background: none; padding: 0; border-radius: 0; }
@media (min-width: 640px) { .sf-dash { grid-template-columns: repeat(2, 1fr); } .sf-dash > .sf-tile--w2, .sf-dash > .sf-tile--w3, .sf-dash > .sf-tile--w4 { grid-column: span 2; } }
@media (min-width: 1000px) { .sf-dash { grid-template-columns: repeat(4, 1fr); } .sf-dash > .sf-tile--w3 { grid-column: span 3; } .sf-dash > .sf-tile--w4 { grid-column: span 4; } .sf-dash > .sf-tile--h2 { grid-row: span 2; } }

/* ---------- Keyframes ---------- */
@keyframes sf-app-data-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes sf-app-data-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-app-data-fade-area { from { opacity: 0; } }
@keyframes sf-app-data-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sf-app-data-dot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sf-app-data-grow { 0% { transform: scaleY(0); } 100% { transform: none; } }
@keyframes sf-app-data-grow-x { 0% { transform: scaleX(0); } 100% { transform: none; } }
@keyframes sf-app-data-seg { 0% { opacity: 0; transform: rotate(-70deg) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-data-nudge-up { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px); } 90% { transform: translateY(1px); } }
@keyframes sf-app-data-nudge-down { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(3px); } 90% { transform: translateY(-1px); } }
@keyframes sf-app-data-in-r { 0% { opacity: 0; transform: translateX(36px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-data-in-l { 0% { opacity: 0; transform: translateX(-36px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-data-out-l { to { opacity: 0; transform: translateX(-36px); } }
@keyframes sf-app-data-out-r { to { opacity: 0; transform: translateX(36px); } }
@keyframes sf-app-data-land { 0% { transform: scale(1.06, .9); } 55% { transform: scale(.97, 1.04); } 100% { transform: none; } }
@keyframes sf-app-data-msg { 0% { opacity: 0; transform: translateY(14px) scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-data-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes sf-app-data-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes sf-app-data-chip-in { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes sf-app-data-chip-out { 100% { opacity: 0; transform: scale(.5); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-chart *, .sf-spark *, .sf-stat__delta, .sf-cal *, .sf-datepicker *, .sf-kanban *, .sf-msg, .sf-typing span, .sf-comment, .sf-comment__form,
  .sf-chip, .sf-chips .sf-chip, .sf-reactions, .sf-file, .sf-file *, .sf-gridbar__menu, .sf-lightbox, .sf-lightbox *, .sf-gallery__item, .sf-carousel *,
  .sf-code__copy, .sf-hovercard__card, .sf-swipe__body, .sf-swipe__actions, .sf-leader__item, .sf-leader__bar span, .sf-tile, .sf-timeline__icon, .sf-avgroup > *,
  .sf-dmeter__fill, .sf-stack__seg, .sf-goal__fill, .sf-reviewsum__track span, .sf-heat__cell, .sf-table *, .sf-datatip, .sf-list__item, .sf-list__action {
    animation: none !important; transition: none !important;
  }
  .sf-heat__grid .sf-heat__cell { opacity: 1 !important; transform: none !important; }
  .sf-kanban__card:hover, .sf-tile:hover, .sf-gallery__item:hover, .sf-file--tile:hover { transform: none; }
}


/* ===== Heroes and sections (marketing-heroes) ===== */
/* Soft UI module: marketing-heroes
   Marketing page structure, heroes and showcase sections.
   Requires soft.css (tokens). Behaviour: marketing-heroes.js (optional but recommended). */

/* ---------- Module tokens ---------- */
:root {
  --sf-marketing-heroes-max: 1180px;
  --sf-marketing-heroes-gut: clamp(16px, 4vw, 32px);
  --sf-marketing-heroes-gap: clamp(14px, 2.2vw, 24px);
  --sf-marketing-heroes-pad: clamp(64px, 9vw, 120px);
  --sf-marketing-heroes-nav: 76px;
}

/* ---------- Utilities ---------- */
.sf-mh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-viewport { --_h: 440px; --sf-marketing-heroes-menu-max: calc(var(--_h) - var(--sf-marketing-heroes-nav) - 24px); position: relative; height: var(--_h); overflow: auto; border-radius: var(--sf-radius-lg); background: var(--sf-bg); color: var(--sf-ink); box-shadow: inset 0 0 0 1.5px var(--sf-line); scroll-behavior: smooth; overscroll-behavior: contain;
  /* the preview is the scroll affordance: no bar, a soft fade at the bottom until the end is reached */
  scrollbar-width: none; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.sf-viewport::-webkit-scrollbar { display: none; }
.sf-viewport.is-end { -webkit-mask-image: none; mask-image: none; }
.sf-viewport:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; -webkit-mask-image: none; mask-image: none; }
/* Static frame: same look, no scrolling, grows with its content (menus can open past the edge) */
.sf-viewport--static { height: auto; min-height: var(--_h); overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* ================= 20. Section scaffolding ================= */
.sf-container { width: 100%; max-width: var(--sf-marketing-heroes-max); margin-inline: auto; padding-inline: var(--sf-marketing-heroes-gut); }
.sf-container--narrow { max-width: 780px; }
.sf-container--wide { max-width: 1440px; }
.sf-section { position: relative; padding-block: var(--sf-marketing-heroes-pad); scroll-margin-top: calc(var(--sf-marketing-heroes-nav) + 12px); }
.sf-section--tight { padding-block: calc(var(--sf-marketing-heroes-pad) * .5); }
.sf-section--surface { background: var(--sf-surface); }
.sf-section--ink { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-section--ink .sf-section__lede, .sf-section--ink .sf-eyebrow { color: color-mix(in srgb, var(--sf-on-ink) 72%, transparent); }
.sf-section--ink .sf-eyebrow::before { background: var(--sf-on-ink); }
.sf-section--surface .sf-card, .sf-section--surface .sf-feature, .sf-section--surface .sf-bento__tile:not(.sf-bento__tile--ink), .sf-section--surface .sf-roadmap__card { background: var(--sf-bg); }
.sf-anchor { scroll-margin-top: calc(var(--sf-marketing-heroes-nav) + 12px); }

.sf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-muted); }
.sf-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sf-ink); animation: sf-marketing-heroes-dot 2.4s ease-in-out infinite; }
.sf-eyebrow--pill { min-height: 34px; padding: 0 16px 0 14px; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); letter-spacing: .06em; }

.sf-section__head { max-width: 700px; margin: 0 auto clamp(36px, 6vw, 68px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sf-section__head--left { margin-left: 0; align-items: flex-start; text-align: left; }
.sf-section__title { margin: 0; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.03; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
.sf-section__lede { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--sf-muted); text-wrap: pretty; }

.sf-grid-2, .sf-grid-3, .sf-grid-4 { display: grid; gap: var(--sf-marketing-heroes-gap); grid-template-columns: minmax(0, 1fr); }
.sf-grid-2 > *, .sf-grid-3 > *, .sf-grid-4 > * { min-width: 0; }
@media (min-width: 640px) { .sf-grid-2, .sf-grid-3, .sf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sf-prose { max-width: 68ch; font-size: 18px; line-height: 1.7; color: var(--sf-ink); }
.sf-prose > :first-child { margin-top: 0; }
.sf-prose > :last-child { margin-bottom: 0; }
.sf-prose h1, .sf-prose h2, .sf-prose h3, .sf-prose h4 { line-height: 1.12; letter-spacing: -.03em; margin: 2em 0 .5em; text-wrap: balance; }
.sf-prose h1 { font-size: clamp(36px, 5vw, 52px); margin-top: 0; }
.sf-prose h2 { font-size: clamp(28px, 3.6vw, 36px); }
.sf-prose h3 { font-size: 24px; }
.sf-prose h4 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-muted); }
.sf-prose p, .sf-prose ul, .sf-prose ol, .sf-prose blockquote, .sf-prose pre, .sf-prose figure, .sf-prose table { margin: 0 0 1.2em; }
.sf-prose > p:first-of-type.sf-prose__lead, .sf-prose .sf-prose__lead { font-size: 22px; line-height: 1.5; color: var(--sf-muted); }
.sf-prose a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--sf-line); transition: text-decoration-color .2s ease; }
.sf-prose a:hover { text-decoration-color: var(--sf-ink); }
.sf-prose ul, .sf-prose ol { padding-left: 1.4em; }
.sf-prose li { margin-bottom: .4em; padding-left: .2em; }
.sf-prose li::marker { color: var(--sf-muted); font-weight: 700; }
.sf-prose blockquote { margin-inline: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--sf-ink); font-size: 22px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.sf-prose blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--sf-muted); }
.sf-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; padding: .15em .45em; border-radius: 8px; background: var(--sf-fill); }
.sf-prose pre { padding: 20px 24px; border-radius: var(--sf-radius); background: var(--sf-ink); color: var(--sf-on-ink); overflow: auto; font-size: 15px; line-height: 1.6; }
.sf-prose pre code { padding: 0; background: none; font-size: inherit; }
.sf-prose hr { border: 0; height: 2px; margin: 2.4em 0; background: var(--sf-line); }
.sf-prose img, .sf-prose figure { max-width: 100%; border-radius: var(--sf-radius); }
.sf-prose figcaption { margin-top: 8px; font-size: 14px; color: var(--sf-muted); }
.sf-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.sf-prose th, .sf-prose td { padding: 10px 12px; text-align: left; border-bottom: 1.5px solid var(--sf-line); }
.sf-prose th { font-weight: 700; }

/* Scroll reveal hook (data-sf-hreveal="up|left|right|scale", data-sf-hreveal-delay="120") */
[data-sf-hreveal] { transition: opacity .6s var(--sf-ease), transform .9s var(--sf-spring); transition-delay: var(--_d, 0ms); }
[data-sf-hreveal].is-pending { opacity: 0; transform: translateY(40px); }
[data-sf-hreveal="left"].is-pending { transform: translateX(-56px); }
[data-sf-hreveal="right"].is-pending { transform: translateX(56px); }
[data-sf-hreveal="scale"].is-pending { transform: scale(.88); }
@media (max-width: 899px) { [data-sf-hreveal="left"].is-pending, [data-sf-hreveal="right"].is-pending { transform: translateY(40px); } }

/* ================= 1. Marketing navbar ================= */
.sf-mnav { --_bar: 56px; position: sticky; top: 0; z-index: 100; height: var(--sf-marketing-heroes-nav); display: flex; align-items: center; color: var(--sf-ink); font-family: var(--sf-font); }
.sf-mnav--overlay { margin-bottom: calc(var(--sf-marketing-heroes-nav) * -1); }
.sf-mnav > .sf-container { flex: 1; }
.sf-mnav.is-scrolled { --_bar: 48px; }
.sf-mnav__bar { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; min-height: var(--_bar); padding: 0 6px 0 20px; transition: min-height .5s var(--sf-spring); }
.sf-mnav__bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--sf-surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1.5px var(--sf-line); opacity: 0; transform: scale(.97, .7); transition: opacity .3s ease, transform .55s var(--sf-spring); }
.sf-mnav.is-scrolled .sf-mnav__bar::before, .sf-mnav[data-open] .sf-mnav__bar::before { opacity: 1; transform: none; }

.sf-mbrand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.035em; color: inherit; text-decoration: none; min-height: 44px; }
.sf-mbrand__mark { position: relative; width: 28px; height: 28px; border-radius: 10px; background: var(--sf-ink); transition: transform .5s var(--sf-spring), border-radius .5s var(--sf-ease); flex: none; }
.sf-mbrand__mark::after { content: ""; position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--sf-on-ink); }
.sf-mbrand:hover .sf-mbrand__mark { transform: rotate(-12deg) scale(1.1); border-radius: 50%; }

.sf-mnav__panel { display: flex; align-items: center; flex: 1; gap: 16px; }
.sf-mnav__links { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.sf-mnav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--sf-pill); background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s ease, transform .35s var(--sf-spring); }
.sf-mnav__link:hover { background: var(--sf-fill); transform: translateY(-2px); }
.sf-mnav__link[aria-current="page"], .sf-mnav__link[aria-expanded="true"] { background: var(--sf-fill); }
.sf-mnav__actions { display: flex; align-items: center; gap: 8px; }
.sf-mnav__toggle { display: none; position: relative; width: 48px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: inherit; cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-mnav__toggle:active { transform: scale(1.1, .86); }
.sf-mnav__toggle span { position: absolute; left: 15px; right: 15px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--sf-spring), opacity .2s ease; }
.sf-mnav__toggle span:nth-child(1) { top: 15px; } .sf-mnav__toggle span:nth-child(2) { top: 21px; } .sf-mnav__toggle span:nth-child(3) { top: 27px; }
.sf-mnav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sf-mnav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.sf-mnav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 879px) {
  .sf-mnav__toggle { display: block; }
  .sf-mnav__panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px; max-height: var(--sf-marketing-heroes-menu-max, calc(100dvh - var(--sf-marketing-heroes-nav) - 24px)); overflow: auto; overscroll-behavior: contain; padding: 12px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); box-shadow: 0 0 0 1.5px var(--sf-line), 0 24px 60px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top center; transition: opacity .2s ease, transform .5s var(--sf-spring), visibility 0s .2s; }
  .sf-mnav[data-open] .sf-mnav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sf-mnav__links { flex-direction: column; align-items: stretch; margin: 0; gap: 2px; }
  .sf-mnav__link { width: 100%; min-height: 52px; justify-content: space-between; font-size: 17px; }
  .sf-mnav__actions { flex-direction: column; align-items: stretch; padding-top: 8px; border-top: 1.5px solid var(--sf-line); }
  .sf-mnav__actions .sf-btn { width: 100%; }
}

/* ================= 2. Mega menu ================= */
.sf-mega { position: relative; display: block; }
.sf-mega__chev { width: 14px; height: 14px; transition: transform .45s var(--sf-spring); }
.sf-mega__trigger[aria-expanded="true"] .sf-mega__chev { transform: rotate(180deg); }
.sf-mega__panel { position: absolute; top: calc(100% + 12px); left: 0; margin-left: var(--_shift, 0px); z-index: 20; width: min(780px, calc(100vw - 2 * var(--sf-marketing-heroes-gut))); display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px 20px; padding: 20px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); text-align: left; box-shadow: 0 0 0 1.5px var(--sf-line), 0 28px 70px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top left; transition: opacity .2s ease, transform .5s var(--sf-spring), visibility 0s .2s; }
.sf-mega__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.sf-mega__trigger[aria-expanded="true"] + .sf-mega__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sf-mnav .sf-mega { position: static; }
.sf-mnav .sf-mega__panel { left: 0; right: 0; width: auto; top: calc(100% + 10px); }
.sf-mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-mega__heading { margin: 4px 0 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mega__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; min-height: 48px; border-radius: var(--sf-radius); color: inherit; text-decoration: none; transition: background .2s ease, transform .4s var(--sf-spring); }
.sf-mega__item:hover { background: var(--sf-fill); transform: translateX(4px); }
.sf-mega__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--sf-fill); transition: background .2s ease, color .2s ease, transform .5s var(--sf-spring); }
.sf-mega__item:hover .sf-mega__icon { background: var(--sf-ink); color: var(--sf-on-ink); transform: rotate(-8deg) scale(1.08); }
.sf-mega__icon svg { width: 20px; height: 20px; }
.sf-mega__name { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sf-mega__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--sf-muted); }
.sf-mega__featured { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 200px; padding: 20px; position: relative; overflow: hidden; border-radius: var(--sf-radius); background: var(--sf-ink); color: var(--sf-on-ink); text-decoration: none; transition: transform .45s var(--sf-spring); }
.sf-mega__featured:hover { transform: scale(1.025) rotate(-.6deg); }
.sf-mega__featured::before { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; background: color-mix(in srgb, var(--sf-on-ink) 16%, transparent); animation: sf-morph 7s ease-in-out infinite; }
.sf-mega__featured-title { position: relative; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sf-mega__featured-text { position: relative; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--sf-on-ink) 72%, transparent); }
@media (max-width: 879px) {
  .sf-mega__panel, .sf-mnav .sf-mega__panel { position: static; display: none; width: auto; margin: 4px 0 8px; padding: 6px; grid-template-columns: 1fr; box-shadow: none; background: var(--sf-bg); opacity: 1; visibility: visible; transform: none; }
  .sf-mega__panel::before { display: none; }
  .sf-mega__trigger[aria-expanded="true"] + .sf-mega__panel { display: grid; animation: sf-fade .25s ease; }
  .sf-mega__featured { min-height: 120px; }
}

/* ================= 3. Announcement bar ================= */
.sf-announce { position: relative; max-height: 140px; overflow: hidden; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 14px; font-weight: 600; transition: max-height .5s var(--sf-ease), opacity .35s ease; }
.sf-announce[hidden] { display: none; }
.sf-announce.is-closing { max-height: 0; opacity: 0; }
.sf-announce__inner { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 4px 56px 4px 12px; }
.sf-announce__track { display: grid; flex: 1; justify-items: center; text-align: center; max-width: 720px; }
.sf-announce__msg { grid-area: 1 / 1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; line-height: 1.35; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s ease, transform .5s var(--sf-spring), visibility 0s .3s; }
.sf-announce__msg.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sf-announce__msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; padding: 8px 0; }
.sf-announce__btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .2s ease, transform .35s var(--sf-spring); }
.sf-announce__btn:hover { background: color-mix(in srgb, var(--sf-on-ink) 16%, transparent); transform: scale(1.1); }
.sf-announce__btn svg { width: 18px; height: 18px; }
.sf-announce__close { position: absolute; right: 6px; top: 50%; margin-top: -22px; }
.sf-announce__btn:focus-visible { outline: 3px solid var(--sf-on-ink); outline-offset: -3px; }
@media (max-width: 560px) { .sf-announce__nav { display: none; } .sf-announce__inner { padding-left: 18px; } .sf-announce__track { justify-items: start; text-align: left; } .sf-announce__msg { justify-content: flex-start; } }

/* ================= 4. Hero variants ================= */
.sf-mhero { --_top: 0px; --_bg: var(--sf-bg); position: relative; overflow: hidden; background: var(--_bg); padding-block: calc(var(--_top) + clamp(48px, 8vw, 104px)) clamp(56px, 9vw, 112px); color: var(--sf-ink); }
.sf-mhero--under-nav { --_top: var(--sf-marketing-heroes-nav); }
.sf-mhero__inner { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.sf-mhero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.sf-mhero__title { margin: 0; font-size: clamp(40px, 7vw, 84px); line-height: 1; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.sf-mhero__lede { margin: 0; max-width: 56ch; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--sf-muted); text-wrap: pretty; }
.sf-mhero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-mhero__note { margin: 0; font-size: 13px; color: var(--sf-muted); }
@media (max-width: 520px) { .sf-mhero__actions { align-self: stretch; flex-direction: column; } .sf-mhero__actions .sf-btn { width: 100%; } }

/* centred, product, video, capture share a centred copy block */
.sf-mhero--centered .sf-mhero__copy, .sf-mhero--product .sf-mhero__copy, .sf-mhero--video .sf-mhero__copy, .sf-mhero--capture .sf-mhero__copy { align-items: center; text-align: center; max-width: 840px; margin-inline: auto; }
.sf-mhero--centered .sf-mhero__actions, .sf-mhero--product .sf-mhero__actions, .sf-mhero--video .sf-mhero__actions { justify-content: center; }

/* split */
@media (min-width: 900px) { .sf-mhero--split .sf-mhero__inner { grid-template-columns: 1.05fr .95fr; } }
.sf-mhero__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 520px; margin-inline: auto; overflow: hidden; border-radius: 48px; background: var(--sf-fill); }
.sf-mhero__orb { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; margin: -29% 0 0 -29%; background: var(--sf-ink); animation: sf-morph 8s ease-in-out infinite; }
.sf-mhero__float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 22px; background: var(--sf-surface); font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); animation: sf-bob 3.2s ease-in-out infinite; animation-delay: var(--_d, 0s); }
.sf-mhero__float b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 15px; }
.sf-mhero__float small { display: block; font-size: 12px; font-weight: 500; color: var(--sf-muted); }

/* big type */
.sf-mhero--bigtype { container-type: inline-size; }
/* sized from the hero's own width (cqi), so it fits any column, not just a full-width page */
.sf-mhero--bigtype .sf-mhero__title { font-size: clamp(44px, 15vw, 240px); font-size: clamp(44px, 16cqi, 240px); line-height: .9; letter-spacing: -.06em; text-wrap: balance; padding-bottom: .06em; }
.sf-mhero--bigtype .sf-mhero__title span { display: inline-block; }
.sf-mhero__foot { display: grid; gap: 24px; align-items: end; margin-top: clamp(28px, 5vw, 60px); padding-top: 26px; border-top: 3px solid var(--sf-ink); }
@media (min-width: 860px) { .sf-mhero__foot { grid-template-columns: 1fr auto; } }

/* blob (extends core .sf-hero + .sf-blob) */
.sf-mhero--blob { display: flex; align-items: center; min-height: min(86vh, 760px); }
.sf-mhero--blob { container-type: inline-size; }
.sf-mhero--blob > .sf-container { position: relative; z-index: auto; } /* no stacking context, so the title's difference blend sees the blob */
.sf-mhero--blob .sf-blob { --sf-bx: 30cqi; --sf-by: calc(var(--sf-blob-size) / 2 + 32px); } /* resting spot fully inside the hero */
.sf-mhero--blob .sf-mhero__copy { align-items: center; text-align: center; margin-inline: auto; max-width: 1000px; }
.sf-mhero--blob .sf-hero__title { font-size: clamp(44px, 10vw, 128px); font-size: clamp(44px, 12cqi, 128px); text-wrap: balance; }
.sf-mhero--blob .sf-mhero__lede { color: #fff; mix-blend-mode: difference; }
.sf-mhero--blob .sf-mhero__actions { justify-content: center; }
.sf-mhero--blob .sf-mhero__actions .sf-btn { box-shadow: 0 0 0 3px var(--sf-bg); } /* keeps the button's edge when the blob sits behind it */

/* product frame */
.sf-mhero--product { padding-bottom: 0; }
/* the device bleeds off the bottom; a fade in the hero's own colour softens the cut (no mask, so tilt and the phone are never clipped) */
.sf-mhero--product::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(90px, 18%, 220px); background: linear-gradient(transparent, var(--_bg)); pointer-events: none; }
.sf-mhero__device { position: relative; max-width: 1020px; margin: clamp(40px, 6vw, 72px) auto calc(-1 * clamp(40px, 9vw, 150px)); padding-inline: 2%; }
.sf-mhero__phone { position: absolute; right: 0; bottom: 18%; width: min(24%, 210px); }
@media (max-width: 700px) { .sf-mhero__phone { display: none; } }

/* video frame */
.sf-mhero__video { position: relative; max-width: 960px; margin: clamp(36px, 5vw, 60px) auto 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-mhero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-mhero__scene { position: absolute; inset: 0; }
.sf-mhero__scene i { position: absolute; background: color-mix(in srgb, var(--sf-on-ink) 14%, transparent); animation: sf-morph 9s ease-in-out infinite; }
.sf-mhero__scene i:nth-child(1) { width: 46%; aspect-ratio: 1; left: -8%; top: -24%; }
.sf-mhero__scene i:nth-child(2) { width: 34%; aspect-ratio: 1; right: 6%; bottom: -22%; animation-delay: -3s; background: color-mix(in srgb, var(--sf-on-ink) 22%, transparent); }
.sf-mhero__scene i:nth-child(3) { width: 12%; aspect-ratio: 1; right: 22%; top: 16%; animation-delay: -5s; }
.sf-mhero__play { position: absolute; left: 50%; top: 50%; width: clamp(68px, 11vw, 96px); aspect-ratio: 1; margin: calc(clamp(68px, 11vw, 96px) / -2) 0 0 calc(clamp(68px, 11vw, 96px) / -2); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--sf-on-ink); color: var(--sf-ink); cursor: pointer; transition: transform .35s var(--sf-spring), opacity .25s ease; }
.sf-mhero__play:hover { transform: scale(1.12); }
.sf-mhero__play:active { transform: scale(1.2, .88); }
.sf-mhero__play svg { width: 36%; height: 36%; margin-left: 6%; }
.sf-mhero__play:focus-visible { outline: 3px solid var(--sf-on-ink); outline-offset: 4px; }
.sf-mhero__video.is-playing .sf-mhero__play { opacity: 0; transform: scale(.4); }
.sf-mhero__video.is-playing .sf-mhero__play:focus-visible { opacity: 1; }
.sf-mhero__bar { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--sf-spring); }
.sf-mhero__video.is-playing .sf-mhero__bar { opacity: 1; transform: none; }
.sf-mhero__bar i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sf-on-ink) 24%, transparent); overflow: hidden; }
.sf-mhero__bar i::after { content: ""; display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--sf-on-ink); transform-origin: left; animation: sf-marketing-heroes-progress 14s linear infinite; }

/* email capture */
.sf-mhero--capture .sf-signup { margin-top: 6px; }

/* ================= 5. Device frames ================= */
.sf-device { position: relative; transition: transform .8s var(--sf-spring); }
.sf-device--browser { border-radius: var(--sf-radius-lg); background: var(--sf-surface); overflow: hidden; box-shadow: 0 0 0 1.5px var(--sf-line), 0 30px 80px rgba(0, 0, 0, .1); }
.sf-device__bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--sf-fill); }
.sf-device__dots { display: flex; gap: 6px; }
.sf-device__dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--sf-line); }
.sf-device__url { flex: 1; max-width: 360px; height: 28px; margin-inline: auto; padding: 0 14px; display: flex; align-items: center; justify-content: center; border-radius: var(--sf-pill); background: var(--sf-surface); color: var(--sf-muted); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-device__screen { position: relative; overflow: hidden; background: var(--sf-surface); }
.sf-device--browser .sf-device__screen { aspect-ratio: var(--sf-ratio, 16 / 10); }
.sf-device--phone { width: min(100%, 270px); aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 42px; background: var(--sf-ink); }
.sf-device--phone .sf-device__screen { height: 100%; border-radius: 33px; }
.sf-device__notch { position: absolute; z-index: 2; top: 17px; left: 50%; width: 32%; height: 20px; margin-left: -16%; border-radius: var(--sf-pill); background: var(--sf-ink); }
.sf-device--tilt { transform: perspective(1500px) rotateX(7deg) rotateY(-9deg) rotate(1.2deg); }
.sf-device--tilt:hover { transform: perspective(1500px) rotateX(0) rotateY(0) rotate(0) translateY(-6px); }

/* Mock UI primitives (fill a device screen with content) */
.sf-mock { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 18px; }
.sf-mock--phone { padding: 44px 16px 16px; gap: 10px; }
.sf-mock__row { display: flex; align-items: center; gap: 10px; }
.sf-mock__grow { flex: 1; min-width: 0; }
.sf-mock__side { width: 22%; flex: none; display: flex; flex-direction: column; gap: 10px; }
.sf-mock__bar { display: block; height: 10px; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-mock__bar--ink { background: var(--sf-ink); }
.sf-mock__bar--line { background: var(--sf-line); }
.sf-mock__block { border-radius: 14px; background: var(--sf-fill); }
.sf-mock__dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--sf-ink); }
.sf-mock__stat { flex: 1; min-width: 0; padding: 12px; border-radius: 14px; background: var(--sf-fill); display: flex; flex-direction: column; gap: 8px; }
.sf-mock__stat strong { font-size: 18px; letter-spacing: -.03em; line-height: 1; }
.sf-mock__chart { flex: 1; min-height: 60px; display: flex; align-items: flex-end; gap: 6%; padding: 12px 12px 0; border-radius: 14px; background: var(--sf-fill); }
.sf-mock__chart i { flex: 1; height: var(--h, 50%); border-radius: 8px 8px 0 0; background: var(--sf-ink); transform-origin: bottom; animation: sf-marketing-heroes-grow 2.6s var(--sf-ease) infinite alternate; animation-delay: calc(var(--i, 0) * .15s); }
.sf-mock__chart i:nth-child(2n) { background: var(--sf-muted); }

/* ================= 6. Logo cloud + marquee ================= */
.sf-logos { display: grid; gap: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
@media (min-width: 600px) { .sf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sf-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sf-logos__item { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; padding: 0 10px; color: var(--sf-muted); font-size: 21px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; transition: color .2s ease, transform .4s var(--sf-spring); }
.sf-logos__item:hover { color: var(--sf-ink); transform: translateY(-3px) scale(1.06); }
.sf-logos__item--caps { font-size: 16px; letter-spacing: .16em; text-transform: uppercase; }
.sf-logos__item--light { font-weight: 400; letter-spacing: -.05em; }
.sf-logos__item--italic { font-style: italic; font-weight: 600; }
.sf-logos__mark { width: 22px; height: 22px; flex: none; background: currentColor; }
.sf-logos__mark--circle { border-radius: 50%; }
.sf-logos__mark--square { border-radius: 6px; }
.sf-logos__mark--tri { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.sf-logos__mark--half { border-radius: 22px 22px 0 0; height: 14px; }
.sf-logos__mark--ring { border-radius: 50%; background: none; box-shadow: inset 0 0 0 4px currentColor; }
.sf-logos__mark--diamond { transform: rotate(45deg) scale(.75); border-radius: 4px; }

.sf-marquee { --_gap: 48px; position: relative; overflow: hidden; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sf-marquee__track { display: flex; width: max-content; }
.sf-marquee__group { display: flex; flex: none; align-items: center; gap: var(--_gap); padding-right: var(--_gap); }
.sf-marquee[data-sf-ready] .sf-marquee__track { animation: sf-marketing-heroes-marquee var(--sf-marketing-heroes-dur, 30s) linear infinite; }
.sf-marquee[data-sf-direction="right"][data-sf-ready] .sf-marquee__track { animation-direction: reverse; }
.sf-marquee:hover .sf-marquee__track, .sf-marquee:focus-within .sf-marquee__track, .sf-marquee.is-paused .sf-marquee__track { animation-play-state: paused; }
.sf-marquee__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-marquee__toggle:hover { transform: scale(1.05); }
.sf-marquee__toggle[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }

/* ================= 7. Feature grid ================= */
.sf-features { display: grid; gap: var(--sf-marketing-heroes-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sf-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sf-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: inherit; text-decoration: none; transition: transform .5s var(--sf-spring); }
.sf-feature:hover { transform: translateY(-8px) rotate(-.8deg); }
.sf-feature__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 19px; background: var(--sf-fill); transition: background .25s ease, color .25s ease, transform .55s var(--sf-spring); }
.sf-feature__icon svg { width: 26px; height: 26px; }
.sf-feature:hover .sf-feature__icon { background: var(--sf-ink); color: var(--sf-on-ink); transform: scale(1.12) rotate(-9deg); }
.sf-feature__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.sf-feature__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sf-muted); }
.sf-feature__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.sf-feature__more svg { width: 16px; height: 16px; transition: transform .4s var(--sf-spring); }
.sf-feature:hover .sf-feature__more svg { transform: translateX(5px); }

/* ================= 8. Feature alternating rows ================= */
.sf-zig { display: grid; gap: clamp(56px, 9vw, 120px); overflow-x: clip; }
.sf-zig__row { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .sf-zig__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 96px); }
  .sf-zig__row:nth-child(even) .sf-zig__visual { order: -1; }
}
.sf-zig__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sf-zig__title { margin: 0; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.sf-zig__body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--sf-muted); }
.sf-zig__list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-weight: 600; }
.sf-zig__list li { display: flex; align-items: center; gap: 12px; }
.sf-zig__list li::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--sf-ink); -webkit-mask: var(--_chk) center / contain no-repeat; mask: var(--_chk) center / contain no-repeat; --_chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sf-zig__visual { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; overflow: hidden; padding: 8%; border-radius: var(--sf-radius-lg); background: var(--sf-fill); }
.sf-zig__visual .sf-device { width: 100%; }

/* ================= 9. Bento grid ================= */
.sf-bento { display: grid; gap: var(--sf-marketing-heroes-gap); grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-auto-flow: dense; }
@media (min-width: 620px) { .sf-bento { grid-auto-rows: minmax(210px, auto); }
  .sf-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-bento__tile--wide, .sf-bento__tile--big { grid-column: span 2; } .sf-bento__tile--tall, .sf-bento__tile--big { grid-row: span 2; } }
@media (min-width: 980px) { .sf-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); } }
.sf-bento__tile { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; padding: 26px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .55s var(--sf-spring); }
.sf-bento__tile:hover { transform: translateY(-6px) scale(1.012) rotate(-.3deg); }
.sf-bento__tile--ink { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-bento__tile--ink .sf-bento__text { color: color-mix(in srgb, var(--sf-on-ink) 70%, transparent); }
.sf-bento__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.sf-bento__text { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-bento__visual { flex: 1; min-height: 70px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.sf-bento__bars { align-items: flex-end; }
.sf-bento__bars i { flex: 1; max-width: 56px; height: var(--h, 50%); border-radius: 14px 14px 0 0; background: var(--sf-fill); transform-origin: bottom; transition: transform .6s var(--sf-spring), background .25s ease; transform: scaleY(.72); transition-delay: calc(var(--i, 0) * 45ms); }
.sf-bento__tile:hover .sf-bento__bars i { transform: scaleY(1); }
.sf-bento__bars i:nth-child(odd) { background: var(--sf-ink); }
.sf-bento__big { font-size: clamp(30px, 4.2vw, 52px); font-size: clamp(28px, 22cqi, 52px); white-space: nowrap; font-weight: 700; letter-spacing: -.06em; line-height: 1; transition: transform .6s var(--sf-spring); transform-origin: left bottom; }
.sf-bento__tile:hover .sf-bento__big { transform: scale(1.1) rotate(-3deg); }
.sf-bento__chips { flex-wrap: wrap; align-content: flex-end; justify-content: flex-start; }
.sf-bento__chips span { padding: 8px 16px; border-radius: var(--sf-pill); background: var(--sf-fill); font-size: 14px; font-weight: 600; transition: transform .5s var(--sf-spring); }
.sf-bento__tile:hover .sf-bento__chips span:nth-child(odd) { transform: translateY(-8px) rotate(-3deg); }
.sf-bento__tile:hover .sf-bento__chips span:nth-child(even) { transform: translateY(-4px) rotate(3deg); }
.sf-bento__switch { position: relative; width: 74px; height: 42px; border-radius: var(--sf-pill); background: var(--sf-line); transition: background .3s ease; }
.sf-bento__switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .55s var(--sf-spring); }
.sf-bento__tile:hover .sf-bento__switch { background: var(--sf-ink); }
.sf-bento__tile:hover .sf-bento__switch::after { transform: translateX(32px); }
.sf-bento__chat { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.sf-bento__chat span { max-width: 82%; padding: 10px 16px; border-radius: 20px 20px 20px 6px; background: var(--sf-fill); font-size: 14px; font-weight: 500; transition: transform .5s var(--sf-spring); }
.sf-bento__chat span:nth-child(even) { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-bento__tile:hover .sf-bento__chat span:nth-child(odd) { transform: translateX(8px); }
.sf-bento__tile:hover .sf-bento__chat span:nth-child(even) { transform: translateX(-8px); }
.sf-bento__code { margin: 0; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--sf-on-ink) 10%, transparent); font: 500 14px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sf-on-ink); overflow: hidden; white-space: pre; }
.sf-bento__code::after { content: ""; display: inline-block; width: 8px; height: 1em; margin-left: 4px; vertical-align: text-bottom; background: var(--sf-on-ink); animation: sf-marketing-heroes-blink 1.1s steps(2) infinite; }
.sf-bento__orbit { position: relative; align-self: center; width: 140px; height: 140px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sf-line); animation: sf-marketing-heroes-spin 14s linear infinite; }
.sf-bento__tile:hover .sf-bento__orbit { animation-duration: 3s; }
.sf-bento__orbit i { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-ink); }
.sf-bento__orbit i:nth-child(1) { left: 59px; top: -11px; } .sf-bento__orbit i:nth-child(2) { right: -11px; top: 59px; background: var(--sf-muted); } .sf-bento__orbit i:nth-child(3) { left: 59px; bottom: -11px; }

/* ================= 10. How-it-works steps ================= */
.sf-steps { --_m: 56px; --_gap: 28px; list-style: none; margin: 0; padding: 0; display: grid; }
.sf-steps__item { --sf-steps-p: 0; position: relative; display: grid; grid-template-columns: var(--_m) minmax(0, 1fr); column-gap: 20px; align-content: start; padding-bottom: 40px; }
.sf-steps__item:last-child { padding-bottom: 0; }
.sf-steps__num { position: relative; z-index: 1; display: grid; place-items: center; width: var(--_m); height: var(--_m); border-radius: 50%; background: var(--sf-fill); color: var(--sf-muted); font-size: 20px; font-weight: 700; transition: background .35s ease, color .35s ease, transform .6s var(--sf-spring); }
.sf-steps__item.is-active .sf-steps__num { background: var(--sf-ink); color: var(--sf-on-ink); transform: scale(1.1); }
.sf-steps__title { margin: 8px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.sf-steps__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sf-muted); }
.sf-steps__item::before, .sf-steps__item::after { content: ""; position: absolute; left: calc(var(--_m) / 2 - 2px); top: calc(var(--_m) + 6px); bottom: 6px; width: 4px; border-radius: 2px; background: var(--sf-line); }
.sf-steps__item::after { background: var(--sf-ink); transform-origin: top; transform: scaleY(var(--sf-steps-p)); transition: transform .2s linear; }
.sf-steps__item:last-child::before, .sf-steps__item:last-child::after { display: none; }
@media (min-width: 880px) {
  .sf-steps:not(.sf-steps--vertical) { grid-template-columns: repeat(var(--sf-steps-n, 3), minmax(0, 1fr)); gap: var(--_gap); }
  .sf-steps:not(.sf-steps--vertical) .sf-steps__item { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-bottom: 0; }
  .sf-steps:not(.sf-steps--vertical) .sf-steps__title { margin-top: 0; }
  .sf-steps:not(.sf-steps--vertical) .sf-steps__item::before, .sf-steps:not(.sf-steps--vertical) .sf-steps__item::after { top: calc(var(--_m) / 2 - 2px); bottom: auto; left: calc(var(--_m) + 10px); width: calc(100% + var(--_gap) - var(--_m) - 20px); height: 4px; }
  .sf-steps:not(.sf-steps--vertical) .sf-steps__item::after { transform-origin: left; transform: scaleX(var(--sf-steps-p)); }
}

/* ================= 11. Stats band ================= */
.sf-stats { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-line); }
.sf-stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; } /* no empty cell with an odd count */
@media (min-width: 860px) { .sf-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .sf-stats__item:last-child:nth-child(odd) { grid-column: auto; } }
.sf-stats--ink { background: color-mix(in srgb, var(--sf-on-ink) 18%, transparent); }
.sf-stats__item { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 3.5vw, 40px) clamp(18px, 3vw, 32px); background: var(--sf-surface); transition: transform .5s var(--sf-spring); }
.sf-stats--ink .sf-stats__item { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-stats__value { font-size: clamp(32px, 5.4vw, 64px); font-size: clamp(28px, min(28cqi, max(36px, 5.4vw)), 64px); white-space: nowrap; font-weight: 700; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-stats__label { font-size: 15px; line-height: 1.4; color: var(--sf-muted); }
.sf-stats--ink .sf-stats__label { color: color-mix(in srgb, var(--sf-on-ink) 70%, transparent); }
.sf-stats__note { margin: 12px 0 0; font-size: 13px; color: var(--sf-muted); text-align: center; }

/* ================= 12. Roadmap / timeline ================= */
.sf-roadmap { --_dot: 24px; list-style: none; margin: 0; padding: 0; }
.sf-roadmap__item { position: relative; display: grid; grid-template-columns: var(--_dot) minmax(0, 1fr); column-gap: 20px; padding-bottom: 24px; }
.sf-roadmap__item:last-child { padding-bottom: 0; }
.sf-roadmap__dot { position: relative; z-index: 1; width: var(--_dot); height: var(--_dot); margin-top: 22px; border-radius: 50%; background: var(--sf-surface); box-shadow: inset 0 0 0 3px var(--sf-line); display: grid; place-items: center; }
.sf-roadmap__item[data-status="done"] .sf-roadmap__dot { background: var(--sf-ink); box-shadow: none; }
.sf-roadmap__item[data-status="done"] .sf-roadmap__dot::after { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--sf-on-ink); border-bottom: 3px solid var(--sf-on-ink); transform: translateY(-1px) rotate(-45deg); }
.sf-roadmap__item[data-status="now"] .sf-roadmap__dot { background: var(--sf-ink); box-shadow: none; }
.sf-roadmap__item[data-status="now"] .sf-roadmap__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sf-ink); animation: sf-marketing-heroes-pulse 1.8s var(--sf-ease) infinite; }
.sf-roadmap__item::before { content: ""; position: absolute; left: calc(var(--_dot) / 2 - 1.5px); top: 46px; bottom: -22px; width: 3px; border-radius: 2px; background: var(--sf-line); }
.sf-roadmap__item:last-child::before { display: none; }
.sf-roadmap__item[data-status="done"]::before { background: var(--sf-ink); }
.sf-roadmap__card { padding: 20px 24px; border-radius: var(--sf-radius); background: var(--sf-surface); transition: transform .5s var(--sf-spring); }
.sf-roadmap__item:hover .sf-roadmap__card { transform: translateX(6px); }
.sf-roadmap__when { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-muted); }
.sf-roadmap__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sf-roadmap__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-roadmap--horizontal { display: flex; gap: 20px; overflow-x: auto; margin-inline: -16px; padding: 20px 16px 14px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; } /* padding leaves room for the pulsing dot and card lift */
.sf-roadmap--horizontal:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; border-radius: var(--sf-radius); }
.sf-roadmap--horizontal .sf-roadmap__item { flex: none; width: min(300px, 76%); display: block; padding: 0; scroll-snap-align: start; }
.sf-roadmap--horizontal .sf-roadmap__dot { margin: 0 0 18px; }
.sf-roadmap--horizontal .sf-roadmap__item::before { left: calc(var(--_dot) + 8px); right: -20px; top: calc(var(--_dot) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; }
.sf-roadmap--horizontal .sf-roadmap__item:hover .sf-roadmap__card { transform: translateY(-5px); }
@media (min-width: 900px) { .sf-roadmap--horizontal.sf-roadmap--fit .sf-roadmap__item { flex: 1 1 0; width: auto; min-width: 170px; } }

/* ================= 13. Comparison table ================= */
.sf-compare { border-radius: var(--sf-radius-lg); background: var(--sf-surface); overflow: hidden; }
.sf-compare__scroll { position: relative; overflow: auto; max-height: var(--sf-marketing-heroes-compare-h, none); }
.sf-compare__scroll:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-compare table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.sf-compare th, .sf-compare td { padding: 16px 20px; text-align: center; border-bottom: 1.5px solid var(--sf-line); background: var(--sf-surface); }
.sf-compare thead th { position: sticky; top: 0; z-index: 2; font-size: 15px; font-weight: 700; padding-block: 20px; }
.sf-compare tbody th { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 600; min-width: 190px; }
.sf-compare thead th:first-child { left: 0; z-index: 3; text-align: left; }
.sf-compare .is-us { background: var(--sf-fill); }
.sf-compare thead th.is-us { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-compare tbody tr:last-child th, .sf-compare tbody tr:last-child td { border-bottom: 0; }
.sf-compare__group th { padding-block: 12px; background: var(--sf-bg); color: var(--sf-muted); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-align: left; }
.sf-compare__hint { display: block; font-size: 12px; font-weight: 500; color: var(--sf-muted); }
.sf-compare thead th.is-us .sf-compare__hint { color: color-mix(in srgb, var(--sf-on-ink) 70%, transparent); }
@media (max-width: 640px) {
  .sf-compare__scroll { max-height: none; } /* one scroll axis on phones: the page scrolls down, the table scrolls sideways */
  .sf-compare table { min-width: 500px; font-size: 14px; }
  .sf-compare th, .sf-compare td { padding: 12px 10px; }
  .sf-compare tbody th { min-width: 0; width: 132px; max-width: 132px; padding-left: 14px; line-height: 1.3; box-shadow: 6px 0 10px -8px rgba(0, 0, 0, .25); }
  .sf-compare thead th:first-child { padding-left: 14px; }
  .sf-compare__group th { box-shadow: none; }
}
.sf-compare__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
.sf-compare__icon svg { width: 16px; height: 16px; }
.sf-compare__icon--yes { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-compare__icon--no { background: var(--sf-fill); color: var(--sf-muted); }
.sf-compare .is-us .sf-compare__icon--no { background: var(--sf-line); }
.sf-compare__icon--part { background: transparent; color: var(--sf-muted); box-shadow: inset 0 0 0 2px var(--sf-line); }
.sf-compare tbody tr:hover th, .sf-compare tbody tr:hover td:not(.is-us) { background: color-mix(in srgb, var(--sf-fill) 60%, var(--sf-surface)); }

/* ================= 14. Integrations grid ================= */
.sf-integrations { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .sf-integrations { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .sf-integrations { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sf-integrations { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sf-integration { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 128px; padding: 18px 12px; border: 0; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: transform .5s var(--sf-spring); }
.sf-integration:hover, .sf-integration:focus-visible { transform: translateY(-6px) rotate(-1.5deg); z-index: 5; }
.sf-integration__logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: color-mix(in srgb, var(--_c, transparent) 42%, var(--sf-fill)); font-size: 22px; font-weight: 700; letter-spacing: -.04em; transition: transform .55s var(--sf-spring); }
.sf-integration:hover .sf-integration__logo, .sf-integration:focus-visible .sf-integration__logo { transform: scale(1.14) rotate(8deg); }
.sf-integration__tip { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 200px; padding: 10px 14px; border-radius: 14px; background: var(--sf-ink); color: var(--sf-on-ink); font-size: 13px; font-weight: 500; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); transform-origin: bottom center; transition: opacity .15s ease, transform .4s var(--sf-spring); }
.sf-integration__tip strong { display: block; font-weight: 700; }
.sf-integration:hover .sf-integration__tip, .sf-integration:focus-visible .sf-integration__tip { opacity: 1; transform: translateX(-50%) scale(1); }
.sf-integration.is-dismissed .sf-integration__tip { opacity: 0; }

/* ================= 15. Changelog list ================= */
.sf-changelog { list-style: none; margin: 0; padding: 0; }
.sf-changelog__entry { display: grid; gap: 14px; padding: 36px 0; border-top: 1.5px solid var(--sf-line); }
.sf-changelog__entry:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 820px) { .sf-changelog__entry { grid-template-columns: 200px minmax(0, 1fr); gap: 56px; } .sf-changelog__meta { position: sticky; top: calc(var(--sf-marketing-heroes-nav) + 16px); align-self: start; flex-direction: column; align-items: flex-start; } }
.sf-changelog__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sf-changelog__version { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-changelog__date { font-size: 14px; color: var(--sf-muted); }
.sf-changelog__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.sf-changelog__summary { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--sf-muted); }
.sf-changelog__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.sf-changelog__tag { --_c: var(--sf-muted); display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--_c) 16%, var(--sf-surface)); color: var(--sf-ink); font-size: 13px; font-weight: 600; }
.sf-changelog__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c); }
.sf-changelog__tag--new { --_c: #2FBF71; } .sf-changelog__tag--improved { --_c: #3B82F6; } .sf-changelog__tag--fixed { --_c: #F5A524; } .sf-changelog__tag--breaking { --_c: var(--sf-danger); }
.sf-changelog__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sf-changelog__list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.sf-changelog__list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-ink); }

/* ================= 16. Footers ================= */
.sf-mfooter { padding-block: clamp(48px, 7vw, 88px) 28px; background: var(--sf-bg); color: var(--sf-ink); }
.sf-mfooter__nav { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 -12px; padding: 0; list-style: none; }
.sf-mfooter__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-left: -12px; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: var(--sf-pill); transition: transform .35s var(--sf-spring), color .2s ease; }
.sf-mfooter__link:hover { transform: translateY(-3px) rotate(-2deg); }
.sf-mfooter__nav .sf-mfooter__link { margin-left: 0; }
.sf-mfooter__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.sf-mfooter__cols { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-mfooter__brandcol { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 960px) { .sf-mfooter__cols { grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); } .sf-mfooter__brandcol { grid-column: auto; } }
.sf-mfooter__blurb { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--sf-muted); }
.sf-mfooter__heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mfooter__list { margin: 0; padding: 0; list-style: none; }
.sf-mfooter__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: clamp(36px, 5vw, 60px); padding-top: 20px; border-top: 1.5px solid var(--sf-line); font-size: 14px; color: var(--sf-muted); }
.sf-mfooter__bottom .sf-mfooter__nav { gap: 0 4px; }
.sf-mfooter__bottom .sf-mfooter__link { font-size: 14px; color: var(--sf-muted); }
.sf-mfooter__bottom .sf-mfooter__link:hover { color: var(--sf-ink); }
.sf-mfooter--simple { padding-block: 32px; }
.sf-mfooter--wordmark { position: relative; overflow: hidden; container-type: inline-size; background: var(--sf-ink); color: var(--sf-on-ink); padding-bottom: 0; }
.sf-mfooter--wordmark .sf-mfooter__blurb, .sf-mfooter--wordmark .sf-mfooter__heading, .sf-mfooter--wordmark .sf-mfooter__bottom, .sf-mfooter--wordmark .sf-mfooter__bottom .sf-mfooter__link { color: color-mix(in srgb, var(--sf-on-ink) 68%, transparent); }
.sf-mfooter--wordmark .sf-mfooter__bottom { border-color: color-mix(in srgb, var(--sf-on-ink) 20%, transparent); }
.sf-mfooter--wordmark .sf-mfooter__bottom .sf-mfooter__link:hover { color: var(--sf-on-ink); }
.sf-mfooter--wordmark .sf-mbrand__mark { background: var(--sf-on-ink); } .sf-mfooter--wordmark .sf-mbrand__mark::after { background: var(--sf-ink); }
.sf-mfooter__big { display: block; margin: clamp(20px, 4vw, 48px) 0 -.13em; font-size: clamp(80px, 26vw, 440px); font-size: clamp(80px, 30cqi, 440px); font-weight: 700; line-height: .8; letter-spacing: -.07em; text-align: center; user-select: none; white-space: nowrap; }
.sf-mfooter__big span { display: inline-block; cursor: default; }
.sf-mfooter__big span:hover { animation: sf-hop .7s cubic-bezier(.2, .9, .3, 1.3); }

/* ================= 17. CTA sections ================= */
.sf-cta { color: var(--sf-ink); }
.sf-cta__title { margin: 0; font-size: clamp(28px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
.sf-cta__text { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: color-mix(in srgb, currentColor 68%, transparent); }
.sf-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-cta__btn { background: var(--sf-on-ink); color: var(--sf-ink); }
.sf-cta__btn--ghost { background: transparent; color: var(--sf-on-ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sf-on-ink) 36%, transparent); }
.sf-cta .sf-btn:focus-visible { outline-color: currentColor; }
.sf-cta--banner { background: var(--sf-ink); color: var(--sf-on-ink); padding-block: clamp(24px, 4vw, 36px); }
.sf-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.sf-cta--banner .sf-cta__title { font-size: clamp(22px, 3vw, 32px); }
.sf-cta--banner .sf-cta__copy { display: flex; flex-direction: column; gap: 6px; }
.sf-cta__box { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 72px); border-radius: clamp(28px, 5vw, 48px); background: var(--sf-ink); color: var(--sf-on-ink); text-align: center; }
.sf-cta__box::before, .sf-cta__box::after { content: ""; position: absolute; z-index: -1; background: color-mix(in srgb, var(--sf-on-ink) 9%, transparent); animation: sf-morph 9s ease-in-out infinite; }
.sf-cta__box::before { width: 340px; height: 340px; left: -90px; top: -130px; }
.sf-cta__box::after { width: 260px; height: 260px; right: -60px; bottom: -110px; animation-delay: -4s; }
.sf-cta--boxed .sf-cta__actions { justify-content: center; }
.sf-cta--soft .sf-cta__box { background: var(--sf-surface); color: var(--sf-ink); }
.sf-cta--soft .sf-cta__box::before, .sf-cta--soft .sf-cta__box::after { background: var(--sf-fill); }
.sf-cta--split .sf-cta__box { display: grid; align-items: center; justify-items: start; gap: clamp(28px, 5vw, 56px); text-align: left; padding: clamp(28px, 5vw, 64px); background: var(--sf-surface); color: var(--sf-ink); }
.sf-cta--split .sf-cta__box::before, .sf-cta--split .sf-cta__box::after { display: none; }
@media (min-width: 860px) { .sf-cta--split .sf-cta__box { grid-template-columns: 1.1fr .9fr; } }
.sf-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.sf-cta__aside { width: 100%; padding: clamp(20px, 3vw, 32px); border-radius: var(--sf-radius-lg); background: var(--sf-fill); }

/* ================= 18. Newsletter / waitlist signup ================= */
.sf-signup { position: relative; width: 100%; max-width: 520px; color: var(--sf-ink); text-align: left; }
.sf-signup__form { display: flex; flex-direction: column; gap: 12px; }
.sf-signup__row { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-signup__row .sf-input { flex: 1 1 200px; width: auto; }
.sf-signup__row .sf-btn { flex: 0 0 auto; }
.sf-signup--inline .sf-signup__row { gap: 6px; padding: 6px; border-radius: var(--sf-pill); background: var(--sf-surface); box-shadow: inset 0 0 0 2px var(--sf-line); transition: box-shadow .2s ease, transform .4s var(--sf-spring); }
.sf-signup--inline .sf-signup__row:focus-within { box-shadow: inset 0 0 0 2px var(--sf-ink); transform: scale(1.015); }
.sf-signup--inline .sf-input { min-height: 48px; background: transparent; border-radius: var(--sf-pill); }
.sf-signup--inline .sf-input:focus { transform: none; background: transparent; border-color: transparent; outline: none; }
.sf-signup--inline { container-type: inline-size; }
.sf-signup--inline .sf-signup__row { flex-wrap: nowrap; }
.sf-signup--inline .sf-signup__row .sf-input { flex: 1 1 0; min-width: 0; }
@container (max-width: 330px) { .sf-signup--inline .sf-signup__row { flex-wrap: wrap; border-radius: var(--sf-radius-lg); } .sf-signup--inline .sf-signup__row .sf-input { flex: 1 1 100%; } .sf-signup--inline .sf-signup__row .sf-btn { flex: 1 1 100%; } }
.sf-signup--card { padding: 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-signup__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.sf-signup__text { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-signup__error:empty { display: none; }
.sf-signup__error { padding-left: 6px; }
.sf-signup .sf-btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.sf-signup .sf-btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: sf-marketing-heroes-spin .7s linear infinite; }
.sf-signup__success { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 8px; text-align: center; }
.sf-signup__success:focus { outline: none; }
.sf-signup[data-state="success"] .sf-signup__form, .sf-signup[data-state="success"] .sf-signup__head { display: none; }
.sf-signup[data-state="success"] .sf-signup__success { display: flex; }
.sf-signup--inline[data-state="success"] .sf-signup__success { flex-direction: row; text-align: left; gap: 16px; padding: 6px 12px 6px 6px; border-radius: var(--sf-pill); background: var(--sf-surface); box-shadow: inset 0 0 0 2px var(--sf-line); }
.sf-signup__check { width: 64px; height: 64px; flex: none; animation: sf-marketing-heroes-pop .7s var(--sf-spring) both; }
.sf-signup--inline .sf-signup__check { width: 44px; height: 44px; }
.sf-signup__check circle { fill: var(--sf-ink); }
.sf-signup__check path { fill: none; stroke: var(--sf-on-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sf-marketing-heroes-draw .5s .3s var(--sf-ease) forwards; }
.sf-signup__done-title { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; animation: sf-rise .8s .15s cubic-bezier(.2, .9, .3, 1) both; }
.sf-signup__done-text { margin: 0; font-size: 15px; color: var(--sf-muted); animation: sf-rise .8s .25s cubic-bezier(.2, .9, .3, 1) both; }
.sf-signup--inline .sf-signup__done-title { margin: 0; font-size: 17px; }
.sf-signup__reset { padding: 8px 4px; border: 0; background: none; color: var(--sf-ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-signup__reset:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; border-radius: 6px; }

/* ================= 19. Social proof strip ================= */
.sf-proof { --_ring: var(--sf-bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 36px; }
.sf-section--surface .sf-proof, .sf-proof--card { --_ring: var(--sf-surface); }
.sf-proof__people { display: flex; align-items: center; gap: 14px; }
.sf-proof__avatars { display: flex; padding-left: 12px; }
.sf-proof__avatars .sf-avatar { width: 46px; height: 46px; margin-left: -12px; border: 3px solid var(--_ring); background: color-mix(in srgb, var(--_c, transparent) 50%, var(--sf-fill)); color: var(--sf-ink); font-size: 14px; }
.sf-proof__avatars .sf-avatar:hover { transform: translateY(-4px) scale(1.12) rotate(-6deg); z-index: 1; }
.sf-proof__rating { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--sf-muted); }
.sf-proof__stars { display: flex; gap: 2px; color: var(--sf-ink); }
.sf-proof__stars svg { width: 18px; height: 18px; }
.sf-proof__rating strong { color: var(--sf-ink); }
.sf-proof__quote { position: relative; margin: 0; max-width: 46ch; padding-left: 20px; border-left: 3px solid var(--sf-ink); font-size: 16px; line-height: 1.5; font-weight: 500; }
.sf-proof__quote cite { display: block; margin-top: 4px; font-size: 13px; font-style: normal; font-weight: 400; color: var(--sf-muted); }
.sf-proof--card { padding: 24px 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); justify-content: space-between; }
.sf-proof--stacked { flex-direction: column; text-align: center; }
.sf-proof--stacked .sf-proof__quote { padding: 0; border: 0; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: -.015em; }

/* ================= 21. Sticky scroll storytelling ================= */
.sf-story { --_step-h: 72vh; --_top: calc(var(--sf-marketing-heroes-nav) + 24px); --_vis-h: min(540px, calc(100vh - var(--sf-marketing-heroes-nav) - 48px)); display: grid; gap: 20px; position: relative; }
@media (min-width: 900px) { .sf-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 96px); align-items: start; } }
.sf-story__steps { display: flex; flex-direction: column; }
.sf-story__step { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; min-height: var(--_step-h); opacity: .3; transform: translateX(-10px); transition: opacity .4s ease, transform .6s var(--sf-spring); }
.sf-story__step.is-active { opacity: 1; transform: none; }
.sf-story__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-fill); font-size: 15px; font-weight: 700; transition: background .3s ease, color .3s ease, transform .5s var(--sf-spring); }
.sf-story__step.is-active .sf-story__num { background: var(--sf-ink); color: var(--sf-on-ink); transform: scale(1.12) rotate(-6deg); }
.sf-story__title { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }
.sf-story__text { margin: 0; max-width: 42ch; font-size: 17px; line-height: 1.6; color: var(--sf-muted); }
.sf-story__visual { position: sticky; top: var(--_top); z-index: 2; order: -1; height: min(var(--_vis-h), 280px); overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-fill); box-shadow: 0 0 0 6px var(--sf-bg); }
.sf-section--surface .sf-story__visual { box-shadow: 0 0 0 6px var(--sf-surface); }
@media (min-width: 900px) { .sf-story__visual { order: 0; height: var(--_vis-h); box-shadow: none; } }
@media (max-width: 899px) { .sf-story__visual { height: min(var(--_vis-h), 230px); } .sf-story__step { justify-content: flex-start; min-height: calc(var(--_step-h) * .8); padding-block: 20px; transform: translateY(8px); } .sf-story__step.is-active { transform: none; } }
.sf-story__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px); opacity: 0; visibility: hidden; transform: translateY(26px) scale(.95); transition: opacity .35s ease, transform .65s var(--sf-spring), visibility 0s .35s; }
.sf-story__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sf-story__card { width: min(100%, 360px); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: var(--sf-surface); }
.sf-story__card strong { font-size: 40px; letter-spacing: -.05em; line-height: 1; }

/* ================= 22. Gallery / showcase strip ================= */
.sf-showcase { position: relative; }
.sf-showcase__track { display: flex; gap: var(--sf-marketing-heroes-gap); overflow-x: auto; padding: 10px var(--sf-marketing-heroes-gut) 28px; scroll-snap-type: x proximity; scroll-padding-inline: var(--sf-marketing-heroes-gut); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.sf-showcase__track::-webkit-scrollbar { display: none; }
/* soft fade on the edge that has more content; JS adds .is-start / .is-end */
.sf-showcase__track { --_fl: 56px; --_fr: 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--_fl), #000 calc(100% - var(--_fr)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--_fl), #000 calc(100% - var(--_fr)), transparent); }
.sf-showcase__track.is-start { --_fl: 0px; }
.sf-showcase__track.is-end { --_fr: 0px; }
.sf-showcase__track:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; border-radius: var(--sf-radius-lg); }
.sf-showcase__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.sf-showcase__track.is-dragging * { pointer-events: none; }
.sf-showcase__card { position: relative; flex: none; width: clamp(240px, 72vw, 340px); aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; border-radius: var(--sf-radius-lg); background: color-mix(in srgb, var(--_c, transparent) 40%, var(--sf-fill)); color: var(--sf-ink); text-decoration: none; -webkit-user-drag: none; transition: transform .55s var(--sf-spring); }
.sf-showcase__card:hover { transform: translateY(-8px) rotate(-1deg); }
.sf-showcase__art { position: absolute; inset: 0; }
.sf-showcase__art i { position: absolute; display: block; background: var(--sf-ink); transition: transform .7s var(--sf-spring); }
.sf-showcase__art--a i:nth-child(1) { width: 62%; aspect-ratio: 1; left: 19%; top: 14%; border-radius: 50%; }
.sf-showcase__art--a i:nth-child(2) { width: 26%; aspect-ratio: 1; right: 10%; bottom: 26%; border-radius: 8px; background: var(--sf-surface); }
.sf-showcase__art--b i { left: 12%; right: 12%; height: 15%; border-radius: var(--sf-pill); }
.sf-showcase__art--b i:nth-child(1) { top: 16%; } .sf-showcase__art--b i:nth-child(2) { top: 36%; right: 30%; background: var(--sf-surface); } .sf-showcase__art--b i:nth-child(3) { top: 56%; left: 30%; }
.sf-showcase__art--c i:nth-child(1) { width: 56%; height: 56%; left: 22%; top: 12%; border-radius: 999px 999px 0 0; }
.sf-showcase__art--c i:nth-child(2) { width: 18%; aspect-ratio: 1; left: 10%; bottom: 24%; border-radius: 50%; background: var(--sf-surface); }
.sf-showcase__art--c i:nth-child(3) { width: 12%; aspect-ratio: 1; right: 14%; top: 22%; border-radius: 50%; background: var(--sf-surface); }
.sf-showcase__art--d i:nth-child(1) { width: 70%; aspect-ratio: 1; left: -10%; top: 6%; border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
.sf-showcase__art--d i:nth-child(2) { width: 38%; aspect-ratio: 1; right: 8%; top: 38%; border-radius: 50%; background: var(--sf-surface); }
.sf-showcase__card:hover .sf-showcase__art i:nth-child(odd) { transform: rotate(-8deg) scale(1.06); }
.sf-showcase__card:hover .sf-showcase__art i:nth-child(even) { transform: rotate(10deg) translateY(-6px); }
.sf-showcase__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-radius: 20px; background: var(--sf-surface); font-size: 14px; font-weight: 600; }
.sf-showcase__cap small { font-size: 12px; font-weight: 500; color: var(--sf-muted); }
.sf-showcase__controls { display: flex; justify-content: flex-end; gap: 8px; padding-inline: var(--sf-marketing-heroes-gut); margin-bottom: 4px; }
.sf-showcase__btn { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), opacity .2s ease; }
.sf-showcase__btn:hover { transform: scale(1.1); }
.sf-showcase__btn:active { transform: scale(1.18, .86); }
.sf-showcase__btn[aria-disabled="true"] { opacity: .35; cursor: default; transform: none; }
.sf-showcase__btn svg { width: 20px; height: 20px; }

/* ---------- Anchor buttons ---------- */
.sf-mnav a.sf-btn, .sf-mhero a.sf-btn, .sf-cta a.sf-btn, .sf-announce a.sf-btn { text-decoration: none; }

/* ---------- Focus (shared) ---------- */
.sf-mnav__link:focus-visible, .sf-mnav__toggle:focus-visible, .sf-mbrand:focus-visible, .sf-mega__item:focus-visible, .sf-mega__featured:focus-visible,
.sf-feature:focus-visible, .sf-integration:focus-visible, .sf-showcase__btn:focus-visible, .sf-showcase__card:focus-visible, .sf-marquee__toggle:focus-visible,
.sf-mfooter__link:focus-visible, .sf-logos__item:focus-visible, .sf-announce__msg a:focus-visible, .sf-prose a:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-mega__item:focus-visible { outline-offset: -3px; }
.sf-cta--banner .sf-btn:focus-visible, .sf-cta__box .sf-btn:focus-visible, .sf-mfooter--wordmark a:focus-visible, .sf-announce__msg a:focus-visible { outline-color: var(--sf-on-ink); }
.sf-cta--split .sf-btn:focus-visible, .sf-cta--soft .sf-btn:focus-visible { outline-color: var(--sf-ink); }

/* ---------- Keyframes ---------- */
@keyframes sf-marketing-heroes-marquee { to { transform: translateX(calc(var(--sf-marketing-heroes-shift, 0px) * -1)); } }
@keyframes sf-marketing-heroes-grow { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
@keyframes sf-marketing-heroes-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sf-marketing-heroes-spin { to { transform: rotate(360deg); } }
@keyframes sf-marketing-heroes-blink { to { opacity: 0; } }
@keyframes sf-marketing-heroes-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sf-marketing-heroes-pop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }
@keyframes sf-marketing-heroes-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-marketing-heroes-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-mnav, .sf-mnav *, .sf-mega *, .sf-announce, .sf-announce *, .sf-mhero *, .sf-device, .sf-mock *, .sf-marquee__track, .sf-feature, .sf-feature *, .sf-bento__tile, .sf-bento__tile *,
  .sf-steps *, .sf-roadmap *, .sf-integration, .sf-integration *, .sf-signup *, .sf-cta__box, .sf-cta__box::before, .sf-cta__box::after, .sf-story *, .sf-showcase *, .sf-mfooter__big span,
  .sf-eyebrow::before, [data-sf-hreveal], .sf-logos__item, .sf-stats__item, .sf-proof *, .sf-mbrand__mark, .sf-mfooter__link, .sf-marquee__toggle, .sf-viewport { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-sf-hreveal].is-pending { opacity: 1; transform: none; }
  .sf-marquee { -webkit-mask-image: none; mask-image: none; }
  .sf-marquee__track { width: auto; flex-wrap: wrap; }
  .sf-marquee__group[data-clone] { display: none; }
  .sf-signup__check path { stroke-dashoffset: 0; }
  .sf-device--tilt, .sf-device--tilt:hover { transform: none; }
}


/* ===== Conversion (marketing-convert) ===== */
/* Soft UI module: marketing-convert
   Conversion and trust content for marketing sites (placeholder brand "Acme").
   Needs soft.css. Optional behaviour: marketing-convert.js (+ soft.js for confetti/toasts). */

/* ---------- Module tokens ---------- */
:root {
  --sf-marketing-convert-c1: #FF5C8A;
  --sf-marketing-convert-c2: #FFC857;
  --sf-marketing-convert-c3: #5CC8FF;
  --sf-marketing-convert-c4: #7AE582;
  --sf-marketing-convert-cink: #111111; /* text on the accent colours, in both themes */
  --sf-marketing-convert-cpaper: #FFFFFF; /* highlights on the accent colours, in both themes */
  --sf-marketing-convert-star: #F5A524;
  --sf-marketing-convert-ok: #2FBF71;
  --sf-marketing-convert-starmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
}

/* ---------- Shared helpers ---------- */
.sf-conv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-conv-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-conv-tone-1, .sf-avatar.sf-conv-tone-1 { background: var(--sf-marketing-convert-c1); color: var(--sf-marketing-convert-cink); }
.sf-conv-tone-2, .sf-avatar.sf-conv-tone-2 { background: var(--sf-marketing-convert-c2); color: var(--sf-marketing-convert-cink); }
.sf-conv-tone-3, .sf-avatar.sf-conv-tone-3 { background: var(--sf-marketing-convert-c3); color: var(--sf-marketing-convert-cink); }
.sf-conv-tone-4, .sf-avatar.sf-conv-tone-4 { background: var(--sf-marketing-convert-c4); color: var(--sf-marketing-convert-cink); }
a.sf-btn { text-decoration: none; }
.sf-conv-stretch { color: inherit; text-decoration: none; }
.sf-conv-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sf-conv-stretch:focus-visible { outline: none; }
.sf-case:has(.sf-conv-stretch:focus-visible), .sf-post:has(.sf-conv-stretch:focus-visible), .sf-post-row:has(.sf-conv-stretch:focus-visible), .sf-post-featured:has(.sf-conv-stretch:focus-visible) { outline: 3px solid var(--sf-ink); outline-offset: 3px; }

/* abstract media placeholder (flat shapes, no images) */
.sf-conv-media { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--sf-radius); }
.sf-conv-media:not([class*="sf-conv-tone-"]) { background: var(--sf-fill); }
.sf-conv-media:not([class*="sf-conv-tone-"])::before { background: color-mix(in srgb, var(--sf-surface) 50%, transparent); }
.sf-conv-media::before, .sf-conv-media::after { content: ""; position: absolute; z-index: -1; transition: transform .7s var(--sf-spring); }
.sf-conv-media::before { width: 46%; aspect-ratio: 1; right: -8%; top: -20%; border-radius: 50%; background: color-mix(in srgb, var(--sf-marketing-convert-cpaper) 50%, transparent); }
.sf-conv-media::after { width: 36%; aspect-ratio: 1.5; left: 9%; bottom: -16%; border-radius: 24px; background: color-mix(in srgb, var(--sf-marketing-convert-cink) 14%, transparent); }
.sf-conv-media.sf-conv-tone-1, .sf-conv-media.sf-conv-tone-2, .sf-conv-media.sf-conv-tone-3, .sf-conv-media.sf-conv-tone-4 { color: var(--sf-marketing-convert-cink); }
:hover > .sf-conv-media::before { transform: translate(-14px, 12px) scale(1.15); }
:hover > .sf-conv-media::after { transform: translate(10px, -10px) rotate(-8deg); }

/* switch (checkbox) */
.sf-conv-switch { appearance: none; -webkit-appearance: none; position: relative; width: 58px; height: 32px; margin: 0; flex: none; cursor: pointer; border-radius: var(--sf-pill); background: var(--sf-line); transition: background .25s ease; }
.sf-conv-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .55s var(--sf-spring), width .25s var(--sf-spring); }
.sf-conv-switch:checked { background: var(--sf-ink); }
.sf-conv-switch:checked::after { transform: translateX(26px); }
.sf-conv-switch:active::after { width: 34px; }
.sf-conv-switch:checked:active::after { transform: translateX(18px); }
.sf-conv-switch:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-conv-switch:disabled { opacity: .5; cursor: not-allowed; }

/* tick (included) and dash (not included) marks */
.sf-conv-tick { position: relative; display: inline-block; vertical-align: middle; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-ink); }
.sf-conv-tick::after { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--sf-on-ink); border-bottom: 2px solid var(--sf-on-ink); transform: rotate(-45deg); }
.sf-conv-dash { display: inline-block; vertical-align: middle; width: 14px; height: 2px; border-radius: 2px; background: var(--sf-line); }

/* hidden state for widgets that set display themselves */
.sf-faq [hidden], .sf-cookie[hidden], .sf-cookie [hidden], .sf-contact [hidden], .sf-soon [hidden], .sf-posts [hidden], .sf-post-list [hidden], .sf-pricing [hidden], .sf-billing [hidden], .sf-calc [hidden], .sf-conv-hide[hidden], [data-sf-show][hidden] { display: none !important; }

/* ---------- Rolling numbers ---------- */
.sf-roll { --sf-roll-h: 1.3em; display: inline-flex; height: var(--sf-roll-h); line-height: var(--sf-roll-h); vertical-align: baseline; font-variant-numeric: tabular-nums; }
.sf-roll__col { display: block; height: var(--sf-roll-h); overflow: hidden; overflow: clip; /* clip keeps the digit baseline for alignment */ -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.sf-roll__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1 * var(--sf-roll-h))); transition: transform .8s var(--sf-spring); will-change: transform; }
.sf-roll__strip > span, .sf-roll__sep { display: block; height: var(--sf-roll-h); line-height: var(--sf-roll-h); text-align: center; }

/* ---------- 1. Pricing cards ---------- */
.sf-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; padding-top: 14px; }
.sf-plan { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 32px 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); --sf-plan-bubble: var(--sf-fill); --sf-plan-tick: var(--sf-ink); transition: transform .45s var(--sf-spring); }
.sf-plan:hover { transform: translateY(-8px) rotate(-.5deg); }
.sf-plan--featured { background: var(--sf-ink); color: var(--sf-on-ink); --sf-plan-bubble: var(--sf-on-ink); --sf-plan-tick: var(--sf-ink); }
.sf-plan--featured:hover { transform: translateY(-10px) rotate(.5deg) scale(1.02); }
.sf-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: var(--sf-pill); background: var(--sf-marketing-convert-c2); color: var(--sf-marketing-convert-cink); font-size: 13px; font-weight: 700; white-space: nowrap; animation: sf-marketing-convert-badge 2.4s var(--sf-spring) infinite; }
.sf-plan__name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sf-plan__desc { margin: -12px 0 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-plan--featured .sf-plan__desc, .sf-plan--featured .sf-plan__per { color: inherit; opacity: .75; }
.sf-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 0; }
.sf-plan__cur { align-self: flex-start; margin-top: 14px; font-size: 26px; font-weight: 600; }
.sf-plan__amount { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -.04em; }
.sf-plan__per { display: inline-grid; flex: 1 1 0; min-width: 7ch; font-size: 14px; line-height: 1.3; color: var(--sf-muted); }
/* both billing labels share one cell, so switching monthly/yearly never changes the card height */
.sf-plan__per > [data-sf-show] { grid-area: 1 / 1; }
.sf-plan__per > [data-sf-show][hidden] { display: block !important; visibility: hidden; }
.sf-plan__list { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--sf-line); display: grid; gap: 12px; align-content: start; flex: 1; }
.sf-plan--featured .sf-plan__list { border-top-color: color-mix(in srgb, var(--sf-on-ink) 22%, transparent); }
.sf-plan__list li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.4; }
.sf-plan__list li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-plan-bubble); transition: transform .35s var(--sf-spring); }
.sf-plan__list li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--sf-plan-tick); border-bottom: 2px solid var(--sf-plan-tick); transform: rotate(-45deg); }
.sf-plan__list li:hover::before { transform: scale(1.18) rotate(-8deg); }
.sf-plan__list li.is-off { color: var(--sf-muted); text-decoration: line-through; }
.sf-plan__list li.is-off::after { left: 6px; top: 10px; width: 10px; height: 0; border-left: 0; border-bottom: 2px solid var(--sf-muted); transform: none; }
.sf-plan__cta { width: 100%; margin-top: auto; }
.sf-plan--featured .sf-plan__cta { background: var(--sf-on-ink); color: var(--sf-ink); }

/* ---------- 2. Billing toggle ---------- */
.sf-billing { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; }
.sf-billing__label { font: inherit; font-size: 16px; font-weight: 600; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--sf-pill); background: none; color: var(--sf-muted); cursor: pointer; transition: color .2s ease, transform .3s var(--sf-spring); }
.sf-billing__label:hover { transform: translateY(-2px); }
.sf-billing__label.is-active { color: var(--sf-ink); }
.sf-billing__label:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-billing__save { background: var(--sf-marketing-convert-c4); color: var(--sf-marketing-convert-cink); transform: rotate(-3deg); transition: transform .5s var(--sf-spring), opacity .3s ease; opacity: .7; }
.sf-billing.is-yearly .sf-billing__save { opacity: 1; animation: sf-marketing-convert-pop .6s var(--sf-spring); }
.sf-billing-stage { display: grid; gap: 28px; justify-items: center; }
.sf-billing-stage > .sf-pricing { width: 100%; }

/* ---------- 3. Pricing comparison table ---------- */
.sf-plan-compare { position: relative; overflow-x: auto; overflow-y: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sf-plan-compare--scroll { overflow-y: auto; max-height: min(72vh, 540px); overscroll-behavior: contain; } /* long tables: fixed height, sticky header */
.sf-plan-compare.is-overflowing:not([data-edge="end"]) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.sf-plan-compare:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-plan-compare.is-overflowing:focus-visible { -webkit-mask: none; mask: none; } /* keep the focus ring visible */
.sf-plan-compare__table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.sf-plan-compare__table thead th { position: sticky; top: 0; z-index: 3; padding: 20px 16px 16px; background: var(--sf-surface); text-align: center; vertical-align: bottom; border-bottom: 2px solid var(--sf-line); font-weight: 400; }
.sf-plan-compare__table thead th:first-child { left: 0; z-index: 4; text-align: left; font-weight: 700; font-size: 16px; }
.sf-plan-compare__plan { display: grid; gap: 4px; justify-items: center; }
.sf-plan-compare__plan b { font-size: 17px; }
.sf-plan-compare__plan > span:not(.sf-badge) { color: var(--sf-muted); font-size: 14px; }
.sf-plan-compare__table tbody th, .sf-plan-compare__table tbody td { padding: 15px 16px; border-bottom: 1px solid var(--sf-line); text-align: center; }
.sf-plan-compare__table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--sf-surface); text-align: left; font-weight: 500; }
.sf-plan-compare__group th { position: sticky; left: 0; background: var(--sf-fill) !important; text-align: left !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); padding-top: 12px !important; padding-bottom: 12px !important; }
.sf-plan-compare__table tbody tr:not(.sf-plan-compare__group):hover > * { background: var(--sf-fill); }
.sf-plan-compare__hl { background: color-mix(in srgb, var(--sf-fill) 55%, var(--sf-surface)); }
.sf-plan-compare__table thead th.sf-plan-compare__hl { background: color-mix(in srgb, var(--sf-fill) 55%, var(--sf-surface)); }
.sf-plan-compare__hint { display: none; margin: 0 4px; }

/* ---------- 4. Testimonials ---------- */
.sf-testimonial { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .45s var(--sf-spring); }
.sf-testimonial:hover { transform: translateY(-5px) rotate(-.4deg); }
.sf-testimonial__quote { margin: 0; font-size: 17px; line-height: 1.55; }
.sf-testimonial__quote p { margin: 0; }
.sf-testimonial__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sf-testimonial__name { display: block; font-weight: 700; font-size: 15px; font-style: normal; }
.sf-testimonial__role { display: block; font-size: 14px; color: var(--sf-muted); }
.sf-wall { column-width: 270px; column-gap: 16px; }
.sf-wall > .sf-testimonial { break-inside: avoid; margin-bottom: 16px; }
.sf-wall > .sf-testimonial--lg .sf-testimonial__quote { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.sf-tcarousel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sf-tcarousel__track { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 14px 0 18px; margin: -14px 0 -18px; }
.sf-tcarousel__track::-webkit-scrollbar { display: none; }
.sf-tcarousel__track:not([data-edge="end"]):not([data-edge="none"]) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.sf-tcarousel__track[data-edge]:focus-visible { -webkit-mask: none; mask: none; }
.sf-tcarousel__track:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; border-radius: var(--sf-radius-lg); }
.sf-tcarousel__track > * { flex: 0 0 min(88%, 440px); scroll-snap-align: start; }
.sf-tcarousel__slide { display: flex; }
.sf-tcarousel__slide > * { flex: 1; min-width: 0; }
.sf-tcarousel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-tcarousel__dots { display: flex; gap: 2px; }
.sf-tcarousel__dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sf-tcarousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--sf-pill); background: var(--sf-line); transition: width .45s var(--sf-spring), margin .45s var(--sf-spring), background .2s ease; }
.sf-tcarousel__dot[aria-current="true"]::before { width: 24px; margin-left: -12px; background: var(--sf-ink); }
.sf-tcarousel__dot:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -4px; border-radius: 12px; }
.sf-tcarousel__nav { display: flex; gap: 8px; }

/* ---------- 5. Pull quote + founder note ---------- */
.sf-pullquote { position: relative; margin: 0; padding: 6px 0 6px clamp(20px, 4vw, 40px); border-left: 6px solid var(--sf-ink); }
.sf-pullquote__text { margin: 0; font-size: clamp(24px, 4.2vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.sf-pullquote__text mark { background: var(--sf-marketing-convert-c2); color: var(--sf-marketing-convert-cink); padding: 0 .15em; border-radius: .2em; }
.sf-pullquote__cite { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-style: normal; font-size: 15px; color: var(--sf-muted); }
.sf-pullquote__cite b { color: var(--sf-ink); }
.sf-pullquote--center { border-left: 0; padding: 0; text-align: center; }
.sf-pullquote--center::before { content: "\201C"; display: block; height: .5em; font-size: 110px; line-height: 1; font-weight: 700; color: var(--sf-ink); }
.sf-pullquote--center .sf-pullquote__cite { justify-content: center; }
.sf-founder { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; max-width: 760px; padding: clamp(24px, 5vw, 44px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-founder .sf-avatar { align-self: start; width: 72px; height: 72px; font-size: 24px; }
.sf-founder__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-founder__body p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.sf-founder__sign { display: inline-grid; gap: 2px; margin-top: 8px; font-weight: 700; font-style: italic; font-size: 22px; letter-spacing: -.01em; }
.sf-founder__sign svg { width: 120px; height: 14px; fill: none; stroke: var(--sf-ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: sf-marketing-convert-draw 1.4s var(--sf-ease) .4s forwards; }
.sf-founder__role { font-size: 14px; font-weight: 500; font-style: normal; color: var(--sf-muted); }

/* ---------- 6. FAQ ---------- */
.sf-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; interpolate-size: allow-keywords; }
.sf-faq__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sf-faq__search { position: relative; flex: 1 1 240px; max-width: 360px; }
@media (max-width: 640px) { .sf-faq__search { max-width: none; } }
.sf-faq__search .sf-input { padding-left: 46px; }
.sf-faq__search .sf-conv-ico { position: absolute; left: 16px; top: 15px; color: var(--sf-muted); pointer-events: none; }
.sf-faq__tabs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.sf-faq__tab { flex: none; font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-muted); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-faq__tab:hover { transform: translateY(-2px) scale(1.04); color: var(--sf-ink); }
.sf-faq__tab[aria-selected="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-faq__tab:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-faq__list { display: grid; gap: 10px; outline: none; }
.sf-faq__item { border-radius: var(--sf-radius); background: var(--sf-surface); transition: transform .35s var(--sf-spring); }
.sf-faq__item:hover { transform: translateX(4px); }
.sf-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 14px 22px; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; border-radius: var(--sf-radius); }
.sf-faq__item > summary::-webkit-details-marker { display: none; }
.sf-faq__item > summary:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-fill); transition: transform .5s var(--sf-spring), background .2s ease; }
.sf-faq__icon::before, .sf-faq__icon::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; border-radius: 2px; background: var(--sf-ink); transition: background .2s ease; }
.sf-faq__icon::after { transform: rotate(90deg); }
.sf-faq__item[open] .sf-faq__icon { transform: rotate(135deg); background: var(--sf-ink); }
.sf-faq__item[open] .sf-faq__icon::before, .sf-faq__item[open] .sf-faq__icon::after { background: var(--sf-on-ink); }
.sf-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--sf-ease), content-visibility .45s allow-discrete; }
.sf-faq__item[open]::details-content { block-size: auto; }
.sf-faq__answer { padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: var(--sf-muted); }
.sf-faq__item:not([open]) .sf-faq__answer { visibility: hidden; transition: visibility 0s .45s; } /* hidden once the close animation ends */
.sf-faq__answer p { margin: 0; max-width: 62ch; }
.sf-faq__empty { padding: 28px; border-radius: var(--sf-radius); background: var(--sf-surface); text-align: center; color: var(--sf-muted); }
.sf-faq__count { margin: 0; }

/* ---------- 7. Team grid + avatar bios ---------- */
.sf-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 20px; }
.sf-member { position: relative; min-height: 290px; perspective: 900px; border-radius: var(--sf-radius-lg); cursor: pointer; }
.sf-member:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-member__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s var(--sf-spring); }
.sf-member:hover .sf-member__inner, .sf-member:focus-within .sf-member__inner, .sf-member.is-flipped .sf-member__inner { transform: rotateY(180deg); }
.sf-member__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sf-member__face--back { transform: rotateY(180deg); align-items: flex-start; justify-content: space-between; text-align: left; }
.sf-member__pic { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 8px; border-radius: 50%; font-size: 34px; font-weight: 700; }
.sf-member__name { margin: 0; font-size: 18px; font-weight: 700; }
.sf-member__role { margin: 0; font-size: 14px; color: var(--sf-muted); }
.sf-member__bio { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-member__links { display: flex; gap: 8px; }
.sf-member__link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sf-fill); color: var(--sf-ink); transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-member__link:hover { transform: scale(1.15) rotate(-6deg); background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-member__link:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-member__hint { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--sf-muted); }
/* reveal variant: bio slides up over the card */
.sf-member--reveal { overflow: hidden; perspective: none; }
.sf-member--reveal .sf-member__inner, .sf-member--reveal:hover .sf-member__inner, .sf-member--reveal:focus-within .sf-member__inner, .sf-member--reveal.is-flipped .sf-member__inner { transform: none; transform-style: flat; }
.sf-member--reveal .sf-member__face--back { z-index: 2; transform: translateY(102%); -webkit-backface-visibility: visible; backface-visibility: visible; background: var(--sf-ink); color: var(--sf-on-ink); transition: transform .6s var(--sf-spring); }
.sf-member--reveal .sf-member__face--back .sf-member__bio, .sf-member--reveal .sf-member__face--back .sf-member__role { color: inherit; opacity: .8; }
.sf-member--reveal .sf-member__link { background: var(--sf-on-ink); color: var(--sf-ink); }
.sf-member--reveal:hover .sf-member__face--back, .sf-member--reveal:focus-within .sf-member__face--back, .sf-member--reveal.is-flipped .sf-member__face--back { transform: none; }
.sf-bios { display: grid; gap: 14px; }
.sf-bio { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 24px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .4s var(--sf-spring); }
.sf-bio:hover { transform: translateX(6px); }
.sf-bio .sf-avatar { width: 64px; height: 64px; font-size: 22px; }
.sf-bio__name { margin: 0; font-size: 18px; font-weight: 700; }
.sf-bio__role { margin: 2px 0 8px; font-size: 14px; color: var(--sf-muted); }
.sf-bio__text { margin: 0; font-size: 15px; line-height: 1.55; }
.sf-bio__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- 8. Case study + results strip ---------- */
.sf-case { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .45s var(--sf-spring); }
.sf-case:hover { transform: translateY(-6px) rotate(-.5deg); }
.sf-case__cover { display: grid; place-items: center; min-height: 150px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; transition: letter-spacing .5s var(--sf-spring); }
.sf-case:hover .sf-case__cover { letter-spacing: .02em; }
.sf-case__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px 28px 28px; }
.sf-case__tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-case__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.sf-case__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sf-muted); }
.sf-case__metrics { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: auto 0 0; padding: 12px 0 0; }
.sf-case__metric { display: grid; }
.sf-case__metric b { font-size: 30px; letter-spacing: -.03em; }
.sf-case__metric span { font-size: 13px; color: var(--sf-muted); }
.sf-case__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.sf-case__more .sf-conv-ico { transition: transform .4s var(--sf-spring); }
.sf-case:hover .sf-case__more .sf-conv-ico, .sf-post-row:hover .sf-post-row__arrow .sf-conv-ico, .sf-post-featured:hover .sf-case__more .sf-conv-ico { transform: translateX(6px); }
.sf-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; padding: clamp(24px, 4vw, 40px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-results__item { display: grid; gap: 4px; align-content: start; transition: transform .4s var(--sf-spring); }
.sf-results__item:hover { transform: translateY(-4px) rotate(-1deg); }
.sf-results__num { font-size: clamp(36px, 5vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-results__label { font-size: 14px; color: var(--sf-muted); line-height: 1.4; }
.sf-results--ink { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-results--ink .sf-results__label { color: inherit; opacity: .72; }

/* ---------- 9. Blog ---------- */
.sf-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.sf-post { position: relative; display: flex; flex-direction: column; gap: 16px; transition: transform .45s var(--sf-spring); }
.sf-post:hover { transform: translateY(-6px); }
.sf-post__body { display: flex; flex-direction: column; gap: 8px; }
.sf-post__cat { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-post__title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.sf-post__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sf-muted); }
.sf-post__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--sf-muted); }
.sf-post__meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background: var(--sf-line); }
.sf-post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-line); }
.sf-post-row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--sf-line); border-radius: 4px; transition: padding .45s var(--sf-spring), background .2s ease; }
.sf-post-row:hover { padding-left: 20px; padding-right: 20px; background: var(--sf-surface); }
.sf-post-row__date { font-size: 14px; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-post-row__title { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sf-post-row__text { margin: 0; font-size: 15px; color: var(--sf-muted); line-height: 1.5; }
.sf-post-row__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sf-fill); transition: background .25s ease, color .25s ease, transform .4s var(--sf-spring); }
.sf-post-row:hover .sf-post-row__arrow { background: var(--sf-ink); color: var(--sf-on-ink); transform: rotate(-45deg); }
.sf-post-row:hover .sf-post-row__arrow .sf-conv-ico { transform: none; }
.sf-post-featured { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .45s var(--sf-spring); }
.sf-post-featured:hover { transform: translateY(-5px) rotate(-.3deg); }
.sf-post-featured .sf-conv-media { aspect-ratio: auto; min-height: 280px; border-radius: 0; }
.sf-post-featured__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(24px, 4vw, 44px); }
.sf-post-featured__title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
.sf-tagchips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-tagchip { font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-tagchip:hover { transform: translateY(-2px) scale(1.04); }
.sf-tagchip:active { transform: scale(1.08, .88); }
.sf-tagchip:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-tagchip[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-tagchip__n { font-size: 12px; opacity: .65; }

/* ---------- 10. Product card ---------- */
.sf-product { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 20px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .45s var(--sf-spring); }
.sf-product:hover { transform: translateY(-6px) rotate(-.4deg); }
.sf-product:hover, .sf-product:focus-within { z-index: 2; } /* confetti from quick add flies over neighbouring cards */
.sf-product__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--sf-radius-lg) - 8px); overflow: hidden; isolation: isolate; }
.sf-product__media::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--sf-marketing-convert-cpaper) 45%, transparent); transition: transform .6s var(--sf-spring); }
.sf-product:hover .sf-product__media::before { transform: scale(1.12); }
.sf-product__thing { width: 40%; aspect-ratio: .8; border-radius: 22% 22% 16% 16%; background: var(--sf-marketing-convert-cink); transition: transform .6s var(--sf-spring); }
.sf-product__thing::after { content: ""; display: block; width: 40%; height: 12%; margin: 14% auto 0; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--sf-marketing-convert-cpaper) 80%, transparent); }
.sf-product__thing--box { aspect-ratio: 1.1; width: 44%; border-radius: 18%; }
.sf-product__thing--ball { aspect-ratio: 1; width: 42%; border-radius: 50%; }
.sf-product__thing--ball::after { margin-top: 24%; }
.sf-product:hover .sf-product__thing { transform: rotate(-8deg) translateY(-6px) scale(1.05); }
.sf-product__tag { position: absolute; left: 12px; top: 12px; }
.sf-product__heart { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-product__heart:hover { transform: scale(1.12); }
.sf-product__heart:active { transform: scale(.88); }
.sf-product__heart:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-product__heart svg { width: 22px; height: 22px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .2s ease, stroke .2s ease; }
.sf-product__heart[aria-pressed="true"] svg { fill: var(--sf-danger); stroke: var(--sf-danger); }
.sf-product__heart.is-pop svg { animation: sf-marketing-convert-heart .6s var(--sf-spring); }
.sf-product__info { display: grid; gap: 6px; padding: 0 10px; }
.sf-product__name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sf-product__sub { margin: 0; font-size: 14px; color: var(--sf-muted); }
.sf-product__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sf-muted); }
.sf-product__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; }
.sf-product__price { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sf-product__was { font-size: 14px; font-weight: 500; color: var(--sf-muted); text-decoration: line-through; }

/* ---------- 11. Review stars + review item ---------- */
.sf-review-stars { --sf-rating: 5; --sf-review-stars-size: 18px; display: inline-block; flex: none; vertical-align: middle; width: calc(var(--sf-review-stars-size) * 5); height: var(--sf-review-stars-size); background: linear-gradient(90deg, var(--sf-marketing-convert-star) calc(var(--sf-rating) * 20%), var(--sf-line) calc(var(--sf-rating) * 20%)); -webkit-mask: var(--sf-marketing-convert-starmask) 0 0 / var(--sf-review-stars-size) var(--sf-review-stars-size) repeat-x; mask: var(--sf-marketing-convert-starmask) 0 0 / var(--sf-review-stars-size) var(--sf-review-stars-size) repeat-x; }
.sf-review-stars--sm { --sf-review-stars-size: 14px; }
.sf-review-stars--lg { --sf-review-stars-size: 28px; }
.sf-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-rate input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-rate label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.sf-rate label::before { content: ""; width: 32px; height: 32px; background: var(--sf-line); -webkit-mask: var(--sf-marketing-convert-starmask) center / contain no-repeat; mask: var(--sf-marketing-convert-starmask) center / contain no-repeat; transition: transform .35s var(--sf-spring), background .2s ease; }
.sf-rate input:checked ~ label::before, .sf-rate label:hover::before, .sf-rate label:hover ~ label::before { background: var(--sf-marketing-convert-star); }
.sf-rate label:hover::before { transform: scale(1.25) rotate(-10deg); }
.sf-rate input:focus-visible + label { outline: 3px solid var(--sf-ink); outline-offset: -4px; border-radius: 12px; }
.sf-rsum { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: center; padding: 24px 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-rsum__avg { display: grid; gap: 6px; justify-items: start; }
.sf-rsum__avg b { font-size: 56px; line-height: 1; letter-spacing: -.04em; }
.sf-rsum__bars { display: grid; gap: 6px; min-width: 160px; }
.sf-rsum__row { display: grid; grid-template-columns: 14px 1fr 32px; gap: 10px; align-items: center; font-size: 13px; color: var(--sf-muted); }
.sf-rsum__row .sf-progress { height: 8px; }
.sf-review { display: grid; gap: 12px; padding: 24px 26px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sf-review__who { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.sf-review__name .sf-badge { white-space: nowrap; }
.sf-review__name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-review__date { font-size: 13px; color: var(--sf-muted); }
.sf-review__title { margin: 0; font-size: 17px; font-weight: 700; }
.sf-review__text { margin: 0; font-size: 15px; line-height: 1.6; }
.sf-review__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--sf-muted); }
.sf-review__helpful { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: transform .3s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-review__helpful:hover { transform: translateY(-2px) scale(1.04); }
.sf-review__helpful:active { transform: scale(1.08, .88); }
.sf-review__helpful:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-review__helpful[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-on-ink); }

/* ---------- 12. Countdown ---------- */
.sf-countdown { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.4vw, 22px); font-size: clamp(34px, 8vw, 56px); }
.sf-countdown__unit { display: grid; gap: 10px; justify-items: center; }
.sf-countdown__digits { display: flex; gap: .07em; }
.sf-countdown__label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-countdown--sm { font-size: clamp(24px, 6vw, 34px); gap: 10px; }
.sf-countdown--sm .sf-countdown__label { font-size: 11px; }
.sf-countdown__done { margin: 0; text-align: center; font-weight: 600; font-size: 18px; }
.sf-cdflip { position: relative; display: inline-block; width: .9em; height: 1.24em; perspective: 320px; font-variant-numeric: tabular-nums; }
.sf-cdflip::after { content: ""; position: absolute; z-index: 6; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--sf-bg); }
.sf-cdflip__half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-cdflip__half > b { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-size: .78em; font-weight: 700; line-height: 1; }
.sf-cdflip__up, .sf-cdflip__flap-up { top: 0; border-radius: .16em .16em 0 0; }
.sf-cdflip__up > b, .sf-cdflip__flap-up > b { top: 0; }
.sf-cdflip__down, .sf-cdflip__flap-down { bottom: 0; border-radius: 0 0 .16em .16em; }
.sf-cdflip__down > b, .sf-cdflip__flap-down > b { bottom: 0; }
.sf-cdflip__flap-up, .sf-cdflip__flap-down { z-index: 3; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sf-cdflip__flap-up { transform-origin: 50% 100%; }
.sf-cdflip__flap-down { transform-origin: 50% 0; }
.sf-cdflip.is-flipping .sf-cdflip__flap-up { visibility: visible; animation: sf-marketing-convert-flip-top .28s ease-in forwards; }
.sf-cdflip.is-flipping .sf-cdflip__flap-down { visibility: visible; animation: sf-marketing-convert-flip-bottom .5s var(--sf-spring) .28s both; }

/* ---------- 13. Cookie / consent banner ---------- */
.sf-cookie { position: fixed; z-index: 900; left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 760px; margin: 0 auto; padding: 22px 24px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); box-shadow: 0 24px 60px rgba(0,0,0,.18); animation: sf-marketing-convert-up .7s var(--sf-spring) both; }
.sf-cookie:not(.sf-cookie--static) { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 520px) { .sf-cookie:not(.sf-cookie--static) { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 20px 18px; max-height: calc(100dvh - 20px); } }
.sf-cookie.is-leaving { animation: sf-marketing-convert-down .35s ease both; }
.sf-cookie--static { position: relative; inset: auto; z-index: auto; margin: 0 auto; box-shadow: none; }
.sf-cookie__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.sf-cookie__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sf-muted); }
.sf-cookie__prefs { display: grid; gap: 4px; margin: 16px 0 0; padding: 0; border: 0; }
.sf-cookie__pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--sf-line); cursor: pointer; }
.sf-cookie__pref b { display: block; font-size: 15px; }
.sf-cookie__pref small { display: block; font-size: 13px; color: var(--sf-muted); line-height: 1.4; }
.sf-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.sf-cookie__actions .sf-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .sf-cookie__actions .sf-btn { flex: 0 0 auto; } }

/* ---------- 14. Contact form block ---------- */
.sf-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 56px); padding: clamp(24px, 5vw, 48px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-contact__title { margin: 0 0 10px; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.sf-contact__lede { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: var(--sf-muted); }
.sf-contact__channels { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sf-contact__channels li { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.sf-contact__channels .sf-contact__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sf-fill); transition: transform .35s var(--sf-spring); }
.sf-contact__channels li:hover .sf-contact__icon { transform: scale(1.12) rotate(-8deg); }
.sf-contact__channels small { display: block; color: var(--sf-muted); font-size: 13px; }
.sf-contact__panel { position: relative; min-width: 0; }
.sf-contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sf-contact__form .sf-field--full { grid-column: 1 / -1; }
.sf-contact__form .sf-input[data-state="valid"], .sf-contact__form .sf-textarea[data-state="valid"] { border-color: var(--sf-marketing-convert-ok); }
.sf-contact__form .sf-error { display: flex; align-items: center; gap: 6px; animation: sf-marketing-convert-err .35s var(--sf-spring); }
.sf-contact__form .sf-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.sf-contact__success { display: grid; justify-items: center; gap: 12px; padding: 36px 12px; text-align: center; }
.sf-contact__success h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sf-contact__success p { margin: 0 0 8px; color: var(--sf-muted); max-width: 34ch; line-height: 1.5; }
.sf-contact__check { width: 84px; height: 84px; }
.sf-contact__check circle { fill: var(--sf-marketing-convert-ok); transform-origin: center; animation: sf-marketing-convert-pop .7s var(--sf-spring) both; }
.sf-contact__check path { fill: none; stroke: var(--sf-marketing-convert-cink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: sf-marketing-convert-draw .5s var(--sf-ease) .35s forwards; }

/* ---------- 15. App store / download buttons ---------- */
.sf-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-store { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 16px; border-radius: var(--sf-radius); background: var(--sf-ink); color: var(--sf-on-ink); text-decoration: none; transition: transform .3s var(--sf-spring); }
.sf-store:hover { transform: translateY(-3px) scale(1.04); }
.sf-store:active { transform: scale(1.06, .9); }
.sf-store:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-store__glyph { position: relative; display: block; flex: none; width: 28px; height: 28px; }
.sf-store__glyph::before, .sf-store__glyph::after { content: ""; position: absolute; transition: transform .5s var(--sf-spring); }
.sf-store__glyph--ring::before { inset: 2px; border: 4px solid currentColor; border-radius: 50%; }
.sf-store__glyph--ring::after { right: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sf-store__glyph--bars::before { left: 3px; top: 4px; width: 22px; height: 6px; border-radius: 4px; background: currentColor; box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor; }
.sf-store__glyph--bars::after { display: none; }
.sf-store__glyph--diamond::before { inset: 4px; border-radius: 6px; background: currentColor; transform: rotate(45deg); }
.sf-store__glyph--diamond::after { inset: 10px; border-radius: 50%; background: var(--sf-ink); transform: scale(1); }
.sf-store:hover .sf-store__glyph--ring::before { transform: rotate(120deg); }
.sf-store:hover .sf-store__glyph--ring::after { transform: translate(-3px, 3px); }
.sf-store:hover .sf-store__glyph--diamond::before { transform: rotate(135deg) scale(1.08); }
.sf-store__text { display: grid; line-height: 1.15; text-align: left; }
.sf-store__text small { font-size: 12px; opacity: .8; }
.sf-store__text strong { font-size: 18px; letter-spacing: -.01em; }
.sf-store--light { background: var(--sf-surface); color: var(--sf-ink); box-shadow: inset 0 0 0 2px var(--sf-line); }
.sf-store--light .sf-store__glyph--diamond::after { background: var(--sf-surface); }
.sf-store--outline { background: transparent; color: var(--sf-ink); box-shadow: inset 0 0 0 2px var(--sf-ink); }
.sf-store--outline .sf-store__glyph--diamond::after { background: var(--sf-bg); }
.sf-store--sm { min-height: 46px; padding: 0 18px 0 12px; }
.sf-store--sm .sf-store__text strong { font-size: 16px; }

/* ---------- 16. Trust badges + guarantee strip ---------- */
.sf-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sf-trust__item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--sf-radius); background: var(--sf-surface); transition: transform .4s var(--sf-spring); }
.sf-trust__item:hover { transform: translateY(-4px) rotate(-.6deg); }
.sf-trust__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sf-fill); transition: transform .5s var(--sf-spring); }
.sf-trust__item:hover .sf-trust__icon { transform: rotate(-12deg) scale(1.12); }
.sf-trust__title { display: block; font-weight: 700; font-size: 15px; }
.sf-trust__sub { display: block; font-size: 13px; color: var(--sf-muted); line-height: 1.4; }
.sf-guarantee { display: flex; align-items: center; gap: clamp(18px, 4vw, 36px); flex-wrap: wrap; padding: clamp(22px, 4vw, 36px); border-radius: var(--sf-radius-lg); background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-guarantee__seal { position: relative; flex: none; display: grid; place-items: center; width: 112px; height: 112px; }
.sf-guarantee__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: sf-marketing-convert-spin 22s linear infinite; }
.sf-guarantee__seal text { fill: var(--sf-on-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-family: inherit; }
.sf-guarantee__seal b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--sf-marketing-convert-c2); color: var(--sf-marketing-convert-cink); font-size: 22px; letter-spacing: -.03em; }
.sf-guarantee__copy { flex: 1 1 240px; }
.sf-guarantee__title { margin: 0 0 6px; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.sf-guarantee__text { margin: 0; font-size: 15px; line-height: 1.55; opacity: .78; max-width: 52ch; }
.sf-guarantee .sf-btn { background: var(--sf-on-ink); color: var(--sf-ink); }

/* ---------- 17. Video testimonial ---------- */
.sf-vtest { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 20px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); transition: transform .45s var(--sf-spring); }
.sf-vtest:hover { transform: translateY(-5px) rotate(-.4deg); }
.sf-vtest__poster { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: calc(var(--sf-radius-lg) - 8px); cursor: pointer; font: inherit; }
.sf-vtest__poster:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-vtest__person { position: absolute; z-index: -1; left: 50%; bottom: 0; width: 34%; transform: translateX(-50%); transition: transform .6s var(--sf-spring); }
.sf-vtest__person::before { content: ""; display: block; width: 52%; aspect-ratio: 1; margin: 0 auto 4%; border-radius: 50%; background: color-mix(in srgb, var(--sf-marketing-convert-cink) 22%, transparent); }
.sf-vtest__person::after { content: ""; display: block; height: 0; padding-top: 70%; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--sf-marketing-convert-cink) 22%, transparent); }
.sf-vtest__poster:hover .sf-vtest__person { transform: translateX(-50%) translateY(-6px) scale(1.04); }
.sf-vtest__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); transition: transform .4s var(--sf-spring); }
.sf-vtest__play::before { content: ""; margin-left: 5px; border-left: 20px solid currentColor; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.sf-vtest__poster:hover .sf-vtest__play { transform: scale(1.15); }
.sf-vtest__poster:active .sf-vtest__play { transform: scale(.92); }
.sf-vtest__poster::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; border: 2px solid var(--sf-surface); animation: sf-marketing-convert-ping 2.2s var(--sf-ease) infinite; pointer-events: none; }
.sf-vtest__time { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-vtest__info { display: grid; gap: 4px; padding: 0 10px; }
.sf-vtest__quote { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.sf-vtest__who { font-size: 14px; color: var(--sf-muted); }
.sf-modal.sf-vmodal { width: min(94vw, 820px); max-width: none; padding: 0; overflow: hidden; }
.sf-vmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 24px; }
.sf-vmodal__title { margin: 0 !important; font-size: 17px !important; letter-spacing: -.01em; }
.sf-vmodal__screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--sf-fill); color: var(--sf-muted); text-align: center; }
.sf-vmodal__screen iframe, .sf-vmodal__screen video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-vmodal__shell { display: grid; gap: 6px; justify-items: center; padding: 16px; font-size: 14px; }
.sf-vmodal__shell code { font-size: 13px; }
.sf-vmodal__ctrl { display: flex; align-items: center; gap: 14px; padding: 14px 20px 20px; }
.sf-vmodal__toggle { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-ink); color: var(--sf-on-ink); cursor: pointer; transition: transform .3s var(--sf-spring); }
.sf-vmodal__toggle:hover { transform: scale(1.1); }
.sf-vmodal__toggle:active { transform: scale(.9); }
.sf-vmodal__toggle:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-vmodal__toggle::before { content: ""; position: absolute; left: 19px; top: 14px; border-left: 14px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sf-vmodal__toggle[aria-pressed="true"]::before { left: 16px; top: 15px; width: 16px; height: 18px; border: 0; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.sf-vmodal__bar { flex: 1; }
.sf-vmodal__bar > span { transition: width .25s linear; }
.sf-vmodal__time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--sf-muted); }

/* ---------- 18. Press strip ---------- */
.sf-press { display: grid; gap: 20px; justify-items: center; text-align: center; }
.sf-press__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-press__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 44px; margin: 0; padding: 0; list-style: none; }
.sf-press__logo { display: inline-block; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--sf-muted); white-space: nowrap; transition: color .2s ease, transform .35s var(--sf-spring); cursor: default; }
.sf-press__logo:hover { color: var(--sf-ink); transform: translateY(-3px) rotate(-2deg); }
.sf-press__logo--caps { font-size: 20px; letter-spacing: .16em; text-transform: uppercase; }
.sf-press__logo--italic { font-style: italic; font-weight: 600; letter-spacing: -.02em; }
.sf-press__logo--light { font-weight: 400; letter-spacing: .02em; }
.sf-press__logo--mono { font-weight: 500; letter-spacing: -.06em; }
.sf-press__logo--mono::before { content: "["; margin-right: 2px; }
.sf-press__logo--mono::after { content: "]"; margin-left: 2px; }
.sf-press--marquee { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sf-press__track { display: flex; width: max-content; gap: 56px; padding-right: 56px; animation: sf-marketing-convert-marquee 28s linear infinite; }
.sf-press--marquee:hover .sf-press__track { animation-play-state: paused; }
.sf-press__track .sf-press__row { flex-wrap: nowrap; gap: 56px; justify-content: flex-start; }

/* ---------- 19. 404 + Coming soon ---------- */
.sf-404 { display: grid; justify-items: center; gap: 18px; padding: clamp(36px, 8vw, 88px) 20px; text-align: center; }
.sf-404__code { display: flex; align-items: center; justify-content: center; gap: .02em; margin: 0; font-size: clamp(100px, 26vw, 220px); line-height: 1; font-weight: 700; letter-spacing: -.06em; }
.sf-404__digit { display: inline-block; animation: sf-marketing-convert-bounce 2.6s var(--sf-spring) infinite; }
.sf-404__digit:last-child { animation-delay: .35s; }
.sf-404__zero { position: relative; flex: none; width: .74em; height: .74em; margin: 0 .03em; border-radius: 50%; background: var(--sf-ink); animation: sf-marketing-convert-wobble 5s ease-in-out infinite; }
.sf-404__eye { position: absolute; top: 28%; width: 21%; height: 21%; overflow: hidden; border-radius: 50%; background: var(--sf-on-ink); }
.sf-404__eye:nth-child(1) { left: 22%; }
.sf-404__eye:nth-child(2) { right: 22%; }
.sf-404__eye::after { content: ""; position: absolute; left: 25%; top: 25%; width: 52%; height: 52%; border-radius: 50%; background: var(--sf-ink); animation: sf-marketing-convert-look 6s ease-in-out infinite; }
.sf-404__mouth { position: absolute; left: 50%; bottom: 20%; width: 34%; height: 15%; margin-left: -17%; border-top: .028em solid var(--sf-on-ink); border-radius: 50% 50% 0 0; }
.sf-404__title { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: -.025em; }
.sf-404__text { margin: 0; max-width: 42ch; color: var(--sf-muted); line-height: 1.55; }
.sf-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.sf-soon { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 22px; padding: clamp(48px, 9vw, 104px) 20px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); text-align: center; }
.sf-soon__blob { position: absolute; z-index: -1; right: -120px; top: -130px; width: 380px; height: 380px; background: var(--sf-fill); animation: sf-marketing-convert-morph 9s ease-in-out infinite; }
.sf-soon__blob--b { right: auto; top: auto; left: -140px; bottom: -170px; width: 320px; height: 320px; background: color-mix(in srgb, var(--sf-marketing-convert-c3) 38%, transparent); animation-duration: 12s; animation-direction: reverse; }
.sf-soon__title { margin: 0; max-width: 14ch; font-size: clamp(36px, 7vw, 72px); line-height: 1.08; font-weight: 700; letter-spacing: -.045em; }
.sf-soon__word { display: inline-block; animation: sf-marketing-convert-word .9s var(--sf-spring) both; }
.sf-soon__word:nth-child(2) { animation-delay: .08s; }
.sf-soon__word:nth-child(3) { animation-delay: .16s; }
.sf-soon__word:nth-child(4) { animation-delay: .24s; }
.sf-soon__word:nth-child(5) { animation-delay: .32s; }
.sf-soon__lede { margin: 0; max-width: 44ch; color: var(--sf-muted); font-size: 17px; line-height: 1.55; }
.sf-soon__form { display: flex; gap: 10px; width: min(100%, 460px); text-align: left; align-items: flex-start; }
.sf-soon__form .sf-field { flex: 1; min-width: 0; }
.sf-soon__form .sf-btn { margin-top: 0; }
.sf-soon__done { display: flex; align-items: center; gap: 10px; font-weight: 600; animation: sf-marketing-convert-pop .6s var(--sf-spring); }
.sf-soon__done .sf-conv-tick { background: var(--sf-marketing-convert-ok); }
.sf-soon__done .sf-conv-tick::after { border-color: var(--sf-marketing-convert-cink); }
.sf-soon__progress { display: grid; gap: 8px; width: min(100%, 360px); font-size: 13px; color: var(--sf-muted); }
.sf-soon__progress span { display: flex; justify-content: space-between; }
@media (max-width: 520px) {
  .sf-soon__form { flex-direction: column; align-items: stretch; }
  .sf-soon__blob { width: 260px; height: 260px; right: -110px; top: -120px; }
  .sf-soon__blob--b { width: 220px; height: 220px; left: -110px; bottom: -130px; }
}

/* ---------- 20. Legal / document layout ---------- */
.sf-legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; padding: clamp(22px, 4vw, 44px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-legal { --sf-legal-offset: 24px; }
.sf-legal__toc { position: sticky; top: var(--sf-legal-offset); display: grid; gap: 10px; align-content: start; max-height: calc(100vh - var(--sf-legal-offset) - 16px); overflow-y: auto; }
.sf-legal__toc-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-legal__toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--sf-line); }
.sf-legal__toc a { display: block; margin-left: -2px; padding: 9px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--sf-muted); text-decoration: none; transition: color .2s ease, padding .35s var(--sf-spring), border-color .2s ease; }
.sf-legal__toc a:hover { color: var(--sf-ink); padding-left: 20px; }
.sf-legal__toc a[aria-current="true"] { color: var(--sf-ink); font-weight: 600; border-left-color: var(--sf-ink); }
.sf-legal__toc a:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; border-radius: 6px; }
.sf-legal__doc { min-width: 0; }
.sf-legal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; font-size: 14px; color: var(--sf-muted); }
.sf-legal__title { margin: 0 0 8px; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; }
.sf-legal__prose { max-width: 68ch; font-size: 16px; line-height: 1.75; }
.sf-legal__prose h2 { margin: 40px 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; scroll-margin-top: calc(var(--sf-legal-offset) + 8px); }
.sf-legal__prose p { margin: 0 0 14px; }
.sf-legal__prose ul { margin: 0 0 14px; padding-left: 22px; }
.sf-legal__prose li { margin-bottom: 6px; }
.sf-legal__note { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--sf-radius); background: var(--sf-fill); font-size: 14px; line-height: 1.5; color: var(--sf-muted); }

/* ---------- 21. Pricing calculator ---------- */
.sf-calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-calc__inputs { display: grid; gap: 26px; align-content: start; padding: clamp(22px, 4vw, 40px); }
.sf-calc__row { display: grid; gap: 4px; }
.sf-calc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-calc__name { font-weight: 700; font-size: 16px; }
.sf-calc__value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sf-calc__range { --sf-calc-pct: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.sf-calc__range:focus { outline: none; }
.sf-calc__range::-webkit-slider-runnable-track { height: 12px; border-radius: var(--sf-pill); background: linear-gradient(90deg, var(--sf-ink) var(--sf-calc-pct), var(--sf-fill) var(--sf-calc-pct)); }
.sf-calc__range::-moz-range-track { height: 12px; border-radius: var(--sf-pill); background: var(--sf-fill); }
.sf-calc__range::-moz-range-progress { height: 12px; border-radius: var(--sf-pill); background: var(--sf-ink); }
.sf-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border: 5px solid var(--sf-ink); border-radius: 50%; background: var(--sf-surface); transition: transform .35s var(--sf-spring); }
.sf-calc__range::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border: 5px solid var(--sf-ink); border-radius: 50%; background: var(--sf-surface); transition: transform .35s var(--sf-spring); }
.sf-calc__range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.sf-calc__range:active::-webkit-slider-thumb { transform: scale(1.3, .9); }
.sf-calc__range:hover::-moz-range-thumb { transform: scale(1.15); }
.sf-calc__range:active::-moz-range-thumb { transform: scale(1.3, .9); }
.sf-calc__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-calc__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-calc__scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--sf-muted); }
.sf-calc__cycle { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-weight: 600; }
.sf-calc__summary { display: grid; gap: 18px; align-content: space-between; padding: clamp(22px, 4vw, 40px); background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-calc__lines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.sf-calc__lines li { display: flex; justify-content: space-between; gap: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.sf-calc__total { display: grid; gap: 4px; }
.sf-calc__total-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.sf-calc__amount { display: flex; align-items: baseline; gap: 6px; font-size: 60px; font-weight: 700; letter-spacing: -.04em; }
.sf-calc__amount small { font-size: 15px; font-weight: 500; letter-spacing: 0; opacity: .7; }
.sf-calc__amount .sf-calc__cur { align-self: flex-start; margin-top: 14px; font-size: 26px; }
.sf-calc__save { margin: 0; min-height: 1.4em; font-size: 14px; opacity: .85; }
.sf-calc__summary .sf-btn { background: var(--sf-on-ink); color: var(--sf-ink); }

/* ---------- 22. Referral / share card ---------- */
.sf-referral { display: grid; gap: 20px; max-width: 560px; padding: clamp(22px, 4vw, 36px); border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-referral__head { display: flex; align-items: flex-start; gap: 16px; }
.sf-referral__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--sf-marketing-convert-c2); color: var(--sf-marketing-convert-cink); animation: sf-bob 2.4s ease-in-out infinite; }
.sf-referral__title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.sf-referral__text { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--sf-muted); }
.sf-referral__progress { display: grid; gap: 8px; font-size: 14px; color: var(--sf-muted); }
.sf-referral__progress span { display: flex; justify-content: space-between; }
.sf-referral__progress b { color: var(--sf-ink); }
.sf-referral__link { display: flex; gap: 10px; }
.sf-referral__input { flex: 1; min-width: 0; text-overflow: ellipsis; }
.sf-referral__link .sf-btn { flex: none; min-width: 112px; }
.sf-referral__share { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.sf-referral__target { display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--sf-ink); text-decoration: none; cursor: pointer; }
.sf-referral__target span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sf-fill); transition: transform .4s var(--sf-spring), background .2s ease, color .2s ease; }
.sf-referral__target:hover span { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-referral__target:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; border-radius: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .sf-contact { grid-template-columns: 1fr; }
  .sf-contact__form { grid-template-columns: 1fr; }
  .sf-post-featured { grid-template-columns: 1fr; }
  .sf-post-featured .sf-conv-media { min-height: 200px; }
  .sf-calc { grid-template-columns: 1fr; }
  .sf-plan-compare__hint { display: block; }
  .sf-plan-compare__table { min-width: 540px; font-size: 14px; }
  .sf-plan-compare__table thead th:first-child, .sf-plan-compare__table tbody th[scope="row"] { width: 128px; min-width: 128px; padding-left: 14px; padding-right: 10px; box-shadow: inset -1px 0 0 var(--sf-line); }
  .sf-plan-compare__table thead th, .sf-plan-compare__table tbody td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 820px) {
  .sf-legal { grid-template-columns: 1fr; }
  .sf-legal__toc { position: static; max-height: none; padding: 16px 18px; border-radius: var(--sf-radius); background: var(--sf-fill); }
}
@media (max-width: 640px) {
  .sf-post-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-post-row__date { grid-column: 1 / -1; }
  .sf-founder { grid-template-columns: 1fr; }
  .sf-rsum { grid-template-columns: 1fr; }
  .sf-referral__link { flex-direction: column; }
  .sf-plan__amount { font-size: 48px; }
}

/* ---------- Keyframes ---------- */
@keyframes sf-marketing-convert-pop { 0% { transform: scale(.6) rotate(-10deg); } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes sf-marketing-convert-badge { 0%, 70%, 100% { transform: translateX(-50%) scale(1); } 80% { transform: translateX(-50%) scale(1.1) rotate(-3deg); } 90% { transform: translateX(-50%) scale(.97) rotate(2deg); } }
@keyframes sf-marketing-convert-heart { 0% { transform: scale(1); } 30% { transform: scale(1.55) rotate(-10deg); } 60% { transform: scale(.85) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes sf-marketing-convert-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-marketing-convert-err { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes sf-marketing-convert-up { 0% { opacity: 0; transform: translateY(60px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes sf-marketing-convert-down { to { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes sf-marketing-convert-flip-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes sf-marketing-convert-flip-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes sf-marketing-convert-spin { to { transform: rotate(360deg); } }
@keyframes sf-marketing-convert-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sf-marketing-convert-marquee { to { transform: translateX(-50%); } }
@keyframes sf-marketing-convert-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-.08em) scale(1.02, .98); } 55% { transform: translateY(0) scale(1.04, .94); } }
@keyframes sf-marketing-convert-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateY(-.02em); } 75% { transform: rotate(6deg) translateY(-.02em); } }
@keyframes sf-marketing-convert-look { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-32%, 0); } 35% { transform: translate(32%, 10%); } 55% { transform: translate(0, -28%); } 75% { transform: translate(-28%, 20%); } }
@keyframes sf-marketing-convert-word { 0% { opacity: 0; transform: translateY(60px) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes sf-marketing-convert-morph { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: rotate(0); } 33% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; transform: rotate(40deg); } 66% { border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; transform: rotate(-30deg); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.sf-roll, .sf-pricing, .sf-billing, .sf-plan-compare, .sf-testimonial, .sf-wall, .sf-tcarousel, .sf-pullquote, .sf-founder, .sf-faq, .sf-team, .sf-member, .sf-bios, .sf-case, .sf-results, .sf-posts, .sf-post, .sf-post-list, .sf-post-featured, .sf-tagchips, .sf-product, .sf-review-stars, .sf-rate, .sf-rsum, .sf-review, .sf-countdown, .sf-cookie, .sf-contact, .sf-stores, .sf-store, .sf-trust, .sf-guarantee, .sf-vtest, .sf-vmodal, .sf-press, .sf-404, .sf-soon, .sf-legal, .sf-calc, .sf-referral, .sf-conv-switch, .sf-conv-media) , :is(.sf-roll, .sf-pricing, .sf-billing, .sf-plan-compare, .sf-testimonial, .sf-wall, .sf-tcarousel, .sf-pullquote, .sf-founder, .sf-faq, .sf-team, .sf-member, .sf-bios, .sf-case, .sf-results, .sf-posts, .sf-post, .sf-post-list, .sf-post-featured, .sf-tagchips, .sf-product, .sf-rsum, .sf-review, .sf-countdown, .sf-cookie, .sf-contact, .sf-stores, .sf-store, .sf-trust, .sf-guarantee, .sf-vtest, .sf-vmodal, .sf-press, .sf-404, .sf-soon, .sf-legal, .sf-calc, .sf-referral) *,
  .sf-conv-media::before, .sf-conv-media::after, .sf-conv-switch::after, .sf-product__media::before, .sf-faq__item::details-content, .sf-vtest__poster::after, .sf-store__glyph::before, .sf-store__glyph::after {
    animation: none !important; transition: none !important;
  }
  .sf-plan__badge, .sf-404__digit, .sf-404__zero, .sf-soon__blob, .sf-referral__icon, .sf-guarantee__seal svg { animation: none !important; }
  .sf-vtest__poster::after { display: none; }
  .sf-founder__sign svg, .sf-contact__check path { stroke-dashoffset: 0; }
  .sf-press--marquee { -webkit-mask: none; mask: none; }
  .sf-press__track { animation: none !important; width: auto; padding-right: 0; flex-wrap: wrap; justify-content: center; }
  .sf-press__track .sf-press__row { flex-wrap: wrap; justify-content: center; gap: 14px 44px; }
  .sf-press__track .sf-press__row[aria-hidden="true"] { display: none; }
  .sf-tcarousel__track { scroll-behavior: auto; }
}


/* ===== Motion (fx-motion) ===== */
/* fx-motion: scroll, text and page-level animation effects for Soft.
   Needs soft.css (tokens). Optional behaviour: fx-motion.js.
   The hidden "before" states only apply once JS adds .sf-fxm-js to <html>
   (never under reduced motion), so content is always visible without JS. */

:root {
  --sf-fx-motion-pink: #FF5C8A;
  --sf-fx-motion-yellow: #FFC857;
  --sf-fx-motion-blue: #5CC8FF;
  --sf-fx-motion-green: #7AE582;
  --sf-fx-motion-rainbow: linear-gradient(90deg, #FF5C8A, #FFC857, #7AE582, #5CC8FF, #FF5C8A);
}

/* ---------- Shared helpers ---------- */
.sf-fxm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Scroll window: a self-contained scroller for scroll-driven effects (parallax, pinning, progress...).
   Fixed height (--sf-fx-motion-win-h), thin themed bar, soft fade edges that switch off at the ends.
   Effects inside follow this scroller automatically. Wrap it in .sf-fxm-window and add a
   .sf-fxm-window__hint to show a "scroll inside" pill that fades once the visitor scrolls. */
.sf-fxm-scroller {
  --sf-fx-motion-ft: 0px; --sf-fx-motion-fb: 44px;
  position: relative; height: var(--sf-fx-motion-win-h, 340px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--sf-radius-lg); background: var(--sf-surface);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sf-fx-motion-ft), #000 calc(100% - var(--sf-fx-motion-fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sf-fx-motion-ft), #000 calc(100% - var(--sf-fx-motion-fb)), transparent 100%);
}
.sf-fxm-scroller.is-scrolled { --sf-fx-motion-ft: 32px; }
.sf-fxm-scroller.is-end { --sf-fx-motion-fb: 0px; }
.sf-fxm-scroller--keep-top.is-scrolled { --sf-fx-motion-ft: 0px; } /* sticky bars at the top stay crisp */
.sf-fxm-scroller--fill { background: var(--sf-fill); }
.sf-fxm-scroller:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-fxm-scroller .sf-fxm-tile { background: var(--sf-fill); }
.sf-fxm-scroller--fill .sf-fxm-tile { background: var(--sf-surface); }
.sf-fxm-window { position: relative; }
.sf-fxm-window__hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); transition: opacity .35s var(--sf-ease), transform .5s var(--sf-spring);
}
.sf-fxm-window__hint::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: sf-fx-motion-nudge 1.6s var(--sf-ease) infinite; }
.sf-fxm-window.is-scrolled .sf-fxm-window__hint { opacity: 0; transform: translate(-50%, 10px) scale(.9); }
.sf-fxm-window__hint--top { top: 14px; bottom: auto; }
.sf-fxm-window.is-scrolled .sf-fxm-window__hint--top { transform: translate(-50%, -10px) scale(.9); }
@keyframes sf-fx-motion-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* ---------- 1 Scroll reveal  [data-sf-reveal] (+ 18 sequence steps share the variants) ---------- */
[data-sf-reveal="fade"], [data-sf-seq-step="fade"] { --sf-fx-motion-t: none; }
[data-sf-reveal="rise"], [data-sf-seq-step="rise"] { --sf-fx-motion-t: translate3d(0, 44px, 0); }
[data-sf-reveal="scale"], [data-sf-seq-step="scale"] { --sf-fx-motion-t: scale(.82); }
[data-sf-reveal="blur"], [data-sf-seq-step="blur"] { --sf-fx-motion-t: translate3d(0, 14px, 0); --sf-fx-motion-f: blur(14px); }
[data-sf-reveal="slide-left"], [data-sf-seq-step="slide-left"] { --sf-fx-motion-t: translate3d(-72px, 0, 0); }
[data-sf-reveal="slide-right"], [data-sf-seq-step="slide-right"] { --sf-fx-motion-t: translate3d(72px, 0, 0); }
[data-sf-reveal="flip"], [data-sf-seq-step="flip"] { --sf-fx-motion-t: perspective(800px) rotateX(-78deg) translateY(24px); --sf-fx-motion-o: 50% 0; }
[data-sf-reveal="pop"], [data-sf-seq-step="pop"] { --sf-fx-motion-t: translate3d(0, 36px, 0) scale(.55); --sf-fx-motion-s: cubic-bezier(.2, 1.9, .4, 1); }

.sf-fxm-js [data-sf-reveal]:not(.is-in),
.sf-fxm-js [data-sf-sequence]:not(.is-in) [data-sf-seq-step] {
  opacity: 0;
  transform: var(--sf-fx-motion-t, translate3d(0, 44px, 0));
  filter: var(--sf-fx-motion-f, none);
  transform-origin: var(--sf-fx-motion-o, 50% 50%);
}
.sf-fxm-js [data-sf-reveal]:not(.is-done),
.sf-fxm-js [data-sf-seq-step]:not(.is-done) {
  transition: opacity .7s var(--sf-ease), transform .95s var(--sf-fx-motion-s, var(--sf-spring)), filter .7s var(--sf-ease);
  transition-delay: var(--sf-fx-motion-d, 0ms);
}
.sf-fxm-js [data-sf-reveal].is-in, .sf-fxm-js [data-sf-sequence].is-in [data-sf-seq-step] { transform-origin: var(--sf-fx-motion-o, 50% 50%); }

/* Little demo tiles used by several examples */
.sf-fxm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.sf-fxm-tile { background: var(--sf-surface); border-radius: var(--sf-radius); padding: 18px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; font-weight: 600; }
.sf-fxm-tile small { font-weight: 500; color: var(--sf-muted); }
.sf-fxm-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--sf-ink); flex: none; }
.sf-fxm-dot--pink { background: var(--sf-fx-motion-pink); } .sf-fxm-dot--yellow { background: var(--sf-fx-motion-yellow); }
.sf-fxm-dot--blue { background: var(--sf-fx-motion-blue); } .sf-fxm-dot--green { background: var(--sf-fx-motion-green); }

/* ---------- 2 Scroll progress + reading progress  [data-sf-progress] ---------- */
.sf-fxm-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 900; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--sf-p, 0)); background: var(--sf-fx-motion-rainbow); background-size: 200% 100%; border-radius: 0 var(--sf-pill) var(--sf-pill) 0; }
.sf-fxm-progress--ink { background: var(--sf-ink); }
.sf-fxm-progress--sticky { position: sticky; z-index: 5; width: 100%; margin-bottom: -5px; }

/* ---------- 3 Parallax  [data-sf-parallax] ---------- */
.sf-fxm-parallax { position: relative; overflow: hidden; isolation: isolate; height: 300px; border-radius: var(--sf-radius-lg); background: var(--sf-fill); }
[data-sf-parallax] { will-change: transform; }
.sf-fxm-layer { position: absolute; display: grid; place-content: center; font-weight: 700; }
.sf-fxm-parallax__title { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 20px; font-size: clamp(30px, 7vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -.04em; z-index: 3; }
/* Tall scene inside a .sf-fxm-scroller: the title stays centred while layers drift past */
.sf-fxm-parallax--scene { height: calc(var(--sf-fx-motion-win-h, 340px) * 2.6); border-radius: 0; overflow: clip; }
.sf-fxm-parallax--scene .sf-fxm-parallax__title { position: sticky; inset: 0 auto auto; height: var(--sf-fx-motion-win-h, 340px); }

/* ---------- 4 Sticky scroll sections + pinned horizontal gallery ---------- */
.sf-fxm-hscroll { position: relative; --sf-fx-motion-pin-h: 70vh; }
.sf-fxm-hscroll__stage { overflow: hidden; }
.sf-fxm-hscroll__track { display: flex; gap: 18px; padding: 16px 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sf-fxm-hscroll__panel { flex: 0 0 min(78%, 360px); min-height: min(280px, calc(var(--sf-fx-motion-pin-h) - 100px)); background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; scroll-snap-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sf-fxm-hscroll__panel span { font-size: 14px; font-weight: 500; color: var(--sf-muted); letter-spacing: 0; }
.sf-fxm-hscroll__bar { display: none; }
.sf-fxm-hscroll.is-pinned .sf-fxm-hscroll__stage { position: sticky; top: 0; height: var(--sf-fx-motion-pin-h); display: flex; flex-direction: column; justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
.sf-fxm-hscroll.is-pinned .sf-fxm-hscroll__track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.sf-fxm-hscroll.is-pinned .sf-fxm-hscroll__bar { display: block; position: absolute; left: 32px; right: 32px; bottom: 18px; height: 6px; border-radius: var(--sf-pill); background: var(--sf-line); }
.sf-fxm-hscroll.is-pinned .sf-fxm-hscroll__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sf-ink); transform-origin: 0 50%; transform: scaleX(var(--sf-p, 0)); }

.sf-fxm-sticky { display: grid; grid-template-columns: 1fr; gap: 18px; }
.sf-fxm-sticky__pin { position: sticky; top: 12px; z-index: 2; height: 190px; background: var(--sf-surface); border-radius: var(--sf-radius-lg); overflow: hidden; }
.sf-fxm-sticky__panel { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 20px; opacity: 0; transform: scale(.88) rotate(-3deg); transition: opacity .35s var(--sf-ease), transform .7s var(--sf-spring); }
.sf-fxm-sticky__panel strong { font-size: clamp(28px, 6vw, 44px); letter-spacing: -.03em; }
.sf-fxm-sticky__panel.is-active { opacity: 1; transform: none; }
.sf-fxm-sticky__step { min-height: calc(var(--sf-fx-motion-view, 100vh) * .46); padding: 20px 4px; opacity: .3; transition: opacity .4s var(--sf-ease), transform .7s var(--sf-spring); transform: translateX(-8px); }
.sf-fxm-sticky__step.is-active { opacity: 1; transform: none; }
.sf-fxm-sticky__step h4 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.sf-fxm-sticky__step p { margin: 0; color: var(--sf-muted); line-height: 1.55; }
@media (min-width: 760px) {
  .sf-fxm-sticky { grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; }
  .sf-fxm-sticky__pin { top: 24px; height: 280px; }
  .sf-fxm-sticky__step { min-height: calc(var(--sf-fx-motion-view, 100vh) * .62); display: flex; flex-direction: column; justify-content: center; }
}
/* Inside a scroll window: pad the content so the pinned visual has room to stay pinned */
.sf-fxm-scroller > .sf-fxm-sticky { padding: 0 20px; }
.sf-fxm-scroller > .sf-fxm-sticky .sf-fxm-sticky__pin { background: var(--sf-fill); }
@media (max-width: 759px) {
  /* single column: steps slide under the pinned visual, so keep them from peeking around it */
  .sf-fxm-sticky__step { transform: none; }
  .sf-fxm-scroller > .sf-fxm-sticky .sf-fxm-sticky__pin { box-shadow: 0 -12px 0 8px var(--sf-surface); }
}

/* ---------- 5 Scroll-linked animation  [data-sf-scrollfx] ----------
   Uses CSS animation-timeline: view() where supported. Otherwise fx-motion.js writes
   --sf-vp (0 to 1 while entering) and --sf-vc (0 to 1 across the full pass) and the
   same look is built with calc(). */
.sf-fxm-scrollfx { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 28px; display: grid; place-content: center; text-align: center; min-height: 120px; font-weight: 700; font-size: 20px; }
.sf-fxm-scrollfx[data-sf-scrollfx="rotate"] { width: min(100%, 420px); justify-self: center; margin-inline: auto; }
.sf-fxm-scrollfx__bar { height: 12px; border-radius: var(--sf-pill); background: var(--sf-fill); overflow: hidden; }
.sf-fxm-scrollfx__bar::after { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--sf-fx-motion-rainbow); transform-origin: 0 50%; }
@keyframes sf-fx-motion-sl-scale { from { transform: scale(.55); opacity: .1; } to { transform: none; opacity: 1; } }
@keyframes sf-fx-motion-sl-slide { from { transform: translateX(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sf-fx-motion-sl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-fx-motion-sl-rotate { from { transform: rotate(-12deg) scale(.8); } to { transform: rotate(12deg) scale(1); } }
@keyframes sf-fx-motion-sl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  [data-sf-scrollfx="scale"] { animation: sf-fx-motion-sl-scale linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  [data-sf-scrollfx="slide"] { animation: sf-fx-motion-sl-slide linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  [data-sf-scrollfx="fade"] { animation: sf-fx-motion-sl-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  [data-sf-scrollfx="rotate"] { animation: sf-fx-motion-sl-rotate linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  [data-sf-scrollfx="bar"]::after { animation: sf-fx-motion-sl-bar linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
}
@supports not (animation-timeline: view()) {
  [data-sf-scrollfx="scale"] { transform: scale(calc(.55 + .45 * var(--sf-vp, 1))); opacity: calc(.1 + .9 * var(--sf-vp, 1)); }
  [data-sf-scrollfx="slide"] { transform: translateX(calc((1 - var(--sf-vp, 1)) * -90px)); opacity: var(--sf-vp, 1); }
  [data-sf-scrollfx="fade"] { opacity: var(--sf-vp, 1); }
  [data-sf-scrollfx="rotate"] { transform: rotate(calc(-12deg + 24deg * var(--sf-vc, .5))) scale(calc(.8 + .2 * var(--sf-vc, .5))); }
  [data-sf-scrollfx="bar"]::after { transform: scaleX(clamp(0, (var(--sf-vc, 1) - .1) / .8, 1)); }
}

/* ---------- 6 Text split + text effects  [data-sf-text] (Soft.split) ---------- */
.sf-fxm-split { display: inline; }
.sf-fxm-w { display: inline-block; white-space: nowrap; }
.sf-fxm-wi, .sf-fxm-c { display: inline-block; }
[data-sf-text="reveal-up"] .sf-fxm-wi { transition: opacity .6s var(--sf-ease), transform .95s var(--sf-spring); transition-delay: calc(var(--wi, 0) * var(--sf-fx-motion-ts, 70ms) + var(--sf-fx-motion-d, 0ms)); }
.sf-fxm-js [data-sf-text="reveal-up"]:not(.is-in) .sf-fxm-wi { opacity: 0; transform: translateY(.9em) rotate(5deg); }

[data-sf-text="mask"] .sf-fxm-w { overflow: hidden; padding: .08em 0 .16em; margin: -.08em 0 -.16em; vertical-align: top; }
[data-sf-text="mask"] .sf-fxm-wi { transition: transform 1s cubic-bezier(.2, .9, .25, 1); transition-delay: calc(var(--wi, 0) * var(--sf-fx-motion-ts, 80ms) + var(--sf-fx-motion-d, 0ms)); }
.sf-fxm-js [data-sf-text="mask"]:not(.is-in) .sf-fxm-wi { transform: translateY(115%) skewY(6deg); }

[data-sf-text="blur-in"] .sf-fxm-c { transition: opacity .7s var(--sf-ease), filter .8s var(--sf-ease), transform .9s var(--sf-spring); transition-delay: calc(var(--ci, 0) * var(--sf-fx-motion-ts, 28ms) + var(--sf-fx-motion-d, 0ms)); }
.sf-fxm-js [data-sf-text="blur-in"]:not(.is-in) .sf-fxm-c { opacity: 0; filter: blur(12px); transform: translateY(.35em) scale(1.35); }

[data-sf-text="wave"] .sf-fxm-c { transition: opacity .5s var(--sf-ease), transform .8s var(--sf-spring); transition-delay: calc(var(--ci, 0) * 30ms + var(--sf-fx-motion-d, 0ms)); }
.sf-fxm-js [data-sf-text="wave"]:not(.is-in) .sf-fxm-c { opacity: 0; transform: translateY(.6em); }
[data-sf-text="wave"].is-in .sf-fxm-c { animation: sf-fx-motion-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--ci, 0) * 70ms + .9s); }
@keyframes sf-fx-motion-wave { 0%, 60%, 100% { transform: none; } 25% { transform: translateY(-.24em) scale(1.06, .96); } 40% { transform: translateY(0) scale(1.04, .94); } }

/* ---------- 7 Typewriter  [data-sf-typewriter] ---------- */
.sf-fxm-type { display: inline; }
.sf-fxm-caret { display: inline-block; width: .09em; height: 1em; margin-left: .08em; background: currentColor; vertical-align: -.12em; border-radius: 2px; animation: sf-fx-motion-blink 1s steps(1) infinite; }
.sf-fxm-type.is-typing .sf-fxm-caret { animation: none; }
.sf-fxm-type[data-sf-caret="block"] .sf-fxm-caret { width: .55em; opacity: .55; border-radius: 3px; }
.sf-fxm-type[data-sf-caret="underscore"] .sf-fxm-caret { width: .6em; height: .09em; vertical-align: baseline; margin-left: .06em; }
@keyframes sf-fx-motion-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---------- 8 Scramble / decode  [data-sf-scramble="hover|reveal|both"] ---------- */
.sf-fxm-scramble { font-variant-numeric: tabular-nums; cursor: default; }
.sf-fxm-scramble--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.02em; }
.sf-fxm-js [data-sf-scramble="reveal"]:not(.is-in), .sf-fxm-js [data-sf-scramble="both"]:not(.is-in) { opacity: 0; }
.sf-fxm-scramble { transition: opacity .3s var(--sf-ease); }
.sf-fxm-scramble.is-scrambling .sf-fxm-scramble__vis { color: var(--sf-muted); }

/* ---------- 9 Flip words  [data-sf-flipwords="a|b|c"] ---------- */
/* The window stacks every word in one grid cell, so it is as wide as the longest word, sits on the
   text baseline, and clips with a little vertical room so ascenders/descenders never get cut. */
.sf-fxm-flip { display: inline-block; position: relative; white-space: nowrap; }
.sf-fxm-flip__win { display: inline-grid; vertical-align: baseline; overflow: hidden; padding: .14em 0 .2em; margin: -.14em 0 -.2em; perspective: 600px; }
.sf-fxm-flip__word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(110%) rotateX(-55deg); transform-origin: 50% 100%; transition: transform .8s var(--sf-spring), opacity .3s var(--sf-ease); }
.sf-fxm-flip__word.is-active { opacity: 1; transform: none; }
.sf-fxm-flip__word.is-leaving { opacity: 0; transform: translateY(-110%) rotateX(55deg); transform-origin: 50% 0; }
.sf-fxm-flip--pill { background: var(--sf-ink); color: var(--sf-on-ink); border-radius: var(--sf-pill); padding: .04em .42em .08em; }
.sf-fxm-flip--pill .sf-fxm-flip__win { padding: 0; margin: 0; justify-items: center; } /* clip at the pill edge, not above it */

/* ---------- 10 Kinetic variable-weight text  [data-sf-kinetic]
   Load a variable font for the full effect:
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200..800&display=swap" rel="stylesheet">
   Without it the same markup falls back to Figtree and snaps between its static weights. ---------- */
.sf-fxm-kinetic { --wmin: 300; --wmax: 800; font-family: "Bricolage Grotesque", var(--sf-font); touch-action: pan-y; cursor: default; letter-spacing: -.02em; line-height: 1.05; }
.sf-fxm-kinetic .sf-fxm-c { font-weight: calc(var(--wmin) + (var(--wmax) - var(--wmin)) * var(--k, 0)); transform: translateY(calc(var(--k, 0) * -.06em)) scale(calc(1 + var(--k, 0) * .05)); will-change: transform; }

/* ---------- 11 Highlighter, underline draw, strike draw  [data-sf-draw] ---------- */
.sf-fxm-draw { background: none; color: inherit; position: relative; padding: 0 .12em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-sf-draw="highlight"] { background-image: linear-gradient(#FFC857b3, #FFC857b3); background-repeat: no-repeat; background-position: 0 90%; background-size: 100% 62%; border-radius: 4px; transition: background-size .9s var(--sf-spring); transition-delay: var(--sf-fx-motion-d, 0ms); }
.sf-fxm-js [data-sf-draw="highlight"]:not(.is-in) { background-size: 0% 62%; }
[data-sf-draw="underline"] { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .09em; transition: background-size .8s var(--sf-spring); transition-delay: var(--sf-fx-motion-d, 0ms); }
.sf-fxm-js [data-sf-draw="underline"]:not(.is-in) { background-size: 0% .09em; }
[data-sf-draw="squiggle"]::after { content: ""; position: absolute; left: .12em; right: .12em; bottom: -.32em; height: .36em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%23FF5C8A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 16px 100%; clip-path: inset(0 0 0 0); transition: clip-path 1s var(--sf-ease); transition-delay: var(--sf-fx-motion-d, 0ms); }
.sf-fxm-js [data-sf-draw="squiggle"]:not(.is-in)::after { clip-path: inset(0 100% 0 0); }
[data-sf-draw="strike"]::after { content: ""; position: absolute; left: .02em; right: .02em; top: 55%; height: .09em; border-radius: var(--sf-pill); background: currentColor; transform-origin: 0 50%; transition: transform .7s var(--sf-spring); transition-delay: var(--sf-fx-motion-d, 0ms); }
.sf-fxm-js [data-sf-draw="strike"]:not(.is-in)::after { transform: scaleX(0); }

/* ---------- 14 Gradient shimmer text + shine sweep ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sf-fxm-shimmer { background-image: linear-gradient(100deg, var(--sf-ink) 0%, var(--sf-ink) 38%, var(--sf-fx-motion-pink) 46%, var(--sf-fx-motion-yellow) 50%, var(--sf-fx-motion-blue) 54%, var(--sf-ink) 62%, var(--sf-ink) 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: sf-fx-motion-shimmer 3.4s linear infinite; }
  .sf-fxm-shimmer--soft { background-image: linear-gradient(100deg, var(--sf-muted) 0%, var(--sf-muted) 40%, var(--sf-ink) 50%, var(--sf-muted) 60%, var(--sf-muted) 100%); }
}
@keyframes sf-fx-motion-shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.sf-fxm-shine { position: relative; overflow: hidden; isolation: isolate; }
.sf-fxm-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sf-on-ink) 55%, transparent), transparent); transform: skewX(-22deg); }
.sf-fxm-shine:hover::after, .sf-fxm-shine:focus-visible::after { transform: translateX(520%) skewX(-22deg); transition: transform .9s var(--sf-ease); }
.sf-fxm-shine--loop::after { animation: sf-fx-motion-sweep 3s var(--sf-ease) infinite; }
@keyframes sf-fx-motion-sweep { 0% { transform: translateX(0) skewX(-22deg); } 45%, 100% { transform: translateX(520%) skewX(-22deg); } }

/* ---------- 15 Text outline to fill  .sf-fxm-outline ---------- */
.sf-fxm-outline { --sf-fx-motion-fill: var(--sf-ink); font-weight: 800; letter-spacing: -.03em; cursor: default; -webkit-text-stroke: 2px var(--sf-ink); transition: letter-spacing .5s var(--sf-spring); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sf-fxm-outline { color: transparent; background: linear-gradient(var(--sf-fx-motion-fill), var(--sf-fx-motion-fill)) no-repeat 0 100% / 0% 100%; -webkit-background-clip: text; background-clip: text; transition: background-size .75s var(--sf-ease), letter-spacing .5s var(--sf-spring); }
  .sf-fxm-outline:hover, .sf-fxm-outline:focus-visible { background-size: 100% 100%; letter-spacing: -.01em; }
}
.sf-fxm-outline--pink { --sf-fx-motion-fill: var(--sf-fx-motion-pink); }

/* ---------- 12 Marquee text  [data-sf-marquee] (reacts to scroll speed + direction) ---------- */
.sf-fxm-marquee { --sf-fx-motion-gap: 2.2rem; overflow: hidden; padding: 12px 0; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sf-fxm-marquee__track { display: flex; width: max-content; will-change: transform; }
.sf-fxm-marquee__group { display: flex; flex: none; align-items: center; gap: var(--sf-fx-motion-gap); padding-right: var(--sf-fx-motion-gap); }
.sf-fxm-marquee__item { display: inline-flex; align-items: center; gap: var(--sf-fx-motion-gap); font-size: clamp(34px, 8vw, 84px); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.sf-fxm-marquee__item::after { content: ""; width: .2em; height: .2em; border-radius: 50%; background: var(--sf-fx-motion-pink); flex: none; }
.sf-fxm-marquee__item--outline { color: transparent; -webkit-text-stroke: 2px var(--sf-ink); }
.sf-fxm-marquee--sm .sf-fxm-marquee__item { font-size: 18px; letter-spacing: -.01em; }
.sf-fxm-marquee--sm .sf-fxm-marquee__item::after { width: 6px; height: 6px; }

/* ---------- 13 Count-up + odometer  [data-sf-countup] [data-sf-odometer] ---------- */
.sf-fxm-count { font-variant-numeric: tabular-nums; }
.sf-fxm-odo { display: inline-flex; align-items: baseline; line-height: 1.25; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Each digit cell is a full line box tall (1.25em) so glyphs are never trimmed; neighbours sit fully outside the window */
.sf-fxm-odo__d { display: inline-block; height: 1.25em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.sf-fxm-odo__r { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.25em)); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k, 0) * 70ms); }
.sf-fxm-odo__r > span { display: block; height: 1.25em; line-height: 1.25; text-align: center; }
.sf-fxm-odo__s { display: inline-block; line-height: 1.25; white-space: pre; }

/* ---------- 19 Number ticker + live counter  [data-sf-ticker] [data-sf-live] ---------- */
.sf-fxm-live { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-fxm-live .sf-fxm-odo__r { transition-duration: .8s; }
.sf-fxm-live__dot { width: 10px; height: 10px; border-radius: 50%; background: #2FBF71; animation: sf-fx-motion-pulse 1.8s ease-out infinite; flex: none; }
@keyframes sf-fx-motion-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .5); } 100% { box-shadow: 0 0 0 12px rgba(47, 191, 113, 0); } }

/* ---------- 26 Stats row  .sf-fxm-stats ---------- */
.sf-fxm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sf-fxm-stat { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 24px; }
.sf-fxm-stat__num { display: block; font-size: clamp(34px, 6vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.sf-fxm-stat__label { display: block; margin-top: 10px; font-size: 14px; color: var(--sf-muted); }

/* ---------- 16 Page transitions  [data-sf-transition] ---------- */
.sf-fxm-views { position: relative; display: grid; border-radius: var(--sf-radius-lg); }
.sf-fxm-view { grid-area: 1 / 1; display: none; background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 28px; min-height: 150px; }
.sf-fxm-view.is-active { display: block; }
.sf-fxm-view h4 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.sf-fxm-view p { margin: 0; color: var(--sf-muted); line-height: 1.55; }
.sf-fxm-views.is-fading .sf-fxm-view.is-active { opacity: 0; transform: scale(.97); filter: blur(4px); transition: opacity .2s var(--sf-ease), transform .2s var(--sf-ease), filter .2s var(--sf-ease); }
.sf-fxm-view.is-entering { animation: sf-fx-motion-vt-in .6s var(--sf-spring) both; }
.sf-fxm-veil { position: fixed; inset: 0; z-index: 2000; background: var(--sf-ink); opacity: 0; pointer-events: none; transition: opacity .3s var(--sf-ease); }
.sf-fxm-veil.is-on { opacity: 1; pointer-events: auto; }
html[data-sf-vt]::view-transition-old(root), html[data-sf-vt]::view-transition-new(root) { animation: none; }
::view-transition-old(sf-fxm-views) { animation: sf-fx-motion-vt-out .28s var(--sf-ease) both; mix-blend-mode: normal; }
::view-transition-new(sf-fxm-views) { animation: sf-fx-motion-vt-in .6s var(--sf-spring) both; mix-blend-mode: normal; }
html[data-sf-vt="slide"]::view-transition-old(sf-fxm-views) { animation-name: sf-fx-motion-vt-slide-out; }
html[data-sf-vt="slide"]::view-transition-new(sf-fxm-views) { animation-name: sf-fx-motion-vt-slide-in; }
html[data-sf-vt="zoom"]::view-transition-old(sf-fxm-views) { animation-name: sf-fx-motion-vt-zoom-out; }
html[data-sf-vt="zoom"]::view-transition-new(sf-fxm-views) { animation-name: sf-fx-motion-vt-zoom-in; }
@keyframes sf-fx-motion-vt-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sf-fx-motion-vt-out { to { opacity: 0; transform: scale(.97); } }
@keyframes sf-fx-motion-vt-slide-in { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes sf-fx-motion-vt-slide-out { to { opacity: 0; transform: translateX(-70px); } }
@keyframes sf-fx-motion-vt-zoom-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes sf-fx-motion-vt-zoom-out { to { opacity: 0; transform: scale(1.15); } }

/* ---------- 17 Smooth anchors + active section  [data-sf-anchors] ---------- */
.sf-fxm-anchors { position: relative; display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; background: var(--sf-fill); border-radius: var(--sf-pill); scrollbar-width: none; }
.sf-fxm-anchors::-webkit-scrollbar { display: none; }
.sf-fxm-anchors a { position: relative; z-index: 1; display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--sf-pill); font-size: 15px; font-weight: 600; color: var(--sf-muted); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.sf-fxm-anchors a[aria-current] { color: var(--sf-ink); }
.sf-fxm-anchors a:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
@media (max-width: 480px) { .sf-fxm-anchors a { padding: 0 13px; } }
.sf-fxm-anchors__dot { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: var(--sf-pill); background: var(--sf-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); transition: transform .55s var(--sf-spring), width .55s var(--sf-spring); }
.sf-fxm-scroller > .sf-fxm-sec { min-height: 100%; }
.sf-fxm-sec { min-height: 240px; padding: 28px; display: grid; align-content: center; gap: 6px; border-bottom: 1px solid var(--sf-line); }
.sf-fxm-sec h4 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.sf-fxm-sec p { margin: 0; color: var(--sf-muted); max-width: 46ch; line-height: 1.55; }

/* ---------- 20 Image / blob reveal with clip-path  [data-sf-clip] ---------- */
.sf-fxm-clip { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--sf-radius-lg); background: var(--sf-fill); display: grid; place-content: center; text-align: center; font-weight: 700; font-size: 18px; transition: clip-path 1.25s var(--sf-spring); }
.sf-fxm-clip > * { transition: transform 1.6s var(--sf-ease); }
.sf-fxm-clip--art { background: radial-gradient(circle at 30% 30%, var(--sf-fx-motion-yellow), transparent 45%), radial-gradient(circle at 75% 70%, var(--sf-fx-motion-blue), transparent 50%), var(--sf-fx-motion-pink); color: #111; }
[data-sf-clip="circle"] { clip-path: circle(75% at 50% 50%); }
[data-sf-clip="inset"] { clip-path: inset(0 0 0 0 round 28px); }
[data-sf-clip="polygon"] { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
[data-sf-clip="diamond"] { clip-path: polygon(50% -55%, 155% 50%, 50% 155%, -55% 50%); }
[data-sf-clip="morph"] { clip-path: inset(0 0 0 0 round 28px); }
.sf-fxm-js [data-sf-clip="circle"]:not(.is-in) { clip-path: circle(0% at 50% 50%); }
.sf-fxm-js [data-sf-clip="inset"]:not(.is-in) { clip-path: inset(0 100% 0 0 round 28px); }
.sf-fxm-js [data-sf-clip="polygon"]:not(.is-in) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.sf-fxm-js [data-sf-clip="diamond"]:not(.is-in) { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.sf-fxm-js [data-sf-clip="morph"]:not(.is-in) { clip-path: inset(46% 46% 46% 46% round 50%); }
.sf-fxm-js [data-sf-clip]:not(.is-in) > * { transform: scale(1.4); }

/* ---------- 21 Scroll snap sections with dot indicator  [data-sf-snap] ---------- */
.sf-fxm-snapwrap { position: relative; }
.sf-fxm-snap { height: 340px; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: contain; border-radius: var(--sf-radius-lg); scrollbar-width: none; }
.sf-fxm-snap::-webkit-scrollbar { display: none; }
.sf-fxm-snap:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-fxm-snap__sec { height: 100%; scroll-snap-align: start; display: grid; place-content: center; gap: 6px; text-align: center; padding: 24px 56px; background: var(--sf-surface); font-size: clamp(26px, 5vw, 40px); font-weight: 700; letter-spacing: -.03em; }
.sf-fxm-snap__sec:nth-child(even) { background: var(--sf-fill); }
.sf-fxm-snap__sec small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--sf-muted); }
.sf-fxm-dots { position: absolute; z-index: 3; right: 4px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.sf-fxm-dots button { position: relative; width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--sf-pill); }
.sf-fxm-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--sf-pill); background: var(--sf-line); transition: height .5s var(--sf-spring), margin .5s var(--sf-spring), background .2s ease; }
.sf-fxm-dots button[aria-current="true"]::before { height: 28px; margin-top: -14px; background: var(--sf-ink); }
.sf-fxm-dots button:hover::before { background: var(--sf-muted); }
.sf-fxm-dots button:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-fxm-dots--x { right: auto; left: 50%; top: auto; bottom: 4px; transform: translateX(-50%); flex-direction: row; }
.sf-fxm-dots--x button { width: 32px; height: 44px; }
.sf-fxm-dots--x button[aria-current="true"]::before { height: 10px; width: 28px; margin: -5px 0 0 -14px; }

/* ---------- 22 Inertial smooth scroll (opt-in) ---------- */
html.sf-fxm-smooth { scroll-behavior: auto !important; }

/* ---------- 23 Cursor follower  <body data-sf-cursor> ---------- */
.sf-fxm-cursor-dot, .sf-fxm-cursor-ring { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.sf-fxm-cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.sf-fxm-cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; mix-blend-mode: difference; }
.sf-fxm-cursor-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; transition: transform .45s var(--sf-spring), background .25s ease, border-color .25s ease; }
.sf-fxm-cursor-ring__label { position: absolute; inset: 0; display: grid; place-content: center; font: 600 12px/1 var(--sf-font); color: var(--sf-on-ink); opacity: 0; transition: opacity .2s ease; white-space: nowrap; }
.sf-fxm-cursor-dot.is-on, .sf-fxm-cursor-ring.is-on { opacity: 1; }
.sf-fxm-cursor-ring.is-grow::before { transform: scale(1.8); background: #fff; border-color: transparent; }
.sf-fxm-cursor-ring.is-down::before { transform: scale(.7); }
.sf-fxm-cursor-ring.is-label { mix-blend-mode: normal; }
.sf-fxm-cursor-ring.is-label::before { transform: scale(2.2); background: var(--sf-ink); border-color: transparent; }
.sf-fxm-cursor-ring.is-label .sf-fxm-cursor-ring__label { opacity: 1; }
.sf-fxm-cursor-dot.is-label { opacity: 0; }
html.sf-fxm-cursor-on, html.sf-fxm-cursor-on *:not(input):not(textarea):not(select),
.sf-fxm-cursor-zone.is-cursor-on, .sf-fxm-cursor-zone.is-cursor-on *:not(input):not(textarea):not(select) { cursor: none !important; }
/* Scoped playground: the follower only lives inside this box */
.sf-fxm-cursor-zone { position: relative; display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 240px; padding: 28px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); text-align: center; }
.sf-fxm-cursor-zone__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 24 Preloader  [data-sf-preloader] ---------- */
.sf-fxm-preloader { position: fixed; inset: 0; z-index: 2500; display: grid; place-content: center; text-align: center; background: var(--sf-ink); color: var(--sf-on-ink); transition: transform 1.05s cubic-bezier(.7, 0, .2, 1), border-radius 1.05s cubic-bezier(.7, 0, .2, 1); }
.sf-fxm-preloader--contained { position: absolute; border-radius: inherit; }
.sf-fxm-preloader__inner { display: grid; justify-items: center; gap: 18px; transition: opacity .35s ease, transform .6s var(--sf-ease); }
.sf-fxm-preloader__count { font-size: clamp(64px, 16vw, 150px); font-weight: 700; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-fxm-preloader__count::after { content: "%"; font-size: .35em; letter-spacing: 0; margin-left: .08em; opacity: .6; }
.sf-fxm-preloader__bar { width: min(220px, 60vw); height: 4px; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--sf-on-ink) 22%, transparent); overflow: hidden; }
.sf-fxm-preloader__bar::after { content: ""; display: block; height: 100%; background: var(--sf-on-ink); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--sf-p, 0)); }
.sf-fxm-preloader.is-lifting { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 16vh 16vh; }
.sf-fxm-preloader--contained.is-lifting { border-radius: 0 0 50% 50% / 0 0 80px 80px; }
.sf-fxm-preloader.is-lifting .sf-fxm-preloader__inner { opacity: 0; transform: translateY(-28px) scale(.9); }
.sf-fxm-preloader.is-done, .sf-fxm-preloader[hidden] { display: none; }
.sf-fxm-stage-box { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); min-height: 260px; display: grid; place-content: center; text-align: center; gap: 14px; padding: 28px; }

/* ---------- 25 Curtain / wipe between states  [data-sf-wipe] ---------- */
.sf-fxm-wipe { --sf-fx-motion-fx: 0%; --sf-fx-motion-fy: 100%; position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); min-height: 220px; isolation: isolate; }
.sf-fxm-wipe[data-sf-wipe-dir="down"] { --sf-fx-motion-fy: -100%; }
.sf-fxm-wipe[data-sf-wipe-dir="left"] { --sf-fx-motion-fx: 100%; --sf-fx-motion-fy: 0%; }
.sf-fxm-wipe[data-sf-wipe-dir="right"] { --sf-fx-motion-fx: -100%; --sf-fx-motion-fy: 0%; }
.sf-fxm-wipe__state { display: none; padding: 32px; min-height: 220px; align-content: center; gap: 8px; }
.sf-fxm-wipe__state.is-active { display: grid; }
.sf-fxm-wipe__state h4 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.sf-fxm-wipe__state p { margin: 0; color: var(--sf-muted); }
.sf-fxm-wipe__band { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(var(--sf-fx-motion-fx), var(--sf-fx-motion-fy), 0); will-change: transform; transition: transform .6s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--bi, 0) * 80ms); background: var(--sf-ink); }
.sf-fxm-wipe__band:nth-of-type(1) { background: var(--sf-fx-motion-pink); }
.sf-fxm-wipe__band:nth-of-type(2) { background: var(--sf-fx-motion-yellow); }
.sf-fxm-wipe.is-cover .sf-fxm-wipe__band { transform: none; }
.sf-fxm-wipe.is-out .sf-fxm-wipe__band { transform: translate3d(calc(var(--sf-fx-motion-fx) * -1), calc(var(--sf-fx-motion-fy) * -1), 0); }
.sf-fxm-wipe.is-reset .sf-fxm-wipe__band { transition: none; }
.sf-fxm-wipe.is-busy { pointer-events: none; }

/* ---------- 27 Sticky header, hide on scroll down  [data-sf-hidebar] ---------- */
.sf-fxm-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 20px; background: var(--sf-surface); background: color-mix(in srgb, var(--sf-surface) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .55s var(--sf-spring), box-shadow .3s ease; }
.sf-fxm-header.is-scrolled { box-shadow: 0 1px 0 var(--sf-line); }
.sf-fxm-header.is-hidden { transform: translateY(-110%); }
.sf-fxm-header__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-fxm-header__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; font-size: 15px; color: var(--sf-ink); text-decoration: none; border-radius: var(--sf-pill); transition: background .2s ease, transform .3s var(--sf-spring); }
.sf-fxm-header__nav a:hover { background: var(--sf-fill); transform: translateY(-2px); }
.sf-fxm-header__nav a:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-fxm-frame { position: relative; }

/* ---------- 28 Back to top with progress ring  [data-sf-top] ---------- */
.sf-fxm-top { position: fixed; right: 20px; bottom: 20px; z-index: 800; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); display: grid; place-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(24px) scale(.6); transition: opacity .25s ease, transform .55s var(--sf-spring); }
.sf-fxm-top--inline { position: absolute; }
.sf-fxm-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.sf-fxm-top.is-visible:hover { transform: scale(1.1) translateY(-2px); }
.sf-fxm-top.is-visible:active { transform: scale(1.12, .84); }
.sf-fxm-top:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-fxm-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sf-fxm-top__ring circle { fill: none; stroke-width: 3; }
.sf-fxm-top__ring circle:first-child { stroke: var(--sf-line); }
.sf-fxm-top__ring circle:last-child { stroke: var(--sf-ink); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--sf-p, 0))); }
.sf-fxm-top__arrow { position: relative; width: 18px; height: 18px; transition: transform .4s var(--sf-spring); }
.sf-fxm-top:hover .sf-fxm-top__arrow { transform: translateY(-3px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-sf-reveal], [data-sf-seq-step], [data-sf-text] .sf-fxm-wi, [data-sf-text] .sf-fxm-c, [data-sf-scramble], [data-sf-draw], [data-sf-draw]::after, [data-sf-clip], [data-sf-clip] > *,
  [data-sf-scrollfx], [data-sf-scrollfx]::after { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  [data-sf-clip="circle"] { clip-path: circle(75% at 50% 50%) !important; }
  [data-sf-clip="inset"], [data-sf-clip="morph"] { clip-path: inset(0 0 0 0 round 28px) !important; }
  [data-sf-clip="polygon"] { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; }
  [data-sf-clip="diamond"] { clip-path: polygon(50% -55%, 155% 50%, 50% 155%, -55% 50%) !important; }
  [data-sf-draw="highlight"] { background-size: 100% 62% !important; }
  [data-sf-draw="underline"] { background-size: 100% .09em !important; }
  [data-sf-draw="squiggle"]::after { clip-path: none !important; }
  .sf-fxm-caret, .sf-fxm-shimmer, .sf-fxm-shine::after, .sf-fxm-live__dot, .sf-fxm-progress, .sf-fxm-view, .sf-fxm-preloader, .sf-fxm-preloader__inner,
  .sf-fxm-flip, .sf-fxm-flip__word, .sf-fxm-odo__r, .sf-fxm-sticky__panel, .sf-fxm-sticky__step, .sf-fxm-anchors__dot, .sf-fxm-dots button::before,
  .sf-fxm-header, .sf-fxm-top, .sf-fxm-top__arrow, .sf-fxm-wipe__band, .sf-fxm-outline, .sf-fxm-cursor-ring::before, .sf-fxm-clip { animation: none !important; transition: none !important; }
  .sf-fxm-flip__word:not(.is-active) { visibility: hidden; }
  .sf-fxm-window__hint::after { animation: none; }
  .sf-fxm-window__hint { transition: none; }
  .sf-fxm-snap { scroll-behavior: auto; }
  .sf-fxm-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .sf-fxm-kinetic .sf-fxm-c { transform: none; }
  .sf-fxm-shine:hover::after { transform: skewX(-22deg); }
}


/* ===== Interaction (fx-interact) ===== */
/* Soft fx-interact — pointer-driven interaction effects, physical motion, decorative backgrounds.
   Gradients and glows are allowed here: the effect IS the point.
   Load after soft.css. Pair with fx-interact.js. */

:root {
  --sf-fx-interact-glow: #5CC8FF;
  --sf-fx-interact-glow-2: #FF5C8A;
  --sf-fx-interact-glow-3: #FFC857;
  --sf-fx-interact-halo: rgba(255, 255, 255, .55);
  --sf-fx-interact-tint: rgba(17, 17, 17, .07);
}
[data-sf-theme="dark"] {
  --sf-fx-interact-halo: rgba(255, 255, 255, .18);
  --sf-fx-interact-tint: rgba(255, 255, 255, .08);
}

/* Shared: focus ring for all interactive fx surfaces */
[data-sf-tilt]:focus-visible, [data-sf-spotlight]:focus-visible, [data-sf-hold]:focus-visible,
.sf-flip:focus-visible, .sf-fx-interact-chip:focus-visible, [data-sf-magnify] > *:focus-visible,
.sf-drag:focus-visible, .sf-sortable__item:focus-visible, .sf-swipestack__card:focus-visible,
.sf-slide__handle:focus-visible, .sf-imgcompare__handle:focus-visible, .sf-like:focus-visible,
.sf-hold:focus-visible, .sf-fx-btn:focus-visible, .sf-react:focus-visible, .sf-rotator__btn:focus-visible {
  outline: 3px solid var(--sf-ink); outline-offset: 3px;
}

/* ---------- 1. Magnet + Sticky (JS drives --sf-fx-x / --sf-fx-y; uses the individual `translate` property so it composes with other transforms) ---------- */
[data-sf-magnet], [data-sf-sticky], .sf-sticky__inner {
  translate: var(--sf-fx-x, 0px) var(--sf-fx-y, 0px);
  transition: translate .7s cubic-bezier(.3, 1.8, .5, 1);
  will-change: translate;
}
[data-sf-magnet].is-near, [data-sf-sticky].is-near, .is-near > .sf-sticky__inner { transition: translate .12s ease-out; }

/* ---------- 2. Tilt card with glare ---------- */
[data-sf-tilt] {
  --sf-fx-rx: 0deg; --sf-fx-ry: 0deg; --sf-fx-gx: 50%; --sf-fx-gy: 50%; --sf-fx-glare: 0;
  position: relative; transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--sf-fx-rx)) rotateY(var(--sf-fx-ry));
  transition: transform .7s cubic-bezier(.3, 1.6, .5, 1);
}
[data-sf-tilt].is-tilting { transition: transform .1s ease-out; }
[data-sf-tilt] > .sf-tilt__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; overflow: hidden;
  opacity: var(--sf-fx-glare);
  background: radial-gradient(circle at var(--sf-fx-gx) var(--sf-fx-gy), var(--sf-fx-interact-halo), transparent 55%);
  transition: opacity .3s ease;
}
.sf-tilt__lift { transform: translateZ(40px); }

/* ---------- 3. Spotlight card ---------- */
[data-sf-spotlight] {
  --sf-fx-sx: 50%; --sf-fx-sy: 50%; --sf-fx-spot: 0; --sf-fx-spot-size: 260px;
  position: relative; isolation: isolate;
  background: var(--sf-surface); border-radius: var(--sf-radius-lg);
}
[data-sf-spotlight]::before, [data-sf-spotlight]::after {
  content: ""; position: absolute; pointer-events: none; opacity: var(--sf-fx-spot); transition: opacity .35s var(--sf-ease);
}
/* surface glow */
[data-sf-spotlight]::before {
  inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(var(--sf-fx-spot-size) circle at var(--sf-fx-sx) var(--sf-fx-sy), var(--sf-fx-interact-tint), transparent 70%);
}
/* border glow: a 2px ring revealed only near the pointer */
[data-sf-spotlight]::after {
  inset: 0; border-radius: inherit; padding: 2px; z-index: 1;
  background: radial-gradient(calc(var(--sf-fx-spot-size) * .8) circle at var(--sf-fx-sx) var(--sf-fx-sy), var(--sf-ink), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.sf-spot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* ---------- 4. Glow / animated border ---------- */
@property --sf-fx-interact-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.sf-glow {
  --sf-fx-ring: conic-gradient(from var(--sf-fx-interact-angle), var(--sf-ink), transparent 25%, var(--sf-fx-interact-glow) 45%, transparent 65%, var(--sf-fx-interact-glow-2) 85%, var(--sf-ink));
  --sf-fx-halo: conic-gradient(from var(--sf-fx-interact-angle), var(--sf-fx-interact-glow), transparent 30%, var(--sf-fx-interact-glow-2) 55%, transparent 75%, var(--sf-fx-interact-glow-3) 90%, var(--sf-fx-interact-glow));
  position: relative; isolation: isolate; border: 3px solid transparent; border-radius: var(--sf-radius-lg); padding: 25px 29px; color: var(--sf-ink);
  background: linear-gradient(var(--sf-surface), var(--sf-surface)) padding-box, var(--sf-fx-ring) border-box;
  animation: sf-fx-interact-spin 4s linear infinite;
}
/* outer glow: a blurred copy of the accent ring (no ink, so it reads as light, not shadow) whose interior is masked away.
   It spreads about 26px outside the element: leave that much room (gap/padding) around a .sf-glow. */
.sf-glow::after {
  content: ""; position: absolute; inset: -16px; padding: 14px; border-radius: calc(var(--sf-radius-lg) + 14px); z-index: -1; pointer-events: none;
  background: var(--sf-fx-halo); filter: blur(10px); opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sf-fx-interact-spin 4s linear infinite;
}
.sf-glow--soft { background: var(--sf-surface); }
.sf-glow--mono {
  --sf-fx-ring: conic-gradient(from var(--sf-fx-interact-angle), var(--sf-ink), transparent 40%, var(--sf-muted) 70%, var(--sf-ink));
  --sf-fx-halo: conic-gradient(from var(--sf-fx-interact-angle), var(--sf-muted), transparent 40%, var(--sf-muted) 70%, transparent 85%, var(--sf-muted));
}
.sf-glow--mono::after { opacity: .4; }
.sf-glow--pulse::after { animation: sf-fx-interact-spin 4s linear infinite, sf-fx-interact-breathe 2.4s ease-in-out infinite; }
@keyframes sf-fx-interact-spin { to { --sf-fx-interact-angle: 360deg; } }
@keyframes sf-fx-interact-breathe { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }

/* ---------- 5. Ripple ---------- */
[data-sf-ripple] { position: relative; overflow: hidden; isolation: isolate; }
.sf-ripple__wave {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: sf-fx-interact-ripple .7s var(--sf-ease) forwards;
}
@keyframes sf-fx-interact-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- 6. Jelly ---------- */
/* :where() keeps specificity at 0 so components that are already inline-flex/grid keep their own display */
:where([data-sf-jelly]) { display: inline-block; }
[data-sf-jelly] { transition: scale .4s var(--sf-spring); cursor: pointer; }
[data-sf-jelly]:hover { animation: sf-fx-interact-wobble .8s var(--sf-ease); }
[data-sf-jelly]:active { animation: none; scale: 1.14 .82; transition-duration: .12s; }
[data-sf-jelly].is-jelly { animation: sf-fx-interact-jelly .7s var(--sf-ease); }
@keyframes sf-fx-interact-wobble {
  0% { transform: none; } 20% { transform: scale(1.12, .9) rotate(-2deg); } 40% { transform: scale(.94, 1.08) rotate(2deg); }
  60% { transform: scale(1.04, .97) rotate(-1deg); } 80% { transform: scale(.99, 1.02); } 100% { transform: none; }
}
@keyframes sf-fx-interact-jelly {
  0% { transform: scale(1.2, .75); } 30% { transform: scale(.85, 1.2); } 50% { transform: scale(1.1, .92); }
  70% { transform: scale(.97, 1.04); } 100% { transform: none; }
}

/* ---------- 7. Press-and-hold button ---------- */
.sf-hold {
  --sf-fx-hold: 0; position: relative; overflow: hidden; isolation: isolate;
  font: inherit; font-size: 16px; font-weight: 600; min-height: 52px; padding: 0 30px; cursor: pointer; border: 0;
  border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none;
  transition: scale .3s var(--sf-spring);
}
.sf-hold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sf-ink);
  transform-origin: left center; transform: scaleX(var(--sf-fx-hold));
}
.sf-hold__label { position: relative; mix-blend-mode: normal; transition: color .15s ease; }
.sf-hold.is-holding { scale: .95; color: var(--sf-on-ink); }
.sf-hold.is-done { background: var(--sf-ink); color: var(--sf-on-ink); animation: sf-fx-interact-jelly .6s var(--sf-ease); }
.sf-hold.is-releasing::before { transition: transform .45s var(--sf-spring); }
.sf-hold--danger::before { background: var(--sf-danger); }
.sf-hold--danger.is-done { background: var(--sf-danger); color: #fff; }
.sf-hold--danger.is-holding { color: #fff; }

/* ---------- 8. Slide to confirm ---------- */
.sf-slide {
  --sf-fx-slide: 0; --sf-fx-slide-w: 56px; position: relative; width: min(100%, 320px); height: 60px; padding: 4px;
  border-radius: var(--sf-pill); background: var(--sf-fill); user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.sf-slide__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sf-fx-slide) * 1px + var(--sf-fx-slide-w)); background: var(--sf-ink); border-radius: var(--sf-pill); opacity: .08; }
.sf-slide__label { position: absolute; inset: 0; display: grid; place-content: center; font-weight: 600; font-size: 15px; color: var(--sf-muted); pointer-events: none; padding-left: 44px; opacity: calc(1 - var(--sf-fx-slide-p, 0) * 1.4); }
.sf-slide__handle {
  position: relative; z-index: 1; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: grab;
  background: var(--sf-ink); color: var(--sf-on-ink); display: grid; place-content: center; font-size: 20px; touch-action: none;
  translate: calc(var(--sf-fx-slide) * 1px) 0; transition: translate .5s var(--sf-spring), scale .2s var(--sf-spring);
}
.sf-slide.is-dragging .sf-slide__handle { transition: none; cursor: grabbing; scale: 1.08; }
.sf-slide.is-done .sf-slide__handle { animation: sf-fx-interact-jelly .6s var(--sf-ease); }
.sf-slide.is-done .sf-slide__fill { opacity: 1; transition: opacity .3s ease; }
.sf-slide.is-done .sf-slide__label { opacity: 1; color: var(--sf-on-ink); }

/* ---------- 9. Confetti canvas (created by Soft.confetti.*) ---------- */
.sf-fx-interact-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2000; }
/* Full-viewport layer for things that must float above everything and leave the screen without causing scrollbars
   (dragged / thrown swipe cards). Created on demand by fx-interact.js. */
.sf-fx-interact-fly { position: fixed; inset: 0; z-index: 1500; overflow: hidden; pointer-events: none; }
.sf-fx-interact-fly > * { pointer-events: auto; }

/* ---------- 10. Particles canvas ---------- */
.sf-particles { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--sf-radius-lg); background: var(--sf-surface); }
.sf-particles > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.sf-particles > :not(canvas) { position: relative; }

/* ---------- 11. Sparkles ---------- */
[data-sf-sparkles] { position: relative; display: inline-block; }
.sf-sparkle {
  position: absolute; width: var(--sf-fx-size, 14px); height: var(--sf-fx-size, 14px); margin: calc(var(--sf-fx-size, 14px) / -2) 0 0 calc(var(--sf-fx-size, 14px) / -2);
  pointer-events: none; z-index: 3; background: var(--sf-fx-color, var(--sf-ink));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sf-fx-interact-twinkle var(--sf-fx-dur, .9s) var(--sf-ease) forwards;
}
@keyframes sf-fx-interact-twinkle {
  0% { transform: scale(0) rotate(0); opacity: 0; } 35% { transform: scale(1) rotate(90deg); opacity: 1; }
  100% { transform: scale(0) rotate(180deg) translateY(-14px); opacity: 0; }
}

/* ---------- 12. Background patterns (put on a container; content stays above) ---------- */
[class*="sf-bg-"] { position: relative; isolation: isolate; }
.sf-bg-dots::before, .sf-bg-grid::before, .sf-bg-noise::before, .sf-bg-stripes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.sf-bg-dots::before { background-image: radial-gradient(var(--sf-line) 1.6px, transparent 1.7px); background-size: var(--sf-fx-gap, 22px) var(--sf-fx-gap, 22px); }
.sf-bg-grid::before {
  background-image: linear-gradient(var(--sf-line) 1px, transparent 1px), linear-gradient(90deg, var(--sf-line) 1px, transparent 1px);
  background-size: var(--sf-fx-gap, 32px) var(--sf-fx-gap, 32px);
}
.sf-bg-noise::before {
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .4  0 0 0 0 .4  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-sf-theme="dark"] .sf-bg-noise::before { mix-blend-mode: screen; opacity: .35; }
.sf-bg-stripes::before { background-image: repeating-linear-gradient(-45deg, var(--sf-line) 0 2px, transparent 2px var(--sf-fx-gap, 14px)); }
.sf-bg-stripes--fat::before { background-image: repeating-linear-gradient(-45deg, var(--sf-fill) 0 12px, transparent 12px 28px); }
.sf-bg-drift::before { animation: sf-fx-interact-drift 14s linear infinite; }
@keyframes sf-fx-interact-drift { to { background-position: 120px 120px; } }
/* fade masks */
.sf-bg--fade-b::before { -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.sf-bg--fade-t::before { -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
.sf-bg--fade-radial::before { -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); }
.sf-bg--fade-edge::before { -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, #000 90%); mask-image: radial-gradient(ellipse at center, transparent 20%, #000 90%); }

/* ---------- 13. Orbs / aurora (CSS only) ---------- */
.sf-bg-orbs { overflow: hidden; background: var(--sf-bg); }
.sf-bg-orbs__orb {
  position: absolute; z-index: -1; width: var(--sf-fx-orb, 46%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  filter: blur(64px); opacity: .55; background: var(--sf-fx-interact-glow); will-change: transform;
  animation: sf-fx-interact-orb-a 18s ease-in-out infinite alternate;
}
.sf-bg-orbs__orb:nth-child(1) { left: -8%; top: -20%; }
.sf-bg-orbs__orb:nth-child(2) { right: -10%; top: 10%; background: var(--sf-fx-interact-glow-2); animation-name: sf-fx-interact-orb-b; animation-duration: 22s; }
.sf-bg-orbs__orb:nth-child(3) { left: 25%; bottom: -30%; background: var(--sf-fx-interact-glow-3); animation-duration: 26s; animation-delay: -6s; }
.sf-bg-orbs__orb:nth-child(4) { right: 15%; bottom: -25%; background: #7AE582; animation-name: sf-fx-interact-orb-b; animation-duration: 30s; opacity: .4; }
[data-sf-theme="dark"] .sf-bg-orbs__orb { opacity: .32; }
.sf-bg-orbs--mono .sf-bg-orbs__orb { background: var(--sf-ink); opacity: .1; }
.sf-bg-orbs--aurora .sf-bg-orbs__orb { width: 80%; height: 50%; aspect-ratio: auto; border-radius: 50%; filter: blur(80px); }
@keyframes sf-fx-interact-orb-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, 12%) scale(1.15); } 100% { transform: translate(-10%, 22%) scale(.9); } }
@keyframes sf-fx-interact-orb-b { 0% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-20%, 14%) scale(.9); } 100% { transform: translate(8%, -16%) scale(1.2); } }

/* ---------- 14. Morphing blobs ---------- */
.sf-blobby { width: var(--sf-fx-size, 160px); aspect-ratio: 1; background: var(--sf-ink); animation: sf-fx-interact-morph-a 8s ease-in-out infinite; }
.sf-blobby--fast { animation-duration: 3.5s; }
.sf-blobby--egg { animation-name: sf-fx-interact-morph-b; background: var(--sf-fx-interact-glow-3); }
.sf-blobby--pebble { animation-name: sf-fx-interact-morph-c; background: var(--sf-muted); }
.sf-blobby--spin { animation: sf-fx-interact-morph-a 8s ease-in-out infinite, sf-fx-interact-roll 14s linear infinite; background: var(--sf-fx-interact-glow-2); }
.sf-blobby--grad { background: linear-gradient(135deg, var(--sf-fx-interact-glow), var(--sf-fx-interact-glow-2)); animation: sf-fx-interact-morph-c 9s ease-in-out infinite, sf-fx-interact-roll 20s linear infinite; }
.sf-blobby--hover { transition: scale .5s var(--sf-spring); }
.sf-blobby--hover:hover { scale: 1.15; animation-duration: 2.5s; }
.sf-blobby-svg { width: var(--sf-fx-size, 160px); height: auto; fill: var(--sf-ink); overflow: visible; }
@keyframes sf-fx-interact-morph-a { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 33% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; } 66% { border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; } }
@keyframes sf-fx-interact-morph-b { 0%, 100% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } 50% { border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%; } }
@keyframes sf-fx-interact-morph-c { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 70% 30% 30% 70% / 60% 70% 30% 40%; } }
@keyframes sf-fx-interact-roll { to { rotate: 360deg; } }

/* ---------- 15. Waves + curved dividers ---------- */
.sf-wave { position: relative; width: 100%; height: var(--sf-fx-wave-h, 90px); overflow: hidden; color: var(--sf-ink); line-height: 0; }
.sf-wave svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: sf-fx-interact-wave 14s linear infinite; fill: currentColor; }
.sf-wave svg:nth-child(1) { opacity: .15; animation-duration: 22s; }
.sf-wave svg:nth-child(2) { opacity: .35; animation-duration: 16s; animation-direction: reverse; }
.sf-wave svg:nth-child(3) { opacity: 1; animation-duration: 11s; }
.sf-wave--surface { color: var(--sf-surface); }
.sf-wave--flip { transform: scaleY(-1); }
@keyframes sf-fx-interact-wave { to { transform: translateX(-50%); } }
.sf-curve { position: relative; background: var(--sf-ink); color: var(--sf-on-ink); clip-path: ellipse(75% 100% at 50% 0); padding-bottom: 56px; }
.sf-curve--top { clip-path: ellipse(75% 100% at 50% 100%); padding: 56px 0 0; }
.sf-curve--tilt { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); padding-bottom: 64px; }
.sf-curve--arc { clip-path: none; border-radius: 0 0 50% 50% / 0 0 56px 56px; }
.sf-curve--surface { background: var(--sf-surface); color: var(--sf-ink); }

/* ---------- 16. Utility animations ---------- */
[class*="sf-anim-"] { --sf-fx-dur: 3s; }
.sf-anim-float { animation: sf-fx-interact-float var(--sf-fx-dur) ease-in-out infinite; }
.sf-anim-levitate { animation: sf-fx-interact-levitate calc(var(--sf-fx-dur) * 1.3) ease-in-out infinite; }
.sf-anim-pulse { --sf-fx-dur: 1.6s; animation: sf-fx-interact-pulse var(--sf-fx-dur) ease-in-out infinite; }
.sf-anim-ping { --sf-fx-dur: 1.6s; position: relative; }
.sf-anim-ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; pointer-events: none; animation: sf-fx-interact-ping var(--sf-fx-dur) cubic-bezier(0, 0, .2, 1) infinite; }
.sf-anim-wiggle { --sf-fx-dur: 1.2s; animation: sf-fx-interact-wiggle var(--sf-fx-dur) ease-in-out infinite; }
.sf-anim-shake { --sf-fx-dur: .7s; animation: sf-fx-interact-shake var(--sf-fx-dur) ease-in-out infinite; }
.sf-anim-heartbeat { --sf-fx-dur: 1.4s; animation: sf-fx-interact-heartbeat var(--sf-fx-dur) ease-in-out infinite; }
.sf-anim-spin { --sf-fx-dur: 6s; animation: sf-fx-interact-roll var(--sf-fx-dur) linear infinite; }
.sf-anim-fast { --sf-fx-dur: .6s; }
.sf-anim-slow { --sf-fx-dur: 6s; }
.sf-anim-hover:not(:hover) { animation-play-state: paused; }
@keyframes sf-fx-interact-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sf-fx-interact-levitate { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes sf-fx-interact-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes sf-fx-interact-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sf-fx-interact-wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(0); } }
@keyframes sf-fx-interact-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes sf-fx-interact-heartbeat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.22); } 20% { transform: scale(.96); } 30% { transform: scale(1.14); } }

/* ---------- 17a. Flip card ---------- */
.sf-flip { --sf-fx-w: 220px; --sf-fx-h: 150px; width: min(100%, var(--sf-fx-w)); height: var(--sf-fx-h); perspective: 900px; cursor: pointer; border-radius: var(--sf-radius-lg); display: block; }
.sf-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--sf-spring); }
.sf-flip__face {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; gap: 4px;
  border-radius: var(--sf-radius-lg); background: var(--sf-surface); color: var(--sf-ink); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.sf-flip__face--back { background: var(--sf-ink); color: var(--sf-on-ink); transform: rotateY(180deg); }
.sf-flip--x .sf-flip__face--back { transform: rotateX(180deg); }
.sf-flip.is-flipped .sf-flip__inner { transform: rotateY(180deg); }
.sf-flip--x.is-flipped .sf-flip__inner { transform: rotateX(180deg); }
@media (hover: hover) {
  .sf-flip--hover:hover .sf-flip__inner, .sf-flip--hover:focus-visible .sf-flip__inner { transform: rotateY(180deg); }
  .sf-flip--hover.sf-flip--x:hover .sf-flip__inner { transform: rotateX(180deg); }
}

/* ---------- 17b. 3D cube / carousel rotator ---------- */
.sf-rotator { --sf-fx-w: 180px; --sf-fx-h: 140px; --sf-fx-n: 4; --sf-fx-r: 90px; --sf-fx-idx: 0; display: grid; justify-items: center; gap: 22px; }
/* JS sets --sf-fx-spill to how far the rotating faces reach past the view (perspective + ring radius), so neighbours never get overlapped */
.sf-rotator__view { width: var(--sf-fx-w); max-width: 100%; height: var(--sf-fx-h); perspective: 800px; margin: 16px var(--sf-fx-spill, 0px); box-sizing: content-box; }
.sf-rotator__stage {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: translateZ(calc(var(--sf-fx-r) * -1)) rotateY(calc(var(--sf-fx-idx) * -360deg / var(--sf-fx-n)));
  transition: transform .9s var(--sf-spring);
}
.sf-rotator__face {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 700; font-size: 20px; padding: 12px;
  border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); border: 2px solid var(--sf-line);
  transform: rotateY(calc(var(--sf-fx-i, 0) * 360deg / var(--sf-fx-n))) translateZ(var(--sf-fx-r)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.sf-rotator__face:nth-child(even) { background: var(--sf-ink); color: var(--sf-on-ink); border-color: var(--sf-ink); }
.sf-rotator__controls { display: flex; gap: 10px; }
.sf-rotator__btn { font: inherit; font-weight: 600; min-height: 44px; min-width: 44px; padding: 0 20px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; transition: scale .25s var(--sf-spring); }
.sf-rotator__btn:hover { scale: 1.08; } .sf-rotator__btn:active { scale: 1.1 .86; }

/* ---------- 18a. Draggable card with spring return ---------- */
.sf-drag { display: inline-grid; place-content: center; width: 150px; min-height: 110px; padding: 18px; text-align: center; font-weight: 600; background: var(--sf-surface); border-radius: var(--sf-radius-lg); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
.sf-drag.is-dragging { cursor: grabbing; z-index: 1000; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.sf-drag-zone { position: relative; min-height: 220px; border-radius: var(--sf-radius-lg); border: 2px dashed var(--sf-line); display: grid; place-content: center; }

/* ---------- 18b. Sortable list ---------- */
.sf-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: min(100%, 380px); }
.sf-sortable__item {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border-radius: var(--sf-radius); background: var(--sf-surface); font-weight: 600;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; transition: box-shadow .25s ease, scale .3s var(--sf-spring);
}
.sf-sortable__item::before { content: "\2807"; color: var(--sf-muted); font-size: 20px; line-height: 1; }
.sf-sortable__item.is-dragging { z-index: 1000; scale: 1.04; cursor: grabbing; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); transition: box-shadow .25s ease, scale .3s var(--sf-spring); }
.sf-sortable__item.is-grabbed { scale: 1.03; outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-sortable__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- 19. Swipe cards stack ---------- */
.sf-swipestack { --sf-fx-w: 260px; --sf-fx-h: 320px; display: grid; justify-items: center; gap: 22px; }
/* margin-bottom leaves room for the cards peeking below the top one */
.sf-swipestack__deck { position: relative; width: min(100%, var(--sf-fx-w)); height: var(--sf-fx-h); margin-bottom: 18px; }
.sf-swipestack__card {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; gap: 6px; border-radius: var(--sf-radius-lg); background: var(--sf-surface);
  border: 2px solid var(--sf-line); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transform-origin: 50% 90%;
  scale: calc(1 - var(--sf-fx-depth, 0) * .06); translate: 0 calc(var(--sf-fx-depth, 0) * 14px);
  transition: scale .5s var(--sf-spring), translate .5s var(--sf-spring), opacity .3s ease;
}
.sf-swipestack__card.is-top { z-index: 3; }
.sf-swipestack__card.is-dragging { cursor: grabbing; transition: none; }
.sf-swipestack__card.is-gone { pointer-events: none; transition: transform .55s var(--sf-ease), opacity .55s ease; opacity: 0; }
/* while dragged/thrown the card lives in the fixed .sf-fx-interact-fly layer: above everything, never adds scrollbars */
.sf-swipestack__card.is-lifted { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); }
.sf-swipestack__card[data-hidden] { opacity: 0; pointer-events: none; }
.sf-swipestack__stamp { position: absolute; top: 18px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font-weight: 800; letter-spacing: .08em; opacity: 0; pointer-events: none; }
.sf-swipestack__stamp--yes { left: 18px; color: #2FBF71; transform: rotate(-12deg); }
.sf-swipestack__stamp--no { right: 18px; color: var(--sf-danger); transform: rotate(12deg); }
.sf-swipestack__actions { display: flex; gap: 14px; }
.sf-swipestack__empty[hidden] { display: none; }
.sf-swipestack__empty { position: absolute; inset: 0; display: grid; place-content: center; color: var(--sf-muted); text-align: center; }

/* ---------- 20. Magnify list (generic dock) ---------- */
[data-sf-magnify] { display: inline-flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-radius: var(--sf-radius-lg); background: var(--sf-fill); }
[data-sf-magnify="vertical"] { flex-direction: column; align-items: flex-start; }
/* JS sets --sf-fx-scale plus --sf-fx-grow (extra px) so neighbours make room instead of being overlapped */
[data-sf-magnify] > * { transform-origin: 50% 100%; scale: var(--sf-fx-scale, 1); margin-inline: calc(var(--sf-fx-grow, 0px) / 2); transition: scale .25s var(--sf-spring), margin .25s var(--sf-spring); will-change: scale; }
[data-sf-magnify="vertical"] > * { transform-origin: 0 50%; margin-inline: 0; margin-block: calc(var(--sf-fx-grow, 0px) / 2); }
[data-sf-magnify].is-active > * { transition: scale .08s linear, margin .08s linear; }
.sf-magnify__item { width: 52px; height: 52px; display: grid; place-content: center; border-radius: 16px; background: var(--sf-surface); color: var(--sf-ink); font-size: 24px; font-weight: 700; border: 0; cursor: pointer; padding: 0; font-family: inherit; }

/* ---------- 21. Pull to refresh / elastic overscroll ---------- */
.sf-ptr { position: relative; overflow: hidden; height: 260px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); overscroll-behavior: contain; }
.sf-ptr__indicator {
  position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-content: center;
  background: var(--sf-ink); color: var(--sf-on-ink); z-index: 3; translate: 0 calc(var(--sf-fx-pull, 0) * 1px - 52px); scale: calc(.4 + var(--sf-fx-ptr-p, 0) * .6);
  opacity: calc(var(--sf-fx-ptr-p, 0) * 1.2); transition: translate .5s var(--sf-spring), scale .4s var(--sf-spring), opacity .2s ease;
}
.sf-ptr__indicator svg { width: 20px; height: 20px; rotate: calc(var(--sf-fx-ptr-p, 0) * 270deg); }
.sf-ptr.is-pulling .sf-ptr__indicator, .sf-ptr.is-pulling .sf-ptr__content { transition: none; }
.sf-ptr.is-loading .sf-ptr__indicator svg { animation: sf-fx-interact-roll .8s linear infinite; }
.sf-ptr.is-ready .sf-ptr__indicator { background: var(--sf-ink); outline: 3px solid var(--sf-fill); }
/* the list scrolls, but the pull gesture + fade edge are the affordance: no scrollbar */
.sf-ptr__scroll { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.sf-ptr__scroll::-webkit-scrollbar { display: none; }
.sf-ptr__scroll:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -3px; border-radius: inherit; }
.sf-ptr__content { translate: 0 calc(var(--sf-fx-pull, 0) * 1px); transition: translate .5s var(--sf-spring); padding: 16px 16px 28px; display: grid; gap: 10px; }
.sf-ptr__row { padding: 14px 16px; border-radius: var(--sf-radius); background: var(--sf-fill); font-weight: 600; }

/* ---------- 22a. Hover-reveal cards ---------- */
.sf-reveal { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-fill); aspect-ratio: 4 / 3; width: min(100%, 280px); isolation: isolate; }
.sf-reveal__media { position: absolute; inset: 0; display: grid; place-content: center; font-size: 56px; font-weight: 800; color: var(--sf-ink); background: var(--sf-fill); transition: transform .9s var(--sf-ease); }
.sf-reveal__media svg, .sf-reveal__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-reveal__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: var(--sf-surface); color: var(--sf-ink); border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0;
  transform: translateY(101%); transition: transform .55s var(--sf-spring); display: grid; gap: 4px; z-index: 1;
}
.sf-reveal__caption strong { font-size: 16px; } .sf-reveal__caption span { font-size: 14px; color: var(--sf-muted); }
.sf-reveal__icon { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; background: var(--sf-ink); color: var(--sf-on-ink); scale: 0; rotate: -90deg; transition: scale .5s var(--sf-spring), rotate .5s var(--sf-spring); z-index: 2; }
.sf-reveal:hover .sf-reveal__media, .sf-reveal:focus-within .sf-reveal__media { transform: scale(1.14) rotate(1.5deg); }
.sf-reveal:hover .sf-reveal__caption, .sf-reveal:focus-within .sf-reveal__caption { transform: none; }
.sf-reveal:hover .sf-reveal__icon, .sf-reveal:focus-within .sf-reveal__icon { scale: 1; rotate: 0deg; transition-delay: .08s; }
.sf-reveal__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.sf-reveal__link:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: -6px; }
@media (hover: none) { .sf-reveal__caption { transform: none; } .sf-reveal__icon { scale: 1; rotate: 0deg; } }

/* ---------- 22b. Hover distortion lines ---------- */
.sf-lines { position: relative; display: grid; align-content: center; gap: var(--sf-fx-gap, 7px); padding: 22px 0; border-radius: var(--sf-radius-lg); background: var(--sf-surface); overflow: hidden; cursor: crosshair; }
.sf-lines__bar { display: block; height: var(--sf-fx-h, 3px); margin: 0 -10%; border-radius: var(--sf-pill); background: var(--sf-ink); translate: var(--sf-fx-x, 0) 0; scale: var(--sf-fx-sx, 1) 1; transition: translate .6s var(--sf-spring), scale .6s var(--sf-spring); }
.sf-lines.is-active .sf-lines__bar { transition: translate .12s ease-out, scale .12s ease-out; }

/* ---------- 23a. Lens / magnifier ---------- */
[data-sf-lens] { position: relative; display: inline-block; overflow: hidden; border-radius: var(--sf-radius-lg); cursor: none; line-height: 0; max-width: 100%; touch-action: none; }
[data-sf-lens] > img, [data-sf-lens] > svg { display: block; width: 100%; height: auto; }
.sf-lens__glass {
  position: absolute; left: 0; top: 0; width: var(--sf-fx-lens, 130px); height: var(--sf-fx-lens, 130px); border-radius: 50%; pointer-events: none; z-index: 2;
  background-repeat: no-repeat; background-color: var(--sf-surface); border: 3px solid var(--sf-surface); outline: 2px solid var(--sf-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 0 18px rgba(255, 255, 255, .25); scale: 0; opacity: 0;
  transition: scale .4s var(--sf-spring), opacity .2s ease;
}
[data-sf-lens].is-on .sf-lens__glass { scale: 1; opacity: 1; }

/* ---------- 23b. Image compare slider ---------- */
.sf-imgcompare { --sf-fx-pos: 50%; position: relative; width: min(100%, 420px); aspect-ratio: 16 / 10; border-radius: var(--sf-radius-lg); overflow: hidden; user-select: none; -webkit-user-select: none; isolation: isolate; touch-action: pan-y; }
.sf-imgcompare__layer { position: absolute; inset: 0; display: grid; place-content: center; font-weight: 800; font-size: 28px; }
.sf-imgcompare__layer > svg, .sf-imgcompare__layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-imgcompare__layer--before { clip-path: inset(0 calc(100% - var(--sf-fx-pos)) 0 0); z-index: 1; background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-imgcompare__layer--after { background: var(--sf-fill); color: var(--sf-ink); }
.sf-imgcompare__tag { position: absolute; top: 12px; padding: 4px 12px; border-radius: var(--sf-pill); background: var(--sf-surface); color: var(--sf-ink); font-size: 12px; font-weight: 700; z-index: 2; }
.sf-imgcompare__tag--l { left: 12px; } .sf-imgcompare__tag--r { right: 12px; }
.sf-imgcompare__bar { position: absolute; top: 0; bottom: 0; left: var(--sf-fx-pos); width: 3px; margin-left: -1.5px; background: var(--sf-surface); z-index: 3; pointer-events: none; }
.sf-imgcompare__handle {
  position: absolute; top: 50%; left: var(--sf-fx-pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: var(--sf-surface); color: var(--sf-ink); display: grid; place-content: center; font-size: 16px; font-weight: 800; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: scale .3s var(--sf-spring);
}
.sf-imgcompare.is-dragging .sf-imgcompare__handle { scale: 1.2; }
.sf-imgcompare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 5; cursor: ew-resize; appearance: none; -webkit-appearance: none; }
.sf-imgcompare__range:focus-visible ~ .sf-imgcompare__handle { outline: 3px solid var(--sf-ink); outline-offset: 3px; }

/* ---------- 24. Fancy buttons ---------- */
.sf-fx-btn {
  font: inherit; font-size: 16px; font-weight: 600; min-height: 52px; padding: 0 30px; cursor: pointer; border: 0; position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-on-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: scale .25s var(--sf-spring);
}
.sf-fx-btn:hover { scale: 1.05; } .sf-fx-btn:active { scale: 1.1 .86; }
/* animated gradient */
.sf-fx-btn--gradient { color: #111; background: linear-gradient(110deg, #FF5C8A, #FFC857, #7AE582, #5CC8FF, #FF5C8A); background-size: 300% 100%; animation: sf-fx-interact-gradient 6s linear infinite; }
.sf-fx-btn--gradient:hover { animation-duration: 1.8s; }
/* shine border */
.sf-fx-btn--shine { background: var(--sf-surface); color: var(--sf-ink); }
.sf-fx-btn--shine::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--sf-fx-interact-angle), transparent 0 55%, var(--sf-ink) 85%, transparent); animation: sf-fx-interact-spin 2.8s linear infinite; }
.sf-fx-btn--shine::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: var(--sf-surface); }
/* shimmer sweep */
.sf-fx-btn--sweep::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); translate: -120% 0; animation: sf-fx-interact-sweep 2.6s ease-in-out infinite; }
/* monochrome ink fill: the fill grows from where the pointer entered */
.sf-fx-btn--ink { background: transparent; color: var(--sf-ink); box-shadow: inset 0 0 0 2px var(--sf-ink); transition: color .35s ease, scale .25s var(--sf-spring); --sf-fx-ox: 50%; --sf-fx-oy: 50%; }
.sf-fx-btn--ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sf-ink); clip-path: circle(0 at var(--sf-fx-ox) var(--sf-fx-oy)); transition: clip-path .6s var(--sf-ease); }
.sf-fx-btn--ink:hover, .sf-fx-btn--ink:focus-visible { color: var(--sf-on-ink); }
.sf-fx-btn--ink:hover::before, .sf-fx-btn--ink:focus-visible::before { clip-path: circle(150% at var(--sf-fx-ox) var(--sf-fx-oy)); }
@keyframes sf-fx-interact-gradient { to { background-position: -300% 0; } }
@keyframes sf-fx-interact-sweep { 0%, 40% { translate: -120% 0; } 100% { translate: 320% 0; } }

/* ---------- 25. Theme toggle with circular reveal ---------- */
[data-sf-theme-toggle] { position: relative; }
/* scoped to the moment of the toggle so other view transitions on the page keep their own animations */
html[data-sf-fx-themevt]::view-transition-old(root), html[data-sf-fx-themevt]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-sf-fx-themevt]::view-transition-old(root) { z-index: 1; }
html[data-sf-fx-themevt]::view-transition-new(root) { z-index: 2; }
.sf-fx-interact-fade, .sf-fx-interact-fade *, .sf-fx-interact-fade *::before, .sf-fx-interact-fade *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}
.sf-theme-icon { width: 22px; height: 22px; display: block; }
[data-sf-theme-toggle] .sf-theme-icon__moon { display: none; }
[data-sf-theme="dark"] [data-sf-theme-toggle] .sf-theme-icon__sun, [data-sf-theme="dark"] [data-sf-theme-toggle].sf-theme-icon__sun { display: none; }
[data-sf-theme="dark"] [data-sf-theme-toggle] .sf-theme-icon__moon { display: block; }

/* ---------- 26. Cursor trail ---------- */
.sf-trail { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); background: var(--sf-surface); min-height: 160px; display: grid; place-content: center; }
.sf-trail > canvas.sf-trail__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sf-trail > :not(canvas) { position: relative; z-index: 1; pointer-events: none; }

/* ---------- 27. Gravity sandbox ---------- */
.sf-gravity { position: relative; min-height: 260px; border-radius: var(--sf-radius-lg); background: var(--sf-surface); overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; padding: 18px; }
.sf-gravity__item { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); font-weight: 600; font-size: 15px; user-select: none; -webkit-user-select: none; touch-action: none; }
.sf-gravity__item:nth-child(3n) { background: var(--sf-ink); color: var(--sf-on-ink); }
.sf-gravity.is-falling .sf-gravity__item { position: absolute; left: 0; top: 0; margin: 0; cursor: grab; will-change: transform; }
.sf-gravity.is-falling .sf-gravity__item.is-held { cursor: grabbing; z-index: 5; }

/* ---------- 28. Emoji reaction burst ---------- */
.sf-react { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative; transition: scale .25s var(--sf-spring); }
.sf-react:hover { scale: 1.06; } .sf-react:active { scale: 1.12 .84; }
.sf-react__count { font-variant-numeric: tabular-nums; color: var(--sf-muted); }
.sf-react-float {
  position: fixed; z-index: 2100; pointer-events: none; font-size: var(--sf-fx-size, 26px); line-height: 1; margin: -.5em 0 0 -.5em;
  animation: sf-fx-interact-float-up var(--sf-fx-dur, 1.6s) cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes sf-fx-interact-float-up {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; } 15% { transform: translate(calc(var(--sf-fx-dx) * .2), -20px) scale(1.25); opacity: 1; }
  100% { transform: translate(var(--sf-fx-dx), var(--sf-fx-dy)) scale(.9) rotate(var(--sf-fx-rot, 0deg)); opacity: 0; }
}

/* ---------- 29. Soft micro-interactions kit ---------- */
/* checkbox pop */
.sf-pop-check { appearance: none; -webkit-appearance: none; margin: 0; width: 28px; height: 28px; border-radius: 10px; background: var(--sf-fill); box-shadow: inset 0 0 0 2px var(--sf-line); cursor: pointer; position: relative; flex: none; transition: background .2s ease, box-shadow .2s ease, scale .3s var(--sf-spring); }
.sf-pop-check:focus-visible, .sf-jswitch:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 3px; }
.sf-pop-check:hover { scale: 1.1; }
.sf-pop-check::before { content: ""; position: absolute; left: 9px; top: 5px; width: 8px; height: 14px; border: solid var(--sf-on-ink); border-width: 0 3px 3px 0; rotate: 45deg; clip-path: inset(0 100% 100% 0); transition: clip-path .35s var(--sf-ease) .05s; }
.sf-pop-check::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid var(--sf-ink); opacity: 0; scale: .6; }
.sf-pop-check:checked { background: var(--sf-ink); box-shadow: none; animation: sf-fx-interact-jelly .55s var(--sf-ease); }
.sf-pop-check:checked::before { clip-path: inset(0); }
.sf-pop-check:checked::after { animation: sf-fx-interact-ring .6s var(--sf-ease); }
@keyframes sf-fx-interact-ring { 0% { opacity: .8; scale: .7; } 100% { opacity: 0; scale: 1.5; } }
/* jelly toggle (native checkbox with role=switch) */
.sf-jswitch { appearance: none; -webkit-appearance: none; margin: 0; width: 62px; height: 34px; border-radius: var(--sf-pill); background: var(--sf-line); position: relative; cursor: pointer; flex: none; transition: background .25s ease; }
.sf-jswitch::before { content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: translate .5s var(--sf-spring), width .25s var(--sf-ease); }
.sf-jswitch:active::before { width: 36px; }
.sf-jswitch:checked { background: var(--sf-ink); }
.sf-jswitch:checked::before { translate: 28px 0; }
.sf-jswitch:checked:active::before { translate: 18px 0; }
/* heart like */
.sf-like { font: inherit; font-weight: 600; font-size: 15px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: var(--sf-pill); background: var(--sf-fill); color: var(--sf-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative; transition: scale .25s var(--sf-spring); }
.sf-like:hover { scale: 1.06; }
.sf-like__heart { width: 24px; height: 24px; fill: transparent; stroke: currentColor; stroke-width: 2; transition: fill .2s ease, stroke .2s ease; }
.sf-like[aria-pressed="true"] .sf-like__heart { fill: #FF5C8A; stroke: #FF5C8A; animation: sf-fx-interact-heartbeat .7s var(--sf-ease); }
.sf-like__bit { position: absolute; left: 28px; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; pointer-events: none; animation: sf-fx-interact-like-bit .7s var(--sf-ease) forwards; }
@keyframes sf-fx-interact-like-bit { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--sf-fx-dx), var(--sf-fx-dy)) scale(.2); opacity: 0; } }

/* ---------- 30. Screen shake ---------- */
.sf-fx-interact-shaking { animation: sf-fx-interact-hshake var(--sf-fx-dur, .5s) cubic-bezier(.36, .07, .19, .97) both; }
@keyframes sf-fx-interact-hshake {
  10%, 90% { transform: translate3d(calc(var(--sf-fx-amp, 8px) * -.25), 0, 0); } 20%, 80% { transform: translate3d(calc(var(--sf-fx-amp, 8px) * .5), 0, 0); }
  30%, 50%, 70% { transform: translate3d(calc(var(--sf-fx-amp, 8px) * -1), 0, 0); } 40%, 60% { transform: translate3d(var(--sf-fx-amp, 8px), 0, 0); }
}

/* ---------- Demo helpers (non-essential, scoped) ---------- */
#fx-interact code { overflow-wrap: anywhere; }
.sf-fx-interact-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--sf-radius); background: var(--sf-surface); font-weight: 600; border: 0; font-family: inherit; font-size: 15px; color: var(--sf-ink); cursor: pointer; }
.sf-fx-interact-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-sf-magnet], [data-sf-sticky], .sf-sticky__inner, [data-sf-tilt], [data-sf-spotlight]::before, [data-sf-spotlight]::after, [data-sf-jelly], .sf-hold, .sf-slide__handle,
  .sf-flip__inner, .sf-rotator__stage, .sf-swipestack__card, [data-sf-magnify] > *, .sf-ptr__indicator, .sf-ptr__content, .sf-reveal__media, .sf-reveal__caption, .sf-reveal__icon,
  .sf-lines__bar, .sf-lens__glass, .sf-fx-btn, .sf-fx-btn::before, .sf-react, .sf-like, .sf-pop-check, .sf-jswitch, .sf-jswitch::before, .sf-sortable__item, .sf-imgcompare__handle {
    transition: none !important;
  }
  .sf-glow, .sf-glow::after, .sf-bg-orbs__orb, .sf-blobby, .sf-wave svg, [class*="sf-anim-"], .sf-anim-ping::after, .sf-bg-drift::before, .sf-fx-btn--gradient,
  .sf-fx-btn--shine::before, .sf-fx-btn--sweep::after, [data-sf-jelly]:hover, [data-sf-jelly].is-jelly, .sf-hold.is-done, .sf-slide.is-done .sf-slide__handle, .sf-ptr.is-loading .sf-ptr__indicator svg,
  .sf-pop-check:checked, .sf-pop-check:checked::after, .sf-like[aria-pressed="true"] .sf-like__heart, .sf-fx-interact-shaking {
    animation: none !important;
  }
  .sf-ripple__wave, .sf-sparkle, .sf-react-float, .sf-like__bit, .sf-fx-interact-canvas { display: none !important; }
  .sf-glow::after { display: none; }
  .sf-flip__inner { transition: none !important; }
  .sf-flip.is-flipped .sf-flip__inner, .sf-flip--hover:hover .sf-flip__inner { transform: none; }
  .sf-flip.is-flipped .sf-flip__face--front, .sf-flip--hover:hover .sf-flip__face--front { visibility: hidden; }
  .sf-flip__face--back { transform: none; backface-visibility: visible; visibility: hidden; }
  .sf-flip.is-flipped .sf-flip__face--back, .sf-flip--hover:hover .sf-flip__face--back { visibility: visible; }
  .sf-bg-orbs__orb { opacity: .35; }
  .sf-reveal__caption { transform: none; } .sf-reveal__icon { scale: 1; rotate: 0deg; }
  .sf-fx-interact-fade, .sf-fx-interact-fade * { transition: none !important; }
}