/* Design system aligned with serviceplan-agents.com / usecases.serviceplan-agents.com
   / trust.serviceplan-agents.com: LIGHT-dominant layout (light gray page,
   black Avenir type, white cards with soft shadows) with a DARK rounded
   block as the hero — square grid lines on dark, red/green radial glows,
   coral-red rectangular CTAs (no pills on primary actions), uppercase
   letter-spaced kickers. See src/static/trust/style.css for the sibling
   page this shares its token system with. */

@font-face {
  font-family: "Avenir";
  src: url("/changelog/fonts/AvenirLTProRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/changelog/fonts/AvenirLTProMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/changelog/fonts/AvenirLTProHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/changelog/fonts/AvenirLTProLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ff4b4f;
  --red-dark: #e03a36;
  --green: #8fc49f;
  --page: #f2f2f0;
  --ink: #111111;
  --text-2: #565656;
  --text-3: #8a8a8a;
  --card: #ffffff;
  --line: #e4e4e2;
  --dark: #141414;
  --dark-line: rgba(255, 255, 255, 0.07);
  --on-dark-2: #b9bbbe;
  --r-block: 28px;
  --r-card: 16px;
  --r-btn: 8px;
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 14px 34px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Avenir", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  background: var(--page);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--red);
  color: #fff;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- utility topbar (shared across public zone) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 44px 0;
  max-width: 1220px;
  margin-top: 0;
  /* Floor at 16px so the topbar never sits flush against the viewport edge
     between the desktop max-width and the mobile breakpoint (the box-touches-
     edge bug) — above ~1252px this reduces to the same auto-center value the
     old `margin: 0 auto` gave. */
  margin-left: max(16px, calc((100vw - 1220px) / 2));
  margin-right: max(16px, calc((100vw - 1220px) / 2));
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  height: 20px;
  width: auto;
  display: block;
}

.utility-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 500;
}

.utility-nav a {
  text-decoration: none;
  color: var(--text-2);
  opacity: 0.85;
}

.utility-nav a:hover,
.utility-nav a.current {
  color: var(--ink);
  opacity: 1;
}

.utility-nav .cta {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 10px 23px;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.utility-nav .cta:hover {
  background: var(--red-dark);
  color: #fff;
}

.cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sokosumi CTA — same radial purple/magenta gradient as the Console's
   reusable .sokosumi-surface treatment (webui/console/src/app/globals.css),
   scaled down for a small nav button. Reserved for Sokosumi-directed CTAs
   only — never reuse this gradient for anything else. */
.utility-nav .cta-sokosumi {
  position: relative;
  overflow: hidden;
  opacity: 1;
  color: #fff;
  background:
    radial-gradient(120% 120% at 85% 100%, rgba(217, 70, 160, 0.8) 0%, transparent 60%),
    radial-gradient(120% 100% at 70% 15%, rgba(124, 58, 237, 0.75) 0%, transparent 65%),
    linear-gradient(140deg, #16204d 0%, #2a1a5c 60%, #4c2080 100%);
}

.utility-nav .cta-sokosumi:hover {
  color: #fff;
  filter: brightness(1.12);
  background:
    radial-gradient(120% 120% at 85% 100%, rgba(217, 70, 160, 0.8) 0%, transparent 60%),
    radial-gradient(120% 100% at 70% 15%, rgba(124, 58, 237, 0.75) 0%, transparent 65%),
    linear-gradient(140deg, #16204d 0%, #2a1a5c 60%, #4c2080 100%);
}

/* Avenir's line-box isn't visually centered on its own baseline at
   line-height:1 (ascent/descent asymmetry) — nudge just the glyph down via
   transform (no layout impact) rather than padding, so the button's own box
   height/position stays exactly aligned with the plain nav links next to it. */
.cta-label,
.cta-arrow {
  display: inline-block;
  transform: translateY(1.5px);
}

.cta-arrow {
  margin-left: 6px;
}

/* ---------- mobile nav toggle (checkbox hack, no JS — same pattern as the
   Trust Center's tab mechanism) ---------- */

.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  background: var(--ink);
}

/* ---------- hero (dark block, site signature) ---------- */

.dark-block {
  position: relative;
  background:
    linear-gradient(var(--dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-line) 1px, transparent 1px),
    radial-gradient(560px 420px at 78% 20%, rgba(255, 75, 79, 0.32), transparent 70%),
    radial-gradient(480px 380px at 12% 85%, rgba(143, 196, 159, 0.16), transparent 70%),
    var(--dark);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
  border-radius: var(--r-block);
  color: #fff;
  overflow: hidden;
}

.dark-block .kicker {
  color: rgba(255, 255, 255, 0.55);
}

.hero {
  margin-top: 14px;
  /* Same floor-margin formula as .topbar so the hero box's outer edge and
     the topbar's content stay aligned at every viewport width, and the dark
     box never sits flush against the viewport edge. */
  margin-left: max(16px, calc((100vw - 1220px) / 2));
  margin-right: max(16px, calc((100vw - 1220px) / 2));
  max-width: 1220px;
  padding: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 24px;
  padding: 0 44px;
}

.hero-copy {
  padding: 44px 0 40px;
}

.hero h1 {
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 14px;
}

.hero p {
  margin-top: 16px;
  font-size: 16.5px;
  color: var(--on-dark-2);
  max-width: 620px;
}

.hero-contact {
  margin-top: 22px;
  font-size: 14px;
}

.hero-contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-img {
  align-self: end;
  margin-bottom: -6px;
}

.hero-img img {
  width: 100%;
  max-width: 350px;
  margin-left: auto;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 0 26px;
  }
  .hero-img img {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---------- feed ---------- */

.feed {
  padding: 44px 44px 80px;
}

.entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 20px;
}

.entry:first-child {
  border-top: none;
  padding-top: 8px;
}

.entry-date {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-3);
}

.entry-body {
  min-width: 0;
}

.tag {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.tag-new {
  background: rgba(255, 75, 79, 0.12);
  color: var(--red-dark);
}

.tag-improved {
  background: rgba(143, 196, 159, 0.22);
  color: #2c6e45;
}

.tag-fixed {
  background: var(--page);
  color: var(--text-2);
}

.entry-body h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.entry-body h2 a {
  text-decoration: none;
  color: inherit;
}

.entry-image {
  width: 100%;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}

.entry-content {
  font-size: 15px;
  color: var(--text-2);
}

.entry-content p {
  margin-bottom: 14px;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 14px 20px;
}

.entry-content li {
  margin-bottom: 6px;
}

.entry-content strong {
  color: var(--ink);
  font-weight: 700;
}

.entry-content a {
  color: var(--red-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- minor changes accordion ---------- */

.minor-accordion {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
}

.minor-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}

.minor-accordion summary::-webkit-details-marker {
  display: none;
}

.minor-accordion summary::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  color: var(--red);
  font-weight: 800;
}

.minor-accordion[open] summary::before {
  content: "\2212";
}

.minor-content {
  padding: 0 18px 16px;
  font-size: 13.5px;
  color: var(--text-2);
}

.minor-content ul {
  margin-left: 18px;
}

.minor-content li {
  margin-bottom: 6px;
}

.minor-content strong {
  color: var(--ink);
}

.empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--text-3);
}

/* ---------- footer ---------- */

.footer {
  max-width: 1220px;
  margin: 20px auto 0;
  padding: 26px 44px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

.footer a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .topbar,
  .feed,
  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* .hero's outer margin now comes from the base rule's floor formula
     (applies at every width, not just here). Internal content spacing
     still comes from .hero-grid's own 860px padding rule. */
  .topbar {
    position: relative;
  }
  .nav-toggle-label {
    display: flex;
  }
  .utility-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card-hover);
    z-index: 20;
  }
  .nav-toggle-checkbox:checked ~ .utility-nav {
    display: flex;
  }
  .utility-nav a {
    padding: 8px 0;
  }
  .utility-nav .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
  }
  .utility-nav .cta {
    justify-content: center;
  }
  .entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .entry-date {
    position: static;
  }
}