:root {
  --suite-bg: #f6f7f5;
  --suite-surface: #ffffff;
  --suite-surface-soft: #f0f3f1;
  --suite-ink: #1f2926;
  --suite-muted: #60706a;
  --suite-border: #dce3df;
  --suite-border-strong: #c7d2cc;
  --suite-accent: #087f65;
  --suite-accent-strong: #05634f;
  --suite-accent-soft: #e6f4ef;
  --suite-success: #19734f;
  --suite-error: #a43d3d;
  --suite-warning: #8a6318;
  --suite-radius-sm: 10px;
  --suite-radius-md: 16px;
  --suite-radius-lg: 22px;
  --suite-shadow-sm: 0 1px 2px #17211d0d, 0 5px 18px #17211d0a;
  --suite-shadow-md: 0 2px 5px #17211d0d, 0 16px 38px #17211d12;
  --suite-ease: 160ms cubic-bezier(.2, .7, .2, 1);
}

[data-suite] {
  color: var(--suite-ink);
  background: var(--suite-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

[data-suite] :focus-visible {
  outline: 3px solid #23a98a66;
  outline-offset: 3px;
}

[data-suite] button,
[data-suite] a,
[data-suite] input,
[data-suite] select {
  transition: color var(--suite-ease), background-color var(--suite-ease), border-color var(--suite-ease), box-shadow var(--suite-ease), transform var(--suite-ease), opacity var(--suite-ease);
}

[data-suite] button:disabled,
[data-suite] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
  filter: saturate(.5);
}

[data-suite] [aria-busy="true"],
[data-suite] [data-state="loading"] {
  position: relative;
  cursor: progress;
}

[data-suite] button[aria-busy="true"]::after,
[data-suite] button[data-state="loading"]::after {
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -.1em;
  animation: suite-spin .7s linear infinite;
}

[data-suite] [data-state="success"],
[data-suite] .status-success {
  color: var(--suite-success);
  background-color: #eaf7f0;
}

[data-suite] [data-state="error"],
[data-suite] .status-error {
  color: var(--suite-error);
  background-color: #fff0f0;
}

@keyframes suite-spin { to { transform: rotate(360deg); } }

/* All Private Tools hub */
[data-suite="hub"] {
  background:
    radial-gradient(circle at 87% 4%, #e7f1ed 0, transparent 30rem),
    linear-gradient(180deg, #fbfcfa 0%, var(--suite-bg) 100%);
}

[data-suite="hub"] main {
  width: min(1120px, calc(100% - 40px));
  padding: 72px 0 58px;
}

[data-suite="hub"] .eyebrow {
  margin-bottom: 18px;
  color: var(--suite-accent);
  font-size: .74rem;
  letter-spacing: .15em;
}

[data-suite="hub"] h1 {
  max-width: 820px;
  color: var(--suite-ink);
  font-size: clamp(3.1rem, 7.7vw, 6.3rem);
  letter-spacing: -.068em;
  line-height: .92;
}

[data-suite="hub"] .intro {
  max-width: 650px;
  margin-top: 26px;
  color: var(--suite-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

[data-suite="hub"] .privacy-note {
  margin-top: 24px;
  border: 1px solid #b9dacd;
  background: var(--suite-accent-soft);
  color: var(--suite-accent-strong);
  box-shadow: 0 1px 2px #17211d0a;
}

[data-suite="hub"] .privacy-note::before { background: var(--suite-accent); }

[data-suite="hub"] .tools {
  gap: 20px;
  margin-top: 48px;
}

[data-suite="hub"] .tool-card {
  min-height: 290px;
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius-lg);
  background: #ffffffed;
  box-shadow: var(--suite-shadow-sm);
  isolation: isolate;
}

[data-suite="hub"] .tool-card::after {
  right: -48px;
  bottom: -54px;
  background: #dceee755;
}

[data-suite="hub"] .tool-card:hover,
[data-suite="hub"] .tool-card:focus-visible {
  border-color: #a6cfc0;
  box-shadow: var(--suite-shadow-md);
  transform: translateY(-3px);
}

[data-suite="hub"] .tool-card:active {
  box-shadow: var(--suite-shadow-sm);
  transform: translateY(0) scale(.995);
}

[data-suite="hub"] .icon {
  background: var(--suite-accent-soft);
  color: var(--suite-accent-strong);
}

[data-suite="hub"] .badge {
  border: 1px solid #cfe1da;
  background: #f1f6f4;
  color: #527068;
}

[data-suite="hub"] h2 {
  color: var(--suite-ink);
  font-size: 1.55rem;
}

[data-suite="hub"] .tool-card p { color: var(--suite-muted); }
[data-suite="hub"] .open { color: var(--suite-accent); }

[data-suite="hub"] .future {
  border: 1px dashed var(--suite-border-strong);
  background: #ffffff9c;
  color: var(--suite-muted);
}

[data-suite="hub"] .future strong { color: var(--suite-ink); }

[data-suite="hub"] .slot {
  border: 1px solid #d7e1dc;
  background: var(--suite-surface-soft);
  color: #5c6c66;
}

[data-suite="hub"] footer { color: var(--suite-muted); }

@media (max-width: 720px) {
  [data-suite="hub"] main {
    width: min(100% - 28px, 1120px);
    padding-top: 42px;
  }

  [data-suite="hub"] h1 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
  [data-suite="hub"] .tools { margin-top: 38px; }
  [data-suite="hub"] .tool-card { min-height: 260px; padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-suite] *,
  [data-suite] *::before,
  [data-suite] *::after {
    scroll-behavior: auto;
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}