/* Page-specific styles */

/* --- Home hero --- */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--nth-void);
  color: var(--nth-white);
  padding-top: clamp(7rem, 12vh, 9rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.home-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.home-hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-hero);
}
.home-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.home-hero__glow--a {
  width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(138,61,147,0.45), transparent 70%);
  top: -180px; right: -120px;
  animation: hero-glow 14s ease-in-out infinite alternate;
}
.home-hero__glow--b {
  width: 540px; height: 540px;
  background: radial-gradient(closest-side, rgba(138,61,147,0.55), transparent 70%);
  bottom: -200px; left: -180px;
  animation: hero-glow 18s ease-in-out -4s infinite alternate;
}
@keyframes hero-glow {
  0% { transform: translate(0,0) scale(1); opacity: 0.85; }
  100% { transform: translate(-40px, 40px) scale(1.08); opacity: 1; }
}
.home-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
  opacity: 0.5;
}
.home-hero__grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}
@media (max-width: 1080px) {
  .home-hero__inner { grid-template-columns: 1fr; }
}

.home-hero__chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.45rem 0.8rem; border-radius: 999px;
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home-hero__chip-sep { color: rgba(255,255,255,0.3); }
.home-hero__headline {
  font-size: clamp(2.5rem, 4.8vw + 0.5rem, 5.25rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.home-hero__accent {
  background: linear-gradient(120deg, #B26BBA 0%, #8A3D93 40%, #E84717 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: inline;
  white-space: nowrap;
}
.home-hero__lede {
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.1875rem);
  color: rgba(255,255,255,0.72);
  margin-top: 1.75rem;
  max-width: 36rem;
}
.home-hero__actions {
  display: flex; gap: 0.85rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.home-hero__proof {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 38rem;
}
.home-hero__proof-n {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.6));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.home-hero__proof-l {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin-top: 0.35rem;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .home-hero__proof { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.25rem; }
}

.home-hero__right {
  position: relative;
}
.home-hero__mockup-shadow {
  position: absolute;
  inset: -40px -20px -20px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(138,61,147,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.home-hero__right .mockup-hero {
  position: relative;
  z-index: 1;
  animation: float-mockup 8s ease-in-out infinite alternate;
}
@keyframes float-mockup {
  0% { transform: translateY(-4px) rotate(-0.2deg); }
  100% { transform: translateY(4px) rotate(0.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__right .mockup-hero, .home-hero__glow--a, .home-hero__glow--b { animation: none; }
}

.home-hero__chip-float {
  position: absolute;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(20, 11, 30, 0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.home-hero__chip-float--a {
  top: -16px; left: -24px;
  animation: float-chip 6s ease-in-out infinite alternate;
}
.home-hero__chip-float--b {
  bottom: 8px; right: -28px;
  animation: float-chip 7s ease-in-out -2s infinite alternate;
}
.home-hero__chip-float .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nth-success);
  box-shadow: 0 0 0 0 rgba(25,135,84,0.6);
}
.home-hero__chip-float .dot.pulse { animation: pulse-dot 1.6s ease-out infinite; }
@keyframes float-chip {
  0% { transform: translateY(-3px); }
  100% { transform: translateY(3px); }
}

.home-hero__scroll {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.home-hero__scroll-track {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.home-hero__scroll-track span {
  position: absolute; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, transparent, var(--nth-orange-glow));
  animation: scroll-tick 2.2s ease-in-out infinite;
}
@keyframes scroll-tick {
  0% { top: -50%; }
  100% { top: 100%; }
}
@media (max-width: 1080px) { .home-hero__scroll { display: none; } }

/* --- Perm graph section --- */
.perm-section__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.perm-section__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.perm-section__list li {
  display: flex; align-items: center; gap: 0.6rem;
  color: rgba(255,255,255,0.78);
  font-size: 0.9375rem;
}
.perm-section__list li svg { color: var(--nth-orange-glow); flex-shrink: 0; }
@media (max-width: 960px) { .perm-section__layout { grid-template-columns: 1fr; } }

/* --- Platform overview --- */
.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 960px) { .platform-grid { grid-template-columns: 1fr; } }

/* --- Single app page --- */
.app-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 1000px) { .app-hero { grid-template-columns: 1fr; } }
/* Grid columns default to min-width:auto and won't shrink below their content's
   intrinsic width. The graph-explorer hero console has a wide query line, so
   without this its column refused to shrink and the mockup overflowed/clipped
   instead of scaling to fit like the other app heroes. */
.app-hero > * { min-width: 0; }
/* Uploaded hero/dashboard images (used when an app has no built-in mockup,
   e.g. a newly added app). Match the mockup card's rounded, bordered frame. */
.app-hero__shot, .app-glance__shot {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--nth-border);
  box-shadow: var(--sh-lg);
}
.app-glance__shot { box-shadow: var(--sh-md); }
.app-hero__chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(138,61,147,0.14);
  border: 1px solid rgba(138,61,147,0.4);
  padding: 0.45rem 0.8rem; border-radius: 999px;
  margin-bottom: 1.5rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}
.feature-card {
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: transform 320ms var(--ease-brand), border-color 320ms var(--ease-brand), box-shadow 320ms var(--ease-brand);
}
.feature-card:hover { transform: translateY(-3px); border-color: var(--nth-purple-glow); box-shadow: var(--sh-md); }
.feature-card__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--nth-orange);
  margin-bottom: 0.5rem;
}
.feature-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.feature-card p { color: var(--nth-ink-muted); font-size: 0.9375rem; }

/* Cross-sell */
.cross-sell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}

/* --- Pricing page --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.pricing-card {
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 320ms var(--ease-brand), box-shadow 320ms var(--ease-brand);
  position: relative;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.pricing-card--featured {
  background: linear-gradient(180deg, #2A1235, #15071F);
  color: var(--nth-white);
  border-color: rgba(138,61,147,0.4);
}
.pricing-card--featured h3 { color: var(--nth-white); }
.pricing-card__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nth-orange);
}
.pricing-card__model {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--nth-cream);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--nth-ink);
  border-left: 3px solid var(--nth-orange);
}
.pricing-card--featured .pricing-card__model {
  background: rgba(255,255,255,0.06);
  color: var(--nth-white);
  border-left-color: var(--nth-orange-glow);
}
.pricing-card__bullets { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pricing-card__bullets li { display: flex; gap: 0.55rem; font-size: 0.9375rem; color: var(--nth-ink-muted); }
.pricing-card--featured .pricing-card__bullets li { color: rgba(255,255,255,0.75); }
.pricing-card__bullets li::before {
  content: ""; width: 16px; height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(25,135,84,0.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.pricing-card--featured .pricing-card__bullets li::before {
  background: rgba(138,61,147,0.18);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.pricing-card .btn { margin-top: auto; align-self: flex-start; }

/* --- About / Values --- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 2rem;
}
@media (max-width: 900px) { .about-intro { grid-template-columns: 1fr; } }
.about-prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--nth-ink-muted); margin-bottom: 1rem; max-width: 38rem; }
.about-prose p strong { color: var(--nth-ink); font-weight: 600; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  padding: 2rem;
  border-radius: var(--r-lg);
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  position: relative;
  transition: transform 320ms var(--ease-brand), border-color 320ms var(--ease-brand);
}
.value-card:hover { transform: translateY(-3px); border-color: var(--nth-orange); }
.value-card__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--nth-orange);
  margin-bottom: 0.5rem;
}
.value-card h3 { font-size: 1.5rem; margin-bottom: 0.85rem; letter-spacing: -0.015em; }
.value-card__short { color: var(--nth-ink); font-weight: 500; font-size: 1.0625rem; margin-bottom: 1rem; }
.value-card__practice { color: var(--nth-ink-muted); font-size: 0.9375rem; padding-top: 1rem; border-top: 1px dashed var(--nth-border); }
.value-card__practice strong { color: var(--nth-orange); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; font-weight: 600; }

/* Principles */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 800px) { .principles { grid-template-columns: 1fr; } }
.principle {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: var(--nth-cream);
  border: 1px solid var(--nth-border);
  position: relative;
}
.principle__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--nth-orange);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.principle h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.principle p { color: var(--nth-ink-muted); font-size: 0.9375rem; }

/* --- Security --- */
.security-pillar {
  padding: 1.75rem;
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  transition: border-color 320ms var(--ease-brand);
}
.security-pillar:hover { border-color: var(--nth-purple-glow); }
.security-pillar h3 { font-size: 1.125rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.security-pillar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.security-pillar li { color: var(--nth-ink-muted); font-size: 0.9375rem; display: grid; grid-template-columns: 16px 1fr; gap: 0.6rem; }
.security-pillar li::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 2px;
  margin-top: 9px;
  background: linear-gradient(135deg, var(--nth-orange), var(--nth-gold));
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--nth-cream);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1rem;
}
.contact-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.contact-card p { color: var(--nth-ink-muted); font-size: 0.9375rem; }
.contact-card a { color: var(--nth-orange); font-weight: 600; }

/* Form */
.form {
  background: var(--nth-white);
  padding: 2.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--nth-border);
  box-shadow: var(--sh-md);
}
.form__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.form__sub { color: var(--nth-ink-muted); margin-bottom: 1.75rem; font-size: 0.9375rem; }
.form__row { margin-bottom: 1.1rem; }
.form__row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form__row.two { grid-template-columns: 1fr; } }
.form__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nth-ink);
  margin-bottom: 0.4rem;
}
.form__label .req { color: var(--nth-orange); margin-left: 0.2rem; }
.form__input, .form__textarea, .form__select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--nth-border);
  border-radius: var(--r-md);
  background: var(--nth-white);
  color: var(--nth-ink);
  transition: border-color 200ms var(--ease-brand), box-shadow 200ms var(--ease-brand);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--nth-orange);
  box-shadow: 0 0 0 3px rgba(138,61,147,0.15);
}
.form__textarea { min-height: 7rem; resize: vertical; }
.form__check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.875rem; color: var(--nth-ink-muted); margin: 1rem 0 1.5rem; }
.form__check input { margin-top: 0.25rem; accent-color: var(--nth-orange); width: 16px; height: 16px; }
.form__error {
  font-size: 0.8125rem;
  color: var(--nth-danger);
  margin-top: 0.35rem;
  display: none;
}
.form__row.error .form__error { display: block; }
.form__row.error .form__input, .form__row.error .form__select, .form__row.error .form__textarea { border-color: var(--nth-danger); }

.form-success {
  background: linear-gradient(180deg, #2A1235, #15071F);
  color: var(--nth-white);
  padding: 3rem 2rem;
  border-radius: var(--r-lg);
  text-align: center;
  border: 1px solid rgba(138,61,147,0.4);
}
.form-success__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(138,61,147,0.18);
  color: var(--nth-orange-glow);
  display: grid; place-items: center;
  margin: 0 auto 1.5rem;
}
.form-success h3 { font-size: 1.5rem; margin-bottom: 0.6rem; color: var(--nth-white); }
.form-success p { color: rgba(255,255,255,0.7); max-width: 24rem; margin: 0 auto; }

/* --- Demo page (calendar embed look) --- */
.demo-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 960px) { .demo-layout { grid-template-columns: 1fr; } }

.cal {
  background: var(--nth-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--nth-border);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.cal__head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--nth-border); display: flex; align-items: center; gap: 0.75rem; }
.cal__head-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--nth-orange), var(--nth-gold)); display: grid; place-items: center; color: var(--nth-white); font-family: var(--font-display); font-weight: 800; }
.cal__head-org { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--nth-ink-muted); text-transform: uppercase; }
.cal__head-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.cal__body { display: grid; grid-template-columns: 1fr 280px; min-height: 26rem; }
@media (max-width: 800px) { .cal__body { grid-template-columns: 1fr; } }
.cal__meta { padding: 1.5rem; border-right: 1px solid var(--nth-border); background: var(--nth-cream); }
@media (max-width: 800px) { .cal__meta { border-right: none; border-bottom: 1px solid var(--nth-border); } }
.cal__meta-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center; color: var(--nth-ink-muted); font-size: 0.9375rem; }
.cal__meta-row strong { color: var(--nth-ink); }
.cal__cal { padding: 1.5rem; }
.cal__month-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cal__month-head h4 { font-size: 1rem; }
.cal__month-nav { display: flex; gap: 0.4rem; }
.cal__month-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--nth-border); background: var(--nth-white); display: grid; place-items: center; cursor: pointer; }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.cal__dow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--nth-ink-muted);
  text-align: center;
  text-transform: uppercase;
  padding: 0.4rem;
}
.cal__day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--nth-white);
  color: var(--nth-ink);
  transition: background 180ms var(--ease-brand), border-color 180ms var(--ease-brand);
  position: relative;
}
.cal__day.dim { color: var(--nth-border); cursor: default; }
.cal__day.avail { background: var(--nth-cream); }
.cal__day.avail:hover { background: rgba(138,61,147,0.1); border-color: var(--nth-orange); }
.cal__day.selected { background: var(--nth-orange); color: var(--nth-white); }
.cal__day.today { font-weight: 700; box-shadow: 0 0 0 1px var(--nth-purple); }

.cal__slots { padding: 1.5rem; border-top: 1px solid var(--nth-border); }
.cal__slots h5 { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nth-ink-muted); margin-bottom: 0.75rem; font-family: var(--font-mono); }
.cal__slot {
  display: block; width: 100%;
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--nth-ink);
  cursor: pointer;
  margin-bottom: 0.4rem;
  text-align: left;
  transition: border-color 180ms var(--ease-brand), background 180ms var(--ease-brand);
}
.cal__slot:hover { border-color: var(--nth-orange); background: rgba(138,61,147,0.04); }
.cal__slot.selected { background: var(--nth-orange); color: var(--nth-white); border-color: var(--nth-orange); }

/* --- Cal.com live embed ([nth_cal_embed]; see inc/demo.php) ---
   Wraps the Cal.com inline iframe (or the placeholder when no link is set) in
   the same white card chrome as the .cal mock above so the page looks finished
   whether or not the booking link is configured. */
.nth-cal-embed-wrap {
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  /* Hold the card height before Cal.com's iframe reports its own size, so the
     layout doesn't jump on load. */
  min-height: 34rem;
}
.nth-cal-embed { width: 100%; }
/* Cal.com injects the iframe and drives its height via postMessage. The
   !important on width overrides Cal's own inline style, which otherwise sets a
   fixed px width that can overflow the card; we leave height to Cal. */
.nth-cal-embed iframe { width: 100% !important; border: 0; display: block; }
.nth-cal-embed-wrap noscript p { padding: 2rem; margin: 0; text-align: center; color: var(--nth-ink-muted); }
.nth-cal-embed-wrap noscript a { color: var(--nth-orange); font-weight: 600; }

/* Friendly fallback shown until the Cal link is wired in. */
.nth-cal-placeholder {
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--nth-ink-muted);
}
.nth-cal-placeholder p { margin: 0 0 0.75rem; }
.nth-cal-placeholder p:last-child { margin-bottom: 0; }
.nth-cal-placeholder a { color: var(--nth-orange); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* --nth-orange-dark clears 4.5:1 on white; the --orange-glow used elsewhere does not. */
.nth-cal-placeholder a:hover { color: var(--nth-orange-dark); }
.nth-cal-embed-wrap noscript a:focus-visible,
.nth-cal-placeholder a:focus-visible {
  outline: 2px solid var(--nth-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Resources --- */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}
.resource-card {
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease-brand), box-shadow 320ms var(--ease-brand);
}
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.resource-card__cover { aspect-ratio: 16/9; }
.resource-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.resource-card__meta { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--nth-orange); }
.resource-card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.resource-card__sum { color: var(--nth-ink-muted); font-size: 0.9375rem; flex: 1; }
.resource-card__cta { color: var(--nth-orange); font-weight: 600; font-size: 0.9375rem; margin-top: 0.5rem; }

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--nth-cream);
  border-radius: var(--r-lg);
  border: 1px dashed var(--nth-border);
  max-width: 36rem;
  margin: 2rem auto;
}
.empty-state h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.empty-state p { color: var(--nth-ink-muted); }

/* Legal */
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } }
.legal-sidebar {
  position: sticky;
  top: 6rem;
  font-size: 0.875rem;
}
/* When the layout stacks, the sidebar sits in its own (short) row; sticky would
   let it detach and float over the prose below it. Pin it back into flow. This
   must come AFTER the base rule above — media queries add no specificity, so
   source order decides the winner. */
@media (max-width: 900px) {
  .legal-sidebar { position: static; margin-bottom: 2.5rem; }
}
.legal-sidebar h5 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nth-ink-muted); margin-bottom: 0.75rem; }
.legal-sidebar a { display: block; padding: 0.4rem 0; color: var(--nth-ink-muted); border-left: 2px solid transparent; padding-left: 0.85rem; margin-left: -0.85rem; transition: color 180ms var(--ease-brand), border-color 180ms var(--ease-brand); }
.legal-sidebar a:hover, .legal-sidebar a.active { color: var(--nth-orange); border-color: var(--nth-orange); }
.legal-prose { max-width: 44rem; }
.legal-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.85rem; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { color: var(--nth-ink-muted); margin-bottom: 1rem; font-size: 1rem; line-height: 1.7; }
.legal-prose ul { padding-left: 1.25rem; color: var(--nth-ink-muted); margin-bottom: 1rem; }

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.9rem;
  background: rgba(138,61,147,0.1);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--nth-orange);
  margin-bottom: 1.5rem;
}


/* Footer CE certificate card */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.site-footer__brand .nth-wordmark { height: 30px; }
.site-footer__strap {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.78);
  max-width: 26rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.site-footer__certs {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.site-footer__cyber {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.9rem 0.9rem 0.9rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  transition: background 240ms var(--ease-brand), border-color 240ms var(--ease-brand), transform 240ms var(--ease-brand);
}
.site-footer__cyber:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(232,71,23,0.32);
  transform: translateY(-1px);
}
.site-footer__cyber-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 11rem;
}
.site-footer__cyber-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--nth-white);
  letter-spacing: -0.005em;
}
.site-footer__cyber-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.site-footer__cyber-frame {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.5rem;
}
.site-footer__cyber-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cyber { justify-self: start; }
}

/* Aikido card — same shell as Cyber, different inner */
.site-footer__aikido-frame {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.5rem;
}
.site-footer__aikido-frame img {
  display: block;
  max-width: 100%;
  height: 40px;
  width: auto;
}

.security-cyber {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
}
@media (max-width: 720px) {
  .security-cyber { grid-template-columns: 1fr; text-align: center; }
  .security-cyber__badge { margin: 0 auto; }
}




/* ─── Independently verified — certification cards (security page) ─── */
.security-certs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .security-certs { grid-template-columns: 1fr; }
}

.cert-card {
  position: relative;
  background: var(--nth-white);
  border: 1px solid var(--nth-border);
  border-radius: var(--r-lg);
  color: var(--nth-ink);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 1.5rem;
  align-items: center;
  text-decoration: none;
  transition: transform 280ms var(--ease-brand),
              border-color 280ms var(--ease-brand),
              box-shadow 280ms var(--ease-brand);
}
.cert-card:hover {
  transform: translateY(-2px);
  border-color: rgba(138,61,147,0.32);
  box-shadow: var(--sh-md);
}

.cert-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.cert-card__body .eyebrow { margin: 0; }
.cert-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.15rem 0 0.4rem;
  color: var(--nth-ink);
}
.cert-card__body p {
  color: var(--nth-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.cert-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nth-warm-text);
}
.cert-card__arrow { transition: transform 240ms var(--ease-brand); }
/* Hover feedback comes from the arrow translation and card lift — a colour
   step up to --nth-warm would drop the CTA below 4.5:1 on the white card. */
.cert-card:hover .cert-card__arrow { transform: translate(3px, -3px); }

.cert-card__visual {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cert-card__badge {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.cert-card__badge--img {
  width: 96px;
  height: 96px;
}
.cert-card__badge--img img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .cert-card {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 1.5rem;
  }
  .cert-card__visual { justify-self: start; }
}


/* Cert section — tighter vertical rhythm */
.security-certs-section { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.security-certs-section .section-head { margin-bottom: var(--sp-2); }

.cert-card__visual,
.cert-card__badge {
  position: relative;
  overflow: hidden;
}