:root {
  /* Colors */
  --primary: #3c486b;
  --primary-light: #4e5d8a;
  --primary-dark: #2a334d;
  --accent: #f45050;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;

  /* Layout */
  --page-max-width: 55rem;
  --page-wide-max-width: 80rem;
  --page-gutter: 2.5rem;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-main);
}

.page-shell {
  min-height: calc(100vh - 12rem);
  padding-block: 1.5rem 3rem;
}

.page-container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin-inline: auto;
}

.page-container--wide {
  max-width: var(--page-wide-max-width);
}

/* Tool pages use a three-column desktop layout: the main workspace stays
   centered and capped at the shared max-width, while the outer columns are
   reserved (and left empty for now) for navigation, announcements, featured
   tools or ads. Below desktop width the layout collapses to a single column. */
.page--split .page-shell,
.page--combine .page-shell,
.page--compare .page-shell,
.page--clean-url .page-shell,
.page--dedup .page-shell {
  display: block; /* default mobile/tablet single column */
}

@media (min-width: 72rem) {
  .page--split .page-shell,
  .page--combine .page-shell,
  .page--compare .page-shell,
  .page--clean-url .page-shell,
  .page--dedup .page-shell {
    display: grid;
    grid-template-columns:
      minmax(10rem, 1fr)
      minmax(0, var(--page-max-width))
      minmax(10rem, 1fr);
    gap: var(--page-gutter);
    align-items: start;
  }

  /* Centre the workspace and hang the empty side rails off the edges. */
  .page--split .page-shell > *:first-child,
  .page--combine .page-shell > *:first-child,
  .page--compare .page-shell > *:first-child,
  .page--clean-url .page-shell > *:first-child,
  .page--dedup .page-shell > *:first-child {
    grid-column: 2;
    width: 100%;
  }

  .page--split .page-shell::before,
  .page--combine .page-shell::before,
  .page--compare .page-shell::before,
  .page--clean-url .page-shell::before,
  .page--dedup .page-shell::before {
    grid-column: 1;
    content: '';
    display: block;
    min-height: 1px;
  }

  .page--split .page-shell::after,
  .page--combine .page-shell::after,
  .page--compare .page-shell::after,
  .page--clean-url .page-shell::after,
  .page--dedup .page-shell::after {
    grid-column: 3;
    content: '';
    display: block;
    min-height: 1px;
  }
}
.site-footer {
  width: 100%;
  padding: 3rem var(--page-gutter);
  color: #fff;
  background-color: var(--primary-dark);
  text-align: center;
}

.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.site-footer a:hover {
  border-color: currentColor;
}