@import url("../tokens/fonts.css");

/* ==========================================================================
   Shipyard — a product-engineering studio kit.
   Containers, slots and release manifests on a strong 12-column grid.
   Colours, spacing, radii, shadows, durations and easings come from tokens.css.
   Rules: movement is transform/opacity only; entrance animations fill BACKWARDS;
   every pressable is a block in a hatched slot (::before = slot, ::after = face).
   ========================================================================== */

:root {
  color-scheme: light;
  /* the slot: a recess hatched at 45° like a CAD placement footprint */
  --sy-hatchink: var(--line-strong);
  --sy-slotbg: var(--slot);
  --sy-hatch: repeating-linear-gradient(-45deg, var(--sy-hatchink) 0 1px, transparent 1px 5px);
  /* the yard floor: painted container-bay corner marks, 120×48 (a 20ft box in plan) — `page-mark` */
  --sy-bays: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M6 13V6h7M107 6h7v7M114 35v7h-7M13 42H6v-7' fill='none' stroke='%23d7d9d3' stroke-width='1.5'/%3E%3C/svg%3E");
  --sy-ribs: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 7px);
  /* the logo mark's inks, re-bound on dark bands */
  --_mk-a: var(--signal);
  --_mk-b: var(--ink);
  --_mk-rib: var(--page);
}
[data-theme="dark"] {
  color-scheme: dark;
  --sy-bays: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M6 13V6h7M107 6h7v7M114 35v7h-7M13 42H6v-7' fill='none' stroke='%231b1f24' stroke-width='1.5'/%3E%3C/svg%3E");
  --sy-hatchink: #3a414b;
}

body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--sy-bays);
  background-size: 120px 48px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 27px;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
::selection { background: var(--signal); color: var(--on-signal); }

/* ---------- type ---------- */
.sy-display { margin: 0; font: 800 76px/72px var(--font-sans); font-stretch: 125%; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.sy-title { margin: 0; font: 760 44px/46px var(--font-sans); font-stretch: 115%; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.sy-heading { margin: 0; font: 680 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.sy-body { margin: 0; font-size: 17px; line-height: 27px; }
.sy-lede { margin: 0; font-size: 19px; line-height: 30px; color: var(--ink-soft); text-wrap: pretty; }
.sy-small { margin: 0; font-size: 14px; line-height: 21px; font-weight: 450; }
.sy-label { font: 620 15px/20px var(--font-sans); font-stretch: 87.5%; letter-spacing: .005em; }
.sy-meta { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sy-log { font: 400 13px/20px var(--font-mono); }
.sy-num { font-weight: 820; font-stretch: 125%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sy-soft { color: var(--ink-soft); }
.sy-hl { color: var(--signal-ink); }
.sy-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-ink); }
.sy-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--signal); flex: none; }
.sy-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.sy-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
a { color: var(--signal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- focus: one orange ring everywhere ---------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; }

/* ---------- layout ---------- */
.sy-wrap { box-sizing: border-box; width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 32px; }
.sy-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.sy-guides { position: absolute; inset: 0 32px; pointer-events: none; z-index: -1; background-image: linear-gradient(90deg, var(--page-mark) 1px, transparent 1px); background-size: calc((100% + 0px) / 12) 100%; border-right: 1px solid var(--page-mark); }
.sy-section { position: relative; padding: 96px 0; }
.sy-sechead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; margin-bottom: 40px; }
.sy-sechead .sy-title { margin-top: 14px; }
.sy-sechead p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 27px; }
.sy-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sy-col { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .sy-sechead { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 28px; } }
@media (max-width: 640px) {
  .sy-wrap { padding: 0 16px; }
  .sy-guides { inset: 0 16px; background-size: calc(100% / 4) 100%; }
  .sy-section { padding: 64px 0; }
  .sy-display { font-size: 44px; line-height: 44px; letter-spacing: -0.03em; }
  .sy-title { font-size: 32px; line-height: 34px; }
}

/* ---------- preview stage helpers ---------- */
.sy-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; }
.sy-stage--top { align-items: flex-start; }
.sy-stage--col { flex-direction: column; align-items: stretch; }
.sy-cap-label { width: 100%; font: 500 11.5px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- the logo mark ---------- */
.sy-markwrap { display: inline-block; width: var(--_s, 32px); height: var(--_s, 32px); flex: none; }
.sy-mark { display: block; width: 100%; height: 100%; }
.sy-mark__a { fill: var(--_mk-a); }
.sy-mark__b { fill: var(--_mk-b); }
.sy-mark__rib { stroke: var(--_mk-rib); stroke-width: 1.6; fill: none; }
.sy-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 3px; }
.sy-wordmark__name { font: 800 21px/1 var(--font-sans); font-stretch: 125%; letter-spacing: -0.025em; }

/* ---------- shared motion ---------- */
@keyframes sy-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes sy-drop { from { opacity: 0; transform: translateY(-28px); } }
@keyframes sy-roll { from { opacity: 0; transform: translateY(55%); } }
@keyframes sy-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.is-entering { animation: sy-rise var(--dur-glide) var(--ease-glide) backwards; }
.is-rolling { display: inline-block; animation: sy-roll var(--dur-glide) var(--ease-glide) backwards; }
/* containers stacking: the group is armed (hidden) only once JS runs; children drop in, top to bottom, capped at 8 */
.sy-stack.is-armed > * { opacity: 0; }
.sy-stack.is-in > * { animation: sy-drop var(--dur-stack) var(--ease-stack) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---------- live dot ---------- */
.sy-live { width: 7px; height: 7px; border-radius: 1px; background: var(--success); flex: none; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ==================================================================== Button */
/* ::before = the hatched slot (counter-moves so it stays put), ::after = the block face */
.sy-btn {
  --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_shade: rgba(15, 18, 21, .10);
  --_lift: -2px; --_seat: 4px;
  position: relative; isolation: isolate; z-index: 0;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; margin: 0 0 4px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--_fg);
  font: 620 15px/20px var(--font-sans); font-stretch: 87.5%; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; vertical-align: top;
  transition: transform var(--dur-release) var(--ease-release), color var(--dur-hover);
}
.sy-btn::before {
  content: ""; position: absolute; z-index: -2; left: -2px; right: -2px; top: 10px; bottom: -4px;
  border-radius: 0 0 5px 5px; background: var(--sy-hatch), var(--sy-slotbg); box-shadow: var(--shadow-seat);
  transition: transform var(--dur-release) var(--ease-release);
}
.sy-btn::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-sm);
  background: var(--_face); box-shadow: inset 0 0 0 1px var(--_edge), inset 0 -2px 0 var(--_shade);
  transition: background-color var(--dur-hover), box-shadow var(--dur-hover);
}
.sy-btn > * { pointer-events: none; }
.sy-btn .sy-icon { width: 18px; height: 18px; stroke-width: 2; }
.sy-btn__icon--end { transition: transform var(--dur-hover) var(--ease-glide); }
.sy-btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(var(--_lift)); }
.sy-btn:not(:disabled):not([aria-disabled="true"]):hover::before { transform: translateY(calc(var(--_lift) * -1)); }
.sy-btn:not(:disabled):not([aria-disabled="true"]):hover .sy-btn__icon--end { transform: translateX(3px); }
.sy-btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(var(--_seat)); transition-duration: var(--dur-seat); transition-timing-function: var(--ease-seat); }
.sy-btn:not(:disabled):not([aria-disabled="true"]):active::before { transform: translateY(calc(var(--_seat) * -1)); transition-duration: var(--dur-seat); transition-timing-function: var(--ease-seat); }

.sy-btn--primary { --_face: var(--signal); --_fg: var(--on-signal); --_edge: transparent; --_shade: rgba(15, 18, 21, .2); }
.sy-btn--danger { --_fg: var(--danger); --_edge: var(--danger); }
.sy-btn--deck { --_face: var(--deck); --_fg: var(--on-deck); --_edge: transparent; --_shade: rgba(0, 0, 0, .3); }
.sy-btn--ghost { --_face: transparent; --_edge: transparent; --_shade: transparent; --_fg: var(--ink); --_lift: 0px; --_seat: 1px; }
.sy-btn--ghost::before { display: none; }
.sy-btn--ghost:not(:disabled):hover { --_face: var(--surface-sunk); }

.sy-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; gap: 6px; --_lift: -1.5px; --_seat: 3px; margin-bottom: 3px; }
.sy-btn--sm::before { top: 8px; bottom: -3px; }
.sy-btn--sm .sy-icon { width: 16px; height: 16px; }
.sy-btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; line-height: 22px; gap: 10px; }
.sy-btn--lg .sy-icon { width: 20px; height: 20px; }
.sy-btn--block { display: flex; width: 100%; }

.sy-btn:disabled, .sy-btn[aria-disabled="true"] { --_face: var(--surface-sunk); --_fg: var(--ink-soft); --_edge: var(--line); --_shade: transparent; cursor: not-allowed; }
.sy-btn:disabled::before, .sy-btn[aria-disabled="true"]::before { opacity: .45; }
.sy-btn--ghost:disabled { --_face: transparent; }

/* loading: three cargo blocks load in sequence; the label keeps its width */
.sy-btn__load { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 4px; }
.sy-btn__load i { width: 7px; height: 7px; border-radius: 1px; background: currentColor; opacity: .25; animation: sy-load 900ms steps(1) infinite; }
.sy-btn__load i:nth-child(2) { animation-delay: 300ms; }
.sy-btn__load i:nth-child(3) { animation-delay: 600ms; }
@keyframes sy-load { 0% { opacity: 1; } 33% { opacity: .25; } }
.sy-btn.is-loading { cursor: progress; }
.sy-btn.is-loading > :not(.sy-btn__load) { opacity: 0; }
.sy-btn.is-loading .sy-btn__load { display: flex; }

/* icon button: same block, square */
.sy-iconbtn { width: 44px; padding: 0; }
.sy-iconbtn.sy-btn--sm { width: 36px; }
.sy-iconbtn .sy-icon { width: 20px; height: 20px; }
.sy-iconbtn.sy-btn--sm .sy-icon { width: 18px; height: 18px; }
.sy-iconbtn[aria-pressed="true"] { --_face: var(--signal-tint); --_fg: var(--signal-ink); --_edge: var(--signal-ink); transform: translateY(2px); }
.sy-iconbtn[aria-pressed="true"]::before { transform: translateY(-2px); }
.sy-iconbtn[aria-pressed="true"]:hover { transform: translateY(2px) !important; }
.sy-iconbtn[aria-pressed="true"]:hover::before { transform: translateY(-2px) !important; }
.sy-iconbtn__count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 2px; background: var(--deck); color: var(--on-deck); font: 600 10.5px/18px var(--font-mono); text-align: center; }

/* ==================================================================== Chip */
.sy-chip {
  --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_shade: rgba(15, 18, 21, .08);
  position: relative; isolation: isolate; z-index: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; margin: 0 0 3px;
  border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--_fg);
  font: 600 14.5px/20px var(--font-sans); font-stretch: 92%; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left;
  transition: transform var(--dur-release) var(--ease-release);
}
.sy-chip::before { content: ""; position: absolute; z-index: -2; left: -2px; right: -2px; top: 8px; bottom: -3px; border-radius: 0 0 4px 4px; background: var(--sy-hatch), var(--sy-slotbg); transition: transform var(--dur-release) var(--ease-release); }
.sy-chip::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-xs); background: var(--_face); box-shadow: inset 0 0 0 1px var(--_edge), inset 0 -2px 0 var(--_shade); transition: background-color var(--dur-hover), box-shadow var(--dur-hover); }
.sy-chip > * { pointer-events: none; }
.sy-chip:not([aria-pressed="true"]):hover { transform: translateY(-1.5px); }
.sy-chip:not([aria-pressed="true"]):hover::before { transform: translateY(1.5px); }
.sy-chip:active { transform: translateY(3px); transition-duration: var(--dur-seat); transition-timing-function: var(--ease-seat); }
.sy-chip:active::before { transform: translateY(-3px); transition-duration: var(--dur-seat); transition-timing-function: var(--ease-seat); }
.sy-chip[aria-pressed="true"] { --_face: var(--signal); --_fg: var(--on-signal); --_edge: transparent; --_shade: rgba(15, 18, 21, .2); transform: translateY(3px); }
.sy-chip[aria-pressed="true"]::before { transform: translateY(-3px); }
.sy-chip__tick { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sy-chip__tick .sy-icon { width: 12px; height: 12px; stroke-width: 2.6; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-hover), transform var(--dur-glide) var(--ease-stack); }
.sy-chip[aria-pressed="true"] .sy-chip__tick { box-shadow: inset 0 0 0 1.5px var(--on-signal); }
.sy-chip[aria-pressed="true"] .sy-chip__tick .sy-icon { opacity: 1; transform: none; }
.sy-chip__icon { width: 18px; height: 18px; }
.sy-chip__meta { font: 500 11px/1 var(--font-mono); color: var(--ink-soft); }
.sy-chip[aria-pressed="true"] .sy-chip__meta { color: var(--on-signal); }
.sy-chip:disabled { --_face: var(--surface-sunk); --_fg: var(--ink-soft); --_edge: var(--line); cursor: not-allowed; }
.sy-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==================================================================== Toggle */
.sy-toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sy-toggle__input { position: absolute; left: 0; top: 50%; width: 52px; height: 30px; margin: -15px 0 0; opacity: 0; cursor: pointer; z-index: 1; }
.sy-toggle__track { position: relative; width: 52px; height: 30px; flex: none; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--line-strong); transition: background-color var(--dur-hover); }
.sy-toggle__on, .sy-toggle__off { position: absolute; top: 0; width: 26px; height: 30px; display: grid; place-items: center; font: 600 11px/1 var(--font-mono); }
.sy-toggle__on { left: 1px; color: var(--on-signal); }
.sy-toggle__off { right: 1px; color: var(--ink-soft); }
.sy-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 24px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 6px, var(--line-strong) 6px 7px, transparent 7px 10px, var(--line-strong) 10px 11px, transparent 11px 14px, var(--line-strong) 14px 15px, transparent 15px) center / 100% 10px no-repeat, var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 0 rgba(15, 18, 21, .18);
  transition: transform var(--dur-glide) var(--ease-release);
}
.sy-toggle__input:checked + .sy-toggle__track { background: var(--signal); box-shadow: inset 0 0 0 1px transparent, var(--shadow-well); }
.sy-toggle__input:checked + .sy-toggle__track .sy-toggle__knob { transform: translateX(24px); box-shadow: inset 0 0 0 1px rgba(15, 18, 21, .35), 0 2px 0 rgba(15, 18, 21, .25); }
.sy-toggle__input:focus-visible + .sy-toggle__track { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.sy-toggle:hover .sy-toggle__track { box-shadow: var(--shadow-well), inset 0 0 0 1px var(--ink-soft); }
.sy-toggle:hover .sy-toggle__input:checked + .sy-toggle__track { box-shadow: var(--shadow-well); }
.sy-toggle__text { display: flex; flex-direction: column; }
.sy-toggle__label { font: 560 15px/22px var(--font-sans); color: var(--ink); }
.sy-toggle__hint { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.sy-toggle.is-disabled { cursor: not-allowed; }
.sy-toggle.is-disabled .sy-toggle__track { opacity: .5; }
.sy-toggle.is-disabled .sy-toggle__input { cursor: not-allowed; }

/* ==================================================================== Checkbox / Radio */
.sy-choice { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.sy-choice__input { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sy-choice__box { position: relative; width: 22px; height: 22px; margin-top: 1px; flex: none; box-sizing: border-box; overflow: hidden; border-radius: var(--radius-xs); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--shadow-well); transition: box-shadow var(--dur-hover); }
.sy-choice__fill { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 1px; background: var(--signal); color: var(--on-signal); transform: translateY(-130%); transition: transform var(--dur-glide) var(--ease-stack); }
.sy-choice__fill .sy-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.sy-choice__input:checked + .sy-choice__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sy-choice__input:checked + .sy-choice__box .sy-choice__fill { transform: none; }
.sy-choice--radio .sy-choice__box { border-radius: 50%; }
.sy-choice--radio .sy-choice__fill { inset: 6px; border-radius: 1.5px; }
.sy-choice__input:focus-visible + .sy-choice__box { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.sy-choice:hover .sy-choice__input:not(:checked) + .sy-choice__box { box-shadow: inset 0 0 0 1.5px var(--ink-soft), var(--shadow-well); }
.sy-choice__text { display: flex; flex-direction: column; }
.sy-choice__label { font: 560 15px/24px var(--font-sans); color: var(--ink); }
.sy-choice__hint { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.sy-choice.is-disabled { cursor: not-allowed; }
.sy-choice.is-disabled .sy-choice__box { background: var(--surface-sunk); box-shadow: inset 0 0 0 1.5px var(--line); }
.sy-choice.is-disabled .sy-choice__label { color: var(--ink-soft); }
.sy-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sy-fieldset > legend { padding: 0; margin-bottom: 10px; }

/* ==================================================================== TextField / Select */
.sy-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sy-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sy-field__label { font: 620 14px/20px var(--font-sans); font-stretch: 87.5%; color: var(--ink); }
.sy-field__opt { font-weight: 450; color: var(--ink-soft); }
.sy-field__count { font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sy-field__box { position: relative; display: flex; align-items: stretch; min-height: 46px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-hair); transition: box-shadow var(--dur-hover); }
.sy-field__box:hover { box-shadow: inset 0 0 0 1px var(--ink-soft), var(--shadow-hair); }
.sy-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--signal-ink), 0 0 0 3px var(--signal-tint); }
.sy-field__input { flex: 1; min-width: 0; box-sizing: border-box; margin: 0; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 400 16px/24px var(--font-sans); outline: none; border-radius: var(--radius-sm); }
.sy-field__input:focus-visible { outline: none; }
textarea.sy-field__input { padding: 11px 14px; resize: vertical; min-height: 88px; }
.sy-field__input::placeholder { color: var(--ink-soft); }
.sy-field__input:disabled { cursor: not-allowed; }
.sy-field__box:has(.sy-field__input:disabled) { background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.sy-field__affix { display: flex; align-items: center; padding: 0 12px; font: 500 13px/20px var(--font-mono); color: var(--ink-soft); background: var(--surface-sunk); }
.sy-field__affix:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); box-shadow: inset -1px 0 0 var(--line); }
.sy-field__affix:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: inset 1px 0 0 var(--line); }
.sy-field__affix + .sy-field__input, .sy-field__input + .sy-field__affix { margin: 1px 0; }
.sy-field__box > .sy-field__affix:first-child { margin: 1px 0 1px 1px; }
.sy-field__box > .sy-field__affix:last-child { margin: 1px 1px 1px 0; }
.sy-field__hint { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.sy-field__error { display: none; align-items: center; gap: 6px; font: 560 13.5px/19px var(--font-sans); color: var(--danger); }
.sy-field__error .sy-icon { width: 16px; height: 16px; }
.sy-field.is-error .sy-field__error { display: flex; }
.sy-field.is-error .sy-field__box { box-shadow: inset 0 0 0 2px var(--danger); }
.sy-field.is-error .sy-field__box:focus-within { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 3px var(--signal-tint); }
.sy-field__box.is-shaking { animation: sy-shake 280ms var(--ease-glide); }
.sy-select__input { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; height: 46px; }
.sy-select__chev { position: absolute; right: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px; pointer-events: none; color: var(--ink-soft); }
.sy-select__input option { background: var(--surface); color: var(--ink); }

/* ==================================================================== floating layer: Menu + Tooltip */
.sy-float { position: fixed; z-index: 1000; left: 0; top: 0; opacity: 0; transform: translate(var(--_dx, 0), var(--_dy, 0)); transition: opacity 140ms var(--ease-glide), transform var(--dur-glide) var(--ease-glide); }
.sy-float[data-side="top"] { --_dy: 5px; }
.sy-float[data-side="bottom"] { --_dy: -5px; }
.sy-float[data-side="left"] { --_dx: 5px; }
.sy-float[data-side="right"] { --_dx: -5px; }
.sy-float.is-open { opacity: 1; transform: none; }
.sy-menuwrap { display: inline-block; }
.sy-menu { box-sizing: border-box; min-width: 200px; max-width: calc(100vw - 16px); padding: 6px; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line); outline: none; }
.sy-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: 520 15px/20px var(--font-sans); text-align: left; cursor: pointer; }
.sy-menu__item .sy-icon { width: 18px; height: 18px; color: var(--ink-soft); }
.sy-menu__item:hover, .sy-menu__item:focus { background: var(--surface-sunk); outline: none; }
.sy-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--signal-ink); }
.sy-menu__item.is-danger, .sy-menu__item.is-danger .sy-icon { color: var(--danger); }
.sy-menu__meta { margin-left: auto; padding-left: 16px; font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); }
.sy-menu__sep { height: 1px; margin: 6px 4px; background: var(--line); }

/* ==================================================================== Slider */
.sy-slider { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sy-slider__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sy-slider__value { box-sizing: border-box; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--surface-sunk); color: var(--ink); font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sy-slider__input { --_p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.sy-slider__input::-webkit-slider-runnable-track { height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--signal) 0 var(--_p), var(--surface-sunk) var(--_p)); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--line); }
.sy-slider__input::-moz-range-track { height: 8px; border-radius: 2px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.sy-slider__input::-moz-range-progress { height: 8px; border-radius: 2px; background: var(--signal); }
.sy-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 28px; margin-top: -10px; border: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent 6px, var(--line-strong) 6px 7px, transparent 7px 9.5px, var(--line-strong) 9.5px 10.5px, transparent 10.5px 13px, var(--line-strong) 13px 14px, transparent 14px) center / 100% 12px no-repeat, var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-soft), 0 3px 0 var(--slot);
  transition: transform var(--dur-seat) var(--ease-seat), box-shadow var(--dur-seat);
}
.sy-slider__input::-moz-range-thumb { width: 20px; height: 28px; border: 0; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-soft), 0 3px 0 var(--slot); }
.sy-slider__input:hover::-webkit-slider-thumb { box-shadow: inset 0 0 0 1px var(--ink), 0 3px 0 var(--slot); }
.sy-slider__input:active::-webkit-slider-thumb { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--ink), 0 1px 0 var(--slot); }
.sy-slider__input:focus-visible { outline: none; }
.sy-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.sy-slider__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
.sy-slider__input:disabled { cursor: not-allowed; opacity: .5; }
.sy-slider__ticks { display: flex; justify-content: space-between; font: 500 11px/14px var(--font-mono); color: var(--ink-soft); }

/* ==================================================================== Tabs */
.sy-tabs__scroll { overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.sy-tabs__scroll::-webkit-scrollbar { display: none; }
.sy-tabs__list { position: relative; display: flex; gap: 4px; min-width: max-content; box-shadow: inset 0 -1px 0 var(--line); }
.sy-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 15px; border: 0; border-radius: 4px 4px 0 0; background: none; color: var(--ink-soft); font: 620 15px/20px var(--font-sans); font-stretch: 87.5%; cursor: pointer; white-space: nowrap; transition: color var(--dur-hover); }
.sy-tab:hover { color: var(--ink); }
.sy-tab[aria-selected="true"] { color: var(--ink); }
.sy-tab:focus-visible { outline-offset: -2px; }
.sy-tab__count { padding: 1px 6px; border-radius: 2px; background: var(--surface-sunk); color: var(--ink); font: 600 11px/16px var(--font-mono); transition: background-color var(--dur-hover), color var(--dur-hover); }
.sy-tab[aria-selected="true"] .sy-tab__count { background: var(--signal); color: var(--on-signal); }
.sy-tabs__bar { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--signal); transform-origin: 0 0; transition: transform var(--dur-glide) var(--ease-glide); pointer-events: none; }
.sy-tabs:not(.is-ready) .sy-tabs__bar { transition: none; }
.sy-tabs__panel { padding-top: 20px; outline-offset: 4px; }

/* ==================================================================== SegmentedControl */
.sy-seg { --_n: 2; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--line); vertical-align: middle; }
.sy-seg--block { display: grid; width: 100%; }
.sy-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--_n)); border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 0 rgba(15, 18, 21, .14); transition: transform var(--dur-glide) var(--ease-glide); }
.sy-seg__opt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 3px; background: none; color: var(--ink-soft); font: 620 14.5px/20px var(--font-sans); font-stretch: 87.5%; white-space: nowrap; cursor: pointer; transition: color var(--dur-hover); }
.sy-seg__opt .sy-icon { width: 16px; height: 16px; }
.sy-seg__opt:hover, .sy-seg__opt[aria-checked="true"] { color: var(--ink); }
.sy-seg__opt:focus-visible { outline-offset: 0; }
.sy-seg--sm .sy-seg__opt { min-height: 30px; padding: 0 12px; font-size: 13.5px; }

/* ==================================================================== Card (block in a slot) */
.sy-card { position: relative; isolation: isolate; z-index: 0; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; --_face: var(--surface); }
.sy-card::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--_face); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-hair); transition: box-shadow var(--dur-glide) var(--ease-glide); }
.sy-card--link { cursor: pointer; transition: transform var(--dur-glide) var(--ease-glide); }
.sy-card--link::before { content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 12px; bottom: 0; border-radius: inherit; background: var(--sy-hatch), var(--sy-slotbg); box-shadow: var(--shadow-seat); transition: transform var(--dur-glide) var(--ease-glide); }
.sy-card--link:hover, .sy-card--link:focus-visible { transform: translateY(-4px); }
.sy-card--link:hover::before, .sy-card--link:focus-visible::before { transform: translateY(4px); }
.sy-card--link:hover::after, .sy-card--link:focus-visible::after { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.sy-card--link:active { transform: translateY(0); transition-duration: var(--dur-seat); }
.sy-card--link:active::before { transform: none; transition-duration: var(--dur-seat); }
.sy-card--sunk { --_face: var(--surface-sunk); }
.sy-card--deck { --_face: var(--deck); color: var(--on-deck); }
.sy-card--deck::after { box-shadow: none; }
.sy-card--signal { --_face: var(--signal); color: var(--on-signal); }
.sy-card--signal::after { box-shadow: none; }
.sy-card__media { margin: 1px 1px 0; overflow: hidden; border-radius: 7px 7px 0 0; background: var(--surface-sunk); box-shadow: inset 0 -1px 0 var(--line); }
.sy-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.sy-card--flush .sy-card__body { padding: 0; }
.sy-card__body > .sy-eyebrow { margin-bottom: 12px; }
.sy-card__title { margin-bottom: 8px; }
.sy-card__text { color: var(--ink-soft); }
.sy-card--deck .sy-card__text { color: var(--on-deck-soft); }
.sy-card--deck .sy-heading { color: var(--on-deck); }
.sy-card--deck .sy-eyebrow { color: var(--signal); }
.sy-card--signal .sy-card__text, .sy-card--signal .sy-heading, .sy-card--signal .sy-eyebrow { color: var(--on-signal); }
.sy-card--signal .sy-eyebrow::before { background: var(--on-signal); }
.sy-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 24px 16px; border-top: 1px solid var(--line); font-size: 14px; }
@media (max-width: 640px) { .sy-card__body { padding: 18px 18px 20px; } .sy-card__foot { padding: 12px 18px 14px; } }

/* ==================================================================== Badge / Tag */
.sy-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: var(--radius-xs); font: 600 10.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.sy-badge .sy-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.sy-badge--neutral { background: var(--surface-sunk); color: var(--ink); }
.sy-badge--signal { background: var(--signal); color: var(--on-signal); }
.sy-badge--tint { background: var(--signal-tint); color: var(--ink); }
.sy-badge--deck { background: var(--deck); color: var(--on-deck); }
.sy-badge--success { color: var(--success); box-shadow: inset 0 0 0 1px currentColor; }
.sy-badge--danger { color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.sy-badge--outline { color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sy-badge__dot { width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.sy-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-xs); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 500 12.5px/1 var(--font-mono); white-space: nowrap; transition: opacity 160ms, transform 180ms var(--ease-exit); }
.sy-tag.is-leaving { opacity: 0; transform: translateY(4px); }
.sy-tag__x { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ink-soft); cursor: pointer; }
.sy-tag__x:hover { background: var(--surface-sunk); color: var(--ink); }
.sy-tag__x .sy-icon { width: 13px; height: 13px; stroke-width: 2.2; }

/* ==================================================================== Avatar */
.sy-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: visible; font: 700 15px/1 var(--font-sans); font-stretch: 112%; letter-spacing: -.01em; }
.sy-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sy-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.sy-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.sy-avatar--xl { width: 104px; height: 104px; font-size: 36px; font-weight: 800; font-stretch: 125%; letter-spacing: -.03em; }
.sy-avatar--sunk { background: var(--surface-sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sy-avatar--deck { background: var(--deck); color: var(--on-deck); }
.sy-avatar--tint { background: var(--signal-tint); color: var(--ink); }
.sy-avatar--signal { background: var(--signal); color: var(--on-signal); }
.sy-avatar--more { background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-mono); font-stretch: 100%; font-weight: 600; }
.sy-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 2px var(--page); }
.sy-avatar--xl .sy-avatar__status, .sy-avatar--lg .sy-avatar__status { width: 14px; height: 14px; right: 2px; bottom: 2px; }
.sy-avatar__status--online { background: var(--success); }
.sy-avatar__status--busy { background: var(--signal); }
.sy-avatar__status--away { background: var(--line-strong); }
.sy-avstack { display: inline-flex; align-items: center; }
.sy-avstack > .sy-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); transition: transform var(--dur-hover) var(--ease-glide); }
.sy-avstack > .sy-avatar:first-child { margin-left: 0; }
.sy-avstack > .sy-avatar--sunk, .sy-avstack > .sy-avatar--more { box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px var(--line-strong); }
.sy-avstack > .sy-avatar:hover { transform: translateY(-3px); }

/* ==================================================================== Tooltip */
.sy-tipwrap { display: inline-flex; }
.sy-tip__trigger { border-radius: 2px; text-decoration: underline dotted; text-underline-offset: 4px; cursor: help; }
.sy-tip { box-sizing: border-box; max-width: min(260px, calc(100vw - 16px)); display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--deck); color: var(--on-deck); font: 520 13px/18px var(--font-sans); box-shadow: var(--shadow-float); pointer-events: none; }
[data-theme="dark"] .sy-tip { box-shadow: var(--shadow-float), 0 0 0 1px var(--line-strong); }
.sy-tip__kbd { flex: none; padding: 1px 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--on-deck-soft); color: var(--on-deck-soft); font: 500 11px/16px var(--font-mono); }
.sy-tip__arrow { position: absolute; width: 10px; height: 10px; background: var(--deck); transform: rotate(45deg); }
.sy-tip[data-side="top"] .sy-tip__arrow { bottom: -4px; left: calc(var(--_ax, 50%) - 5px); }
.sy-tip[data-side="bottom"] .sy-tip__arrow { top: -4px; left: calc(var(--_ax, 50%) - 5px); }
.sy-tip[data-side="left"] .sy-tip__arrow { right: -4px; top: calc(var(--_ay, 50%) - 5px); }
.sy-tip[data-side="right"] .sy-tip__arrow { left: -4px; top: calc(var(--_ay, 50%) - 5px); }

/* ==================================================================== Toast */
.sy-toasts { position: fixed; z-index: 1100; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.sy-toasts__list { display: flex; flex-direction: column; gap: 10px; }
.sy-toast { pointer-events: auto; position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 12px; padding: 14px 10px 16px 14px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line); animation: sy-toast-in var(--dur-stack) var(--ease-stack) backwards; transition: opacity 200ms var(--ease-exit), transform 200ms var(--ease-exit); }
@keyframes sy-toast-in { from { opacity: 0; transform: translateY(18px); } }
.sy-toast.is-leaving { opacity: 0; transform: translateY(10px); }
.sy-toast__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); }
.sy-toast__icon .sy-icon { width: 19px; height: 19px; }
.sy-toast--signal .sy-toast__icon { background: var(--signal); color: var(--on-signal); }
.sy-toast--success .sy-toast__icon { background: var(--success); color: var(--surface); }
.sy-toast--danger .sy-toast__icon { background: var(--danger); color: var(--surface); }
.sy-toast__meta { font: 500 10.5px/14px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.sy-toast__title { font: 650 15px/20px var(--font-sans); }
.sy-toast__msg { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.sy-toast__action { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--signal-ink); font: 620 14px/20px var(--font-sans); font-stretch: 87.5%; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sy-toast__x { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ink-soft); cursor: pointer; }
.sy-toast__x:hover { background: var(--surface-sunk); color: var(--ink); }
.sy-toast__x .sy-icon { width: 16px; height: 16px; }
.sy-toast__timer { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--signal); transform-origin: 0 50%; animation-name: sy-timer; animation-timing-function: linear; animation-fill-mode: forwards; }
.sy-toast.is-paused .sy-toast__timer { animation-play-state: paused; }
@keyframes sy-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .sy-toasts { left: 16px; right: 16px; width: auto; bottom: 12px; } }

/* ==================================================================== Modal / Sheet */
.sy-modal { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.sy-modal[hidden] { display: none; }
.sy-modal__scrim { position: absolute; inset: 0; background: rgba(13, 15, 18, .55); opacity: 0; transition: opacity var(--dur-glide) var(--ease-glide); }
.sy-modal__panel { position: relative; box-sizing: border-box; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 26px 28px 28px; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-modal), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(18px); transition: opacity var(--dur-glide) var(--ease-glide), transform var(--dur-glide) var(--ease-glide); outline: none; }
.sy-modal__panel--lg { width: min(760px, 100%); }
.sy-modal.is-open .sy-modal__scrim { opacity: 1; }
.sy-modal.is-open .sy-modal__panel { opacity: 1; transform: none; }
.sy-modal.is-closing .sy-modal__panel { transition-timing-function: var(--ease-exit); transition-duration: 180ms; }
.sy-modal__grip { display: none; }
.sy-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.sy-modal__head .sy-eyebrow { margin-bottom: 8px; }
.sy-modal__title { margin: 0; font: 760 26px/30px var(--font-sans); font-stretch: 112%; letter-spacing: -.02em; }
.sy-modal__body { color: var(--ink-soft); font-size: 16px; line-height: 25px; }
.sy-modal__body > :first-child { margin-top: 0; }
.sy-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .sy-modal:not(.sy-modal--nosheet) { place-items: end stretch; padding: 0; }
  .sy-modal:not(.sy-modal--nosheet) .sy-modal__panel { width: 100%; max-height: 88vh; padding: 10px 18px 22px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); }
  .sy-modal:not(.sy-modal--nosheet).is-open .sy-modal__panel { transform: none; }
  .sy-modal:not(.sy-modal--nosheet) .sy-modal__grip { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--line-strong); }
  .sy-modal__actions { flex-direction: column-reverse; }
  .sy-modal__actions .sy-btn { width: 100%; }
}

/* ==================================================================== Progress */
.sy-progress { min-width: 0; }
.sy-progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sy-progress__label { font: 620 14px/20px var(--font-sans); font-stretch: 87.5%; }
.sy-progress__value { min-width: 4ch; text-align: right; font: 500 12.5px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sy-progress__track.is-seg { display: grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); gap: 3px; }
.sy-progress__cell { position: relative; height: 14px; overflow: hidden; border-radius: 1.5px; background: var(--sy-hatch), var(--sy-slotbg); box-shadow: var(--shadow-seat); }
.sy-progress__cell::after { content: ""; position: absolute; inset: 0; background: var(--signal); box-shadow: inset 0 -2px 0 rgba(15, 18, 21, .18); transform: translateY(-105%); transition: transform var(--dur-glide) var(--ease-stack); transition-delay: inherit; }
.sy-progress__cell.is-on::after { transform: none; }
.sy-progress.is-done .sy-progress__cell::after { background: var(--success); }
.sy-progress__track.is-bar { position: relative; height: 8px; overflow: hidden; border-radius: 2px; background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--line); }
.sy-progress__fill { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-stage) var(--ease-glide); }
.sy-progress__hint { margin-top: 8px; font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }

/* ==================================================================== Accordion */
.sy-acc { border-top: 1px solid var(--line); }
.sy-acc__item { border-bottom: 1px solid var(--line); }
.sy-acc__h { margin: 0; }
.sy-acc__btn { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center; gap: 12px; padding: 18px 2px; border: 0; background: none; color: var(--ink); font: 640 18px/26px var(--font-sans); text-align: left; cursor: pointer; }
.sy-acc__idx { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); letter-spacing: .04em; }
.sy-acc__sign { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); transition: background-color var(--dur-hover), transform var(--dur-hover) var(--ease-glide); }
.sy-acc__sign .sy-icon { width: 18px; height: 18px; transition: transform var(--dur-glide) var(--ease-release); }
.sy-acc__btn:hover .sy-acc__sign { transform: translateY(-2px); }
.sy-acc__btn:hover .sy-acc__q { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.sy-acc__btn[aria-expanded="true"] .sy-acc__sign { background: var(--signal); color: var(--on-signal); box-shadow: none; }
.sy-acc__btn[aria-expanded="true"] .sy-acc__sign .sy-icon { transform: rotate(45deg); }
.sy-acc__btn:focus-visible { outline-offset: -2px; }
.sy-acc__inner { padding: 0 46px 22px 58px; color: var(--ink-soft); font-size: 16px; line-height: 26px; }
.sy-acc__inner p { margin: 0 0 10px; }
.sy-acc__inner p:last-child { margin: 0; }
.sy-acc__item.is-open .sy-acc__inner { animation: sy-rise var(--dur-glide) var(--ease-glide) backwards; }
@media (max-width: 640px) {
  .sy-acc__btn { grid-template-columns: 30px minmax(0, 1fr) 32px; font-size: 16.5px; line-height: 24px; padding: 16px 0; }
  .sy-acc__inner { padding: 0 0 18px 42px; font-size: 15px; line-height: 24px; }
}
/* a card resets the slot ink for what sits on it (bands may darken it outside) */
.sy-card { --sy-slotbg: var(--slot); --sy-hatchink: var(--line-strong); }
[data-theme="dark"] .sy-card { --sy-hatchink: #3a414b; }
.sy-card--deck { --sy-slotbg: #000; --sy-hatchink: #3a414b; }

/* ==================================================================== Header */
.sy-header { position: relative; z-index: 50; }
.sy-header.is-sticky { position: sticky; top: 0; }
.sy-header__status { background: var(--deck); color: var(--on-deck-soft); font: 500 12px/16px var(--font-mono); letter-spacing: .03em; }
.sy-header__status .sy-wrap { display: flex; align-items: center; gap: 10px; height: 34px; white-space: nowrap; }
.sy-header__status .sy-wrap > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.sy-header__slink { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--on-deck); text-decoration: none; flex: none; }
.sy-header__slink:hover { color: var(--signal); }
.sy-header__slink .sy-icon { width: 14px; height: 14px; }
.sy-header__bar { background: var(--page); box-shadow: 0 1px 0 var(--line); }
.sy-header__row { display: flex; align-items: center; gap: 28px; height: 68px; }
.sy-header__nav { display: flex; gap: 2px; margin-left: 8px; }
.sy-navlink { position: relative; padding: 8px 12px; border-radius: 3px; color: var(--ink-soft); font: 620 15px/20px var(--font-sans); font-stretch: 87.5%; text-decoration: none; transition: color var(--dur-hover), background-color var(--dur-hover); }
.sy-navlink:hover { color: var(--ink); background: var(--surface-sunk); }
.sy-navlink[aria-current="page"] { color: var(--ink); }
.sy-navlink[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -15px; height: 3px; background: var(--signal); }
.sy-header__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sy-header__end .sy-btn { margin-bottom: 0; }
.sy-header__burger { display: none; }
.sy-header__drawer { position: absolute; left: 0; right: 0; top: 100%; padding: 4px 0 24px; background: var(--page); box-shadow: 0 1px 0 var(--line), var(--shadow-float); opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-glide) var(--ease-glide), transform var(--dur-glide) var(--ease-glide); }
.sy-header__drawer.is-open { opacity: 1; transform: none; }
.sy-header__drawer[hidden] { display: none; }
.sy-header__dnav { display: flex; flex-direction: column; margin-bottom: 20px; }
.sy-dlink { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 720 24px/30px var(--font-sans); font-stretch: 112%; letter-spacing: -.02em; text-decoration: none; }
.sy-drawer-anim .sy-dlink, .sy-header__drawer.is-open .sy-dlink { animation: sy-rise var(--dur-glide) var(--ease-glide) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.sy-dlink[aria-current="page"] { color: var(--signal-ink); }
.sy-dlink__idx { font: 500 12px/1 var(--font-mono); color: var(--ink-soft); letter-spacing: .04em; }
.sy-dlink .sy-icon { color: var(--ink-soft); }
.sy-header__dnote { margin: 14px 0 0; font: 500 12px/18px var(--font-mono); color: var(--ink-soft); text-align: center; }
@media (max-width: 960px) {
  .sy-header__nav { display: none; }
  .sy-header__burger { display: inline-flex; }
}
@media (max-width: 640px) {
  .sy-header__row { height: 60px; gap: 12px; }
  .sy-header__status .sy-wrap { height: 30px; font-size: 11px; }
  .sy-header__slink { display: none; }
}
@media (max-width: 440px) { .sy-header__cta { display: none !important; } }

/* ==================================================================== Footer */
.sy-footer { --_mk-b: var(--on-deck); --_mk-rib: var(--deck); --sy-slotbg: #000; --sy-hatchink: #3a414b; padding: 72px 0 28px; background: var(--deck); color: var(--on-deck); }
.sy-footer .sy-wordmark { color: var(--on-deck); }
.sy-footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; }
.sy-footer__tag { max-width: 340px; margin: 18px 0 18px; color: var(--on-deck-soft); font-size: 15px; line-height: 23px; }
.sy-footer__mail { display: inline-flex; align-items: center; gap: 8px; color: var(--on-deck); font: 500 14px/20px var(--font-mono); text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 2px; }
.sy-footer__mail:hover { color: var(--signal); }
.sy-footer__mail .sy-icon { width: 16px; height: 16px; }
.sy-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; }
.sy-footer__h { margin: 0 0 14px; font: 500 11.5px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-deck-soft); }
.sy-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sy-footer__col a { color: var(--on-deck); font-size: 15px; line-height: 22px; text-decoration: none; }
.sy-footer__col a:hover { color: var(--signal); }
.sy-footer__col a:focus-visible, .sy-footer a:focus-visible { outline-color: var(--signal); }
.sy-footer__badge { margin-left: 8px; padding: 2px 5px; border-radius: 2px; background: var(--signal); color: var(--on-signal); font: 600 10px/1 var(--font-mono); letter-spacing: .05em; vertical-align: 2px; }
.sy-footer__statement { margin: 72px 0 0; overflow: hidden; color: var(--on-deck); font: 800 clamp(64px, 12.4vw, 168px)/.86 var(--font-sans); font-stretch: 125%; letter-spacing: -.045em; white-space: nowrap; }
.sy-footer__statement b { color: var(--signal); font-weight: inherit; }
.sy-footer__base { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 36px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--on-deck-soft) 30%, transparent); color: var(--on-deck-soft); font: 500 12px/18px var(--font-mono); }
.sy-footer__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .sy-footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 640px) {
  .sy-footer { padding: 56px 0 24px; }
  .sy-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .sy-footer__statement { margin-top: 48px; font-size: 64px; }
  .sy-footer__status { margin-left: 0; }
}

/* ==================================================================== Frame (abstract product imagery) */
.sy-frame { width: 100%; aspect-ratio: 400 / 260; }
.sy-frame svg { display: block; width: 100%; height: 100%; }
.sy-frame .f-bg { fill: var(--surface); }
.sy-frame .f-edge { stroke: var(--line-strong); stroke-width: 1; }
.sy-frame .f-ink { fill: var(--ink); }
.sy-frame .f-soft { fill: var(--line); }
.sy-frame .f-sunk { fill: var(--surface-sunk); }
.sy-frame .f-sig { fill: var(--signal); }
.sy-frame .f-deck { fill: var(--deck); }
.sy-frame .f-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.sy-frame .f-line { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sy-frame .f-route { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linejoin: round; }
[data-theme="dark"] .sy-frame .f-deck { fill: #2a2f37; }

/* ==================================================================== Stamp */
.sy-stamp { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 10px 7px; border-radius: var(--radius-xs); background: var(--surface); color: var(--signal-ink); box-shadow: inset 0 0 0 2px var(--signal-ink), var(--shadow-float); rotate: -3deg; transform: translateX(calc(100% + 32px)); transition: transform var(--dur-glide) var(--ease-release); pointer-events: none; }
.sy-stamp.is-on { transform: none; }
.sy-stamp__word { display: flex; align-items: center; gap: 5px; font: 800 15px/1 var(--font-sans); font-stretch: 125%; letter-spacing: .03em; text-transform: uppercase; }
.sy-stamp__word .sy-icon { width: 15px; height: 15px; stroke-width: 2.8; }
.sy-stamp__meta { font: 500 10.5px/12px var(--font-mono); letter-spacing: .05em; }

/* ==================================================================== StatCounter (odometer) */
.sy-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sy-stat__num { font: 820 56px/1 var(--font-sans); font-stretch: 125%; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sy-odo { display: inline-flex; align-items: flex-start; height: 1em; line-height: 1em; letter-spacing: 0; }
.sy-odo__cell { display: inline-block; width: 1ch; height: 1em; overflow: hidden; margin-right: -.035em; }
.sy-odo__col { display: flex; flex-direction: column; }
.sy-odo__col > span { display: block; height: 1em; line-height: 1em; text-align: center; }
.sy-odo__ch { display: inline-block; height: 1em; line-height: 1em; margin-right: -.035em; }
.sy-stat--md .sy-stat__num { font-size: 44px; }
.sy-stat--sm .sy-stat__num { font-size: 32px; }
.sy-stat--lg .sy-stat__num { font-size: 76px; }
.sy-stat--signal .sy-stat__num { color: var(--signal-ink); }
.sy-stat__label { font: 620 15px/20px var(--font-sans); font-stretch: 87.5%; color: var(--ink); }
.sy-stat__note { display: flex; align-items: center; gap: 4px; font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.sy-stat__note.is-delta { color: var(--success); }
.sy-stat__note .sy-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.sy-card--deck .sy-stat__num, .sy-on-deck .sy-stat__num { color: var(--on-deck); }
.sy-card--deck .sy-stat__label, .sy-on-deck .sy-stat__label { color: var(--on-deck); }
.sy-card--deck .sy-stat__note, .sy-on-deck .sy-stat__note { color: var(--on-deck-soft); }

/* ==================================================================== ServiceTile */
.sy-tile { padding: 0 24px 20px; }
.sy-tile__ribs { display: block; height: 12px; margin: 1px -23px 22px; border-radius: 7px 7px 0 0; background: var(--sy-ribs), var(--surface-sunk); box-shadow: inset 0 -1px 0 var(--line); transition: background-color var(--dur-hover); }
.sy-tile:hover .sy-tile__ribs, .sy-tile:focus-visible .sy-tile__ribs { background: repeating-linear-gradient(90deg, rgba(15, 18, 21, .2) 0 2px, transparent 2px 7px), var(--signal); box-shadow: none; }
.sy-tile__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.sy-tile__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur-hover), color var(--dur-hover); }
.sy-tile__icon .sy-icon { width: 24px; height: 24px; }
.sy-tile:hover .sy-tile__icon { background: var(--deck); color: var(--on-deck); box-shadow: none; }
.sy-tile__idx { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); letter-spacing: .06em; }
.sy-tile__title { margin-bottom: 8px; }
.sy-tile__body { margin-bottom: 16px; color: var(--ink-soft); }
.sy-tile__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; }
.sy-tile__tags li { padding: 5px 7px; border-radius: 2px; background: var(--surface-sunk); color: var(--ink); font: 500 11.5px/1 var(--font-mono); }
.sy-tile__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.sy-tile__meta { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.sy-tile__go { display: inline-flex; align-items: center; gap: 6px; color: var(--signal-ink); font: 620 14px/20px var(--font-sans); font-stretch: 87.5%; }
.sy-tile__go .sy-icon { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-glide); }
.sy-tile:hover .sy-tile__go .sy-icon { transform: translateX(3px); }
.sy-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .sy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sy-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sy-tile { padding: 0 18px 18px; } .sy-tile__ribs { margin: 1px -17px 18px; } }

/* ==================================================================== CaseStudyCard */
.sy-cs__media { position: relative; margin: 1px 1px 0; padding: 20px 22px 0; overflow: hidden; border-radius: 7px 7px 0 0; background: var(--surface-sunk); box-shadow: inset 0 -1px 0 var(--line); }
.sy-cs__media .sy-frame { margin-bottom: -2px; }
.sy-cs:hover .sy-stamp, .sy-cs:focus-visible .sy-stamp { transform: none; }
.sy-cs__body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 22px; }
.sy-cs__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; color: var(--ink-soft); font: 500 11.5px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.sy-cs__meta span + span::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.sy-cs__title { margin-bottom: 8px; text-wrap: balance; }
.sy-cs__summary { margin-bottom: 18px; color: var(--ink-soft); }
.sy-cs__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.sy-cs__metric { display: flex; flex-direction: column; gap: 4px; }
.sy-cs__metricv { font: 820 34px/1 var(--font-sans); font-stretch: 125%; letter-spacing: -.03em; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.sy-cs__metricl { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.sy-cs__tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; }
.sy-cs__tags li { padding: 4px 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-soft); font: 500 11px/1 var(--font-mono); }
.sy-cs--lg .sy-cs__title { font-size: 28px; line-height: 34px; font-stretch: 108%; letter-spacing: -.02em; }
.sy-cs--lg .sy-cs__media { padding: 28px 40px 0; }
@media (max-width: 640px) { .sy-cs__body { padding: 18px 18px 20px; } .sy-cs__media { padding: 16px 16px 0; } .sy-cs--lg .sy-cs__title { font-size: 22px; line-height: 28px; } }

/* ==================================================================== CaseStudyHeader */
.sy-csh__top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sy-csh__title { margin: 16px 0 18px; font-size: 54px; line-height: 56px; }
.sy-csh__summary { margin: 0; max-width: 560px; color: var(--ink-soft); font-size: 19px; line-height: 30px; text-wrap: pretty; }
.sy-csh__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 28px 0 0; border-top: 1px solid var(--line); }
.sy-csh__meta > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sy-csh__meta dt { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sy-csh__meta dd { margin: 3px 0 0; font: 600 15px/21px var(--font-sans); }
.sy-csh__media { position: relative; padding: 32px 28px 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.sy-csh__media .sy-frame { margin-bottom: -2px; }
.sy-csh__media .sy-stamp { animation: sy-stamp-in 620ms var(--ease-release) 500ms backwards; }
@keyframes sy-stamp-in { from { transform: translateX(calc(100% + 40px)); } }
.sy-csh__stats { display: grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); margin-top: 56px; border-top: 2px solid var(--ink); }
.sy-csh__stats > .sy-stat { padding: 22px 20px 6px 0; }
.sy-csh__stats > .sy-stat + .sy-stat { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 960px) {
  .sy-csh__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sy-csh__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-csh__stats > .sy-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sy-csh__stats > .sy-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .sy-csh__title { font-size: 34px; line-height: 37px; }
  .sy-csh__summary { font-size: 17px; line-height: 27px; }
  .sy-csh__media { padding: 22px 16px 0; }
  .sy-csh__stats { margin-top: 36px; }
  .sy-csh__stats > .sy-stat { padding: 16px 12px 14px 0; }
  .sy-csh__stats > .sy-stat + .sy-stat { padding-left: 14px; }
  .sy-csh__stats .sy-stat--md .sy-stat__num { font-size: 32px; }
  .sy-csh__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================== ProcessTimeline */
.sy-proc__rail { position: relative; padding-top: 34px; }
.sy-proc__track { position: absolute; left: 0; right: 0; top: 55px; height: 2px; background: var(--line-strong); }
.sy-proc__fill { display: block; width: 100%; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-stage) var(--ease-glide); }
.sy-proc__marker { position: absolute; z-index: 2; left: 0; top: 2px; width: 40px; height: 20px; margin-left: -20px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(15, 18, 21, .22) 0 1.5px, transparent 1.5px 6px) 4px 0 / calc(100% - 8px) 100% no-repeat, var(--signal); box-shadow: inset 0 -2px 0 rgba(15, 18, 21, .2); transition: transform var(--dur-stage) var(--ease-glide); }
.sy-proc__marker::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 9px; margin-left: -1px; background: var(--signal); }
.sy-proc__list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sy-proc__step { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px 4px; border: 0; background: none; color: var(--ink); text-align: center; cursor: pointer; border-radius: 4px; }
.sy-proc__node { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--dur-hover), box-shadow var(--dur-hover), color var(--dur-hover); }
.sy-proc__num { font: 600 13px/1 var(--font-mono); }
.sy-proc__tick { display: none; width: 18px; height: 18px; stroke-width: 2.4; }
.sy-proc__step:hover .sy-proc__node { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sy-proc__step.is-past .sy-proc__node { background: var(--deck); color: var(--on-deck); box-shadow: none; }
.sy-proc__step.is-past .sy-proc__num { display: none; }
.sy-proc__step.is-past .sy-proc__tick { display: block; }
.sy-proc__step.is-current .sy-proc__node { background: var(--signal); color: var(--on-signal); box-shadow: none; }
.sy-proc__txt { display: flex; flex-direction: column; gap: 2px; }
.sy-proc__title { font: 660 16px/22px var(--font-sans); }
.sy-proc__dur { font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); }
.sy-proc__inline { display: none; }
.sy-proc__step:focus-visible { outline-offset: 2px; }
.sy-proc__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; min-height: 196px; box-sizing: border-box; margin-top: 30px; padding: 26px 28px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-hair); }
.sy-proc__pidx { grid-column: 1; font: 500 11.5px/16px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--signal-ink); margin-bottom: 8px; }
.sy-proc__panel > .sy-heading { grid-column: 1; margin-bottom: 8px; }
.sy-proc__pbody { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 25px; }
.sy-proc__deliv { grid-column: 2; grid-row: 1 / span 3; align-self: center; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sy-proc__deliv li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; }
.sy-proc__deliv .sy-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--success); stroke-width: 2.2; }
/* vertical (narrow) */
.sy-proc.is-vertical .sy-proc__rail { padding: 0 0 0 16px; }
.sy-proc.is-vertical .sy-proc__track { top: 0; bottom: 0; left: 36px; right: auto; width: 2px; height: auto; }
.sy-proc.is-vertical .sy-proc__fill { transform-origin: 50% 0; transform: scaleY(0); }
.sy-proc.is-vertical .sy-proc__marker { left: 0; top: 0; width: 8px; height: 30px; margin: -15px 0 0; background: var(--signal); }
.sy-proc.is-vertical .sy-proc__marker::after { left: 100%; top: 50%; width: 6px; height: 2px; margin: -1px 0 0; }
.sy-proc.is-vertical .sy-proc__list { grid-auto-flow: row; grid-auto-columns: auto; }
.sy-proc.is-vertical .sy-proc__step { flex-direction: row; align-items: flex-start; gap: 16px; padding: 9px 0; text-align: left; }
.sy-proc.is-vertical .sy-proc__node { flex: none; }
.sy-proc.is-vertical .sy-proc__txt { padding-top: 2px; }
.sy-proc.is-vertical .sy-proc__step.is-current .sy-proc__inline { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 14.5px; line-height: 22px; animation: sy-rise var(--dur-glide) var(--ease-glide) backwards; }
.sy-proc.is-vertical .sy-proc__panel { display: none; }

/* ==================================================================== DeployPipeline */
.sy-pipe { container-type: inline-size; position: relative; box-sizing: border-box; padding: 18px 20px 14px; border-radius: var(--radius-md); background: var(--deck); color: var(--on-deck); font-family: var(--font-mono); box-shadow: var(--shadow-card); }
[data-theme="dark"] .sy-pipe { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); }
.sy-pipe__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.sy-pipe__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sy-pipe__run-id { font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-deck-soft); }
.sy-pipe__app { font-size: 13.5px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-deck-soft); }
.sy-pipe__app b { color: var(--on-deck); font-weight: 600; }
.sy-pipe__ver { color: var(--signal); }
.sy-pipe__status { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; height: 26px; padding: 0 10px; box-sizing: border-box; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--on-deck-soft); color: var(--on-deck-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sy-pipe__sdot { width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
.sy-pipe__status[data-state="run"] { color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.sy-pipe__status[data-state="run"] .sy-pipe__sdot { animation: sy-blink 900ms steps(1) infinite; }
@keyframes sy-blink { 50% { opacity: .2; } }
.sy-pipe__status[data-state="live"] { color: var(--on-deck); box-shadow: inset 0 0 0 1px var(--success); }
.sy-pipe__status[data-state="live"] .sy-pipe__sdot { background: var(--success); }
.sy-pipe__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); }
.sy-pipe__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.sy-pipe__rail { position: absolute; top: 21px; right: calc(50% + 28px); left: calc(-50% + 28px); height: 2px; background: color-mix(in srgb, var(--on-deck-soft) 28%, transparent); }
.sy-pipe__rail > span { display: block; height: 100%; background: var(--success); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--ease-glide); }
.sy-pipe__stage[data-state="running"] .sy-pipe__rail > span, .sy-pipe__stage[data-state="done"] .sy-pipe__rail > span { transform: scaleX(1); }
.sy-pipe__node { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-deck-soft) 55%, transparent); color: var(--on-deck-soft); transition: background-color 200ms, box-shadow 200ms, color 200ms; }
.sy-pipe__ic, .sy-pipe__ok { grid-area: 1 / 1; width: 21px; height: 21px; }
.sy-pipe__ic { transition: opacity 160ms; }
.sy-pipe__ok { opacity: 0; transform: scale(.4); stroke-width: 2.6; transition: opacity 160ms, transform 340ms var(--ease-release); }
.sy-pipe__run { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.sy-pipe__stage[data-state="running"] .sy-pipe__node { box-shadow: inset 0 0 0 1.5px var(--signal); color: var(--signal); }
.sy-pipe__stage[data-state="running"] .sy-pipe__run { transform: scaleX(1); transition: transform 900ms linear; }
.sy-pipe__stage[data-state="done"] .sy-pipe__node { background: var(--success); box-shadow: none; color: var(--deck); }
.sy-pipe__stage[data-state="done"] .sy-pipe__ic { opacity: 0; }
.sy-pipe__stage[data-state="done"] .sy-pipe__ok { opacity: 1; transform: none; }
.sy-pipe__stage[data-state="done"] .sy-pipe__run { opacity: 0; }
.sy-pipe__name { font-size: 12.5px; line-height: 16px; color: var(--on-deck); }
.sy-pipe__time { min-height: 16px; font-size: 11px; line-height: 16px; color: var(--on-deck-soft); font-variant-numeric: tabular-nums; }
.sy-pipe__stage[data-state="running"] .sy-pipe__time { color: var(--signal); }
.sy-pipe__log { box-sizing: content-box; height: calc(var(--_lines, 4) * 20px); margin-top: 18px; padding: 10px 12px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, #000 32%, var(--deck)); font-size: 12.5px; line-height: 20px; color: var(--on-deck-soft); }
.sy-pipe__line { height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sy-rise 260ms var(--ease-glide) backwards; }
.sy-pipe__line.is-ok { color: var(--on-deck); }
.sy-pipe__line.is-blank { animation: none; }
.sy-pipe__foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--on-deck-soft); }
.sy-pipe__clock { color: var(--on-deck); font-variant-numeric: tabular-nums; }
.sy-pipe__commit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-pipe__rerun { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--on-deck); font: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-deck-soft) 60%, transparent); cursor: pointer; transition: transform var(--dur-seat), background-color var(--dur-hover); }
.sy-pipe__rerun:hover { background: color-mix(in srgb, var(--on-deck) 9%, transparent); }
.sy-pipe__rerun:active { transform: translateY(1px); }
.sy-pipe__rerun:focus-visible { outline-color: var(--signal); }
.sy-pipe__rerun .sy-icon { width: 14px; height: 14px; }
@container (max-width: 480px) {
  .sy-pipe__node { width: 36px; height: 36px; }
  .sy-pipe__rail { top: 17px; right: calc(50% + 22px); left: calc(-50% + 22px); }
  .sy-pipe__ic, .sy-pipe__ok { width: 18px; height: 18px; }
  .sy-pipe__name { font-size: 11px; }
  .sy-pipe__time { font-size: 10px; }
  .sy-pipe__log { font-size: 11.5px; padding: 8px 10px; }
  .sy-pipe__commit { display: none; }
}
@media (max-width: 640px) { .sy-pipe { padding: 16px 14px 12px; } }

/* ==================================================================== TeamMember */
.sy-team__plate { position: relative; height: 172px; margin: 1px 1px 0; display: grid; place-items: center; border-radius: 7px 7px 0 0; background: var(--sy-ribs), var(--surface-sunk); box-shadow: inset 0 -1px 0 var(--line); }
.sy-team__plate .sy-avatar { transition: transform var(--dur-glide) var(--ease-release); }
.sy-team:hover .sy-team__plate .sy-avatar { transform: translateY(-5px); }
.sy-team__chip { position: absolute; top: 12px; left: 12px; padding: 4px 7px; border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sy-team__loc { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 2px; background: var(--surface); font: 500 11px/14px var(--font-mono); color: var(--ink-soft); }
.sy-team__loc .sy-icon { width: 13px; height: 13px; }
.sy-team__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.sy-team__role { margin: 3px 0 10px; color: var(--signal-ink); font: 620 14px/20px var(--font-sans); font-stretch: 87.5%; }
.sy-team__bio { margin-bottom: 14px; color: var(--ink-soft); }
.sy-team__focus { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; }
.sy-team__focus li { padding: 4px 6px; border-radius: 2px; background: var(--surface-sunk); font: 500 11px/1 var(--font-mono); }

/* ==================================================================== TechStack */
.sy-tech__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sy-tech__legend { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px; line-height: 20px; }
.sy-tech__notch { width: 12px; height: 12px; flex: none; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sy-tech__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.sy-tech__group { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 12px; }
.sy-tech__gname { font: 660 16px/22px var(--font-sans); }
.sy-tech__count { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.sy-tech__cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.sy-tech__cell { position: relative; box-sizing: border-box; min-height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-content: center; padding: 10px 12px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sy-tech__glyph { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; align-self: center; border-radius: 3px; background: var(--surface-sunk); font: 600 12px/1 var(--font-mono); }
.sy-tech__name { font: 600 14px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-tech__meta { font: 500 11px/15px var(--font-mono); color: var(--ink-soft); }
.sy-tech__cell.is-core::after { content: ""; position: absolute; top: 0; right: 0; width: 13px; height: 13px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sy-tech.is-core-only .sy-tech__cell:not(.is-core) { display: none; }
@media (max-width: 720px) { .sy-tech__row { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sy-tech__group { padding-top: 0; } .sy-tech__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ==================================================================== ClientLogoWall */
.sy-logos__cap { margin: 0 0 16px; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sy-logos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--_cols, 6), minmax(0, 1fr)); box-shadow: inset 1px 1px 0 var(--line); }
.sy-logos__cell { height: 96px; display: grid; place-items: center; box-shadow: inset -1px -1px 0 var(--line); color: var(--ink-soft); overflow: hidden; }
.sy-logo { display: inline-flex; align-items: center; gap: 8px; transition: opacity 320ms var(--ease-glide); }
.sy-logos__cell.is-out .sy-logo { opacity: 0; }
.sy-logo svg { width: 19px; height: 24px; flex: none; fill: currentColor; }
.sy-logo .lg-cut { fill: var(--page); }
.sy-logo .lg-cutline { stroke: var(--page); }
.sy-logo > span { font: 760 19px/1 var(--font-sans); font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; }
.sy-logo--wide > span { font-stretch: 125%; font-weight: 800; }
.sy-logo--cond > span { font-stretch: 75%; font-weight: 700; font-size: 21px; letter-spacing: 0; }
.sy-logo--mono > span { font: 600 15px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sy-logo--light > span { font-weight: 420; letter-spacing: -.01em; }
.sy-logo--low > span { text-transform: lowercase; font-weight: 820; }
.sy-logo--caps > span { text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.sy-logos__cell:hover { color: var(--ink); }
@media (max-width: 760px) { .sy-logos__grid { --_cols: 3 !important; } .sy-logos__cell { height: 72px; } .sy-logo { gap: 6px; } .sy-logo svg { width: 15px; height: 19px; } .sy-logo > span { font-size: 15px; } .sy-logo--mono > span { font-size: 12px; } .sy-logo--cond > span { font-size: 17px; } .sy-logo--caps > span { font-size: 13px; } }
@media (max-width: 400px) { .sy-logo > span { font-size: 13.5px; } .sy-logo--wide > span { font-stretch: 112%; } .sy-logo--caps > span { font-size: 12px; letter-spacing: .03em; } .sy-logo--mono > span { font-size: 11px; letter-spacing: .06em; } }

/* ==================================================================== CareersList */
.sy-careers__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sy-careers__count { font: 720 20px/28px var(--font-sans); font-stretch: 112%; letter-spacing: -.01em; }
.sy-careers__n { color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.sy-careers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sy-role { display: grid; grid-template-columns: minmax(0, 1fr) 150px 112px 140px 36px; align-items: center; gap: 16px; padding: 16px 16px 16px 20px; }
.sy-role__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sy-role__title { display: flex; align-items: center; gap: 10px; font: 660 18px/24px var(--font-sans); }
.sy-role__team { font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.sy-role__cell { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-soft); white-space: nowrap; }
.sy-role__cell .sy-icon { width: 15px; height: 15px; }
.sy-role__pay { font: 500 13px/20px var(--font-mono); text-align: right; white-space: nowrap; }
.sy-role__go { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); transition: background-color var(--dur-hover), color var(--dur-hover); }
.sy-role__go .sy-icon { width: 18px; height: 18px; transition: transform var(--dur-hover) var(--ease-glide); }
.sy-role:hover .sy-role__go, .sy-role:focus-visible .sy-role__go { background: var(--signal); color: var(--on-signal); }
.sy-role:hover .sy-role__go .sy-icon { transform: translateX(2px); }
.sy-careers__empty { margin: 0; padding: 24px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-soft); text-align: center; }
@media (max-width: 760px) {
  .sy-role { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; padding: 14px 14px 14px 16px; }
  .sy-role__main { flex: 1 1 calc(100% - 52px); }
  .sy-role__go { order: 2; flex: none; }
  .sy-role__cell, .sy-role__pay { order: 3; font-size: 13px; }
  .sy-role__pay { text-align: left; }
  .sy-role__title { font-size: 16.5px; line-height: 22px; flex-wrap: wrap; }
}

/* ==================================================================== ProjectBrief */
.sy-brief__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.sy-brief__body[hidden] { display: none; }
.sy-brief__form { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.sy-brief__step { min-width: 0; }
.sy-brief__shead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.sy-brief__sn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--deck); color: var(--on-deck); font: 600 12px/1 var(--font-mono); }
.sy-brief__st { margin: 0; font: 690 20px/26px var(--font-sans); font-stretch: 105%; letter-spacing: -.01em; }
.sy-brief__sh { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.sy-brief__err { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--danger); font: 560 13.5px/19px var(--font-sans); }
.sy-brief__err:empty { display: none; }
.sy-brief__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sy-manifest { --sy-slotbg: #000; --sy-hatchink: #3a414b; position: sticky; top: 112px; box-sizing: border-box; padding: 20px 20px 18px; border-radius: var(--radius-md); background: var(--deck); color: var(--on-deck); box-shadow: var(--shadow-card); }
[data-theme="dark"] .sy-manifest { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); }
.sy-manifest__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed color-mix(in srgb, var(--on-deck-soft) 45%, transparent); color: var(--on-deck-soft); font: 500 11.5px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sy-manifest__id { color: var(--signal); }
.sy-manifest__prog { margin: 16px 0 4px; }
.sy-manifest .sy-progress__label { color: var(--on-deck); }
.sy-manifest .sy-progress__value { color: var(--on-deck-soft); }
.sy-manifest .sy-progress__cell { --sy-slotbg: color-mix(in srgb, #000 40%, var(--deck)); }
.sy-manifest__list { margin: 10px 0 0; }
.sy-manifest__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--on-deck-soft) 20%, transparent); }
.sy-manifest__row dt { padding-top: 2px; color: var(--on-deck-soft); font: 500 10.5px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sy-manifest__row dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-deck); overflow-wrap: anywhere; }
.sy-manifest__row dd.is-empty { color: var(--on-deck-soft); }
.sy-manifest__est { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 16px 0 18px; }
.sy-manifest__est > div { padding: 12px 12px 10px; border-radius: 4px; background: color-mix(in srgb, var(--on-deck) 7%, var(--deck)); }
.sy-manifest__k { display: block; margin-bottom: 4px; color: var(--on-deck-soft); font: 500 10.5px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sy-manifest__vwrap { display: flex; align-items: baseline; gap: 6px; height: 36px; overflow: hidden; }
.sy-manifest__big { display: inline-block; min-width: 1ch; font: 820 30px/36px var(--font-sans); font-stretch: 125%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--on-deck); white-space: nowrap; }
.sy-manifest__u { font-size: 13px; color: var(--on-deck-soft); }
.sy-manifest .sy-btn { margin-bottom: 4px; }
.sy-manifest__note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--on-deck-soft); font-size: 13px; line-height: 18px; }
.sy-manifest__note .sy-icon { width: 15px; height: 15px; }
.sy-manifest :focus-visible { outline-color: var(--signal); }
/* the confirmation */
.sy-brief__done { position: relative; overflow: hidden; padding: 36px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); outline: none; animation: sy-rise var(--dur-stack) var(--ease-glide) backwards; }
.sy-brief__done[hidden] { display: none; }
.sy-brief__ticket { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.sy-brief__tk { display: flex; flex-direction: column; gap: 2px; }
.sy-brief__tk span { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sy-brief__tk b { font: 800 26px/30px var(--font-sans); font-stretch: 125%; letter-spacing: -.02em; }
.sy-brief__stamp { position: relative; top: auto; right: auto; transform: none; animation: sy-stamp-in 620ms var(--ease-release) 260ms backwards; }
.sy-brief__dt { margin: 0 0 10px; font-size: 38px; line-height: 42px; }
.sy-brief__dp { max-width: 600px; margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 27px; }
.sy-brief__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 24px 0 8px; overflow: hidden; border-radius: 6px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.sy-brief__sum > div { padding: 12px 14px; background: var(--surface-sunk); }
.sy-brief__sum span { display: block; margin-bottom: 3px; font: 500 10.5px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sy-brief__sum b { font: 620 15px/21px var(--font-sans); }
.sy-brief__next { list-style: none; margin: 0 0 28px; padding: 0; }
.sy-brief__next li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sy-brief__nn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--surface-sunk); font: 600 12px/1 var(--font-mono); }
.sy-brief__next li.is-ok .sy-brief__nn { background: var(--success); color: var(--surface); }
.sy-brief__nn .sy-icon { width: 18px; height: 18px; stroke-width: 2.4; }
.sy-brief__next b { display: block; font: 650 16px/22px var(--font-sans); }
.sy-brief__next span { display: block; color: var(--ink-soft); font-size: 14px; line-height: 21px; }
.sy-brief__dact { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 960px) {
  .sy-brief__body { grid-template-columns: minmax(0, 1fr); }
  .sy-manifest { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .sy-brief__fields { grid-template-columns: minmax(0, 1fr); }
  .sy-brief__done { padding: 22px 18px; }
  .sy-brief__dt { font-size: 28px; line-height: 32px; }
  .sy-brief__sum { grid-template-columns: minmax(0, 1fr); }
  .sy-brief__ticket { flex-direction: column; }
  .sy-brief__dact .sy-btn { width: 100%; }
  .sy-chips { gap: 8px; }
}

/* ==================================================================== PricingEngagement */
.sy-pricing { display: grid; grid-template-columns: repeat(var(--_n, 3), minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sy-price { padding: 26px 24px 22px; }
.sy-price.is-featured::after { box-shadow: inset 0 0 0 2px var(--signal), var(--shadow-card); }
.sy-price__flag { position: absolute; top: 0; right: 20px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 0 0 3px 3px; background: var(--signal); color: var(--on-signal); font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sy-price__flag .sy-icon { width: 13px; height: 13px; stroke-width: 2.2; }
.sy-price__kind { font: 500 11.5px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-ink); }
.sy-price__name { margin: 6px 0 6px; font-size: 24px; line-height: 30px; font-stretch: 108%; letter-spacing: -.02em; }
.sy-price__head .sy-small { min-height: 63px; color: var(--ink-soft); }
.sy-price__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.sy-price__from { width: 100%; font: 500 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sy-price__v { display: inline-block; font: 820 46px/48px var(--font-sans); font-stretch: 125%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sy-price__v.is-scaled { min-width: 4.6ch; }
.sy-price__unit { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.sy-price__slider { margin: 0 0 16px; }
.sy-price__inc { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.sy-price__inc li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; }
.sy-price__inc .sy-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--success); stroke-width: 2.2; }
.sy-price__cta { margin-top: auto; }
.sy-price__foot { margin: 10px 0 0; text-align: center; font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); }
@media (max-width: 960px) { .sy-pricing { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .sy-price__head .sy-small { min-height: 0; } }

/* ==================================================================== ReleaseNotes */
.sy-notes { padding: 22px 24px 14px; }
.sy-notes__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sy-notes__head .sy-heading { margin-top: 8px; }
.sy-notes__list { list-style: none; margin: 0; padding: 0; }
.sy-notes__entry { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.sy-notes__ver { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sy-notes__tag { padding: 4px 7px; border-radius: var(--radius-xs); background: var(--deck); color: var(--on-deck); font: 600 12px/1 var(--font-mono); }
.sy-notes__ver time { font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); }
.sy-notes__title { margin: 0 0 8px; font: 650 16px/22px var(--font-sans); }
.sy-notes__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sy-notes__items li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 21px; }
.sy-notes__items .sy-badge { justify-self: start; }
.sy-notes__more { padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .sy-notes__entry { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sy-notes__ver { flex-direction: row; align-items: center; } .sy-notes { padding: 18px 16px 12px; } }

/* ==================================================================== Capacity */
.sy-cap { padding: 22px 24px 20px; }
.sy-cap__h { margin: 10px 0 6px; font-size: 34px; line-height: 38px; }
.sy-cap__n { color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.sy-cap .sy-small { color: var(--ink-soft); max-width: 460px; }
.sy-cap__slots { list-style: none; display: grid; grid-template-columns: repeat(var(--_n, 6), minmax(0, 1fr)); gap: 8px; margin: 20px 0 18px; padding: 0; }
.sy-cap__slot { position: relative; height: 68px; display: grid; place-items: center; border-radius: 3px; background: var(--sy-hatch), var(--sy-slotbg); box-shadow: var(--shadow-seat); }
.sy-cap__box { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-deck) 12%, transparent) 0 2px, transparent 2px 7px) 5px 0 / calc(100% - 10px) 70% no-repeat; background-color: var(--deck); color: var(--on-deck); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.sy-cap__lbl { font: 600 10px/12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sy-cap__slot.is-open .sy-cap__lbl { padding: 3px 5px; border-radius: 2px; background: var(--surface); color: var(--ink); }
.sy-cap__slots.is-armed .sy-cap__box { opacity: 0; }
.sy-cap__slots.is-in .sy-cap__box { animation: sy-drop var(--dur-stack) var(--ease-stack) backwards; }
.sy-cap__slots.is-in .sy-cap__slot:nth-child(2) .sy-cap__box { animation-delay: 90ms; }
.sy-cap__slots.is-in .sy-cap__slot:nth-child(3) .sy-cap__box { animation-delay: 180ms; }
.sy-cap__slots.is-in .sy-cap__slot:nth-child(4) .sy-cap__box { animation-delay: 270ms; }
.sy-cap__slots.is-in .sy-cap__slot:nth-child(5) .sy-cap__box { animation-delay: 360ms; }
.sy-cap__slots.is-in .sy-cap__slot:nth-child(6) .sy-cap__box { animation-delay: 450ms; }
.sy-cap__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sy-cap__foot .sy-btn { margin-bottom: 3px; }
.sy-cap__legend { display: flex; align-items: center; gap: 6px; font: 500 11.5px/16px var(--font-mono); color: var(--ink-soft); }
.sy-cap__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.sy-cap__legend i.is-b { background: var(--deck); }
.sy-cap__legend i.is-o { margin-left: 10px; background: var(--sy-hatch), var(--sy-slotbg); }
@media (max-width: 520px) { .sy-cap__slot { height: 56px; } .sy-cap__lbl { font-size: 8.5px; letter-spacing: .02em; } .sy-cap { padding: 18px 16px 16px; } .sy-cap__h { font-size: 28px; line-height: 32px; } }

/* ==================================================================== Testimonial */
.sy-quote { margin: 0; padding: 28px 28px 24px; }
.sy-quote__mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 20px; border-radius: var(--radius-sm); background: var(--signal); color: var(--on-signal); }
.sy-quote__mark .sy-icon { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.sy-quote__text { margin: 0 0 24px; }
.sy-quote__text p { margin: 0; font: 560 22px/32px var(--font-sans); letter-spacing: -.01em; text-wrap: pretty; }
.sy-quote__by { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.sy-quote__who { display: flex; flex-direction: column; }
.sy-quote__who b { font: 650 15px/20px var(--font-sans); }
.sy-quote__who span { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.sy-quote__metric { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.sy-quote__metric b { font: 820 28px/1 var(--font-sans); font-stretch: 125%; letter-spacing: -.03em; color: var(--signal-ink); }
.sy-quote__metric span { margin-top: 4px; font: 500 10.5px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 640px) { .sy-quote { padding: 20px 18px 18px; } .sy-quote__text p { font-size: 18px; line-height: 27px; } }
[data-theme="dark"] .sy-cap__box { background-color: #2e343d; }
[data-theme="dark"] .sy-cap__legend i.is-b { background: #2e343d; }