@font-face {
  font-family: "PixSTD Inter";
  src: url("./fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

:root {
  color-scheme: light dark;
  --family-font: "PixSTD Inter", "Segoe UI", system-ui, sans-serif;
  --family-bg: light-dark(#f7f5f2, #191817);
  --family-panel: light-dark(#fffefd, #24221f);
  --family-subtle: light-dark(#eeebe5, #302d28);
  --family-line: light-dark(#e1dcd3, #3b3732);
  --family-ink: light-dark(#2d2a26, #f0ece5);
  --family-muted: light-dark(#6b655c, #bbb4a9);
  --family-accent: light-dark(#6552a2, #c2afea);
  --family-accent-soft: light-dark(#ece6f4, #352e40);
  --family-on-accent: light-dark(#fffefd, #261e34);
  --family-code: light-dark(#eeece8, #1d1d1c);
  --family-blue: light-dark(#385f99, #a4bee5);
  --family-green: light-dark(#41634a, #afc8a1);
  --family-danger: light-dark(#9b3c3c, #ecb0ac);
  --family-danger-soft: light-dark(#f7e8e5, #402a27);
  --family-radius: 24px;
  --family-width: 1160px;
  --family-shadow: 0 20px 60px light-dark(#483f3010, #00000026);
  --type-display: 56px;
  --type-title: 32px;
  --type-heading: 22px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-control: 14px;
  --type-caption: 12px;
  --type-code: 13px;
  --type-wordmark: 24px;
  --line-display: 1.13;
  --line-body: 1.65;
}

:root[data-appearance="light"] { color-scheme: light; }
:root[data-appearance="dark"] { color-scheme: dark; }
body[data-site="datautilities"] {
  --family-accent: light-dark(#385f99, #a4bee5);
  --family-accent-soft: light-dark(#e7edf6, #293442);
  --family-on-accent: light-dark(#fffefd, #1e2b3c);
}
body[data-site="id"] {
  --family-accent: light-dark(#356f65, #a4d2c6);
  --family-accent-soft: light-dark(#e3efeb, #293b37);
  --family-on-accent: light-dark(#fffefd, #1e302a);
}
body[data-site="tagflow"] {
  --family-accent: light-dark(#41634a, #afc8a1);
  --family-accent-soft: light-dark(#e6ecdf, #303b2b);
  --family-on-accent: light-dark(#fffefd, #23301e);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; scrollbar-gutter: stable; }
/* Same scrollbar width on every page, including the font-transfer tool. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--family-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: var(--family-muted); border: 2px solid var(--family-bg); border-radius: 999px; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--family-muted) var(--family-bg); }
}
body {
  margin: 0;
  background: var(--family-bg);
  color: var(--family-ink);
  font: 400 var(--type-body)/var(--line-body) var(--family-font);
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--family-ink); background: var(--family-accent-soft); }
a { color: var(--family-accent); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--family-accent); outline-offset: 4px; }
/* One inset focus indicator rather than an extra ring outside a pill. */
.family-button:focus-visible, .family-network a:focus-visible {
  outline-offset: -4px;
}
.family-button-primary:focus-visible { outline-color: var(--family-on-accent); }
img, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 550; text-wrap: balance; }
h1 { font-size: var(--type-display); line-height: var(--line-display); letter-spacing: -.045em; }
h2 { font-size: var(--type-title); line-height: 1.25; letter-spacing: -.035em; }
h3 { font-size: var(--type-heading); line-height: 1.35; letter-spacing: -.025em; }
h4 { font-size: var(--type-body); }
button, a, p, li { overflow-wrap: anywhere; }
.family-shell { width: min(var(--family-width), calc(100% - 64px)); margin-inline: auto; }
.family-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 24px;
  background: var(--family-panel);
}
.family-skip:focus { top: 12px; }
.family-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 98px;
}
.family-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: var(--family-ink);
  font-size: var(--type-wordmark);
  font-weight: 650;
  letter-spacing: -.06em;
  text-decoration: none;
}
.family-wordmark img { display: block; width: 32px; height: 32px; }
.family-network {
  display: grid;
  grid-template-columns: 86px 130px 98px;
  align-items: center;
  gap: 3px;
  width: 330px;
  height: 50px;
  padding: 4px;
  border: 1px solid var(--family-line);
  border-radius: 999px;
  background: var(--family-panel);
}
.family-network a {
  height: 40px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border-radius: 999px;
  color: var(--family-muted);
  text-decoration: none;
  font-size: var(--type-control);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.family-network a:hover { color: var(--family-ink); background: var(--family-subtle); }
.family-network a[aria-current="page"] { color: var(--family-ink); background: var(--family-subtle); }
.family-theme {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 130px;
  height: 44px;
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid var(--family-line);
  border-radius: 999px;
  background: transparent;
  color: var(--family-muted);
  font-size: var(--type-caption);
}
.family-theme:hover { background: var(--family-panel); color: var(--family-ink); }
.family-theme-symbol { font-size: 20px; line-height: 1; }
.family-local-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 4px 22px; justify-content: center; min-height: 44px; padding: 0 0 8px; }
.family-local-nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--type-control); color: var(--family-muted); text-decoration: none; }
.family-local-nav a:hover { color: var(--family-accent); }
.family-hero { padding: 62px 0 42px; text-align: center; }
.family-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--family-accent);
  margin-bottom: 20px;
  min-height: 28px;
  font-size: var(--type-control);
  font-weight: 500;
}
.family-eyebrow img { width: 28px; height: 28px; }
.family-hero h1 { max-width: 900px; min-height: calc(var(--type-display) * var(--line-display) * 2); margin-inline: auto; }
.family-lead { max-width: 650px; min-height: calc(var(--type-lead) * var(--line-body) * 3); margin: 24px auto 0; color: var(--family-muted); font-size: var(--type-lead); line-height: var(--line-body); }
.family-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.family-hero .family-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(500px, 100%); min-height: 46px; align-content: start; margin-inline: auto; }
.family-hero .family-actions > :only-child { grid-column: 1 / -1; justify-self: center; width: min(245px, 100%); }
.family-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--family-line);
  border-radius: 999px;
  background: var(--family-panel);
  color: var(--family-ink);
  font-size: var(--type-control);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.family-button:hover { background: var(--family-subtle); border-color: var(--family-muted); }
.family-button-primary { background: var(--family-accent); border-color: var(--family-accent); color: var(--family-on-accent); }
.family-button-primary:hover { background: color-mix(in srgb, var(--family-accent) 88%, var(--family-ink)); border-color: transparent; }
.family-section { padding: 38px 0; }
.family-section-head { display: grid; justify-items: start; gap: 12px; margin-bottom: 24px; }
.family-section-head > p { max-width: 680px; color: var(--family-muted); font-size: var(--type-control); }
.family-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.family-tags span { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px; background: var(--family-panel); color: var(--family-muted); font-size: var(--type-caption); }
.family-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 38px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--family-line);
  color: var(--family-muted);
  font-size: var(--type-control);
}
.family-footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.family-footer a { color: var(--family-muted); text-decoration: none; }
.family-footer a:hover { color: var(--family-accent); }
.family-mono { font-family: "Cascadia Code", Consolas, monospace; }
.family-code { max-width: 100%; padding: 22px 24px; border: 1px solid var(--family-line); border-radius: 20px; background: var(--family-code); text-align: left; overflow-x: auto; }
.family-code code { font: var(--type-code)/1.8 "Cascadia Code", Consolas, monospace; }

/* Studio projects retain their own tint within the common layout. */
.studio-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.studio-project {
  --project-accent: light-dark(#385f99, #a4bee5);
  --project-soft: light-dark(#dce6f4, #303f52);
  --project-line: light-dark(#c2cfe0, #45556a);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--family-radius);
  background: light-dark(#eef1f7, #232a33);
}
.studio-project[data-product="tagflow"] {
  --project-accent: light-dark(#41634a, #afc8a1);
  --project-soft: light-dark(#dce7d4, #3a4732);
  --project-line: light-dark(#c3d0bb, #4d5c43);
  background: light-dark(#edf1e9, #282e26);
}
.studio-project-head { display: flex; align-items: center; gap: 14px; }
.studio-project-head p { font-size: var(--type-caption); color: var(--family-muted); }
.studio-project-head h3 { font-size: var(--type-heading); }
.studio-project-mark { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 16px; background: var(--family-panel); color: var(--family-blue); font-size: 18px; font-weight: 600; letter-spacing: -.05em; }
.studio-project-mark img { display: block; width: 48px; height: 48px; }
.studio-project-mark.has-image { background: transparent; }
.studio-project > p { color: var(--family-muted); }
.studio-project-visual {
  position: relative;
  display: grid;
  align-content: center;
  gap: 16px;
  height: 252px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--project-line);
  border-radius: 20px;
  background: light-dark(#ffffff80, #1118204d);
}
.studio-project[data-product="tagflow"] .studio-project-visual { background: light-dark(#ffffff80, #141b104d); }
.studio-visual-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-visual-heading > span:first-child { color: var(--family-muted); font-size: var(--type-caption); }
.studio-visual-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--project-accent); font-size: var(--type-caption); font-weight: 500;
}
.studio-visual-badge svg { width: 14px; height: 14px; }
.studio-data-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 10px; }
.studio-data-source, .studio-data-vault {
  display: flex; flex-direction: column; justify-content: center; height: 164px;
  border: 1px solid var(--project-line); border-radius: 14px; padding: 16px;
  background: var(--family-panel);
}
.studio-data-source > span, .studio-data-vault > span { color: var(--family-muted); font-size: var(--type-caption); }
.studio-data-source code { display: block; color: var(--project-accent); margin-top: 10px; font: var(--type-code)/1.8 "Cascadia Code", Consolas, monospace; white-space: nowrap; }
.studio-flow-arrow { width: 20px; height: 20px; color: var(--project-accent); }
.studio-data-vault { align-items: center; gap: 10px; background: var(--project-soft); }
.studio-data-vault > span { max-width: 100%; text-align: center; text-wrap: balance; }
.studio-data-vault > svg { width: 40px; height: 40px; color: var(--project-accent); }
.studio-data-vault .studio-cipher { display: flex; gap: 4px; }
.studio-cipher i { width: 6px; height: 6px; border-radius: 2px; background: var(--project-accent); opacity: .55; }
.studio-cipher i:nth-child(3n) { opacity: .25; }
.studio-doc-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 10px; }
.studio-mini-document {
  position: relative; min-width: 0; height: 164px; padding: 16px;
  border: 1px solid var(--project-line); border-radius: 14px; background: var(--family-panel);
}
.studio-mini-document > span { display: block; color: var(--family-muted); font-size: var(--type-caption); }
.studio-doc-line { display: block; height: 4px; width: 84%; border-radius: 4px; background: var(--project-line); margin-top: 10px; }
.studio-doc-line.short { width: 52%; margin-top: 7px; }
.studio-doc-value {
  display: block; width: fit-content; max-width: 100%; padding: 2px 7px; margin-top: 12px;
  border-radius: 5px; background: var(--project-soft); color: var(--project-accent);
  font-size: var(--type-caption); line-height: 1.6; white-space: nowrap;
}
.studio-doc-value + .studio-doc-value { margin-top: 5px; }
.studio-mini-document.is-result { border-color: var(--project-accent); }
.studio-mini-document.is-result .studio-doc-value { padding-inline: 0; background: transparent; }
.studio-doc-check {
  position: absolute; top: -9px; right: -7px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--project-accent);
  color: light-dark(#fffefd, #23301e); border: 3px solid light-dark(#f4f7f0, #22291d);
}
.studio-doc-check svg { width: 12px; height: 12px; }
.studio-project .family-tags { min-height: 64px; align-content: start; }
.studio-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 2px; }
.studio-capabilities h4 { font-size: var(--type-body); font-weight: 500; }
.studio-capabilities p { margin-top: 4px; font-size: var(--type-control); color: var(--family-muted); }
.studio-project .family-actions { justify-content: start; margin-top: auto; }
.studio-project .family-button { padding-inline: 16px; }
.studio-about { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; padding: 32px; border-radius: var(--family-radius); background: var(--family-panel); }
.studio-about p { color: var(--family-muted); }
.studio-about p + p { margin-top: 12px; }
.studio-project code { font-size: var(--type-code); }

/* Payment return pages share the same typography and surfaces. */
.family-payment { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.family-payment main { width: min(540px, 100%); padding: 36px; background: var(--family-panel); border: 1px solid var(--family-line); border-radius: var(--family-radius); box-shadow: var(--family-shadow); }
.family-payment .family-eyebrow { justify-content: start; }
.family-payment h1 { font-size: var(--type-title); }
.family-payment p { margin-top: 18px; color: var(--family-muted); }
.family-payment .family-button { width: 100%; margin-top: 26px; }
.family-payment small { display: block; margin-top: 16px; color: var(--family-muted); font-size: var(--type-control); }
.family-payment .payment-home { display: block; width: fit-content; margin: 20px auto 0; font-size: var(--type-control); color: var(--family-muted); }
.payment-theme { position: absolute; top: 20px; right: 24px; }

/* Account, identity and legal pages use the same tokens as the public sites. */
.family-service-main { padding: 42px 0 28px; }
.family-service-card {
  width: min(600px, 100%);
  margin-inline: auto;
  padding: 36px;
  border: 1px solid var(--family-line);
  border-radius: var(--family-radius);
  background: var(--family-panel);
}
.family-service-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--family-muted); font-size: var(--type-control); }
.family-service-brand img { display: block; width: 48px; height: 48px; }
.family-service-card h1 { font-size: var(--type-title); line-height: 1.25; letter-spacing: -.035em; text-align: left; overflow-wrap: anywhere; }
.family-service-card .okbox, .family-service-card .account-identity { overflow-wrap: anywhere; }
.family-service-card > p, .family-service-card .lead { margin-top: 12px; color: var(--family-muted); }
.family-service-card .eyebrow { display: block; margin-bottom: 10px; color: var(--family-accent); font-size: var(--type-caption); font-weight: 500; }
.family-service-card form { margin: 0; }
.family-service-card label:not(.checkbox-row):not(.consent) { display: block; margin-top: 20px; font-size: var(--type-control); font-weight: 500; }
.family-service-card input:not([type="hidden"]):not([type="checkbox"]) {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 11px 14px;
  border: 1px solid var(--family-line); border-radius: 14px;
  background: var(--family-bg); color: var(--family-ink); font-size: var(--type-body);
}
.family-service-card input::placeholder { color: var(--family-muted); opacity: 1; }
.family-service-card input:focus-visible { outline-offset: 2px; }
.family-service-card button, .family-service-card .button, .family-service-card .link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; margin-top: 20px; padding: 10px 20px;
  border: 1px solid var(--family-accent); border-radius: 999px;
  background: var(--family-accent); color: var(--family-on-accent);
  font-size: var(--type-control); font-weight: 500; line-height: 1.5; text-decoration: none;
}
.family-service-card button:hover:not(:disabled), .family-service-card .button:hover { filter: brightness(.96); }
.family-service-card .secondary, .family-service-card .secondary-button, .family-service-card .link {
  background: transparent; color: var(--family-ink); border-color: var(--family-line); margin-top: 10px;
}
.family-service-card .link:hover, .family-service-card .secondary:hover, .family-service-card .secondary-button:hover { background: var(--family-subtle); filter: none; }
.family-service-card .danger, .family-service-card .danger-button {
  background: var(--family-danger-soft); border-color: var(--family-danger); color: var(--family-danger);
}
.family-service-card .danger-text { color: var(--family-danger); }
.family-service-card button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.family-service-card .error, .family-service-card .okbox, .family-service-card .account, .family-service-card .summary, .family-service-card .deletion-summary {
  margin-top: 22px; padding: 18px; border: 1px solid var(--family-line); border-radius: 16px;
  background: var(--family-bg); color: var(--family-muted);
}
.family-service-card .error { background: var(--family-danger-soft); color: var(--family-danger); border-color: var(--family-danger); }
.family-service-card .account { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.family-service-card .account > div { min-width: 0; }
.family-service-card .account strong { display: block; color: var(--family-ink); overflow-wrap: anywhere; }
.family-service-card .account form { flex-shrink: 0; }
.family-service-card .account-switch { width: auto; margin: 0; padding-inline: 14px; background: transparent; border-color: var(--family-line); color: var(--family-ink); }
.family-service-card .summary, .family-service-card .deletion-summary { padding-left: 38px; }
.family-service-card li + li { margin-top: 10px; }
.family-service-card .consent, .family-service-card .checkbox-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px;
  margin-top: 22px; font-size: var(--type-control); cursor: pointer;
}
.family-service-card input[type="checkbox"] { width: 21px; height: 21px; margin: 2px 0 0; accent-color: var(--family-accent); }
.family-service-card .privacy-link { display: block; margin-top: 22px; color: var(--family-muted); text-align: center; font-size: var(--type-control); }
.family-service-card .muted { color: var(--family-muted); }
.family-policy-main { padding: 42px 0 28px; }
.family-policy { width: min(860px, 100%); margin-inline: auto; }
.family-policy > header, .family-policy .policy > header, .family-policy .policy-intro { padding-bottom: 28px; border-bottom: 1px solid var(--family-line); }
.family-policy h1 { text-align: left; }
.family-policy .lead, .family-policy p { color: var(--family-muted); }
.family-policy .lead { margin-top: 18px; max-width: 680px; font-size: var(--type-lead); }
.family-policy .meta { display: block; margin-top: 18px; color: var(--family-muted); font-size: var(--type-control); }
.family-policy section { margin-top: 20px; padding: 28px; border: 1px solid var(--family-line); border-radius: var(--family-radius); background: var(--family-panel); }
.family-policy h2 { margin-bottom: 14px; }
.family-policy p + p, .family-policy p + ul, .family-policy ul + p { margin-top: 12px; }
.family-policy ul { margin: 0; padding-left: 22px; color: var(--family-muted); }
.family-policy li + li { margin-top: 8px; }
.family-policy .actions { margin-top: 26px; }
.family-policy .policy > .family-button { margin-top: 26px; }
@media (max-width: 760px) {
  :root { --type-display: 36px; --type-title: 28px; --type-heading: 20px; --type-lead: 16px; }
  .family-shell { width: calc(100% - 40px); }
  .family-header { grid-template-columns: 1fr auto; gap: 14px; padding-block: 20px; }
  .family-network { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; }
  .family-hero { padding: 36px 0 28px; }
  .studio-projects { grid-template-columns: 1fr; gap: 16px; }
  .studio-about { grid-template-columns: 1fr; gap: 20px; }
  .family-local-nav { gap: 0 16px; min-height: 80px; }
  .family-hero h1 { min-height: calc(var(--type-display) * var(--line-display) * 3); }
  .family-lead { min-height: calc(var(--type-lead) * var(--line-body) * 5); }
  .family-service-main, .family-policy-main { padding-top: 24px; }
}
@media (max-width: 420px) {
  .family-shell { width: calc(100% - 32px); }
  .family-network { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1fr); padding: 3px; gap: 1px; width: 100%; }
  .family-network a { padding-inline: 4px; font-size: var(--type-caption); height: 42px; }
  .family-hero h1 { min-height: calc(var(--type-display) * var(--line-display) * 4); }
  .family-hero .family-eyebrow { min-height: 48px; }
  .family-actions { gap: 8px; }
  .family-button { padding-inline: 16px; }
  .studio-project, .studio-about { padding: 24px; }
  .studio-project-visual { padding: 16px; height: 260px; gap: 12px; }
  .studio-data-flow, .studio-doc-flow { gap: 6px; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .studio-flow-arrow { width: 16px; height: 16px; }
  .studio-data-source, .studio-data-vault, .studio-mini-document { padding: 10px; }
  .studio-data-source code { font-size: var(--type-caption); }
  .studio-data-vault .studio-cipher { gap: 3px; }
  .studio-cipher i { width: 5px; height: 5px; }
  .studio-doc-value { padding-inline: 5px; }
  .studio-visual-heading { gap: 8px; min-height: 40px; }
  .studio-capabilities { grid-template-columns: 1fr; gap: 14px; }
  .family-section { padding-block: 28px; }
  .family-footer { align-items: start; flex-direction: column; }
  .family-payment { padding: 16px; }
  .family-payment main { padding: 26px; }
  .family-service-card { padding: 24px; }
  .family-service-card .account { align-items: stretch; flex-direction: column; }
  .family-service-card .account-switch { width: 100%; }
  .family-policy section { padding: 22px; }
}
@media (max-width: 540px) {
  .family-hero .family-actions { grid-template-columns: 1fr; grid-auto-rows: 46px; min-height: 102px; width: min(280px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}