/* Design system aligned with serviceplan-agents.com / usecases.serviceplan-agents.com:
   LIGHT-dominant layout (light gray page, black Avenir type, white cards with
   soft shadows) with DARK rounded blocks as contrast accents — square grid
   lines on dark, red/green radial glows, coral-red rectangular CTAs (no
   pills on primary actions), uppercase letter-spaced kickers. */

@font-face {
  font-family: "Avenir";
  src: url("/trust/fonts/AvenirLTProRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/trust/fonts/AvenirLTProMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/trust/fonts/AvenirLTProHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("/trust/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;
}

.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) ---------- */

.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: 44px 44px 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;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

.hero-contact .sep {
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- tabs ---------- */

.tab-radio {
  display: none;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 1220px;
  margin: 26px auto 0;
  padding: 0 44px;
}

.tab-label {
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-label:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.tab-content {
  display: none;
  max-width: 1220px;
  margin: 0 auto;
  padding: 34px 44px 60px;
}

#tab-overview:checked ~ .tab-content-overview,
#tab-controls:checked ~ .tab-content-controls,
#tab-resources:checked ~ .tab-content-resources,
#tab-subprocessors:checked ~ .tab-content-subprocessors,
#tab-faq:checked ~ .tab-content-faq {
  display: block;
}

#tab-overview:checked ~ .tab-nav label[for="tab-overview"],
#tab-controls:checked ~ .tab-nav label[for="tab-controls"],
#tab-resources:checked ~ .tab-nav label[for="tab-resources"],
#tab-subprocessors:checked ~ .tab-nav label[for="tab-subprocessors"],
#tab-faq:checked ~ .tab-nav label[for="tab-faq"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- badges (compliance strip) ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
}

.badge-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--red);
}

.badge-label {
  font-weight: 800;
}

.badge-label small {
  display: block;
  font-weight: 400;
  color: var(--text-2);
  font-size: 12px;
  margin-top: 2px;
}

.badge-compliant .badge-icon {
  color: #2c6e45;
}

.badge-compliant .badge-label {
  color: var(--ink);
}

.badge-roadmap {
  opacity: 0.85;
}

.badge-roadmap .badge-icon {
  color: var(--text-3);
}

.badge-roadmap .badge-label {
  font-weight: 500;
}

/* ---------- overview cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.card {
  padding: 22px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--red);
}

.card-title {
  font-weight: 800;
  font-size: 15.5px;
}

.card ul {
  list-style: none;
}

.card li {
  font-size: 13.5px;
  color: var(--text-2);
  padding: 3px 0 3px 16px;
  position: relative;
}

.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

.data-processed-title {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 14px;
}

.data-processed-card {
  padding: 24px 26px;
}

.data-processed-list {
  list-style: none;
  columns: 2;
  column-gap: 30px;
}

.data-processed-list li {
  font-size: 13.5px;
  color: var(--on-dark-2);
  padding: 4px 0 4px 16px;
  position: relative;
  break-inside: avoid;
}

.data-processed-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

@media (max-width: 640px) {
  .data-processed-list {
    columns: 1;
  }
}

/* ---------- controls tab ---------- */

.controls-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
}

.controls-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 20px;
}

.controls-cat-link {
  padding: 9px 14px;
  border-radius: var(--r-btn);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}

.controls-cat-link:hover {
  background: #fff;
  color: var(--ink);
}

.controls-category {
  margin-bottom: 36px;
  scroll-margin-top: 20px;
}

.controls-category-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
}

.controls-table {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.controls-table-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--page);
}

.control-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
}

.control-name {
  font-weight: 500;
  font-size: 14px;
}

.control-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
}

.status-implemented,
.status-partial {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 4px;
}

.status-implemented {
  background: var(--green);
}

.status-partial {
  background: #f2c94c;
}

.controls-summary {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-3);
}

.controls-legend {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.controls-legend .status-implemented,
.controls-legend .status-partial {
  display: inline-block;
  margin: 0;
}

@media (max-width: 800px) {
  .controls-layout {
    grid-template-columns: 1fr;
  }
  .controls-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- resources tab ---------- */

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.resource-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.resource-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: var(--red);
}

.resource-name {
  font-weight: 500;
  font-size: 14.5px;
}

.resource-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--r-btn);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  background: var(--red);
  color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}

.btn-disabled {
  background: var(--page);
  color: var(--text-3);
  pointer-events: none;
}

.gated-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- subprocessors tab ---------- */

.subprocessors-intro {
  font-size: 14px;
  color: var(--text-2);
  max-width: 720px;
  margin-bottom: 20px;
}

.subprocessor-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.subprocessor-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--page);
  padding: 12px 18px;
}

.subprocessor-table td {
  padding: 13px 18px;
  font-size: 13.5px;
  border-top: 1px solid var(--line);
}

.subprocessor-name {
  font-weight: 500;
}

.region-tag {
  display: inline-flex;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 500;
}

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

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

.row-exception td {
  background: rgba(255, 75, 79, 0.05);
}

.dpa-exception {
  color: var(--red-dark);
  font-weight: 500;
}

.sccs-note,
.exception-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-3);
  max-width: 780px;
}

.exception-note {
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  color: var(--text-2);
}

/* ---------- FAQ tab ---------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.faq-toggle {
  display: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
}

.faq-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-3);
  transition: transform 0.2s ease;
}

.faq-toggle:checked + .faq-question .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.faq-toggle:checked ~ .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 0 20px;
}

.faq-toggle:checked ~ .faq-answer .faq-answer-inner {
  padding: 0 20px 18px;
}

/* ---------- 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);
}

@media (max-width: 720px) {
  .topbar,
  .tab-content,
  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero {
    /* Outer margin now comes from the base .hero rule's floor formula
       (applies at every width, not just here) — only the content padding
       shrinks at this breakpoint. */
    padding-left: 26px;
    padding-right: 26px;
  }
  .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;
  }
  .tab-nav {
    padding: 0 20px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
}