/* Studio by Maitreya Labs - the done-for-you service pages and client app (design 2.0, "Cobalt").
   Loaded on /service pages only. All colour comes from the semantic tokens that studio/static/maitreya.css sets, so the
   light theme and "Lights off" are the same markup. Phone first: the page is built for 390 px and grows. */

.svc { background: var(--bg); color: var(--text); font-family: var(--font-sans); min-height: 100vh;
  -webkit-text-size-adjust: 100%; }
.svc [hidden] { display: none !important; }
.svc *, .svc *::before, .svc *::after { box-sizing: border-box; }
.svc main:not(.svc-main) { display: block; }
.svc a:where(:not(.s-btn)) { color: inherit; }
.svc img, .svc video, .svc iframe { max-width: 100%; }
.svc-wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 clamp(1rem, 0.4rem + 2.6vw, 2.5rem); }
.svc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- type */
.svc-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.7rem + 3.6vw, 5rem); line-height: 1;
  letter-spacing: -0.04em; margin: 0; color: var(--text-strong); text-wrap: balance; }
.svc-h1--sm { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.svc-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem); line-height: 1.05;
  letter-spacing: -0.035em; margin: 0; color: var(--text-strong); text-wrap: balance; }
.svc-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; margin: 0; color: var(--text-strong); }
.svc-h4 { font-weight: 600; font-size: 1rem; margin: 0; color: var(--text-strong); }
.svc-h1 em, .svc-h2 em { font-style: italic; font-weight: 500; color: var(--accent-text); }
.svc-lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 36rem; text-wrap: pretty; }
.svc-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); margin: 0; }
.svc-muted { color: var(--text-muted); }
.svc-fine { font-size: 0.8125rem; color: var(--text-subtle); margin: 0; }
.svc-fine a, .svc-link, .svc main p a:not([class]), .svc main li a:not([class]) { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }
.svc-link { text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; }
.svc-link:hover { text-decoration: underline; }
.svc-mono { font-family: var(--font-mono); }
.svc-center { text-align: center; }

/* ---------------------------------------------------------------- sections */
.svc-section { padding: clamp(4rem, 3rem + 5vw, 7rem) 0; }
.svc-section--tight { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.svc-section--band { background: var(--band-bg); border-block: 1px solid var(--border); }
.svc-section--flush-top { padding-top: 0; }
.svc-head { display: flex; flex-direction: column; gap: 0.875rem; max-width: 47.5rem; margin-bottom: 2.5rem; }
.svc-head--row { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; }
.svc-head--row > div { display: flex; flex-direction: column; gap: 0.875rem; max-width: 42rem; }
.svc-head--center { align-items: center; text-align: center; margin-inline: auto; }
.svc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.svc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.svc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.svc-stack { display: flex; flex-direction: column; gap: 1rem; }

/* ---------------------------------------------------------------- header */
.svc-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-header); backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--border); }
.svc-header__in { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.svc-header .s-logo { flex: none; }
.svc-nav { display: none; align-items: center; gap: 0.125rem; flex: 1; font-size: 0.875rem; font-weight: 500; }
.svc-nav > a, .svc-nav__menu > summary { text-decoration: none; color: var(--text-muted); padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; list-style: none; white-space: nowrap; }
.svc-nav__menu > summary::-webkit-details-marker { display: none; }
.svc-nav > a:hover, .svc-nav__menu > summary:hover, .svc-nav__menu[open] > summary { color: var(--text-strong); background: var(--surface-hover); }
.svc-nav > a[aria-current="page"] { color: var(--text-strong); }
.svc-nav__menu { position: relative; }
.svc-nav__drop { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 34rem; max-width: 92vw; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 1.125rem; box-shadow: var(--shadow-lg); padding: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; z-index: var(--z-dropdown); }
.svc-nav__drop a { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.7rem 0.8rem; border-radius: 0.75rem; text-decoration: none; }
.svc-nav__drop a:hover { background: var(--surface-hover); }
.svc-nav__drop b { font-weight: 600; color: var(--text-strong); font-size: 0.9375rem; }
.svc-nav__drop small { font-size: 0.8125rem; color: var(--text-muted); }
.svc-nav__drop .svc-nav__free { grid-column: 1 / -1; background: var(--accent-subtle); border: 1px solid var(--accent-border); }
.svc-header__end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.svc-header__login { display: none; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 0.5rem 0.375rem; }
.svc-header__login:hover { color: var(--text-strong); }
.svc-burger { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 0.625rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; }
.svc-header .s-lights { display: none; }
@media (min-width: 60rem) {
  .svc-nav { display: flex; }
  .svc-burger { display: none; }
  .svc-header__login, .svc-header .s-lights { display: inline-flex; }
  .svc-header__end { margin-left: 0; }
}
.svc-sheet { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; }
.svc-sheet__top { height: 4rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid var(--border); flex: none; }
.svc-sheet__nav { display: flex; flex-direction: column; padding: 0.5rem 1rem; }
.svc-sheet__nav a { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; padding: 1rem 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text-strong); display: flex; align-items: baseline; gap: 0.875rem; }
.svc-sheet__nav a i { font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--accent-text); }
.svc-sheet__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-subtle); padding: 1.25rem 1rem 0; margin: 0; }
.svc-sheet__sub a { font-size: 1.0625rem; padding: 0.75rem 0; }
.svc-sheet__foot { margin-top: auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.625rem; border-top: 1px solid var(--border); }
.svc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); display: flex; gap: 0.5rem;
  transform: translateY(110%); transition: transform var(--duration-base) var(--ease-default); }
.svc-sticky.is-on { transform: none; }
.svc-sticky .s-btn { flex: 1; justify-content: center; }
@media (min-width: 40rem) { .svc-sticky { display: none; } }

/* ---------------------------------------------------------------- buttons, pills */
.svc .s-btn--lg { padding-inline: 1.5rem; }
.svc-btn-light { background: #F8F7F2 !important; color: #101A2F !important; border-color: transparent !important; }
.svc-btn-line-inv { background: transparent !important; color: #F8F7F2 !important; border: 1px solid rgba(248, 247, 242, 0.4) !important; }
.svc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.375rem; }
.svc-pill { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); max-width: 100%; }
.svc-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cut) 18%, transparent); flex: none; }
.svc-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 999px;
  background: var(--surface-active); color: var(--text-muted); white-space: nowrap; }
.svc-badge__dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; flex: none; }
.svc-badge--accent, .svc-badge--info { background: var(--accent-subtle); color: var(--accent-text); }
.svc-badge--success { background: var(--success-subtle); color: var(--success); }
.svc-badge--warning { background: var(--cut-subtle); color: var(--cut-text); }
.svc-badge--solid { background: var(--accent); color: var(--text-on-accent); }
.svc-seg { display: inline-flex; padding: 0.25rem; gap: 0.125rem; border-radius: 0.625rem; background: var(--bg-subtle); border: 1px solid var(--border); }
.svc-seg button { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 0.4375rem 0.75rem; border-radius: 0.4375rem; border: 0; cursor: pointer;
  background: transparent; color: var(--text-subtle); }
.svc-seg button[aria-checked="true"], .svc-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-xs); }

/* ---------------------------------------------------------------- hero */
.svc-hero { padding: clamp(3rem, 2rem + 4.5vw, 6rem) 0 clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.svc-hero__grid { display: flex; flex-wrap: wrap; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.svc-hero__copy { flex: 1 1 27.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1.375rem; }
.svc-hero__media { flex: 1 1 28.75rem; min-width: 0; padding: 0.625rem; border-radius: 1.375rem; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); }
.svc-hero--page { padding-bottom: 1rem; }
.svc-hero--page .svc-hero__copy { max-width: 52rem; }

/* ---------------------------------------------------------------- strips and cards */
.svc-strip { border-block: 1px solid var(--border); background: var(--band-bg); }
.svc-strip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; padding-block: 1.375rem; }
.svc-strip__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.75rem; font-size: 0.8125rem; color: var(--text-subtle); }
.svc-strip__who b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-muted); }
.svc-strip__facts { display: flex; flex-wrap: wrap; gap: 0.625rem 2rem; font-size: 0.875rem; color: var(--text-muted); }
.svc-strip__facts b { color: var(--text-strong); font-weight: 600; }
.svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1.125rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.svc-card p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.svc-card--lg { padding: 1.625rem; }
.svc-card__tag { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); }
.svc-stat { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1; color: var(--text-strong); }
.svc-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--accent-subtle); color: var(--accent-text); display: grid; place-items: center; }
.svc-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--text-muted); }
.svc-ticks li { display: inline-flex; align-items: center; gap: 0.35rem; }
.svc-ticks svg { color: var(--accent-text); flex: none; }

.svc-dark { background: var(--ink-panel); color: #F8F7F2; border-radius: 1.75rem; padding: clamp(2rem, 1rem + 4vw, 4rem); display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 1rem + 3vw, 4rem); }
.svc-dark .svc-eyebrow { color: #9ABDFF; }
.svc-dark .svc-h2, .svc-dark .svc-h3 { color: #F8F7F2; }
.svc-dark .svc-h2 em { color: #9ABDFF; }
.svc-dark__main { flex: 1.3 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.375rem; }
.svc-dark__side { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.svc-list li { display: flex; gap: 0.875rem; padding: 0.875rem 0; border-top: 1px solid rgba(248, 247, 242, 0.16); }
.svc-list li:last-child { border-bottom: 1px solid rgba(248, 247, 242, 0.16); }
.svc-list__tick { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; }
.svc-list b { display: block; font-weight: 600; font-size: 1rem; }
.svc-list span span, .svc-list small { display: block; font-size: 0.875rem; color: #BAC4D8; }
.svc-box { border-radius: 1.125rem; border: 1px solid rgba(248, 247, 242, 0.18); padding: 1.375rem; display: flex; flex-direction: column; gap: 0.375rem; color: #BAC4D8; font-size: 0.875rem; }
.svc-box--hot { background: rgba(255, 255, 255, 0.06); }
.svc-box b { font-family: var(--font-display); font-weight: 700; font-size: 2.125rem; letter-spacing: -0.03em; color: #F8F7F2; line-height: 1.1; }
.svc-box--hot b { font-size: 3.25rem; line-height: 1; }
.svc-box s { text-decoration-color: var(--flame-500); text-decoration-thickness: 2px; }

.svc-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.svc-checks li { display: flex; gap: 0.625rem; font-size: 1rem; line-height: 1.5; color: var(--text); }
.svc-checks svg { flex: none; margin-top: 0.2rem; color: var(--accent-text); }
.svc-checks--x svg { color: var(--text-subtle); }
.svc-split { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 1rem + 4vw, 4.5rem); align-items: flex-start; }
.svc-split > * { flex: 1 1 22rem; min-width: 0; }
.svc-split > .svc-split__narrow { flex: 0.8 1 18rem; }

/* ---------------------------------------------------------------- how it works */
.svc-steps3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.svc-steps3 > li { background: var(--surface); border: 1px solid var(--border); border-radius: 1.125rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.svc-steps3__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-subtle); }
.svc-steps3 p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.svc-mini { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 0.75rem; }
.svc-mini code { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.svc-mini .ok { color: var(--accent-text); }
.svc-chip { font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.625rem; border-radius: 999px; background: var(--accent-subtle); color: var(--accent-text); }
.svc-chip--plain { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 500; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; padding: 0; margin: 0; }
.svc-chips li { font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }

/* ---------------------------------------------------------------- pricing */
.svc-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); align-items: stretch; }
.svc-plan { position: relative; display: flex; flex-direction: column; gap: 1.125rem; padding: 1.75rem; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--border); }
.svc-plan--hot { border: 2px solid var(--accent); box-shadow: var(--shadow-md); padding: calc(1.75rem - 1px); }
.svc-plan--pick { outline: 3px solid var(--accent-border); outline-offset: 2px; }
.svc-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.svc-plan__name { font-weight: 600; font-size: 1.125rem; margin: 0; color: var(--text-strong); }
.svc-plan__blurb { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); margin: 0; min-height: 2.6em; }
.svc-plan__price { display: flex; align-items: baseline; gap: 0.375rem; margin: 0; }
.svc-plan__amt { font-family: var(--font-display); font-weight: 700; font-size: 2.875rem; letter-spacing: -0.04em; line-height: 1; color: var(--text-strong); }
.svc-plan__per { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-text); margin: 0; }
.svc-plan ul { margin: 0; padding: 1.125rem 0 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; border-top: 1px solid var(--border); font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); }
.svc-plan li { display: flex; gap: 0.625rem; }
.svc-plan li::before { content: "✓"; color: var(--accent-text); font-weight: 700; flex: none; }
.svc-plan .s-btn { margin-top: auto; width: 100%; justify-content: center; }
.svc-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.125rem 1.375rem; border-radius: 1rem;
  border: 1px dashed var(--border-strong); background: var(--bg-subtle); font-size: 0.9375rem; color: var(--text-muted); }
.svc-note b { color: var(--text-strong); font-weight: 600; }
.svc-finder { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.svc-finder__ctl { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 1rem; }
.svc-finder__ctl output { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text-strong); }
.svc-finder input[type="range"] { width: 100%; accent-color: var(--accent); }
.svc-finder__ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-subtle); }
.svc-finder__out { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.75rem; }
.svc-finder__fit { background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: 1rem; padding: 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; }
.svc-finder__fit b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text-strong); }
.svc-cmp { display: flex; flex-direction: column; gap: 0; font-size: 0.9375rem; }
.svc-cmp > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-top: 1px solid var(--border); color: var(--text-muted); }
.svc-cmp b { color: var(--text-strong); font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.svc-cmp .is-us b { color: var(--accent-text); }
.svc-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.svc-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9375rem; }
.svc-table th, .svc-table td { padding: 0.8125rem 1rem; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.svc-table thead th { border-top: 0; background: var(--bg-subtle); font-weight: 600; color: var(--text-strong); font-size: 0.875rem; }
.svc-table tbody th { font-weight: 500; color: var(--text-muted); }
.svc-table td.is-yes { color: var(--accent-text); font-weight: 600; }
.svc-table .is-pick { background: var(--accent-subtle); }
.svc-table--app { min-width: 46rem; }
.svc-table--app td a { font-weight: 600; text-decoration: none; color: var(--text-strong); }
.svc-table--app td small { display: block; color: var(--text-subtle); font-size: 0.8125rem; font-weight: 400; }

/* ---------------------------------------------------------------- faq, final, footer */
.svc-faq { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 1rem + 4vw, 4.5rem); }
.svc-faq__intro { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.875rem; }
.svc-faq__list { flex: 1.6 1 26rem; min-width: 0; border-top: 1px solid var(--border); }
.svc-faq__item { border-bottom: 1px solid var(--border); }
.svc-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 600;
  cursor: pointer; color: var(--text-strong); }
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--text-subtle); flex: none; }
.svc-faq__item[open] summary::after { content: "\2212"; }
.svc-faq__item p { margin: 0 0 1.25rem; padding-right: 2rem; line-height: 1.6; color: var(--text-muted); }
.svc-final { background: var(--ink-panel); color: #F8F7F2; border-radius: 1.75rem; padding: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem); display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 1.25rem; }
.svc-final .svc-h2 { color: #F8F7F2; max-width: 16ch; }
.svc-final .svc-h2 em { color: #9ABDFF; }
.svc-final p { margin: 0; color: #BAC4D8; font-size: 1.125rem; max-width: 30em; }
.svc-final .svc-fine { color: #BAC4D8; }
.svc-footer { border-top: 1px solid var(--border); margin-top: 0; }
.svc-footer__grid { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); padding-block: 3rem; }
.svc-footer__brand { grid-column: span 2; display: flex; flex-direction: column; gap: 0.875rem; max-width: 24rem; }
@media (max-width: 40rem) { .svc-footer__brand { grid-column: 1 / -1; } }
.svc-footer__brand p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
.svc-footer h2 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-subtle); font-weight: 500; text-transform: uppercase; margin: 0 0 0.875rem; }
.svc-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; }
.svc-footer ul a { text-decoration: none; color: var(--text-muted); }
.svc-footer ul a:hover { color: var(--text-strong); text-decoration: underline; }
.svc-footer__fine { border-top: 1px solid var(--border); padding-block: 1.25rem calc(1.25rem + 4rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.8125rem; color: var(--text-subtle); }
@media (min-width: 40rem) { .svc-footer__fine { padding-bottom: 1.25rem; } }
.svc-footer__fine a { color: inherit; }

/* ---------------------------------------------------------------- the showcase: before and after */
.svc-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.svc-tab, .svc-pick { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 999px;
  padding: 0.5625rem 1rem; font-size: 0.9375rem; font-weight: 600; min-height: 2.75rem; }
.svc-tab:hover, .svc-pick:hover { border-color: var(--border-strong); color: var(--text-strong); }
.svc-tab[aria-selected="true"] { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }
.svc-picks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.svc-pick { border-radius: 0.875rem; text-align: left; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.875rem; }
.svc-pick b { font-size: 0.9375rem; color: var(--text-strong); font-weight: 600; }
.svc-pick span { font-size: 0.8125rem; font-weight: 400; color: var(--text-subtle); }
.svc-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-subtle); }
.svc-ex { display: flex; flex-direction: column; gap: 1.5rem; }
.svc-ex__top { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 62rem) { .svc-ex__top { grid-template-columns: minmax(0, 1fr); } }
.svc-ex__meta { display: flex; flex-direction: column; gap: 1.125rem; }
.svc-ex__kind { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); text-transform: uppercase; margin: 0; }
.svc-ex__who { color: var(--text-subtle); font-size: 0.875rem; margin: 0; }
.svc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1.25rem; margin: 0; padding: 0; }
.svc-facts div { display: flex; flex-direction: column; gap: 0.125rem; }
.svc-facts dt { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -0.03em; color: var(--text-strong); line-height: 1.1; }
.svc-facts dd { margin: 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.35; }
.svc-ex__chips-h { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-subtle); text-transform: uppercase; margin: 0 0 0.5rem; }
.svc-ba { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.svc-ba__stage { position: relative; overflow: hidden; border-radius: 0.875rem; background: #050B17; aspect-ratio: var(--ar, 16 / 9); --pos: 50%; isolation: isolate; user-select: none; }
.svc-ba__layer { position: absolute; inset: 0; background: #050B17; }
.svc-ba__layer--top { clip-path: inset(0 0 0 var(--pos)); }
.svc-ba__layer > img, .svc-ba__layer > video, .svc-ba__layer > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; display: block; background: #050B17; }
.svc-ba__tag { position: absolute; top: 0.625rem; z-index: 3; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3125rem 0.625rem; border-radius: 0.375rem; pointer-events: none; }
.svc-ba__tag--raw { left: 0.625rem; background: rgba(5, 11, 23, 0.78); color: #F8F7F2; }
.svc-ba__tag--done { right: 0.625rem; background: var(--accent); color: #fff; }
.svc-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px rgba(5, 11, 23, 0.25); }
.svc-ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: #101A2F;
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); font-size: 1rem; font-weight: 700; }
.svc-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 6; touch-action: pan-y; }
.svc-ba__range:focus-visible + .svc-ba__focus, .svc-ba__stage:focus-within .svc-ba__handle { box-shadow: 0 0 0 3px var(--accent); }
.svc-ba__hint { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 5; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: rgba(255, 255, 255, 0.94); color: #101A2F; padding: 0.3125rem 0.75rem; border-radius: 999px; pointer-events: none; transition: opacity var(--duration-base); }
.svc-ba__stage.is-touched .svc-ba__hint { opacity: 0; }
.svc-ba__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 7; width: 4.25rem; height: 4.25rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.96); color: #101A2F; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); transition: transform var(--duration-fast); }
.svc-ba__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.svc-ba__play svg { margin-left: 0.15rem; }
.svc-ba__stage.is-playing .svc-ba__play { display: none; }
.svc-ba__stage.is-playing .svc-ba__range { pointer-events: auto; }
.svc-ba__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.svc-ba__btn { font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 0.4375rem 0.875rem; min-height: 2.25rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.svc-ba__btn:hover { border-color: var(--border-strong); }
.svc-ba__note { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
.svc-ba__note b { color: var(--text-strong); font-weight: 600; }
.svc-ba__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: center; font-size: 0.8125rem; color: var(--text-muted); }
.svc-ba__ends { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.svc-ba--compact .svc-ba__stage { border-radius: 0.75rem; }
.svc-side2 { display: grid; gap: 0.625rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.svc-side2 figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.svc-side2 figcaption { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; }
.svc-side2 .svc-ba__stage { cursor: pointer; }
.svc-side2--stack { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 38rem) { .svc-side2 { grid-template-columns: minmax(0, 1fr); } }
.svc-vid { position: relative; overflow: hidden; border-radius: 0.75rem; background: #050B17; aspect-ratio: var(--ar, 16 / 9); }
.svc-vid > img, .svc-vid > video, .svc-vid > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; display: block; }
.svc-vid--tall { width: min(100%, 15rem); margin-inline: auto; }
.svc-vid__go { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.svc-vid__go span { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: #101A2F; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
.svc-vid__go svg { margin-left: 0.15rem; }
.svc-vid__tag { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: rgba(5, 11, 23, 0.78); color: #F8F7F2; pointer-events: none; }
.svc-vid__tag--done { background: var(--accent); color: #fff; }

.svc-reels { display: flex; flex-direction: column; gap: 0.875rem; }
.svc-reels__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.svc-reels__head h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-strong); }
.svc-reels__head span { font-size: 0.8125rem; color: var(--text-subtle); }
.svc-reels__row { list-style: none; margin: 0 calc(-1 * clamp(1rem, 0.4rem + 2.6vw, 2.5rem)); padding: 0.25rem clamp(1rem, 0.4rem + 2.6vw, 2.5rem) 0.75rem; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); scrollbar-width: thin; }
.svc-reels__row > li { flex: 0 0 8.75rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.375rem; }
.svc-reel { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 0.75rem; overflow: hidden; background: #050B17; cursor: pointer; aspect-ratio: 9 / 16; }
.svc-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-reel__play { position: absolute; left: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.6875rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: rgba(5, 11, 23, 0.82); color: #fff; }
.svc-reel:hover img { transform: scale(1.03); }
.svc-reel img { transition: transform var(--duration-base) var(--ease-default); }
.svc-reel__title { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--text-strong); }
.svc-reel__from { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-subtle); margin: 0; }
.svc-lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; color: #F8F7F2; }
.svc-lightbox::backdrop { background: rgba(5, 11, 23, 0.88); }
.svc-lightbox__in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 1rem; }
.svc-lightbox__stage { width: min(26rem, 88vw, calc((100dvh - 12rem) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 0.875rem; overflow: hidden; background: #000; position: relative; }
.svc-lightbox__stage > video, .svc-lightbox__stage > iframe, .svc-lightbox__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.svc-lightbox__stage--wide { width: min(64rem, 94vw, calc((100dvh - 12rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.svc-lightbox__cap { text-align: center; font-size: 0.9375rem; max-width: 30rem; }
.svc-lightbox__cap small { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: #BAC4D8; margin-top: 0.25rem; }
.svc-lightbox__nav { display: flex; gap: 0.75rem; }
.svc-lightbox__nav button { font: inherit; font-weight: 600; font-size: 0.9375rem; min-height: 2.75rem; min-width: 5rem; padding: 0.5rem 1.125rem; border-radius: 999px; border: 1px solid rgba(248, 247, 242, 0.3); background: rgba(255, 255, 255, 0.08); color: #F8F7F2; cursor: pointer; }
.svc-lightbox__nav button:hover { background: rgba(255, 255, 255, 0.16); }

/* editing styles */
.svc-style { display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; padding-block: 2rem; border-top: 1px solid var(--border); }
.svc-style:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 56rem) { .svc-style { grid-template-columns: minmax(0, 1fr); } }
.svc-style__meta { display: flex; flex-direction: column; gap: 0.625rem; }
.svc-style__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-text); letter-spacing: 0.06em; }
.svc-style__meta p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 0.9375rem; }
.svc-style__use { font-size: 0.8125rem; color: var(--text-subtle); }
.svc-style__pair { display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.svc-style__pair figure { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.svc-style__pair figcaption { font-size: 0.75rem; color: var(--text-subtle); }
.svc-style__pair--solo { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
.svc-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.svc-jump a { font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.5rem 0.875rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.svc-jump a:hover { color: var(--text-strong); border-color: var(--border-strong); }
.svc-sec { padding-top: 2.75rem; }

/* industry switcher and gallery cards */
.svc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-block: 0.875rem; }
.svc-switch span { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-subtle); margin-right: 0.5rem; }
.svc-switch a { font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.4375rem 0.875rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.svc-switch a[aria-current="page"] { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }
.svc-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.svc-gallery a { text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 1.125rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color var(--duration-fast), transform var(--duration-fast); }
.svc-gallery a:hover { border-color: var(--accent); transform: translateY(-2px); }
.svc-gallery b { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; color: var(--text-strong); }
.svc-gallery small { color: var(--text-muted); font-size: 0.875rem; }

/* ---------------------------------------------------------------- forms */
.svc-form { display: flex; flex-direction: column; gap: 1.25rem; }
.svc-field { display: flex; flex-direction: column; gap: 0.4375rem; min-width: 0; }
.svc-field > label, .svc-field > .svc-label, .svc-legend { font-size: 0.9375rem; font-weight: 600; color: var(--text-strong); }
.svc-field__hint { font-size: 0.8125rem; color: var(--text-subtle); font-weight: 400; margin-left: 0.375rem; }
.svc-input, .svc-select, .svc-textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  min-height: 3rem; }
.svc-textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.svc-input:focus, .svc-select:focus, .svc-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.svc-input[aria-invalid="true"] { border-color: var(--error); }
.svc-err { color: var(--error); font-size: 0.875rem; margin: 0; font-weight: 500; }
.svc-alert { padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 0.9375rem; border: 1px solid; }
.svc-alert--error { background: var(--error-subtle); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); }
.svc-alert--ok { background: var(--success-subtle); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); }
.svc-alert--info { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-text); }
.svc-linkstate { font-size: 0.8125rem; min-height: 1.1em; color: var(--text-subtle); margin: 0; }
.svc-linkstate.is-ok { color: var(--success); }
.svc-linkstate.is-bad { color: var(--error); }
.svc-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.svc-choices label { position: relative; }
.svc-choices input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.svc-choices span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.9375rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); }
.svc-choices input:checked + span { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.svc-choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.45; }
.svc-check input { margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; accent-color: var(--accent); flex: none; }
.svc-pw { position: relative; }
.svc-pw button { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font: inherit; font-size: 0.8125rem; font-weight: 600; background: none; border: 0; color: var(--accent-text); cursor: pointer; padding: 0.5rem; }
.svc-help { border: 1px solid var(--border); border-radius: 0.75rem; background: var(--bg-subtle); padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--text-muted); }
.svc-help summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.svc-help ul { margin: 0.625rem 0 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; }
.svc-formcard { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem; box-shadow: var(--shadow-sm); }
.svc-step { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); margin: 0; }
.svc-linkrow { display: flex; flex-direction: column; gap: 0.375rem; }
.svc-linkrow__in { display: flex; gap: 0.5rem; }
.svc-linkrow__in .svc-input { flex: 1; }
.svc-want { border: 1px solid var(--border); border-radius: 1rem; padding: 1.125rem; display: flex; flex-direction: column; gap: 0.875rem; background: var(--surface); }
.svc-want.is-off { opacity: 0.6; }
.svc-want__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.svc-stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.svc-stepper button { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1.25rem; cursor: pointer; }
.svc-stepper input { width: 3.5rem; text-align: center; min-height: 2.75rem; }
.svc-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.svc-summary { position: sticky; bottom: 0; background: var(--bg-header); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem 1.125rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; box-shadow: var(--shadow-md); }

/* ---------------------------------------------------------------- auth pages */
.svc-auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .svc-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.svc-auth__main { display: flex; flex-direction: column; padding: 1.25rem clamp(1.25rem, 0.5rem + 3vw, 3.5rem); gap: 2rem; }
.svc-auth__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; color: var(--text-muted); }
.svc-auth__bar a:not(.s-logo) { font-weight: 600; text-decoration: none; color: var(--text-strong); }
@media (pointer: coarse) {                  /* a thumb needs 44 px: the links of the sign-in bar and "Forgot it?" were 23 px tall */
  .svc-auth__bar a:not(.s-logo), .svc-auth .svc-link,
  .svc-funnel ol a, .svc-table--app a, .svc-header .svc-nav > a, .svc-alert .svc-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.svc-auth__form { width: 100%; max-width: 27rem; margin: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.svc-auth__form h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); letter-spacing: -0.04em; line-height: 1; }
.svc-auth__legal { font-size: 0.8125rem; color: var(--text-subtle); }
.svc-auth__panel { display: none; background: var(--ink-panel); color: #F8F7F2; padding: clamp(2rem, 1rem + 3vw, 4rem); flex-direction: column; justify-content: center; gap: 1.5rem; }
@media (min-width: 62rem) { .svc-auth__panel { display: flex; } }
.svc-auth__panel .svc-eyebrow { color: #9ABDFF; }
.svc-auth__panel h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; }
.svc-auth__panel p { margin: 0; color: #BAC4D8; }
.svc-or { display: flex; align-items: center; gap: 0.875rem; color: var(--text-subtle); font-size: 0.8125rem; }
.svc-or::before, .svc-or::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.svc-planline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border-radius: 0.875rem; border: 1px solid var(--accent-border); background: var(--accent-subtle); font-size: 0.9375rem; }
.svc-planline b { color: var(--text-strong); }
.svc-bigcheck { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--success-subtle); color: var(--success); display: grid; place-items: center; }

/* ---------------------------------------------------------------- the client app */
.svc-app { background: var(--bg); }
.svc-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
@media (min-width: 40rem) { .svc-shell { grid-template-columns: 5.25rem minmax(0, 1fr); } }
@media (min-width: 64rem) { .svc-shell { grid-template-columns: 15.5rem minmax(0, 1fr); } }
.svc-side { display: none; position: sticky; top: 0; height: 100dvh; background: var(--bg-subtle); border-right: 1px solid var(--border); flex-direction: column; gap: 0.5rem; padding: 1rem 0.75rem; overflow-y: auto; }
@media (min-width: 40rem) { .svc-side { display: flex; align-items: stretch; } }
.svc-side__ws { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.375rem 0.75rem; text-decoration: none; min-width: 0; }
.svc-side__ws .s-logo { min-width: 0; }
.svc-ava { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); display: grid; place-items: center; font-weight: 700; font-size: 0.9375rem; flex: none; }
.svc-ava--sm { width: 2rem; height: 2rem; font-size: 0.8125rem; background: var(--accent-subtle); color: var(--accent-text); }
.svc-side__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.svc-side__who b { font-size: 0.9375rem; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-side__who small { font-size: 0.75rem; color: var(--text-subtle); }
.svc-side .s-btn { justify-content: center; }
.svc-side__nav { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.25rem; }
.svc-side__nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); }
.svc-side__nav a:hover { background: var(--surface-hover); color: var(--text-strong); }
.svc-side__nav a[aria-current="page"] { background: var(--surface); color: var(--text-strong); font-weight: 600; box-shadow: var(--shadow-xs); }
.svc-side__nav small { margin-left: auto; font-size: 0.75rem; background: var(--surface-active); border-radius: 999px; padding: 0.0625rem 0.5rem; color: var(--text-muted); }
.svc-side__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-subtle); padding: 0.875rem 0.75rem 0.25rem; margin: 0; }
.svc-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.svc-meter { background: var(--surface); border: 1px solid var(--border); border-radius: 0.875rem; padding: 0.75rem 0.875rem; font-size: 0.8125rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; }
.svc-meter b { color: var(--text-strong); font-weight: 600; }
.svc-meter__row { display: flex; justify-content: space-between; gap: 0.5rem; }
.svc-bar { height: 0.375rem; border-radius: 999px; background: var(--surface-active); overflow: hidden; }
.svc-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.svc-side__me { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.375rem; }
.svc-side__me form { margin-left: auto; }
.svc-side__me button { background: none; border: 0; color: var(--text-subtle); cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; }
.svc-side__me button:hover { color: var(--text-strong); background: var(--surface-hover); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .svc-side { align-items: center; padding-inline: 0.5rem; }
  .svc-side .s-logo__text, .svc-side__who, .svc-side__label, .svc-side__nav small, .svc-side .s-btn span, .svc-meter, .svc-side__me form { display: none; }
  .svc-side__nav a { flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; padding: 0.5rem 0.25rem; text-align: center; width: 100%; }
  .svc-side .s-btn { width: 2.75rem; padding: 0; }
  .svc-side__ws { justify-content: center; padding-inline: 0; }
}
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--border); background: var(--bg-header);
  position: sticky; top: 0; z-index: var(--z-sticky); backdrop-filter: blur(12px); }
.svc-top b { font-size: 1rem; font-weight: 600; }
@media (min-width: 40rem) { .svc-top { display: none; } }
.svc-tabs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg-header); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); }
.svc-tabs-bar a { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; padding: 0.375rem 0; font-size: 0.6875rem; font-weight: 500; text-decoration: none; color: var(--text-subtle); border-radius: 0.625rem; min-height: 3rem; justify-content: center; }
.svc-tabs-bar a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.svc-tabs-bar .is-new span { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-top: -1.25rem; box-shadow: var(--shadow-md); }
@media (min-width: 40rem) { .svc-tabs-bar { display: none; } }
.svc-main { min-width: 0; padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2.5vw, 2.75rem) 6rem; display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 40rem) { .svc-main { padding-bottom: 3rem; } }
.svc-main__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.svc-main__head h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.02; }
.svc-main__sub { color: var(--text-muted); margin: 0.375rem 0 0; font-size: 1rem; }
.svc-date { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-subtle); text-transform: uppercase; }
.svc-dash { display: grid; gap: 1.75rem 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) { .svc-dash { grid-template-columns: minmax(0, 1fr) 21rem; } }
.svc-col { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.svc-sect { display: flex; flex-direction: column; gap: 0.875rem; }
.svc-sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc-sect__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.svc-sect__head h2.is-need { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--cut-text); font-weight: 500; text-transform: uppercase; }
.svc-sect__head a { font-size: 0.875rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.svc-need { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.125rem; border-radius: 1.125rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; }
.svc-need--warn { background: var(--cut-subtle); border-color: color-mix(in srgb, var(--cut) 30%, transparent); }
.svc-need__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--surface); display: grid; place-items: center; color: var(--cut-text); flex: none; }
.svc-need__txt { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.svc-need__txt b { font-weight: 600; color: var(--text-strong); }
.svc-need__txt span { font-size: 0.875rem; color: var(--text-muted); }
.svc-need__go { font-weight: 600; font-size: 0.9375rem; color: var(--accent-text); white-space: nowrap; }
.svc-need--warn .svc-need__go { color: var(--cut-text); }
.svc-pgrid { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.svc-pcard { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.125rem; border-radius: 1.125rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--duration-fast); }
.svc-pcard:hover { border-color: var(--accent); }
.svc-pcard__top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.svc-pcard__top b { font-weight: 600; font-size: 1rem; color: var(--text-strong); line-height: 1.3; }
.svc-pcard small { color: var(--text-subtle); font-size: 0.8125rem; }
.svc-pcard__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }
.svc-pcard__foot b { font-family: var(--font-mono); font-weight: 500; font-size: 0.9375rem; color: var(--text-strong); }
.svc-segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.svc-segs li { height: 0.3125rem; border-radius: 999px; background: var(--surface-active); }
.svc-segs li.is-done { background: var(--accent); }
.svc-segs li.is-now { background: var(--accent); opacity: 0.55; }
.svc-segs li.is-warn { background: var(--cut); }
.svc-vrow { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 15rem)); }
.svc-vrow a { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; }
.svc-vrow__thumb { aspect-ratio: 16 / 9; border-radius: 0.75rem; background: linear-gradient(135deg, var(--ink-panel), var(--ink-panel-2)); color: #9ABDFF; display: grid; place-items: center; }
.svc-vrow b { font-weight: 600; font-size: 0.9375rem; color: var(--text-strong); }
.svc-vrow small { color: var(--text-subtle); font-size: 0.8125rem; }
.svc-aside { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.svc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.svc-panel h2, .svc-panel h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.01em; }
.svc-panel--accent { background: var(--accent-subtle); border-color: var(--accent-border); }
.svc-panel--sticky { position: sticky; top: 1rem; }
.svc-usage { display: flex; align-items: baseline; gap: 0.5rem; }
.svc-usage b { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.svc-kv { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; font-size: 0.875rem; }
.svc-kv > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); }
.svc-kv dd { margin: 0; color: var(--text-strong); font-weight: 600; text-align: right; font-family: var(--font-mono); font-weight: 500; }
.svc-kv--stack > div { flex-direction: column; gap: 0.125rem; }
.svc-kv--stack dd { text-align: left; font-family: var(--font-sans); font-weight: 500; }
.svc-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; font-size: 0.875rem; }
.svc-feed li { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr); gap: 0.625rem; line-height: 1.4; color: var(--text-muted); }
.svc-feed li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-top: 0.4rem; }
.svc-feed li.is-team::before { background: var(--success); }
.svc-feed li.is-warn::before { background: var(--cut); }
.svc-feed b { color: var(--text-strong); font-weight: 600; }
.svc-feed time { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-subtle); margin-top: 0.125rem; }
.svc-clock { display: flex; flex-direction: column; gap: 0.5rem; }
.svc-clock__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.svc-clock__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-subtle); text-transform: uppercase; }
.svc-clock__time { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; color: var(--text-strong); letter-spacing: -0.02em; }
.svc-clock.is-late .svc-clock__time { color: var(--cut-text); }
.svc-clock__bar { height: 0.375rem; border-radius: 999px; background: var(--surface-active); overflow: hidden; }
.svc-clock__bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 1s linear; }
.svc-clock__foot { font-size: 0.8125rem; color: var(--text-subtle); }
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; counter-reset: s; }
.svc-steps__item { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: var(--text-subtle); }
.svc-steps__dot { height: 0.3125rem; border-radius: 999px; background: var(--surface-active); }
.svc-steps__dot svg, .svc-steps__dot { font-size: 0; }
.svc-steps__item.is-done .svc-steps__dot, .svc-steps__item.is-now .svc-steps__dot { background: var(--accent); }
.svc-steps__item.is-now .svc-steps__dot { opacity: 0.6; }
.svc-steps__item.is-warn .svc-steps__dot { background: var(--cut); opacity: 1; }
.svc-steps__item.is-done, .svc-steps__item.is-now { color: var(--text-strong); font-weight: 600; }
.svc-steps__name { line-height: 1.25; }
@media (max-width: 36rem) { .svc-steps__name { font-size: 0.6875rem; } }
.svc-crumb { font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--accent-text); }
.svc-projhead { display: flex; flex-direction: column; gap: 0.5rem; }
.svc-projhead h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.05; }
.svc-status { padding: 1.25rem; border-radius: 1.25rem; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 1.125rem; }
.svc-status__msg { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--text-strong); font-weight: 500; }
.svc-status--warn { border-color: color-mix(in srgb, var(--cut) 40%, transparent); background: var(--cut-subtle); }
.svc-files { display: flex; flex-direction: column; gap: 0.625rem; list-style: none; padding: 0; margin: 0; }
.svc-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: 0.875rem; background: var(--surface); }
.svc-files li > div { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.svc-files b { font-weight: 600; color: var(--text-strong); }
.svc-files small { color: var(--text-subtle); font-size: 0.8125rem; overflow-wrap: anywhere; }
.svc-embed { aspect-ratio: 16 / 9; border-radius: 0.75rem; overflow: hidden; background: #050B17; }
.svc-embed iframe { width: 100%; height: 100%; border: 0; }
.svc-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.svc-links__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.svc-links__kind { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; background: var(--surface-active); color: var(--text-muted); text-transform: uppercase; }
.svc-links a { overflow-wrap: anywhere; color: var(--accent-text); }
.svc-dl { margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.svc-dl dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.svc-dl dd { margin: 0.125rem 0 0; font-size: 0.9375rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.svc-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; list-style: none; padding: 0; }
.svc-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.svc-filter a { font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.4375rem 0.875rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.svc-filter a[aria-current="true"] { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }
.svc-search { margin-left: auto; max-width: 18rem; }
.svc-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.svc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-radius: 0.875rem; background: var(--accent-subtle); border: 1px solid var(--accent-border); font-size: 0.9375rem; color: var(--text); }
.svc-banner > span { flex: 1 1 18rem; }
.svc-welcome { display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .svc-welcome { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.svc-ws { display: flex; align-items: center; gap: 0.875rem; }
.svc-ws .svc-ava { width: 3rem; height: 3rem; font-size: 1.125rem; }
.svc-prep { display: flex; flex-direction: column; gap: 0.875rem; }
.svc-prep__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: 0.875rem; border: 1px solid var(--border); background: var(--surface); }
.svc-prep__item h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; display: flex; justify-content: space-between; gap: 0.5rem; }
.svc-prep__item h3 a { font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }

/* ---------------------------------------------------------------- team pages */
.svc-app--team .svc-shell { grid-template-columns: minmax(0, 1fr); }
.svc-teambar { --bg: #101A2F; color: #F8F7F2; background: #101A2F; position: sticky; top: 0; z-index: var(--z-sticky); }
.svc-teambar .s-logo { color: #F8F7F2; }
.svc-teambar .s-logo__mark { color: #F8F7F2; }
.svc-teambar__in { display: flex; align-items: center; gap: 1rem; height: 3.5rem; flex-wrap: nowrap; overflow-x: auto; }
.svc-teambar .s-logo__word, .svc-teambar .s-logo__by { color: #F8F7F2; }
.svc-teambar nav { display: flex; gap: 0.25rem; margin-left: 1rem; }
.svc-teambar nav a { text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #BAC4D8; white-space: nowrap; }
.svc-teambar nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.svc-teambar__end { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; font-size: 0.8125rem; color: #BAC4D8; white-space: nowrap; }
.svc-teambar__end .s-btn { color: #F8F7F2 !important; border-color: rgba(255, 255, 255, 0.3) !important; background: transparent !important; }
.svc-teamtag { font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--cut); color: #fff; padding: 0.125rem 0.4rem; border-radius: 0.375rem; margin-left: 0.25rem; }
.svc-counters { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.svc-counters a { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1rem; border-radius: 0.875rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; }
.svc-counters a[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.svc-counters b { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.1; color: var(--text-strong); }
.svc-counters span { font-size: 0.8125rem; color: var(--text-muted); }
.svc-counters .is-hot b { color: var(--cut-text); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc-funnel { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.svc-funnel ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.svc-funnel__vars { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc-funnel__vars a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-subtle); }
.svc-appfoot { padding: 1.5rem 0 5rem; font-size: 0.8125rem; color: var(--text-subtle); border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .svc *, .svc *::before, .svc *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print { .svc-header, .svc-sticky, .svc-side, .svc-tabs-bar { display: none !important; } }

/* ---------------------------------------------------------------- forms and flows (second pass) */
.svc-row3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.svc-newproj { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 70rem) { .svc-newproj { grid-template-columns: minmax(0, 1fr) 21rem; } }
.svc-newproj__main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.svc-newproj__side { min-width: 0; }
@media (min-width: 70rem) { .svc-newproj__side .svc-sumcard { position: sticky; top: 1rem; } }
.svc-num { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); font-size: 0.8125rem; font-weight: 700; margin-right: 0.625rem; font-family: var(--font-sans); }
.svc-want__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.svc-sumcard__big { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -0.03em; line-height: 1.15; margin: 0; color: var(--text-strong); }
.svc-kv { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.svc-kv > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); }
.svc-kv dd { margin: 0; color: var(--text-strong); text-align: right; font-weight: 500; }
.svc-kv--stack > div { flex-direction: column; gap: 0.125rem; }
.svc-kv--stack dd { text-align: left; }
.svc-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-subtle); counter-reset: p; }
.svc-progress li { counter-increment: p; display: inline-flex; align-items: center; gap: 0.5rem; }
.svc-progress li::before { content: counter(p); width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 0.75rem; }
.svc-progress li + li::after { content: ""; }
.svc-progress .is-done { color: var(--success); }
.svc-progress .is-done::before { content: "\2713"; background: var(--success-subtle); border-color: transparent; color: var(--success); }
.svc-progress .is-now { color: var(--text-strong); }
.svc-progress .is-now::before { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.svc-slots { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); max-height: 15rem; overflow-y: auto; padding: 0.125rem; }
.svc-slot { position: relative; }
.svc-slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.svc-slot > span { display: flex; flex-direction: column; gap: 0.0625rem; align-items: flex-start; padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-strong); background: var(--surface); font-size: 0.875rem; line-height: 1.25; }
.svc-slot b { font-weight: 600; color: var(--text-strong); font-size: 0.875rem; }
.svc-slot small { color: var(--text-muted); font-size: 0.8125rem; }
.svc-slot input:checked + span { background: var(--accent-subtle); border-color: var(--accent); }
.svc-slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-planpick { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.svc-planpick__opt { position: relative; display: block; }
.svc-planpick__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.svc-planpick__opt > span { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; border: 1px solid var(--border-strong); background: var(--surface); }
.svc-planpick__opt b { font-weight: 600; color: var(--text-strong); }
.svc-planpick__opt small { font-size: 0.8125rem; color: var(--text-muted); }
.svc-planpick__opt input:checked + span { border-color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 1px var(--accent) inset; }
.svc-planpick__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-next { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; line-height: 1.5; }
.svc-counters__plain { display: block; }
.svc-clock--sm .svc-clock__time { font-size: 1.125rem; }
.svc-clock--xs .svc-clock__time { font-size: 0.9375rem; }
.svc-clock--xs .svc-clock__row { gap: 0.5rem; }
.svc-clock--xs .svc-clock__foot, .svc-clock--xs .svc-clock__bar { display: none; }
.svc-label { font-size: 0.9375rem; font-weight: 600; color: var(--text-strong); }
.svc-ex__chips-h { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-subtle); text-transform: uppercase; margin: 0 0 0.5rem; }
.svc-ex .svc-stack { min-width: 0; }
.svc-authpage { background: var(--bg); }