/* DebitCardGenerator */
@font-face{font-family:Geist Mono;src:url(/fonts/GeistMono-Variable.woff2)format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Variable.woff2)format("woff2");font-style:normal;font-weight:300 900;font-display:swap}
:root{color-scheme:light;--site-muted:oklch(44.8% .0274 264.364);--brand-deep:#1d38b6;--site-header-background:#2547e0;--yellow:#f0b100;--yellow-bright:#fdc700;--yellow-ink:#775b00;--header-text:#fff;--shadow:#00000014 0 4px 16px;--container:72rem}
.dark{color-scheme:dark;--site-muted:oklch(74% 0 0);--brand-deep:#101727;--site-header-background:#000;--yellow-ink:#facc15;--shadow:#00000080 0 4px 16px}
*{box-sizing:border-box}
a,a:hover,a:focus{color:inherit;text-decoration:none}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:var(--background);min-width:20rem;min-height:100vh;color:var(--foreground);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;display:flex;flex-direction:column;font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.5}
.brand,.icon-button{color:inherit}
summary{-webkit-tap-highlight-color:transparent}
.skip-link{z-index:100;background:var(--card);color:var(--foreground);box-shadow:var(--shadow);border-radius:.4rem;padding:.7rem 1rem;font-weight:700;position:fixed;top:.75rem;left:.75rem;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.site-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.site-header{z-index:50;background:color-mix(in srgb, var(--site-header-background) 96%, transparent);color:var(--header-text);backdrop-filter:blur(14px);position:sticky;top:0}
.header-inner{align-items:center;gap:1.5rem;height:3.5rem;display:flex}
.brand{letter-spacing:-.025em;align-items:center;gap:.5rem;min-height:2.5rem;font-size:.9375rem;font-weight:600;display:inline-flex}
.brand-logo{height:2.5rem;width:auto;display:block;flex-shrink:1;min-width:0}
.brand-logo img{height:2.5rem;width:auto;display:block;max-width:100%}
.brand-logo .brand-logo-white{display:none}
.dark .brand-logo .brand-logo-ink{display:none}
.dark .brand-logo .brand-logo-white{display:block}
.primary-nav{align-items:center;gap:.1rem;display:flex}
.primary-nav>a{color:#ffffffe6;letter-spacing:.14em;text-transform:uppercase;align-items:center;min-height:2.5rem;padding:.35rem .75rem;font-family:Geist Mono,ui-monospace,monospace;font-size:.875rem;font-weight:700;transition:color .16s,background-color .16s;display:inline-flex}
.primary-nav>a:hover,.primary-nav>a[aria-current=page]{color:var(--yellow-bright)}
.header-actions{align-items:center;gap:.25rem;margin-left:auto;display:flex}
.icon-button{color:inherit;cursor:pointer;background:#ffffff1a;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;transition:background-color .16s;display:inline-flex}
.theme-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1.15rem;height:1.15rem}
.theme-icon-moon,.dark .theme-icon-sun{display:none}
.dark .theme-icon-moon{display:block}
.icon-button:hover{background:#fff3}
.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8px;width:1.15rem;height:1.15rem}
.mobile-menu{display:none}
.mobile-menu>summary{cursor:pointer;border-radius:.4rem;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;list-style:none;display:flex}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu>summary:hover{background:#ffffff1a}
.mobile-menu>summary svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8px;width:1.3rem;height:1.3rem}
.mobile-menu-icon-close,.mobile-menu[open] .mobile-menu-icon-open{display:none}
.mobile-menu[open] .mobile-menu-icon-close{display:block}
.mobile-menu-sheet{z-index:60;border-top:1px solid var(--border);background:var(--card);height:calc(100dvh - 3.5rem);color:var(--foreground);flex-direction:column;animation:.18s ease-out mobile-menu-in;display:flex;position:fixed;top:3.5rem;left:0;right:0}
@keyframes mobile-menu-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.mobile-menu-sheet{animation:none}}
html.mobile-menu-open{overflow:hidden}
.mobile-menu-sheet nav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:.5rem .75rem 1rem;overflow-y:auto}
.mobile-menu-section+.mobile-menu-section{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.5rem}
.mobile-menu-sheet nav a{border-radius:.65rem;align-items:center;gap:.75rem;min-height:3rem;padding:.5rem .75rem;font-weight:600;line-height:1.3;display:flex}
.mobile-menu-sheet nav a:hover,.mobile-menu-sheet nav a:focus-visible{background:color-mix(in srgb, var(--yellow) 9%, var(--card))}
.mobile-menu-sheet nav a[aria-current=page]{background:color-mix(in srgb, var(--yellow) 12%, var(--card));color:var(--foreground)}
.mobile-menu-text{flex-direction:column;gap:.1rem;min-width:0;display:flex}
.mobile-menu-text strong{font-size:.9375rem;font-weight:600}
.mobile-menu-text small{color:var(--site-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:400;overflow:hidden}
.button{border:1px solid #0000;border-radius:.375rem;justify-content:center;align-items:center;gap:.55rem;min-height:2.5rem;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.2;transition:transform .16s,background-color .16s,border-color .16s,box-shadow .16s;display:inline-flex}
.button:hover{transform:translateY(-1px)}
.button-yellow{background:var(--yellow-bright);color:#282100}
.button-yellow:hover{background:#f6d84e}
.button-secondary{background:color-mix(in srgb, var(--foreground) 7%, var(--background));color:var(--foreground)}
.button-secondary:hover{background:color-mix(in srgb, var(--foreground) 12%, var(--background))}
.article-section{color:var(--site-muted);gap:1.5rem;margin-top:4rem;font-size:1rem;line-height:2rem;display:grid}
.article-section h2{color:var(--foreground);letter-spacing:-.035em;margin:-.25rem 0 0;font-size:1.5rem;font-weight:700;line-height:1.18}
.article-section a{color:#0b57d0;font-weight:600;transition:color .15s}
.article-section a:hover{color:#0842a0}
.dark .site-header{background:#000000eb;border-bottom:1px solid #ffffff1a}
.dark .article-section a{color:#8ab4f8}
.dark .article-section a:hover{color:#aecbfa}
@media (width<=767px){.primary-nav{display:none}.mobile-menu{display:block}}
@media (width<=620px){.site-container{width:100%}.header-inner{gap:.4rem}.icon-button{display:none}.header-actions{gap:0}.article-section{margin-top:3.5rem}}
@media (width>=640px){.site-container{padding-inline:1.5rem}.article-section{font-size:1.125rem;line-height:2.25rem}}
@media (width>=1024px){.site-container{padding-inline:2rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media print{.site-header{display:none!important}body{color:#000;background:#fff}}
:root[data-brand=dcg]:has([data-public-site]){--brand-font-sans:"Satoshi", ui-sans-serif, system-ui, sans-serif;--public-paper:#fff;--public-cream:#f7f4f0;--public-cream-deep:#f0ece6;--public-ink:#1c1a17;--public-muted:#57534d;--public-border:#e9e3db;--public-accent-ink:#775b00;--public-field-ink:var(--public-ink);--public-field-muted:var(--public-muted);--title-underline-color:var(--public-ink);--background:var(--public-paper);--foreground:var(--public-ink);--card:var(--public-paper);--card-foreground:var(--public-ink);--popover:var(--public-paper);--popover-foreground:var(--public-ink);--secondary:var(--public-cream);--secondary-foreground:var(--public-ink);--muted:var(--public-cream);--muted-foreground:var(--public-muted);--accent:var(--public-cream-deep);--accent-foreground:var(--public-ink);--border:var(--public-border);--input:var(--public-border);--radius:.75rem;--site-muted:var(--public-muted);--brand-deep:var(--public-accent-ink);--yellow-ink:var(--public-accent-ink);--header-text:var(--public-ink);--site-header-background:var(--public-cream);--site-cta-background:var(--public-cream);--v-surface-raised:var(--public-paper);--v-surface-subtle:var(--public-cream);--v-shadow-card:0 1px 3px #1c1a170d;--v-shadow-elevated:0 3px 12px #1c1a1712;--v-shadow-panel:0 12px 32px #1c1a171a;--v-shadow-surface:0 1px 2px #1c1a170a;--shadow:var(--v-shadow-panel);&.dark{--public-paper:#080808;--public-cream:#101010;--public-cream-deep:#191919;--public-ink:#f7f4f0;--public-muted:#b3aca3;--public-border:#2b2b2b;--public-accent-ink:#fbd642;--v-shadow-card:0 1px 3px #0000001f;--v-shadow-elevated:0 3px 12px #00000029;--v-shadow-panel:0 12px 32px #0000003d;--v-shadow-surface:0 1px 2px #0000001f}& body{font-family:var(--brand-font-sans);line-height:1.55}& .public-field>[aria-hidden=true]{display:none}& .mobile-menu-sheet nav a:hover,& .mobile-menu-sheet nav a:focus-visible{background:var(--public-cream);color:var(--public-ink)}& .mobile-menu-sheet nav a[aria-current=page]{background:var(--public-cream-deep)}& .primary-nav>a{color:var(--public-muted);font-family:var(--brand-font-sans);letter-spacing:normal;text-transform:none;font-weight:500}& .primary-nav>a:hover,& .primary-nav [aria-current=page]{color:var(--public-ink)}& .hero-lede{color:var(--public-muted)}& .site-footer{border-top:0;padding-top:clamp(3.5rem,6vw,5rem)}}
.site-footer{border-top:1px solid var(--border);background:var(--background);padding-block:3.5rem 2rem}
.footer-grid{grid-template-columns:minmax(14rem,1.8fr) repeat(3,minmax(8.5rem,1fr));gap:3rem;display:grid}
.brand-on-light{color:var(--foreground)}
.footer-brand>p{max-width:20rem;color:var(--site-muted,var(--muted-foreground));margin:1.1rem 0 1.2rem;font-size:.92rem;line-height:1.65}
.footer-brand .brand{gap:.625rem;font-size:1.125rem}
.footer-grid nav{flex-direction:column;align-items:flex-start;display:flex}
.footer-grid nav a{min-height:2.5rem;color:var(--site-muted,var(--muted-foreground));align-items:center;margin-inline:-.625rem;padding-inline:.625rem;font-size:.9rem;line-height:1.45;transition:color .15s;display:inline-flex}
.footer-grid nav a:hover{color:var(--yellow-ink,var(--primary))}
.footer-meta{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:2rem;margin-top:3rem;padding-top:1.7rem;display:flex}
.footer-meta p{color:var(--site-muted,var(--muted-foreground));margin:0;font-size:.85rem}
@media (width<=767px){.footer-grid{grid-template-columns:2fr repeat(2,1fr)}.footer-grid nav:last-child{grid-column:2}.footer-meta{flex-direction:column;align-items:flex-start}}
@media (width<=620px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem}.footer-brand{grid-column:1/-1}.footer-grid nav:last-child{grid-column:auto}}
.site-footer .site-container{width:100%;max-width:var(--container,72rem);margin-inline:auto;padding-inline:1rem}
.site-footer .brand{letter-spacing:-.025em;align-items:center;min-height:2.5rem;font-weight:600;display:inline-flex}
.site-footer a{text-decoration:none}
@media print{.site-footer{display:none}}
/* DebitCardGenerator layout and overrides */
.page-main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.page-main a:not(.button) {
  color: #0b57d0;
}

.page-main a:not(.button):hover,
.page-main a:not(.button):focus {
  color: #0842a0;
}

.dark .page-main a:not(.button) {
  color: #8ab4f8;
}

.dark .page-main a:not(.button):hover,
.dark .page-main a:not(.button):focus {
  color: #aecbfa;
}

.page-hero {
  position: relative;
  background: var(--brand-field, var(--public-cream));
  padding-block: 2rem;
}

.dark .page-hero {
  background: #000;
  border-bottom: 1px solid var(--public-border, #222);
}

.hero-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(56rem 28rem at 50% 9rem, rgb(255 255 255 / 0.09), transparent 70%);
}

.dark .hero-glow {
  opacity: 0.7;
}

.hero-copy {
  position: relative;
  z-index: 10;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.hero-title {
  margin: 0;
  text-wrap: balance;
  font-weight: 600;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--public-field-ink, #fff);
  animation: hero-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-hero .hero-lede {
  margin: 1rem 0 0;
  width: 100%;
  max-width: none;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--public-field-muted, rgba(255, 255, 255, 0.85));
  animation: hero-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@media (min-width: 640px) {
  .page-hero .hero-lede {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

.hero-spacer {
  height: 10rem;
}

.tool-overlap {
  position: relative;
  z-index: 10;
  margin-top: -10rem;
}

.tool-card {
  overflow: hidden;
  border-radius: calc(var(--radius, 0.5rem) + 8px);
  background: var(--background, #fff);
  box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  box-shadow: 0 0 0 1px var(--border, #e5e5e5), 0 20px 25px -5px #0000001a;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .tool-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .tool-panel-in {
    border-right: 1px solid color-mix(in oklab, var(--border, #e5e5e5) 40%, transparent);
  }

  .empty-state {
    flex: 1;
  }
}

.tool-panel-in {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 1.5rem;
}

.tool-panel-out {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.panel-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground, #737373);
}

.tab-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-stack {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground, #737373);
}

.field-input {
  height: 2.75rem;
  width: 100%;
  border-radius: var(--radius, 0.5rem);
  border: 1px solid color-mix(in oklab, var(--border, #e5e5e5) 40%, transparent);
  background: var(--muted, #f5f5f5);
  padding-inline: 0.75rem;
  color: var(--foreground, #1c1a17);
  font: inherit;
}

select.field-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

select.field-input.field-input-badge {
  background-position: right 7.15rem center;
}

select.field-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

select.field-input option {
  background: var(--background, #fff);
  color: var(--foreground, #1c1a17);
}

.dark select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3aca3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.field-input-badge {
  padding-right: 7.5rem;
}

.brand-badge {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  right: 0.5rem;
  z-index: 2;
  display: none;
  align-items: center;
}

.brand-badge.is-on {
  display: flex !important;
}

.brand-pill {
  border-radius: var(--radius, 0.5rem);
  background: #16a34a;
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.action-row {
  display: flex;
  gap: 0.5rem;
}

.action-row .button {
  width: 100%;
}

.action-row.is-split [type="submit"],
.action-row.is-split [data-validator-reset] {
  flex: 1 1 0;
  width: 50%;
}

.btn-full {
  width: 100%;
}

.form-note {
  margin: 0;
  font-size: 0.875rem;
}

.disclaimer-open {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #0b57d0;
  cursor: pointer;
}

.disclaimer-open:hover,
.disclaimer-open:focus-visible {
  color: #0842a0;
}

.dark .disclaimer-open {
  color: #8ab4f8;
}

.dark .disclaimer-open:hover,
.dark .disclaimer-open:focus-visible {
  color: #aecbfa;
}

.disclaimer-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.disclaimer-dialog::backdrop {
  background: rgb(28 26 23 / 0.48);
}

.disclaimer-panel {
  background: var(--card, #fff);
  color: var(--foreground, #1c1a17);
  border: 1px solid var(--border, #e9e3db);
  border-radius: 1rem;
  box-shadow: var(--v-shadow-panel, 0 12px 32px #1c1a171a);
  padding: 1.5rem 1.4rem 1.25rem;
}

.disclaimer-heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.disclaimer-copy {
  display: grid;
  gap: 0.85rem;
  color: var(--public-muted, #57534d);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.disclaimer-copy p {
  margin: 0;
}

.disclaimer-copy strong {
  color: var(--foreground, #1c1a17);
  font-weight: 600;
}

.disclaimer-copy a {
  color: #0b57d0;
  font-weight: 600;
}

.disclaimer-copy a:hover,
.disclaimer-copy a:focus-visible {
  color: #0842a0;
}

.dark .disclaimer-copy a {
  color: #8ab4f8;
}

.dark .disclaimer-copy a:hover,
.dark .disclaimer-copy a:focus-visible {
  color: #aecbfa;
}

.disclaimer-panel .button {
  margin-top: 1.25rem;
}

.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.output-actions {
  display: flex;
  gap: 0.5rem;
}

.output-box {
  margin: 0;
  min-height: 22rem;
  max-height: 22rem;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: var(--radius, 0.5rem);
  background: var(--muted, #f5f5f5);
  padding: 1rem;
  font-family: Geist Mono, ui-monospace, SFMono-Regular, monospace;
  font-size: 0.875rem;
}

.empty-state {
  margin: 0;
  display: flex;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius, 0.5rem);
  background: var(--muted, #f5f5f5);
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground, #737373);
}

.result-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0.75rem;
  overflow: visible;
}

.result-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.result-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground, #737373);
}

.result-value {
  margin: 0;
  overflow-wrap: break-word;
  border-radius: var(--radius, 0.5rem);
  border: 1px solid color-mix(in oklab, var(--border, #e5e5e5) 40%, transparent);
  background: var(--muted, #f5f5f5);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.article-section {
  background: var(--public-paper, #fff);
}

.article-wrap {
  margin-inline: auto;
  width: 100%;
  max-width: 48rem;
  padding: 4rem 1rem;
  text-align: left;
}

.article-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  line-height: 1.625;
}

.article-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.article-heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.article-subheading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.article-block p {
  margin: 0;
}

.article-block ul,
.article-block ol {
  margin: 0;
  padding-left: 1.25rem;
}

.article-block li {
  margin: 0.2rem 0;
}

.page-intro {
  margin-bottom: 1.5rem;
  max-width: 42rem;
  text-align: left;
}

.page-intro p {
  margin: 0.75rem 0 0;
}

.legal-title {
  margin: 0;
  text-wrap: balance;
  font-weight: 600;
  font-size: clamp(2.25rem, 4.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.icon-svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.social-link {
  color: #fff;
  cursor: pointer;
  background: #1f1f1f;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 0.7rem;
  justify-content: center;
  align-items: center;
  width: 2.7rem;
  height: 2.7rem;
  transition: background-color .16s, border-color .16s, color .16s;
  display: inline-flex;
}

.social-link:hover,
.social-link:focus-visible {
  background: #fdc700;
  border-color: #fdc700;
  color: #1c1a17;
}

.social-link svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
  stroke: none;
}

.footer-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  font-family: Geist Mono, ui-monospace, monospace;
  font-size: 0.75rem;
}

.error-hero-wrap .hero-copy {
  max-width: 40rem;
  margin-inline: auto;
}

.error-card {
  max-width: 42rem;
  margin: 0 auto 3rem;
  padding: 2rem 1.5rem 2.25rem;
  text-align: center;
}

.error-code {
  margin: 0;
  font-family: Geist Mono, ui-monospace, monospace;
  font-size: clamp(4.5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.08em;
  color: #fdc700;
}

.error-lead {
  max-width: 32rem;
  margin: 1.1rem auto 0;
  color: var(--site-muted);
  font-size: 1rem;
  line-height: 1.65;
}

@media (min-width: 640px) {
  .error-card {
    padding: 2.5rem 2.25rem 2.5rem;
  }
}

footer.site-footer {
  background: #000;
  color: #fff;
  border-top: 0;
}

footer.site-footer .brand,
footer.site-footer .brand-on-light,
footer.site-footer .footer-brand > p,
footer.site-footer .footer-grid nav .footer-label,
footer.site-footer .footer-grid nav a,
footer.site-footer .footer-meta p {
  color: #fff;
}

footer.site-footer .footer-grid nav a:hover {
  color: #fdc700;
}

footer.site-footer .footer-meta {
  border-top-color: rgb(255 255 255 / 0.2);
}

html,
body {
  overflow-x: hidden;
}

@media (max-width: 759px) {
  .page-hero {
    padding-block: 1.25rem 0.25rem;
  }

  .hero-copy {
    margin-bottom: 0.75rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .page-hero .hero-lede {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .hero-spacer {
    height: 4.5rem;
  }

  .tool-overlap {
    margin-top: -4.5rem;
    padding-bottom: 1rem;
  }

  .tool-panel-in,
  .tool-panel-out {
    padding: 1rem;
  }

  .tool-panel-in {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--border, #e5e5e5) 40%, transparent);
  }

  .tab-row .button {
    flex: 1 1 0;
  }

  .field-row,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .field-input-badge {
    padding-right: 6rem;
  }

  .brand-pill {
    font-size: 0.625rem;
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .empty-state {
    min-height: 8rem;
  }

  .output-box {
    min-height: 10rem;
    max-height: 16rem;
  }

  .article-wrap {
    padding: 2.5rem 1rem 3rem;
  }

  .article-heading {
    font-size: 1.125rem;
  }
}

@media (max-width: 767px) {
  .header-actions .theme-toggle.icon-button {
    display: inline-flex;
  }

  .mobile-menu-sheet {
    background: var(--public-cream, #f7f4f0);
    padding: 1rem 1rem 1.25rem;
  }

  .mobile-menu-sheet nav {
    flex: 1;
  }

  .mobile-menu-section a {
    background: var(--background, #fff);
    border-radius: 0.75rem;
    margin-bottom: 0.4rem;
  }

  .menu-more {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }

  .menu-more a {
    min-height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
}

@media (max-width: 620px) {
  .article-section {
    margin-top: 0;
  }

  .brand-logo,
  .brand-logo img {
    height: 1.65rem;
  }

  .header-actions .theme-toggle.icon-button,
  .output-actions .icon-button,
  .social-link {
    display: inline-flex;
  }
}