/* Restrained depth system shared by the non-DockLock pages. */
:root {
  --depth-soft: 0 14px 34px rgba(8,19,31,.075), 0 3px 10px rgba(8,19,31,.045);
  --depth-medium: 0 24px 56px rgba(8,19,31,.12), 0 6px 18px rgba(8,19,31,.06);
  --depth-dark: 0 28px 65px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Homepage: depth follows the important decisions, not every block. */
.signal-card {
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  box-shadow:var(--depth-dark) !important;
}
.signal-card::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:18px -14px -18px 18px;
  border-radius:22px;
  background:rgba(240,82,43,.12);
  filter:blur(1px);
}
.product-list { border-top:0 !important; }
.product-list .product {
  position:relative;
  margin:14px 0;
  padding:29px 26px;
  overflow:hidden;
  border:1px solid rgba(8,19,31,.1) !important;
  border-radius:18px;
  background:rgba(255,253,248,.86);
  box-shadow:var(--depth-soft);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.product-list .product::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:92px;
  height:4px;
  background:linear-gradient(90deg,var(--orange),rgba(240,82,43,.16));
}
.product-list .product:nth-child(2)::before { background:linear-gradient(90deg,var(--mint),rgba(105,223,197,.16)); }
.product-list .product:nth-child(3)::before { background:linear-gradient(90deg,var(--sky),rgba(158,217,255,.18)); }
.product-list .product:hover { transform:translateY(-4px); box-shadow:var(--depth-medium); }
.audience-grid { gap:18px !important; }
.audience-card {
  border-color:rgba(8,19,31,.1) !important;
  border-radius:18px;
  background:rgba(255,253,248,.92) !important;
  box-shadow:var(--depth-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.audience-card:nth-child(even) { transform:translateY(12px); }
.audience-card:hover { transform:translateY(-4px); box-shadow:var(--depth-medium); }
.audience-card:nth-child(even):hover { transform:translateY(8px); }
.insight-note {
  border-top:1px solid rgba(8,19,31,.07);
  border-right:1px solid rgba(8,19,31,.07);
  border-bottom:1px solid rgba(8,19,31,.07);
  box-shadow:var(--depth-soft);
}
.hero-note {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-grid > .signal-card {
  grid-column:1 / -1;
  width:100%;
  margin-top:-4px;
  padding:24px 28px 27px;
}
.hero-grid > .signal-card::after { inset:14px -10px -14px 14px; }
.hero-grid > .signal-card .signal-flow {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding-top:4px;
}
.hero-grid > .signal-card .signal-row {
  grid-template-columns:26px 1fr;
  min-height:116px;
  padding:22px 20px;
  border-right:1px solid var(--line-dark);
  border-bottom:0;
}
.hero-grid > .signal-card .signal-row:first-child { padding-left:0; }
.hero-grid > .signal-card .signal-row:last-child { padding-right:0; border-right:0; }
.hero-grid > .signal-card .signal-state { grid-column:2; width:max-content; margin-top:5px; }
.idea-form { border-radius:20px; box-shadow:var(--depth-medium) !important; }

/* How it fits: show the operating layers as related but distinct. */
.operating-map { box-shadow:var(--depth-dark); }
.product-role { border:1px solid rgba(255,255,255,.09); box-shadow:0 13px 28px rgba(0,0,0,.14); }
.product-role:hover { box-shadow:0 20px 38px rgba(0,0,0,.23); }
.principle-list { gap:18px !important; border:0 !important; background:transparent !important; }
.principle-list .principle {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(8,19,31,.09);
  border-radius:18px;
  background:rgba(255,253,248,.88) !important;
  box-shadow:var(--depth-soft);
}
.principle-list .principle::before { content:""; position:absolute; inset:0 auto auto 0; width:72px; height:4px; background:var(--orange); }
.principle-list .principle:nth-child(2) { transform:translateY(14px); }
.principle-list .principle:nth-child(3)::before { background:var(--mint); }

/* LaneLock: add only quiet elevation around the narrative layer. */
.roles .role-line {
  padding:22px 28px;
  border:1px solid rgba(8,19,31,.08);
  border-radius:22px;
  background:rgba(255,253,248,.6);
  box-shadow:var(--depth-soft);
}

/* Neutral account and policy pages remain calmer than product pages. */
.access-card:not(.dock-product) {
  overflow:hidden;
  border-radius:24px;
  box-shadow:var(--depth-medium);
}
.choice,.product-card,.spec-step { transition:background .2s ease,transform .2s ease; }
.choice:hover,.product-card:not(.featured):hover { background:#faf7f0; }
.product-card.featured,.plan,.early-summary { box-shadow:inset -18px 0 42px rgba(0,0,0,.12); }

/* Role chooser: three calm, clearly separated entry points. */
.access-list { display:grid; gap:14px; border:0 !important; }
.access-row {
  min-height:138px !important;
  padding:20px 24px;
  border:1px solid rgba(8,19,31,.1) !important;
  border-radius:17px;
  background:rgba(255,253,248,.88);
  box-shadow:var(--depth-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.access-row:hover { transform:translateY(-3px); box-shadow:var(--depth-medium); }

@media(max-width:700px){
  .audience-card:nth-child(even),.principle-list .principle:nth-child(2){transform:none}
  .product-list .product{padding:24px 20px}
  .roles .role-line{padding:15px 18px}
  .access-row{padding:24px 18px}
}

@media(max-width:960px){
  .hero-grid > .signal-card .signal-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid > .signal-card .signal-row:nth-child(2){border-right:0}
  .hero-grid > .signal-card .signal-row:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
  .hero-grid > .signal-card .signal-row:first-child{padding-left:20px}
  .hero-grid > .signal-card .signal-row:last-child{padding-right:20px}
}

@media(max-width:560px){
  .hero-grid > .signal-card .signal-flow{grid-template-columns:1fr}
  .hero-grid > .signal-card .signal-row{min-height:auto;border-right:0;border-bottom:1px solid var(--line-dark)!important;padding:19px 0!important}
  .hero-grid > .signal-card .signal-row:last-child{border-bottom:0!important}
}

@media(prefers-reduced-motion:reduce){
  .product,.audience-card,.access-row,.choice,.product-card{transition:none!important}
}