/* The glow sits behind the hero; the demo card below it shows the model at work
   inside AstrLink, and a short page still puts the footer at the bottom. */
.guard-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(
        ellipse 65% 440px at 50% 230px,
        #f3f4fc 0%,
        transparent 100%
      )
      no-repeat,
    #fff;
}
.guard-main {
  flex: 1 0 auto;
  padding-top: 66px;
  padding-bottom: 32px;
}
.guard-hero {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.guard-hero .chapter {
  margin-bottom: 12px;
  letter-spacing: 0.14em;
}
.guard-title {
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1.25;
  letter-spacing: -0.055em;
  font-weight: 600;
}
.guard-title span {
  background: linear-gradient(110deg, var(--brand), #7776bb);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:lang(en) .guard-title {
  letter-spacing: -0.035em;
}
.guard-intro {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 1rem;
  line-height: 2;
}
.guard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 29px;
  margin-top: 30px;
}
.guard-actions .text-link {
  font-size: 0.8125rem;
}
/* The request as the user wrote it and the reply they see stay on the left, on
   their machine. What crosses the dashed boundary to the provider is smaller and
   paler: only placeholders go, only placeholders come back. */
.guard-demo {
  max-width: 1030px;
  margin: 44px auto 0;
  padding: 20px 24px 18px;
  border: 1px solid #d9e0ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 60px #3040740a;
}
.guard-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 136px minmax(0, 0.85fr);
  grid-template-areas:
    "local-head boundary remote-head"
    "req-local arrow-out req-remote"
    "reply-local arrow-back reply-remote";
  gap: 12px 0;
  margin-top: 12px;
}
.guard-demo-column {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: #536782;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.guard-demo-column .icon {
  width: 16px;
  height: 16px;
}
.guard-demo-column.is-local {
  grid-area: local-head;
}
.guard-demo-column.is-remote {
  grid-area: remote-head;
}
.guard-demo-boundary {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.guard-demo-boundary::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed #c3d0e4;
}
.guard-demo-boundary span {
  position: relative;
  padding: 3px 9px;
  border-radius: 20px;
  background: #f0f2f8;
  color: #536782;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.pane-request-local {
  grid-area: req-local;
}
.pane-request-remote {
  grid-area: req-remote;
}
.pane-reply-remote {
  grid-area: reply-remote;
}
.pane-reply-local {
  grid-area: reply-local;
}
.guard-demo-pane {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border: 1px solid #d9e0ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px #3040740a;
}
.guard-demo-pane.is-remote {
  align-self: center;
  padding: 14px 18px;
  border: 1px dashed #c9d5e8;
  background: #f7f8fc;
  box-shadow: none;
}
.guard-demo-pane.is-key {
  border-color: #91acd0;
  background: linear-gradient(145deg, #fff, #f4f7ff);
  box-shadow: 0 12px 36px #1d4d8714;
}
.guard-demo-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #536782;
  font-size: 0.8125rem;
}
.guard-demo-caption .guard-tag {
  margin-left: auto;
}
.is-key .guard-tag {
  background: var(--brand);
  color: #fff;
}
.guard-demo-step {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
}
.is-remote .guard-demo-step {
  background: #dfe6f2;
  color: #536782;
}
.guard-demo-text {
  flex: 1;
  margin-top: 10px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: -0.01em;
}
.is-remote .guard-demo-text {
  margin-top: 8px;
  color: #536782;
  font-size: 0.875rem;
  line-height: 1.8;
}
.guard-demo-text mark {
  background: none;
  color: inherit;
}
.guard-hit {
  padding: 2px 7px;
  border-radius: 7px;
  background: #fdf3e4;
  box-shadow: inset 0 0 0 1px #f0dcb6;
  color: #8a5a0b;
  white-space: nowrap;
}
.guard-hit i {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #fff;
  color: #8a5a0b;
  font-size: 0.6875rem;
  font-style: normal;
  vertical-align: 2px;
}
.guard-safe {
  padding: 1px 8px;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d2deef;
  color: #536782;
  white-space: nowrap;
}
.guard-restored {
  padding: 2px 7px;
  border-radius: 7px;
  background: #e3f6f8;
  box-shadow: inset 0 0 0 1px #b6e6ec;
  color: #117a86;
  white-space: nowrap;
}
.guard-demo-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--brand);
  font-size: 0.8125rem;
}
.guard-demo-status .icon {
  width: 18px;
  height: 18px;
}
.is-remote .guard-demo-status {
  margin-top: 6px;
  color: #6b788c;
  font-size: 0.75rem;
}
/* Arrows cross the boundary in the middle column, one each way. */
.guard-demo-arrow {
  position: relative;
  z-index: 1;
  grid-area: arrow-out;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.guard-demo-arrow.arrow-back {
  grid-area: arrow-back;
}
.guard-demo-arrow i {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #20bbc7, #7f8fe8);
}
.guard-demo-arrow i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 7px solid #7f8fe8;
}
.arrow-back i {
  background: linear-gradient(90deg, #7f8fe8, #20bbc7);
}
.arrow-back i::after {
  right: auto;
  left: -1px;
  border-left: 0;
  border-right: 7px solid #7f8fe8;
}
.guard-demo-arrow b {
  padding: 3px 9px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d2deef;
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}
.guard-demo .story-footnote {
  margin-top: 12px;
}
/* Copy stays beside a long list while it scrolls past. */
.guard-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px 64px;
  align-items: start;
  max-width: 1030px;
  margin: 72px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.guard-section-copy {
  position: sticky;
  top: 118px;
}
.guard-section-copy .chapter,
.guard-reasons .chapter {
  font-size: 0.75rem;
  margin-bottom: 14px;
}
.guard-section h2,
.guard-reasons h2 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.035em;
}
.guard-section-copy > p,
.guard-reasons > p {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.95;
}
.guard-section-body {
  min-width: 0;
}
.guard-note {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.85;
}
.guard-note a,
.guard-limits a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: #1d4d8740;
  text-underline-offset: 3px;
}
.guard-note a:hover,
.guard-limits a:hover {
  text-decoration-color: currentColor;
}
/* Rules beside the model: the model's card is the one with the brand border. */
.guard-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.guard-compare article {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px #243a6503;
}
.guard-compare article.is-guard {
  border-color: #91acd0;
  box-shadow: 0 8px 30px #1d4d870a;
}
.guard-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  background: #f0f2f8;
  color: #536782;
  font-size: 0.6875rem;
  white-space: nowrap;
}
.is-guard .guard-tag {
  background: #eef4fb;
  color: var(--brand);
}
.guard-compare h3 {
  margin-top: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.guard-compare p {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.85;
}
.guard-compare ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: #3d4d63;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.guard-compare li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.guard-compare li .icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--brand);
}
.guard-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guard-kinds li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.guard-kinds strong {
  display: block;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}
.guard-reasons {
  max-width: 1030px;
  margin: 72px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.guard-reasons > p {
  max-width: 560px;
  margin-inline: auto;
}
.guard-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
  text-align: left;
}
.guard-reasons-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px #243a6503;
}
.guard-reasons-grid .icon {
  width: 26px;
  height: 26px;
  color: var(--brand);
}
.guard-reasons-grid h3 {
  margin-top: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.guard-reasons-grid p {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.85;
}
.guard-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guard-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px #243a6503;
}
.guard-steps li > span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--brand);
  background: #eef4fb;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.guard-steps h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.guard-steps p {
  font-size: 0.8125rem;
  line-height: 1.85;
}
.guard-limits {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guard-limits li {
  position: relative;
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--line);
  color: #3d4d63;
  font-size: 0.875rem;
  line-height: 1.85;
}
.guard-limits li:first-child {
  padding-top: 0;
}
.guard-limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9d6ea;
}
.guard-limits li:first-child::before {
  top: 0.45em;
}
/* The numbers people ask about, in one line; the model card has the rest. */
.guard-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  max-width: 1030px;
  margin: 56px auto 0;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7f8fc;
}
.guard-facts dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 0;
}
.guard-facts dl > div {
  display: flex;
  flex-direction: column;
}
.guard-facts dt {
  color: #536782;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.guard-facts dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.guard-facts .text-link {
  color: #536782;
  font-size: 0.8125rem;
}
.guard-facts .text-link:hover {
  color: var(--brand);
}
.guard-cta {
  max-width: 1030px;
  margin: 72px auto 0;
  padding: 64px 20px 56px;
}
.guard-cta h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
}
.guard-page .site-footer {
  margin-top: 64px;
}
@media (max-width: 900px) {
  .guard-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .guard-section-copy {
    position: static;
  }
  .guard-section h2 br,
  .guard-reasons h2 br {
    display: none;
  }
  /* One column in story order; the boundary and its headings no longer apply. */
  .guard-demo-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "req-local"
      "arrow-out"
      "req-remote"
      "reply-remote"
      "arrow-back"
      "reply-local";
    gap: 12px;
  }
  .guard-demo-column,
  .guard-demo-boundary,
  .guard-demo-arrow i {
    display: none;
  }
  .guard-demo-arrow {
    padding: 0;
  }
  .guard-demo-arrow b::before {
    content: "↓";
    margin-right: 6px;
  }
  .guard-demo-pane.is-remote {
    align-self: auto;
  }
  .guard-reasons-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .guard-main {
    padding-top: 38px;
  }
  .guard-title {
    font-size: 2.65rem;
  }
  .guard-intro {
    font-size: 0.9375rem;
    line-height: 1.9;
  }
  .guard-intro br {
    display: none;
  }
  .guard-demo {
    margin-top: 32px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  .guard-demo-pane {
    padding: 14px 14px;
  }
  .guard-demo-text {
    font-size: 0.9375rem;
    line-height: 1.9;
  }
  .guard-section,
  .guard-reasons {
    margin-top: 48px;
    padding-top: 32px;
  }
  .guard-section h2,
  .guard-reasons h2 {
    font-size: 1.6rem;
  }
  .guard-compare,
  .guard-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
  .guard-steps li {
    padding: 18px;
    gap: 4px 14px;
  }
  .guard-facts {
    justify-content: center;
    margin-top: 40px;
    padding: 18px 20px;
  }
  .guard-facts dl {
    justify-content: center;
    gap: 10px 24px;
  }
  .guard-cta {
    margin-top: 56px;
    padding: 48px 18px 44px;
  }
  .guard-page .site-footer {
    margin-top: 40px;
  }
}
@media (max-width: 600px) {
  .guard-actions {
    flex-direction: column;
    gap: 18px;
  }
  .guard-actions .button {
    padding: 13px 20px;
    font-size: 0.8125rem;
  }
}