/* Kaniop landing page — intentionally scoped to avoid affecting versioned docs. */
.landing-page {
  --ink:#0b1d38;
  --muted:#50627a;
  --blue:#075fe9;
  --teal:#00a68c;
  --border:#dfebf6;
  color:var(--ink);
  background:#fff
}
.landing-page .container {
  max-width:1260px;
  padding-inline:28px
}
.landing-page a:focus-visible,.landing-page summary:focus-visible {
  outline:3px solid #1e88e5;
  outline-offset:4px;
  border-radius:5px
}
.landing-page #content {
  overflow:hidden
}
.landing-page .landing h1,.landing-page .landing h2,.landing-page .landing h3 {
  color:var(--ink);
  letter-spacing:-.045em
}
.landing-page .landing p {
  color:var(--muted)
}
.landing-page .landing-nav {
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e7edf5;
  backdrop-filter:blur(16px);
  box-shadow:0 1px 8px #092d4e08
}
.landing-page .landing-nav .container {
  min-height:74px;
  padding-block:12px
}
.landing-page .nav-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-.045em
}
.landing-page .nav-brand img {
  height:36px;
  width:auto;
  max-width:44px;
  object-fit:contain
}
.landing-page .nav-right {
  gap:26px;
  align-items:center
}
.landing-page .nav-link {
  font-size:.87rem;
  color:#334862
}
.landing-page .nav-link:hover {
  color:var(--blue)
}
.landing-page .nav-cta {
  border-radius:9px;
  background:var(--blue);
  color:white;
  padding:10px 17px;
  font-weight:650;
  text-decoration:none;
  font-size:.88rem;
  box-shadow:0 5px 14px #0a64dd24
}
.landing-page .nav-cta:hover {
  background:#064db9;
  color:white
}
.landing-page .mobile-menu {
  display:none;
  position:relative
}
.landing-page .mobile-menu summary {
  cursor:pointer;
  list-style:none;
  font-weight:700;
  border:1px solid #dbe5ef;
  border-radius:8px;
  padding:8px 13px
}
.landing-page .mobile-menu summary::-webkit-details-marker {
  display:none
}
.landing-page .mobile-menu-list {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:210px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  box-shadow:0 15px 40px #172e4f20
}
.landing-page .mobile-menu-list a {
  display:block;
  color:var(--ink);
  padding:11px 12px;
  text-decoration:none;
  font-size:.92rem;
  border-radius:6px
}
.landing-page .mobile-menu-list a:hover {
  background:#eff7ff
}
.landing-page .landing-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 87% 22%,#daf6ff 0,transparent 43%),radial-gradient(ellipse at 6% 68%,#dfedff 0,transparent 46%),linear-gradient(135deg,#f6fbff 0,#eef7ff 62%,#f2fefd 100%);
  padding:90px 0 78px
}
.landing-page .hero-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1
}
.landing-page .hero-copy {
  max-width:605px
}
.landing-page .eyebrow {
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  background:#fff;
  border:1px solid #d9eaf6;
  border-radius:100px;
  padding:7px 13px;
  font-weight:650;
  font-size:.75rem;
  box-shadow:0 6px 15px #23416c0d;
  color:#275376!important;
  margin-bottom:26px
}
.landing-page .status-dot {
  display:inline-block;
  width:8px;
  height:8px;
  background:#17b88a;
  border-radius:100%;
  box-shadow:0 0 0 3px #b4f3df
}
.landing-page .eyebrow-divider {
  height:12px;
  width:1px;
  background:#bfcedb;
  margin-inline:5px
}
.landing-page .hero-copy h1 {
  font-size:clamp(2.8rem,4.3vw,4.6rem);
  line-height:1.09;
  font-weight:800;
  margin-bottom:22px
}
.landing-page .hero-copy h1 span {
  color:#0874cd;
  background:linear-gradient(110deg,#095bd7,#0fb2c5);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.landing-page .hero-lede {
  max-width:545px;
  font-size:1.08rem;
  line-height:1.75;
  margin-bottom:30px
}
.landing-page .hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.landing-page .landing-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:13px 20px;
  border-radius:9px;
  text-decoration:none;
  font-size:.92rem;
  font-weight:700;
  white-space:nowrap;
  transition:transform .18s,background .18s,box-shadow .18s;
  border:1px solid transparent
}
.landing-page .landing-button:hover {
  transform:translateY(-2px)
}
.landing-page .landing-button-primary {
  background:var(--blue);
  color:white;
  box-shadow:0 8px 22px #075fe929
}
.landing-page .landing-button-primary:hover {
  background:#084fc3;
  color:white;
  box-shadow:0 10px 26px #075fe936
}
.landing-page .landing-button-outline {
  background:#fff;
  color:#153456;
  border-color:#bfd8ef
}
.landing-page .landing-button-outline:hover {
  background:#f4faff;
  color:var(--blue);
  border-color:#79b8ed
}
.landing-page .hero-caption {
  font-size:.79rem;
  margin-top:21px
}
.landing-page .hero-visual {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:17px
}
.landing-page .code-window {
  background:#0e2132;
  border:1px solid #294760;
  border-radius:14px;
  box-shadow:0 28px 65px #17365530;
  overflow:hidden;
  color:#dceaf8
}
.landing-page .code-title {
  display:flex;
  align-items:center;
  gap:13px;
  background:#152e43;
  padding:15px 19px;
  color:#d9e5f1;
  font-size:.83rem;
  border-bottom:1px solid #335066
}
.landing-page .window-dots {
  display:flex;
  gap:5px
}
.landing-page .window-dots i {
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fb6574
}
.landing-page .window-dots i:nth-child(2) {
  background:#f3be44
}
.landing-page .window-dots i:nth-child(3) {
  background:#37c987
}
.landing-page .code-tag {
  margin-left:auto;
  text-transform:uppercase;
  font-size:.66rem;
  letter-spacing:.08em;
  color:#a8bdd0
}
.landing-page .code-window pre {
  padding:26px 27px;
  font-size:clamp(.73rem,.94vw,.88rem);
  font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;
  line-height:1.88;
  white-space:pre;
  overflow-x:auto
}
.landing-page .code-window code {
  color:#e8f3fd
}
.landing-page .syntax-key {
  color:#87c9f9
}
.landing-page .syntax-value {
  color:#68e8c2
}
.landing-page .syntax-number {
  color:#ffd187
}
.landing-page .code-foot {
  font-size:.74rem;
  padding:11px 20px;
  background:#132a3e;
  color:#9fbbd0;
  border-top:1px solid #284458
}
.landing-page .code-live-dot {
  display:inline-block;
  height:7px;
  width:7px;
  border-radius:50%;
  background:#21cf96;
  margin-right:7px
}
.landing-page .flow-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:rgba(255,255,255,.96);
  border:1px solid #d2e5f4;
  border-radius:13px;
  padding:17px;
  box-shadow:0 17px 34px #23486918
}
.landing-page .flow-node {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}
.landing-page .flow-node strong,.landing-page .flow-node small {
  display:block;
  white-space:nowrap
}
.landing-page .flow-node strong {
  font-size:.75rem;
  color:#203754
}
.landing-page .flow-node small {
  font-size:.64rem;
  color:#648099;
  margin-top:2px
}
.landing-page .flow-node-main {
  border-radius:9px;
  background:#ecfaf6;
  padding:7px
}
.landing-page .flow-arrow {
  color:#0c88bd;
  font-weight:700;
  font-size:1.13rem
}
.landing-page .node-icon {
  height:33px;
  width:33px;
  flex:0 0 33px;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.7rem
}
.landing-page .node-k8s {
  background:#e3edff;
  color:#1265d4
}
.landing-page .node-kaniop {
  background:#1daf9c;
  color:white
}
.landing-page .node-kanidm {
  background:#e8f0f8;
  color:#153655
}
.landing-page .benefit-strip {
  border-bottom:1px solid #e5edf4;
  background:#fff
}
.landing-page .benefit-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:26px;
  gap:17px
}
.landing-page .benefit {
  display:flex;
  align-items:center;
  gap:13px;
  padding-right:15px
}
.landing-page .benefit:not(:last-child) {
  border-right:1px solid #e7edf5
}
.landing-page .benefit-symbol {
  flex:0 0 41px;
  height:41px;
  border-radius:11px;
  background:#eef5ff;
  color:#0668d4;
  display:grid;
  place-items:center;
  font-size:1.6rem;
  font-weight:600
}
.landing-page .benefit strong,.landing-page .benefit small {
  display:block
}
.landing-page .benefit strong {
  font-size:.84rem
}
.landing-page .benefit small {
  font-size:.73rem;
  color:#66768d;
  line-height:1.4;
  margin-top:3px
}
.landing-page .landing-section {
  padding:92px 0
}
.landing-page .feature-section {
  background:linear-gradient(180deg,#f7fbff,#f3f9ff)
}
.landing-page .section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:45px;
  margin-bottom:36px
}
.landing-page .section-kicker {
  font-size:.75rem!important;
  letter-spacing:.14em;
  font-weight:800;
  color:#0876ca!important;
  margin-bottom:11px
}
.landing-page h2 {
  font-size:clamp(1.85rem,2.7vw,2.6rem);
  line-height:1.2
}
.landing-page .section-heading h2 {
  max-width:650px
}
.landing-page .section-heading>p {
  max-width:365px;
  font-size:.94rem;
  line-height:1.65
}
.landing-page .capability-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.landing-page .capability-card {
  padding:27px;
  border:1px solid #e4ebf3;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 30px #1c466309;
  transition:transform .2s,box-shadow .2s
}
.landing-page .capability-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 36px #1c466313
}
.landing-page .card-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:1.65rem;
  font-weight:700;
  margin-bottom:20px
}
.landing-page .icon-blue {
  background:#e7efff;
  color:#1c6fe0
}
.landing-page .icon-sky {
  background:#e4f6fc;
  color:#078dbe
}
.landing-page .icon-mint {
  background:#e4f8f1;
  color:#00a484
}
.landing-page .capability-card h3 {
  font-size:1.04rem;
  letter-spacing:-.025em;
  margin-bottom:8px
}
.landing-page .capability-card p {
  font-size:.86rem;
  line-height:1.65
}
.landing-page .architecture-section {
  background:#fff
}
.landing-page .architecture-layout {
  display:grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap:58px;
  align-items:center
}
.landing-page .architecture-copy h2 {
  margin-bottom:19px
}
.landing-page .architecture-copy>p:not(.section-kicker) {
  line-height:1.75;
  font-size:.97rem;
  margin-bottom:20px
}
.landing-page .text-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#075fc9;
  text-decoration:none;
  font-size:.91rem;
  font-weight:750
}
.landing-page .text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.landing-page .architecture-visual {
  display:grid;
  grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);
  gap:9px;
  align-items:center
}
.landing-page .diagram-column {
  border:1px solid #dfe8f0;
  border-radius:12px;
  padding:12px;
  background:#f8fbff;
  box-shadow:0 6px 14px #122e4309;
  min-width:0
}
.landing-page .diagram-heading {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.69rem;
  min-height:38px;
  font-weight:800;
  letter-spacing:-.01em
}
.landing-page .diagram-circle {
  flex:0 0 27px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:7px;
  font-size:.65rem;
  color:#fff
}
.landing-page .diagram-circle.blue {
  background:#2678db
}
.landing-page .diagram-circle.teal {
  background:#08a89c
}
.landing-page .diagram-circle.navy {
  background:#263b60
}
.landing-page .diagram-row {
  display:flex;
  align-items:center;
  gap:5px;
  min-height:41px;
  background:#fff;
  border:1px solid #e4ebf1;
  border-radius:7px;
  margin-top:6px;
  padding:7px 6px;
  font-size:.67rem;
  line-height:1.4;
  color:#344b63
}
.landing-page .mini-glyph {
  color:#078ab5;
  font-size:.84rem
}
.landing-page .diagram-arrow {
  color:#1475cf;
  font-size:1.45rem;
  font-weight:700;
  text-align:center
}
.landing-page .center-column {
  border-color:#bde9e4;
  background:#f1faf8
}
.landing-page .quickstart-section {
  background:linear-gradient(110deg,#f1fcfa 0%,#f6faff 80%)
}
.landing-page .quickstart-layout {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:75px;
  align-items:center
}
.landing-page .quickstart-lede {
  font-size:.97rem;
  line-height:1.7;
  margin:18px 0 25px
}
.landing-page .step-list {
  list-style:none;
  display:grid;
  gap:18px;
  margin-bottom:25px
}
.landing-page .step-list li {
  display:flex;
  align-items:flex-start;
  gap:13px
}
.landing-page .step-number {
  display:grid;
  place-items:center;
  background:#08b58f;
  color:#fff;
  font-size:.77rem;
  font-weight:800;
  border-radius:50%;
  width:25px;
  height:25px;
  flex:0 0 25px
}
.landing-page .step-list strong,.landing-page .step-list small {
  display:block
}
.landing-page .step-list strong {
  font-size:.87rem
}
.landing-page .step-list small {
  color:#5b7086;
  font-size:.78rem;
  margin-top:2px
}
.landing-page .install-card {
  overflow:hidden;
  background:#fff;
  border:1px solid #e0ebef;
  border-radius:14px;
  box-shadow:0 16px 40px #13456b11;
  padding:21px
}
.landing-page .install-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 3px 17px;
  font-size:.91rem
}
.landing-page .terminal-mark {
  background:#00a99c;
  color:#fff;
  border-radius:7px;
  padding:6px 8px;
  font-size:.82rem;
  font-weight:750
}
.landing-page .install-label {
  margin-left:auto;
  color:#8494a4;
  font-size:.73rem
}
.landing-page .install-card pre {
  padding:22px;
  background:#102438;
  border-radius:9px;
  overflow-x:auto
}
.landing-page .install-card code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#d5eeff;
  font-size:.78rem;
  line-height:1.85
}
.landing-page .install-note {
  color:#62758a;
  font-size:.77rem;
  line-height:1.5;
  padding:16px 1px
}
.landing-page .install-card>a {
  color:#066ad4;
  font-weight:700;
  font-size:.83rem;
  text-decoration:none
}
.landing-page .install-card>a:hover {
  text-decoration:underline
}
.landing-page .community-cta {
  padding:62px 0;
  background:#eaf5ff
}
.landing-page .community-cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.landing-page .community-cta h2 {
  font-size:clamp(1.65rem,2.35vw,2.3rem)
}
.landing-page .community-cta p:last-child {
  margin-top:10px;
  font-size:.91rem
}
.landing-page .community-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.landing-page footer {
  background:#0f2138;
  padding:46px 0 18px
}
.landing-page footer .footer-content {
  grid-template-columns:1.7fr repeat(2,1fr)
}
.landing-page footer .footer-section h4 {
  font-size:.9rem
}
.landing-page footer .footer-section a {
  font-size:.85rem
}
.landing-page footer .footer-section li {
  margin-bottom:9px
}
.landing-page .footer-brand {
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:white
}
.landing-page .footer-brand-caption {
  font-size:.84rem;
  max-width:300px;
  color:#a9bbd0;
  margin-top:10px;
  line-height:1.6
}
.landing-page footer .footer-bottom {
  text-align:left;
  font-size:.76rem;
  color:#94a9c3
}
@media(max-width:1100px) {
   .landing-page .hero-layout {
    gap:30px
  }
   .landing-page .hero-copy h1 {
    font-size:clamp(2.45rem,4vw,3.6rem)
  }
   .landing-page .flow-node small {
    display:none
  }
   .landing-page .architecture-layout {
    grid-template-columns:1fr;
    gap:30px
  }
   .landing-page .architecture-copy {
    max-width:700px
  }
   .landing-page .quickstart-layout {
    gap:35px
  }
}
@media(max-width:820px) {
   .landing-page .nav-right {
    display:none
  }
   .landing-page .mobile-menu {
    display:block
  }
   .landing-page .landing-hero {
    padding:65px 0
  }
   .landing-page .hero-layout,.landing-page .quickstart-layout {
    grid-template-columns:1fr;
    gap:35px
  }
   .landing-page .hero-copy {
    max-width:760px
  }
   .landing-page .hero-copy h1 {
    font-size:clamp(2.6rem,6.5vw,4rem)
  }
   .landing-page .hero-visual {
    max-width:670px
  }
   .landing-page .benefit-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
   .landing-page .benefit:nth-child(2) {
    border-right:0
  }
   .landing-page .capability-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
   .landing-page .section-heading {
    align-items:start;
    flex-direction:column;
    gap:15px
  }
   .landing-page .section-heading>p {
    max-width:600px
  }
   .landing-page .community-cta-inner {
    align-items:start;
    flex-direction:column
  }
}
@media(max-width:540px) {
   .landing-page .container {
    padding-inline:20px
  }
   .landing-page .landing-hero {
    padding:52px 0 48px
  }
   .landing-page .eyebrow {
    font-size:.68rem
  }
   .landing-page .hero-copy h1 {
    font-size:clamp(2.45rem,10vw,3.15rem)
  }
   .landing-page .hero-lede {
    font-size:.97rem
  }
   .landing-page .hero-actions {
    align-items:stretch;
    flex-direction:column
  }
   .landing-page .landing-button {
    white-space:normal
  }
   .landing-page .flow-card {
    padding:10px 8px;
    gap:4px
  }
   .landing-page .flow-node {
    flex-direction:column;
    gap:4px;
    text-align:center
  }
   .landing-page .flow-node strong {
    font-size:.66rem
  }
   .landing-page .flow-node-main {
    padding:5px
  }
   .landing-page .flow-arrow {
    font-size:.92rem
  }
   .landing-page .benefit-grid {
    gap:20px 12px
  }
   .landing-page .benefit {
    padding:0;
    border:0!important;
    align-items:flex-start
  }
   .landing-page .benefit-symbol {
    width:30px;
    height:30px;
    flex-basis:30px;
    font-size:1.15rem
  }
   .landing-page .benefit strong {
    font-size:.76rem
  }
   .landing-page .benefit small {
    font-size:.66rem
  }
   .landing-page .landing-section {
    padding:65px 0
  }
   .landing-page .capability-grid {
    grid-template-columns:1fr;
    gap:12px
  }
   .landing-page .capability-card {
    padding:23px
  }
   .landing-page .architecture-visual {
    grid-template-columns:1fr;
    gap:8px
  }
   .landing-page .diagram-arrow {
    transform:rotate(90deg)
  }
   .landing-page .diagram-column {
    max-width:none
  }
   .landing-page .diagram-heading {
    font-size:.8rem
  }
   .landing-page .diagram-row {
    font-size:.77rem
  }
   .landing-page .quickstart-layout {
    gap:28px
  }
   .landing-page .install-card {
    padding:13px
  }
   .landing-page .install-card pre {
    padding:15px
  }
   .landing-page .install-card code {
    font-size:.67rem
  }
   .landing-page .community-cta {
    padding:52px 0
  }
   .landing-page .community-actions {
    width:100%;
    flex-direction:column
  }
   .landing-page footer .footer-content {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
   .landing-page footer .footer-brand-block {
    grid-column:1/-1
  }
}
@media(prefers-reduced-motion:reduce) {
   .landing-page .capability-card,.landing-page .landing-button {
    transition:none
  }
}


/* Brand refresh: keep the existing Kaniop crab rather than introducing a second mark. */
.landing-page .crab-logo,
.landing-page .node-crab,
.landing-page .diagram-crab {
  display: inline-block;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.landing-page .crab-logo { width: 54px; height: 41px; }
.landing-page .crab-logo img {
  position: absolute;
  width: 70px;
  height: 70px;
  max-width: none;
  display: block;
  left: -8px;
  top: -16px;
}
.landing-page .nav-brand img { height: 70px; max-width: none; }
.landing-page .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.landing-page .footer-brand .crab-logo {
  width: 52px;
  height: 39px;
}
.landing-page .footer-brand img { max-width: none; }
.landing-page .landing-icon { width: 1em; height: 1em; display: block; }
.landing-page .benefit-symbol .landing-icon { width: 23px; height: 23px; }
.landing-page .node-icon .landing-icon { width: 20px; height: 20px; }
.landing-page .node-crab { width: 37px; height: 34px; }
.landing-page .node-crab img {
  position: absolute;
  width: 49px;
  max-width: none;
  left: -6px;
  top: -12px;
}
.landing-page .code-foot a {
  color: #86ddf0;
  font-weight: 700;
  text-decoration: none;
}
.landing-page .code-foot a:hover { text-decoration: underline; }

/* Make every feature discoverable through its actual documentation. */
.landing-page .capability-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.landing-page .capability-card:focus-visible {
  outline: 3px solid #076de7;
  outline-offset: 3px;
}
.landing-page .capability-card .landing-icon { width: 26px; height: 26px; }
.landing-page .capability-card h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.landing-page .capability-card p { flex: 1; }
.landing-page .card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #0b65c8;
  font-size: .79rem;
  font-weight: 750;
  transition: gap .2s ease;
}
.landing-page .capability-card:hover .card-more,
.landing-page .capability-card:focus-visible .card-more { gap: 13px; }
.landing-page .feature-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid #f4d8a4;
  border-radius: 100px;
  background: #fff6e4;
  color: #88510d;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: normal;
  white-space: nowrap;
}

/* More legible architecture: resources -> reconciliation -> replica topology. */
.landing-page .architecture-visual {
  align-items: stretch;
  gap: 11px;
  padding: 24px 17px;
  border: 1px solid #e1eefa;
  border-radius: 17px;
  background-color: #f7fbff;
  background-image: radial-gradient(#c4d8ee 0.8px, transparent 0.8px);
  background-size: 15px 15px;
}
.landing-page .diagram-column {
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  background: rgba(255,255,255,.97);
  padding: 13px 11px;
}
.landing-page .center-column { background: #effcf9; border-color: #bce9df; }
.landing-page .diagram-heading {
  font-size: .77rem;
  line-height: 1.3;
  font-weight: 780;
  gap: 8px;
  min-height: 45px;
  margin-bottom: 6px;
}
.landing-page .diagram-circle {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.landing-page .diagram-circle .landing-icon {
  width: 20px;
  height: 20px;
}
.landing-page .diagram-crab { width: 42px; height: 35px; }
.landing-page .diagram-crab img {
  position: absolute;
  width: 55px;
  height: 55px;
  max-width: none;
  left: -7px;
  top: -12px;
}
.landing-page .diagram-row {
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  margin-top: 8px;
  min-height: 57px;
  background: #fff;
}
.landing-page .diagram-row-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #1178bd;
}
.landing-page .diagram-row-icon .landing-icon { width: 21px; height: 21px; }
.landing-page .diagram-row strong,
.landing-page .diagram-row small {
  display: block;
}
.landing-page .diagram-row strong { font-size: .72rem; }
.landing-page .diagram-row small {
  color: #6d7e93;
  font-size: .62rem;
  line-height: 1.35;
  margin-top: 4px;
}
.landing-page .diagram-arrow {
  align-self: center;
  font-size: 1.65rem;
  color: #0a85bc;
}
.landing-page .diagram-process {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 5px;
  padding: 21px 5px;
  background: #e0f8f3;
  border: 1px solid #c3ede5;
  border-radius: 10px;
}
.landing-page .diagram-process-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  color: #019f8b;
}
.landing-page .diagram-process-icon svg { width: 24px; height: 24px; }
.landing-page .diagram-process strong { font-size: .73rem; }
.landing-page .diagram-process small {
  font-size: .61rem;
  line-height: 1.3;
  color: #44736d;
}
.landing-page .replica-stack {
  display: grid;
  gap: 5px;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid #dbe6f0;
  background: #f3f8fd;
}
.landing-page .replica-stack span {
  padding: 6px 9px 6px 24px;
  border: 1px solid #d8e6f4;
  border-radius: 6px;
  background: #fff;
  color: #234c75;
  font-size: .65rem;
  font-weight: 700;
  position: relative;
}
.landing-page .replica-stack span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #20bb9b;
  border-radius: 50%;
}
.landing-page .diagram-disclaimer {
  margin-top: 10px;
  color: #48708d;
  font-size: .61rem;
  line-height: 1.4;
  text-align: center;
}

/* Useful keyboard-accessible quickstart controls. */
.landing-page .install-copy {
  font-family: inherit;
  margin-left: 3px;
  padding: 7px 11px;
  border: 1px solid #c9d8e8;
  border-radius: 7px;
  background: #f6faff;
  color: #165c9b;
  font-size: .75rem;
  font-weight: 750;
  cursor: pointer;
}
.landing-page .install-copy:hover { background: #e8f3ff; }
.landing-page .install-copy:focus-visible {
  outline: 3px solid #1675d9;
  outline-offset: 2px;
}
.landing-page .copy-feedback {
  min-height: 1px;
  color: #148262 !important;
  font-size: .76rem;
}
.landing-page .copy-feedback:not(:empty) { padding-top: 11px; }
.landing-page .copy-feedback:not(:empty) + .install-note { padding-top: 8px; }
@media (max-width: 1100px) {
  .landing-page .architecture-visual { padding: 20px; }
}
@media (max-width: 540px) {
  .landing-page .architecture-visual {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 15px;
  }
  .landing-page .diagram-arrow { transform: rotate(90deg); }
  .landing-page .diagram-column { min-width: 0; }
  .landing-page .install-header { gap: 7px; }
  .landing-page .install-copy { padding: 6px 8px; }
  .landing-page .install-label { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .card-more { transition: none; }
}


/* Follow-up: readable, keyboard-operable hero CRD examples. */
.landing-page .hero-explainer {
  max-width: 550px;
  margin-top: -12px;
  margin-bottom: 26px;
  padding-left: 14px;
  border-left: 3px solid #17a49e;
  font-size: .91rem;
  line-height: 1.65;
  color: #3b5471;
}
.landing-page .hero-explainer strong { color: #153454; }
.landing-page .hero-explainer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.landing-page .code-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 15px 0;
  background: #12293e;
  border-bottom: 1px solid #34516a;
}
.landing-page .code-tab {
  appearance: none;
  cursor: pointer;
  color: #b8ccdc;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 13px 12px;
  font: inherit;
  font-weight: 650;
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
}
.landing-page .code-tab[aria-selected="true"] {
  color: #8be2ee;
  border-bottom-color: #41c9db;
}
.landing-page .code-tab:hover { color: #fff; }
.landing-page .code-tab:focus-visible {
  outline: 2px solid #71dbe3;
  outline-offset: -2px;
  border-radius: 4px;
}
.landing-page .code-panel[hidden] { display: none !important; }
.landing-page .code-panels {
  min-height: 365px;
  background: #0e2132;
}
.landing-page .code-panel { outline-offset: -3px; }
.landing-page .code-panel pre {
  margin: 0;
  padding: 23px 23px;
  white-space: pre;
  overflow-x: auto;
  font-size: clamp(.71rem, .88vw, .84rem);
  line-height: 1.8;
}
.landing-page .hero-code-switcher .code-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  line-height: 1.5;
}
.landing-page .hero-code-switcher .code-doc-link {
  margin-left: auto;
  white-space: nowrap;
}
.landing-page #features,
.landing-page #architecture,
.landing-page #quickstart,
.landing-page #community {
  scroll-margin-top: 100px;
}
@media (max-width: 1100px) {
  .landing-page .hero-layout { gap: 29px; }
  .landing-page .code-panel pre { font-size: .73rem; }
}
@media (max-width: 540px) {
  .landing-page .hero-explainer {
    font-size: .9rem;
    margin-top: -6px;
  }
  .landing-page .code-tabs { padding-inline: 9px; gap: 1px; }
  .landing-page .code-tab {
    padding-inline: 8px;
    font-size: .74rem;
  }
  .landing-page .code-panel pre {
    padding: 20px 14px;
    font-size: .74rem;
  }
  .landing-page .code-panels { min-height: 360px; }
  .landing-page .diagram-heading { font-size: .87rem; }
  .landing-page .diagram-row {
    min-height: 61px;
    padding: 11px 10px;
  }
  .landing-page .diagram-row strong { font-size: .86rem; }
  .landing-page .diagram-row small { font-size: .79rem; }
  .landing-page .diagram-process strong { font-size: .86rem; }
  .landing-page .diagram-process small { font-size: .78rem; }
  .landing-page .diagram-disclaimer { font-size: .78rem; }
  .landing-page .replica-stack span { font-size: .81rem; }
  .landing-page .benefit small { font-size: .77rem; }
  .landing-page .code-foot { font-size: .74rem; }
  .landing-page .card-more { font-size: .83rem; }
}