.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    border-color     var(--dur-micro) var(--ease),
    color            var(--dur-micro) var(--ease),
    opacity          var(--dur-micro) var(--ease);
}

.btn--primary {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.btn--primary:hover  { background: var(--text-secondary); }
.btn--primary:active { background: var(--text-soft); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  
  border-color: var(--border-control);
}
.btn--secondary:hover  { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.btn--secondary:active { background: var(--accent-subtle); border-color: var(--accent-hover); color: var(--accent-hover); }

.btn--text {
  background: transparent;
  color: var(--text-primary);
}
.btn--text:hover  { background: var(--bg-hover); }
.btn--text:active { background: var(--bg-selected); }

.btn--inverse {
  background: var(--text-inverse);
  color: var(--text-primary);
}
.btn--inverse:hover { background: var(--surface-on-dark); color: var(--text-inverse); }

.btn--sm { padding: var(--sp-2) var(--sp-3); line-height: var(--lh-snug); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.4;
  color: var(--text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--sp-4); height: var(--sp-4);
  margin: calc(var(--sp-2) * -1) 0 0 calc(var(--sp-2) * -1);
  border: var(--border-width-thick) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  color: var(--text-inverse);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 64rem) {
  .btn { min-height: var(--tap-min); }
  
  .nav { --nav-h: 4rem; }
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: color var(--dur-micro) var(--ease);
}

.arrow-link__disc {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--sp-8);
  height: var(--sp-8);
  color: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--r-full);
  transition: background-color var(--dur-micro) var(--ease),
              color            var(--dur-micro) var(--ease),
              transform        var(--dur-micro) var(--ease-emph);
}
.arrow-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.arrow-link:hover .arrow-link__disc {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}
.arrow-link:active { color: var(--accent-hover); }
.arrow-link:hover .arrow-link__disc { transform: translateX(var(--sp-1)); }

.arrow-link--on-dark { color: var(--text-inverse); }
.arrow-link--on-dark .arrow-link__disc { color: currentColor; border-color: currentColor; }
.arrow-link--on-dark:hover { color: var(--text-inverse); }
.arrow-link--on-dark:hover .arrow-link__disc {
  background: var(--surface-on-dark);
  border-color: currentColor;
  color: currentColor;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--r-full);
  color: var(--text-primary);
  background: transparent;
  transition: background-color var(--dur-micro) var(--ease),
              border-color     var(--dur-micro) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); border-color: var(--text-soft); }
.icon-btn[disabled] { opacity: 0.35; pointer-events: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-hover);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.badge--on-dark { background: var(--surface-on-dark); color: var(--text-inverse); }
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--gutter);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
  transition: background-color var(--dur-micro) var(--ease);
}
.banner:hover { background: var(--bg-selected); }
@media (max-width: 47.9375rem) {
  .banner { font-size: var(--fs-eyebrow); }
}

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  
  background: var(--surface-nav);
  backdrop-filter: saturate(180%) blur(var(--blur-nav));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-nav));
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--nav-h);
}
.nav__brand { display: flex; align-items: center; flex: 0 0 auto; }
.nav__brand svg { height: var(--nav-brand-h); width: auto; }

.mark { height: var(--sp-6); width: auto; }

.nav__menu { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; }

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  opacity: 0.75;
  transition: opacity var(--dur-micro) var(--ease),
              background-color var(--dur-micro) var(--ease);
}
.nav__link:hover, .nav__toggle:hover,
.nav__link[aria-current="page"], .nav__toggle[aria-expanded="true"] { opacity: 1; }

.nav__chevron {
  transition: transform var(--dur-micro) var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.nav__dropdown { position: static; }
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-panel);
  background: var(--bg-surface);
  
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-panel),
              opacity    var(--dur-panel) var(--ease),
              max-height var(--dur-panel) var(--ease);
}
.nav__toggle[aria-expanded="true"] + .nav__panel {
  visibility: visible;
  opacity: 1;
  max-height: var(--nav-panel-max);
  transition-delay: 0s;
}

.nav__panel .container { max-width: var(--container-narrow); }

.nav__panel-grid {
  padding-block: var(--sp-12);
  display: grid;
  grid-template-columns: minmax(0, var(--nav-panel-col));
  gap: var(--sp-1);
}

.nav__panel-link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-base);
  transition: background-color var(--dur-micro) var(--ease);
}
.nav__panel-link:hover { background: var(--bg-hover); }
.nav__panel-title { display: block; font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--text-primary); }

.nav__panel-desc  { display: block; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-soft); }
.nav__ext { margin-left: var(--sp-1); font-size: var(--fs-eyebrow); color: var(--text-soft); }

.nav__soon {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--accent);
  vertical-align: 1px;
  white-space: nowrap;
}

.nav__burger { display: none; }
.nav__drawer { display: none; }

@media (max-width: 61.9375rem) {
  .nav__menu, .nav__actions { display: none; }
  .nav__burger {
    display: grid;
    place-items: center;
    width: var(--tap-min); height: var(--tap-min);
    margin-left: auto;
    border-radius: var(--r-full);
    color: var(--text-primary);
  }
  .nav__burger:hover { background: var(--bg-hover); }

  .nav__drawer {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: var(--z-drawer);
    padding: var(--sp-6) var(--gutter) var(--sp-12);
    background: var(--bg-page);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--sp-2) * -1));
    
    transition: opacity var(--dur-micro) var(--ease),
                transform var(--dur-micro) var(--ease-emph),
                visibility 0s linear var(--dur-micro);
  }
  .nav__drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  body[data-nav-open="true"] { overflow: hidden; }

  .nav__drawer { display: flex; flex-direction: column; padding-bottom: 0; }
  
  .nav__drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    
    padding: var(--sp-4);
    margin: calc(var(--sp-4) * -1);
  }

  .nav__drawer-group + .nav__drawer-group {
    border-top: var(--border-width) solid var(--border-default);
  }

  .nav__drawer-toggle,
  .nav__drawer-link {
    padding-inline: var(--sp-3);
    margin-inline: calc(var(--sp-3) * -1);
    border-radius: var(--r-md);
  }
  .nav__drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    
    width: calc(100% + var(--sp-3) * 2);
    min-height: var(--tap-min);
    padding-block: var(--sp-4);
    font-size: var(--fs-body-lg);
    color: var(--text-primary);
    text-align: left;
  }
  .nav__drawer-toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

  .nav__drawer-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-panel) var(--ease-emph);
  }
  .nav__drawer-panel[data-open="true"] { grid-template-rows: 1fr; }
  .nav__drawer-panel-inner {
    overflow: hidden;
    
    visibility: hidden;
    transition: visibility 0s linear var(--dur-panel);
  }
  .nav__drawer-panel[data-open="true"] .nav__drawer-panel-inner {
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__drawer-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: var(--fs-body-lg);
  }
  .nav__drawer-panel .nav__drawer-link { padding-left: var(--sp-4); }
  .nav__drawer-group--flat { padding-block: var(--sp-2); }

  .nav__drawer-actions {
    flex: 0 0 auto;
    padding: var(--sp-4) 0 calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    border-top: var(--border-width) solid var(--border-default);
    background: var(--bg-page);
  }
}

.hero { text-align: center; }
.hero__title { max-width: var(--measure); margin-inline: auto; }
.hero__sub {
  margin-top: var(--sp-4);
  max-width: 46ch;
  margin-inline: auto;
  color: var(--text-soft);
  font-size: var(--fs-body-lg);
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

@media (max-width: 47.9375rem) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__title { max-width: none; }
}

.media-band__inner {
  transform: scale(0.92);
  transform-origin: center top;
  will-change: transform;
}
@supports (animation-timeline: view()) {
  .media-band__inner {
    animation: media-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}
@keyframes media-grow {
  from { transform: scale(0.92); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .media-band__inner { animation: none; transform: scale(0.92); }
}

.media {
  position: relative;
  z-index: var(--z-base);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-hover);
  aspect-ratio: var(--media-ratio);
  
  border: var(--border-width) solid var(--border-default);
}
.media > img, .media > video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.card {
  position: relative;
  box-shadow: var(--sh-0);
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--r-xl);
  
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  transition: border-color var(--dur-micro) var(--ease),
              transform    var(--dur-micro) var(--ease);
  color: var(--text-secondary);
  
  transition: transform var(--dur-micro) var(--ease-emph);
}
a.card:hover { transform: translateY(calc(var(--sp-1) * -1)); }
.card__title { margin-bottom: var(--sp-2); }
.card__body  { color: inherit; opacity: 0.8; font-size: var(--fs-sm); }

.rule { height: var(--border-width); background: var(--border-default); }

.band-seam { padding-block: 0; }
.band-seam__rule {
  display: block;
  height: var(--border-width);
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--ink-25) 26%, transparent) 15%,
    color-mix(in srgb, var(--ink-25) 26%, transparent) 85%,
    transparent);
}

a.card:hover { border-color: var(--accent); transform: translateY(-1px); }

.card { }
.card__foot { margin-top: auto; }

.card__foot  { margin-top: var(--sp-6); }

@media (max-width: 47.9375rem) { .card { padding: var(--card-pad-mobile); } }
.tint--silver-lightest { background: var(--tint-silver-lightest); color: var(--tint-silver-lightest-ink); }
.tint--blue-light      { background: var(--tint-blue-light);      color: var(--tint-blue-light-ink); }
.tint--ink             { background: var(--tint-ink);             color: var(--tint-ink-ink); }
.tint--raised          { background: var(--bg-surface);       color: var(--text-primary); }

.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-8) * 2) / 3);
  gap: var(--sp-8);
  
  padding: var(--sp-2);
  margin: calc(var(--sp-2) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__arrows {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
@media (max-width: 63.9375rem) {
  .carousel__track { grid-auto-columns: calc((100% - var(--sp-8)) / 2); }
}
@media (max-width: 47.9375rem) {
  .carousel__track { grid-auto-columns: 85%; }
  .carousel__arrows { justify-content: center; }
}

.accordion {
  border-top: var(--border-width) solid var(--border-default);
  max-width: var(--container-narrow);
  
  margin-inline: auto;
}
.accordion__item { border-bottom: var(--border-width) solid var(--border-default); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-6) 0;
  text-align: left;
  
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  transition: color var(--dur-micro) var(--ease);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__icon { flex: 0 0 auto; transition: transform var(--dur-micro) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-panel) var(--ease-emph);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel-inner { overflow: hidden; }
.accordion__panel-inner > div {
  padding-bottom: var(--sp-6);
  max-width: 62ch;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--card-pad);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
}
.plan--featured { background: var(--bg-inverse); color: var(--text-inverse); border-color: transparent; }
.plan__name  { font-size: var(--fs-h3); }

.plan__price {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  overflow-wrap: normal;
}
.plan__note  { font-size: var(--fs-eyebrow); color: var(--text-soft); }
.plan--featured .plan__note { color: var(--text-inverse); opacity: 0.7; }
.plan__list { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.plan__list li { display: flex; gap: var(--sp-3); align-items: flex-start; }

.plan__list li > svg { flex: 0 0 auto; color: var(--accent); }
.plan--featured .plan__list li > svg { color: var(--text-inverse); }
@media (max-width: 47.9375rem) { .plan { padding: var(--card-pad-mobile); } }

.range {
  width: 100%;
  min-height: var(--tap-min);
  accent-color: var(--accent);
  background: transparent;
  cursor: pointer;
}
.range:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--border-width-thick); }

.plan-row {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 184fr) minmax(0, 235fr) minmax(0, 184fr);
}
@media (max-width: 47.9375rem) {
  .plan-row { grid-template-columns: minmax(0, 1fr); }
}

.table-wrap { overflow-x: auto; }
.table { font-size: var(--fs-sm); }
.table th, .table td {
  padding: var(--sp-4) var(--sp-4);
  text-align: left;
  border-bottom: var(--border-width) solid var(--border-default);
  vertical-align: top;
}
.table th {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.table thead th { border-bottom-color: var(--border-strong); }
.table td { color: var(--text-soft); }
.table tbody tr:hover td { background: var(--bg-hover); }

.table--figures td, .table--figures th { white-space: nowrap; }

main p > a:not([class]):hover,
main li > a:not([class]):hover,
.prose a:not([class]):hover {
  text-decoration-color: var(--accent);
}

.contact-list { margin-top: var(--sp-8); }
.contact-list__row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-bottom: var(--border-width) solid var(--border-default);
}
.contact-list__term  { font-size: var(--fs-sm); color: var(--text-soft); }
.contact-list__value { font-size: var(--fs-body-lg); color: var(--text-primary); }
.contact-list__value a { color: var(--accent); }
.contact-list__value a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

@media (max-width: 47.9375rem) {
  .contact-list__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

@keyframes marquee { to { transform: translateX(calc(-100% - var(--sp-8))); } }

body[data-modal-open] { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: var(--surface-scrim-strong); }
.modal__dialog {
  position: relative;
  width: min(38rem, calc(100vw - var(--sp-8)));
  max-height: calc(100dvh - var(--sp-16));
  overflow-y: auto;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-2);
}
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

@media (max-width: 47.9375rem) {
  .modal__dialog { border-radius: var(--r-lg); padding: var(--sp-6); }
}

.prose { max-width: var(--measure); color: var(--text-soft); }
.prose h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
}
.prose h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.prose p + p, .prose ul, .prose ol { margin-top: var(--sp-4); }
.prose ul { list-style: disc; padding-left: var(--sp-6); }
.prose ol { list-style: decimal; padding-left: var(--sp-6); }
.prose li + li { margin-top: var(--sp-2); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-thickness: var(--border-width-thick); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); color: var(--text-secondary); }
.field__hint  { font-size: var(--fs-eyebrow); color: var(--text-soft); }

.input, .textarea, .select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: border-color var(--dur-micro) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-soft); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-soft); }
.input[disabled], .textarea[disabled] { opacity: 0.5; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--status-error-fg); }

.footer-outer { position: relative; }

.footer-cta {
  text-align: center;
  padding-block: var(--section-y-tablet) var(--section-y-tablet);
  background: var(--bg-inverse);
  color: var(--text-on-dark);
}
.footer-cta .t-h2-lg { color: var(--text-on-dark); }
.footer-cta .btn--primary {
  background: var(--text-inverse);
  color: var(--text-primary);
}
.footer-cta .btn--primary:hover  { background: var(--accent); color: var(--text-inverse); }
.footer-cta .btn--primary:active { background: var(--accent-hover); color: var(--text-inverse); }
.footer-cta :focus-visible { outline-color: var(--text-inverse); }

.footer-cta__note {
  max-width: var(--measure);
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  
  color: var(--text-on-dark-muted);
}
.footer-cta__action { margin-top: var(--sp-8); }

.footer { padding-block: var(--sp-12) var(--sp-8); }
.footer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}
.footer__brand-col { display: flex; align-items: flex-start; }
.footer__col-title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.footer__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__link {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: color var(--dur-micro) var(--ease);
}
.footer__link:hover { color: var(--text-primary); }
/* Henuz yayinda olmayan footer ogeleri: link degil, etiketli metin. */
.footer__link--soon { color: var(--text-soft); cursor: default; }
.footer__link--soon:hover { color: var(--text-soft); }
.footer__social .footer__link--soon { opacity: .55; }
.footer__social { display: flex; align-items: center; gap: var(--sp-4); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: var(--border-width) solid var(--border-default);
  font-size: var(--fs-eyebrow);
  color: var(--text-soft);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

@media (max-width: 63.9375rem) {
  .footer__layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 47.9375rem) {
  .footer__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 64rem) {
  .icon-btn        { width: var(--tap-min); height: var(--tap-min); }
  .arrow-link      { min-height: var(--tap-min); }
  .arrow-link__disc{ width: var(--tap-min); height: var(--tap-min); }
  .banner          { min-height: var(--tap-min); }
  .nav__brand      { min-height: var(--tap-min); }
  .nav__link,
  .nav__toggle     { min-height: var(--tap-min); }
  .nav__panel-link { min-height: var(--tap-min); }
  .footer__link,
  .footer__legal-links a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--tap-min);
    min-width: var(--sp-6);
  }
  
  .footer__social a { min-width: var(--tap-min); justify-content: center; }
  .footer__links   { gap: 0; }
}

.eyebrow {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: var(--sp-3);
}

.section-head { max-width: 26em; }

.section-head.max-none { max-width: none; }
.section-head--center { max-width: 22em; margin-inline: auto; text-align: center; }

.section-head__sub { display: block; color: var(--text-soft); }
.is-on-dark .section-head__sub,
.tint--ink .section-head__sub { color: var(--text-on-dark-muted); }

.tint--blue-light,
.tint--silver-lightest,
.tint--raised {
  color: var(--text-primary);
}

.tint--blue-light .arrow-link--on-dark,
.tint--silver-lightest .arrow-link--on-dark,
.tint--raised .arrow-link--on-dark {
  color: var(--text-primary);
}

.tint--blue-light .badge--on-dark,
.tint--silver-lightest .badge--on-dark,
.tint--raised .badge--on-dark {
  background: var(--bg-selected);
  color: var(--text-secondary);
}

@media (max-width: 24.5rem) {
  .btn { white-space: normal; text-align: center; }
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  padding: var(--sp-2);
  margin: calc(var(--sp-2) * -1);
}
.bento .tile--wide { grid-column: span 2; }

.bento:has(.tile--wide) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bento:has(.tile--wide) > .tile { grid-column: span 3; }
.bento:has(.tile--wide) > .tile--wide { grid-column: span 4; }

.bento--quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.bento--quad > .tile { grid-column: span 1; }

.bento--quad .tile:has(.tile__art) { min-height: 0; }

.bento--quad .tile__art > :is(img, svg, .slot, .mk) { max-height: 10rem; }

.bento--quad .tile__art > img { object-fit: contain; }

.bento--quad .tile__art {
  margin-bottom: auto;
  
  padding-block: var(--sp-8) var(--sp-2);
}

.tile {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--r-xl);
  background: var(--tile-paper);
  color: var(--text-primary);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease),
              transform    var(--dur-micro) var(--ease-emph);
}
.tile--mist   { background: var(--tile-mist); }
.tile--slate  { background: var(--tile-slate); }
.tile--ink    { background: var(--bg-inverse); color: var(--text-on-dark); }
.tile--accent { background: var(--tile-accent); color: var(--text-on-dark); }

a.tile:hover { border-color: var(--accent); transform: translateY(-1px); }

a.tile--ink:hover,
a.tile--accent:hover { border-color: var(--text-on-dark); }

.tile__title { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
.tile__body  { font-size: var(--fs-sm); margin-top: var(--sp-2); color: var(--text-soft); }
.tile--ink .tile__body { color: var(--text-on-dark-muted); }

.tile--accent .tile__body { color: var(--text-on-dark); }

.tile__disc {
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  margin-top: var(--sp-4);
  color: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--r-full);
}
.tile--ink .tile__disc,
.tile--accent .tile__disc { color: currentColor; border-color: currentColor; }

.tile__art {
  margin-top: auto;
  margin-inline: calc(var(--sp-6) * -1);
  margin-bottom: calc(var(--sp-6) * -1);
  padding: var(--sp-8) var(--sp-6) 0;
}

.tile__art > :is(img, svg, .slot, .mk) { margin-inline: auto; }

.bento .tile:has(.tile__art)::after { content: ""; display: block; margin-top: auto; }

.bento .tile:has(.tile__art) { min-height: 19rem; }
.bento .tile--wide:has(.tile__art) { min-height: 22rem; }

.bento--row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento--row4 > .tile { grid-column: span 1; }

.mk {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-surface);
  
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--r-md);
  
  min-height: var(--sp-32);
  
  max-width: 26rem;
}

.mk--on-dark { background: transparent; border-color: var(--surface-on-dark); }

.mk__bar { height: var(--sp-2); border-radius: var(--r-full); background: var(--bg-selected); }
.mk__bar--mid    { width: 62%; }
.mk__bar--fill   { flex: 1 1 auto; }
.mk--on-dark .mk__bar { background: var(--surface-on-dark); }

.mk__row { display: flex; align-items: center; gap: var(--sp-2); }
.mk__dot { width: var(--sp-3); height: var(--sp-3); flex: 0 0 auto;
           border-radius: var(--r-full); background: var(--bg-selected); }
.mk--on-dark .mk__dot { background: var(--surface-on-dark); }

.mk__ring {
  display: grid;
  place-items: center;
  width: var(--sp-24);
  height: var(--sp-24);
  border: var(--border-width) solid currentColor;
  border-radius: var(--r-full);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
}

@media (max-width: 63.9375rem) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento > .tile { grid-column: span 2; }
  .bento > .tile--wide { grid-column: span 4; }
  
  .bento:has(.tile--wide) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento:has(.tile--wide) > .tile { grid-column: span 2; }
  .bento:has(.tile--wide) > .tile--wide { grid-column: span 4; }
  .bento:not(:has(.tile--wide)) > .tile:last-child:nth-child(odd) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 47.9375rem) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento:has(.tile--wide) { grid-template-columns: minmax(0, 1fr); }
  .bento > .tile,
  .bento .tile--wide,
  .bento > .tile--wide,
  .bento:has(.tile--wide) > .tile,
  .bento:has(.tile--wide) > .tile--wide,
  .bento:not(:has(.tile--wide)) > .tile:last-child:nth-child(odd) {
    grid-column: span 1;
  }
}

.scope-box {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: var(--border-width) solid var(--surface-on-dark);
  border-radius: var(--r-xl);
  background: var(--surface-on-dark);
}

.scope-box__foot { margin-top: auto; padding-top: var(--sp-4); }

.scope-box--art { display: flex; flex-direction: column; }

.scope-box__art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: var(--sp-8);
}

.slot {
  display: block;
  width: 100%;
  aspect-ratio: var(--media-ratio);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-hover);
}

.is-on-dark .slot,
.mk--on-dark .slot,
.tile--ink .slot,
.tile--accent .slot { border-color: var(--surface-on-dark); background: var(--surface-on-dark); }

:is(h1, h2, .section-head) + :is(.plan, article.card) { margin-top: var(--sp-8); }
:is(h1, h2, .section-head) + :is(.bento, .grid, .carousel, .stack-band, .accordion, .plan-row) {
  
  margin-top: var(--sp-8);
}

.banner { white-space: nowrap; overflow: hidden; }

.banner__dupe { display: none; }

.banner:hover { background: var(--bg-sunken); }

@media (max-width: 61.9375rem) {
  .banner { justify-content: flex-start; }
  .banner__dupe { display: inline; }
  .banner > span { animation: banner-run 22s linear infinite; padding-right: var(--sp-16); }
}
@keyframes banner-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .banner > span { animation: none; }
  .banner { justify-content: center; overflow-x: auto; }
  .banner__dupe { display: none; }
}

.tabs__panels { display: grid; }
.tabs__panels > [role="tabpanel"] { grid-area: 1 / 1; }
.tabs__panels > [role="tabpanel"][hidden] { display: block; visibility: hidden; }

.conn-list { border-top: var(--border-width) solid var(--border-default); }
.conn-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: var(--border-width) solid var(--border-default);
}
.conn-list__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--sp-12);
  height: var(--sp-12);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.conn-list__text { min-width: 0; }
.conn-list__name { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.conn-list__desc { display: block; font-size: var(--fs-sm); color: var(--text-soft); }
.conn-list__badge { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 47.9375rem) {
  .conn-list__row { gap: var(--sp-4); flex-wrap: wrap; }
  .conn-list__badge { margin-left: calc(var(--sp-12) + var(--sp-4)); }
}

.input-search { position: relative; display: block; }
.input-search > .input { padding-left: calc(var(--sp-4) * 2 + var(--sp-4)); }
.input-search__mark {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  translate: 0 -50%;
  display: block;
  color: var(--text-soft);
  pointer-events: none;
}

.note-prose {
  max-width: 48em;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text-soft);
}

.note-prose p:not(.row):not(.max-none) { max-width: none; font-size: inherit; }
.note-prose > * + * { margin-top: var(--sp-4); }
.note-prose > * + .note-prose__head { margin-top: var(--sp-12); }
.note-prose__head { max-width: 26em; color: var(--text-primary); }
.note-prose__head + p { margin-top: var(--sp-4); }
.note-prose__lead { color: var(--text-primary); }

.band-wide { max-width: none; }
main .band-wide p:not(.row):not(.max-none),
main .band-wide dd:not(.row) { max-width: none; }

.hero--wide .hero__sub { max-width: 68ch; }
.hero--wide .hero__title { max-width: none; }