/* main.css */
/* AgentRidge × Framer aesthetic
   Adapted from https://www.framer.com/ · black canvas, white pills, stacked hero, glowing product frames
*/

:root {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --bg-card: #111111;
  --bg-soft: #1a1a1a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --mute: rgba(255, 255, 255, 0.62);
  --soft: rgba(255, 255, 255, 0.4);
  --white: #ffffff;
  --black: #000000;
  --glow: rgba(80, 140, 255, 0.45);
  --glow-soft: rgba(90, 150, 255, 0.22);
  --ok: #3dd68c;
  --warn: #e8c547;
  --danger: #ff6b6b;
  --link: #8eb6ff;

  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: min(1120px, calc(100% - 48px));
  --container-wide: min(1280px, calc(100% - 40px));
  --header-h: 64px;
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mute);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: rgba(255,255,255,0.2); color: var(--white); }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.container { width: var(--container); margin-inline: auto; }
.container-wide { width: var(--container-wide); margin-inline: auto; }

/* Header (Framer: logo | Log in | Sign up pill | hamburger) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
.site-header .inner {
  width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  flex-shrink: 0;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.brand-name {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.brand-name .a, .brand-name .r { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.lang-link {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--soft);
  padding: 0.35rem 0.25rem;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.lang-link:hover {
  opacity: 1;
  color: var(--text);
}
.header-actions .link-quiet {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.4rem 0.55rem;
  opacity: 0.85;
}
.header-actions .link-quiet:hover { opacity: 1; }

.menu-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text);
  position: relative;
  z-index: 260;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin: 3.5px 0;
  border-radius: 1px;
}
.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(2.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-2.5px) rotate(-45deg);
}
.menu-toggle span {
  transition: transform 0.2s var(--ease);
}

.nav {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 12px;
  left: auto;
  width: min(360px, calc(100vw - 24px));
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 250;
}
.nav.open { display: flex; }
.nav a {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  color: var(--mute);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav a:hover, .nav a[aria-current="page"] {
  background: var(--bg-soft);
  color: var(--text);
}
.nav a.btn {
  color: inherit;
}
.nav a.btn-primary {
  background: var(--white);
  color: var(--black);
}
.nav a.btn-primary:hover {
  background: #f0f0f0;
  color: var(--black);
}
.nav a.btn-ghost {
  color: var(--text);
}
.nav a.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.nav-cta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

/* Buttons Framer */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.55rem 1.15rem;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  transition: transform 0.15s var(--ease), opacity 0.15s, background 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: scale(1.02); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.btn-primary {
  background: var(--white);
  color: var(--black);
}
.btn-primary:hover { background: #f0f0f0; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); }
.btn-soft {
  background: var(--bg-soft);
  color: var(--text);
}
.btn-block { width: 100%; border-radius: 12px; }
.btn-sm { min-height: 34px; padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.btn[disabled], .btn.is-loading { opacity: 0.45; pointer-events: none; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--soft);
  margin-bottom: 1rem;
}

/* Hero Framer stack */
.hero {
  padding: 72px 0 32px;
}
.hero-copy {
  max-width: 640px;
  margin-bottom: 48px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 1.35rem;
  color: var(--text);
}
.hero-lead {
  font-size: 1.125rem;
  color: var(--mute);
  max-width: 42ch;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: var(--soft);
}
.hero-meta strong { color: var(--text); font-weight: 600; }

.hero-visual {
  margin-top: 8px;
}
.shot-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0c0c0c;
  border: 1px solid rgba(120, 170, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(80, 140, 255, 0.12),
    0 0 60px var(--glow-soft),
    0 40px 100px rgba(0, 0, 0, 0.65);
}
.shot-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}
.shot-chrome i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.shot-chrome span {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  color: var(--soft);
  font-family: var(--font-mono);
}
.shot-frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  background: #080808;
}

.video-frame {
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.video-frame .yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #080808;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  background: #080808;
}
.yt-play img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.yt-play-btn {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease);
}
.yt-play:hover .yt-play-btn,
.yt-play:focus-visible .yt-play-btn {
  transform: scale(1.06);
}
.yt-play-btn::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--black);
}
.yt-play:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -2px;
}

/* Sections */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  margin-bottom: 1rem;
}
.section-head p {
  font-size: 1.1rem;
  color: var(--mute);
  max-width: 48ch;
}

.arch-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.arch-card {
  padding: 28px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.arch-card .n {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--soft);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.arch-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.arch-card p { font-size: 0.95rem; color: var(--mute); }

.feature-row {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  margin-bottom: 12px;
}
.feature-copy p { margin-bottom: 16px; }
.feature-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--mute);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.price-card {
  padding: 32px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-card.featured {
  border-color: rgba(255,255,255,0.28);
  background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
  box-shadow: 0 0 40px var(--glow-soft);
  position: relative;
}
.price-card.featured::before {
  content: "Recommandé";
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-card h3 { font-size: 1.25rem; font-weight: 500; }
.price-amount {
  font-size: 2.75rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.price-amount small {
  font-size: 1rem;
  color: var(--mute);
  font-weight: 500;
}
.price-card ul { flex: 1; }
.price-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--mute);
}
.price-card li:last-child { border-bottom: none; }

.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td {
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.specs th {
  width: 34%;
  color: var(--soft);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.specs td { color: var(--text); }

.dl-section-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
.dl-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dl-cards-one {
  grid-template-columns: 1fr;
  max-width: 28rem;
}
.dl-card {
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.dl-card h3 { margin-bottom: 6px; font-weight: 500; }
.dl-card p { font-size: 0.9rem; margin-bottom: 12px; }
.dl-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--soft);
  margin-bottom: 16px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120, 170, 255, 0.28);
  background: #0c0c0c;
  box-shadow:
    0 0 0 1px rgba(80, 140, 255, 0.1),
    0 0 50px var(--glow-soft),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.gallery-item:hover {
  border-color: rgba(140, 180, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(80, 140, 255, 0.2),
    0 0 70px var(--glow),
    0 28px 70px rgba(0, 0, 0, 0.6);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: #080808;
}
.gallery-item figcaption {
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--mute);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.gallery-item figcaption strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}
.gallery-item figcaption span {
  display: block;
  color: var(--mute);
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.gallery-filters button {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--mute);
  font-size: 0.85rem;
  font-weight: 600;
}
.gallery-filters button.active,
.gallery-filters button:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.case-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 8px 12px;
  border-radius: var(--pill);
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--mute);
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 8px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  font-weight: 500;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  float: right;
  color: var(--soft);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  padding: 0 20px 18px;
  font-size: 0.95rem;
}

.pdf-viewer {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a0a;
  min-height: min(78vh, 920px);
}
.pdf-frame {
  display: block;
  width: 100%;
  height: min(78vh, 920px);
  border: 0;
  background: #111;
}
.pdf-fallback {
  margin: 0;
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--soft);
  background: #0a0a0a;
  border-top: 1px solid var(--line);
}
.pdf-fallback a { text-decoration: underline; }
.pdf-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--soft);
  font-family: var(--font-mono);
}

.cta-band {
  text-align: left;
  padding: 48px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.cta-band h2 {
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
}
.cta-band p { margin-bottom: 24px; max-width: 40rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.page-hero { padding: 72px 0 24px; }
.page-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 500;
  margin-bottom: 14px;
}
.page-hero p { max-width: 48ch; font-size: 1.1rem; }

.panel-box {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  margin-bottom: 12px;
}
.panel-box h2 { font-size: 1.1rem; font-weight: 500; margin-bottom: 8px; }
.panel-box p { font-size: 0.92rem; margin-bottom: 12px; }

/* Footer */
.site-footer {
  margin-top: 48px;
  padding: 64px 0 32px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 0.9rem; margin-top: 14px; max-width: 32ch; color: var(--mute); }
.footer-col h4 {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--soft);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--mute);
  font-size: 0.9rem;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--soft);
}

/* Auth */
.auth-shell, .app-login {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 48px 16px;
  background: var(--bg);
}
.app-login { min-height: 100vh; }
.auth-wrap {
  width: min(420px, 100%);
}
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.auth-card {
  width: 100%;
  padding: 28px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 60px var(--glow-soft);
}
.auth-card h1 {
  font-size: 1.65rem;
  font-weight: 500;
  margin: 12px 0 8px;
}
.auth-card .sub { font-size: 0.9rem; margin-bottom: 20px; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: 12px;
}
.auth-tab {
  min-height: 40px;
  border-radius: 10px;
  color: var(--mute);
  font-weight: 600;
  font-size: 0.88rem;
}
.auth-tab.active {
  background: var(--white);
  color: var(--black);
}
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
}
.field input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.field input::placeholder { color: rgba(255,255,255,0.38); }
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8rem;
  margin: 14px 0 18px;
  color: var(--mute);
}
.check input {
  margin-top: 2px;
  accent-color: var(--white);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.check a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.check a:hover { opacity: 0.85; }
#panel-signup .btn-block,
#panel-signin .btn-block {
  margin-top: 4px;
}
.auth-msg {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  display: none;
}
.auth-msg.show { display: block; }
.auth-msg.error {
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.35);
  color: #ffb4b4;
}
.auth-msg.ok {
  background: rgba(61,214,140,0.1);
  border: 1px solid rgba(61,214,140,0.3);
  color: #9aecc0;
}
.auth-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
}
.app-login-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--soft);
}
.app-login-foot a { color: var(--text); font-weight: 600; }

/* Dashboard app (dark Framer) */
body.app-shell { background: var(--bg); color: var(--mute); }
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.app-side {
  background: var(--bg-elevated);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-side .brand-sub {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 0 8px;
  margin-top: -12px;
}
.app-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--mute);
  font-size: 0.9rem;
  font-weight: 500;
}
.app-nav a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.app-nav a.active {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--line);
}
.app-user {
  margin-top: auto;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.app-user .email {
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
  margin-bottom: 4px;
  font-weight: 600;
}
.app-user .tier {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--link);
}
.app-user .tier.trial { color: var(--warn); }

.app-main {
  background: var(--bg);
  padding: 28px 28px 48px;
  min-width: 0;
}
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.app-topbar h1 { font-size: 1.5rem; font-weight: 500; }
.app-topbar .hint { font-size: 0.9rem; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.metric {
  padding: 18px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.metric .label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 8px;
}
.metric .value {
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.03em;
}
.metric .hint { font-size: 0.8rem; margin-top: 4px; }

.status-box {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(232, 197, 71, 0.35);
  background: rgba(232, 197, 71, 0.08);
  color: var(--warn);
  font-size: 0.88rem;
  margin-bottom: 16px;
  font-weight: 500;
}
.status-box.pro {
  border-color: rgba(142, 182, 255, 0.35);
  background: rgba(142, 182, 255, 0.08);
  color: var(--link);
}

.usage-chart {
  height: 160px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.usage-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.usage-note {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ok);
  font-weight: 600;
}

.legal { max-width: 760px; padding: 48px 0 80px; }
.legal h1 { margin-bottom: 12px; font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.legal .legal-updated { font-size: 0.85rem; color: var(--soft); margin-bottom: 28px; }
.legal h2 { font-size: 1.2rem; margin: 32px 0 12px; font-weight: 500; color: var(--text); }
.legal h3 { font-size: 1rem; margin: 20px 0 8px; font-weight: 600; color: var(--text); }
.legal p, .legal li { margin-bottom: 12px; font-size: 0.95rem; line-height: 1.65; color: var(--mute); }
.legal ul, .legal ol { list-style: disc; padding-left: 1.25rem; margin-bottom: 12px; }
.legal ol { list-style: decimal; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal .legal-box {
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
}
.legal .legal-box p:last-child { margin-bottom: 0; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
/* Above-the-fold always visible (Framer-like instant paint) */
.hero .reveal,
.page-hero.reveal,
.page-hero .reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .arch-grid, .price-grid, .dl-cards, .gallery, .metric-grid, .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .app { grid-template-columns: 1fr; }
  .app-side {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .app-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .app-user { margin-top: 0; width: 100%; }
}
@media (max-width: 820px) {
  .arch-grid, .price-grid, .dl-cards, .gallery, .metric-grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: 48px; }
  .cta-band { padding: 32px 24px; }
  .feature-row { gap: 24px; margin-bottom: 48px; }
}
@media (min-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr 1.2fr;
  }
  .feature-row.reverse {
    grid-template-columns: 1.2fr 1fr;
  }
  .feature-row.reverse .feature-copy { order: 2; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 16px;
  pointer-events: none;
}
.cookie-banner-inner {
  pointer-events: auto;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: rgba(12, 12, 14, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
.cookie-banner-text {
  margin: 0;
  flex: 1 1 280px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--soft);
}
.cookie-banner-text a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
html.has-cookie-banner body {
  padding-bottom: 110px;
}
@media (max-width: 640px) {
  .cookie-banner-inner { padding: 14px 16px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* penligent.css */
/* AgentRidge marketing · Penligent-inspired light theme + product demo */
@font-face { font-family: Inter; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body.penli-site {
  --penli-bg: #f7f7f8;
  --penli-bg-alt: #ffffff;
  --penli-text: #09090b;
  --penli-muted: #52525b;
  --penli-soft: #71717a;
  --penli-line: #e4e4e7;
  --penli-line-strong: #d4d4d8;
  --penli-accent: #18181b;
  --penli-accent-hover: #27272a;
  --penli-card: #ffffff;
  --penli-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --penli-shadow-lg:
    0 4px 6px rgba(0, 0, 0, 0.04), 0 24px 48px rgba(0, 0, 0, 0.08);
  --penli-radius: 12px;
  --penli-radius-lg: 20px;
  --penli-max: 1200px;
  --penli-header: 64px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--penli-text);
  background: var(--penli-bg);
}

.penli-site h1,
.penli-site h2,
.penli-site h3,
.penli-site h4 {
  color: var(--penli-text);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.penli-site ::selection {
  background: rgba(24, 24, 27, 0.12);
}

/* Header : clone structure Penligent (logo | nav centrée | Sign in + Download) */
.penli-site .site-header {
  position: sticky;
  top: 0;
  z-index: 1001;
  height: 64px;
  background: #f7f7f4;
  backdrop-filter: blur(16px);
  border-bottom: none;
}

.penli-site .site-header .inner {
  width: min(85%, calc(100% - 32px));
  max-width: none;
  height: 64px;
  margin-inline: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.penli-site .site-header .brand {
  order: 1;
  flex-shrink: 0;
}

.penli-site .brand img {
  width: 32px;
  height: 32px;
  max-width: none;
  border-radius: 8px;
}

.penli-site .brand-name {
  color: #18181b;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

.penli-site .site-header .nav {
  order: 2;
  flex: 1 1 auto;
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: none;
}

.penli-site .site-header .nav > a {
  color: #3f3f46;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  padding: 8px 16px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s;
}

.penli-site .site-header .nav > a:hover,
.penli-site .site-header .nav > a[aria-current="page"] {
  color: #18181b;
  background: rgba(0, 0, 0, 0.045);
}

.penli-site .header-actions {
  order: 3;
  margin-left: 0;
  gap: 8px;
  flex-shrink: 0;
}

.penli-signin,
.penli-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* Spécificité > `.nav a { color: var(--mute) }` (mute remappé en gris foncé
   sur le thème clair) — sinon « Télécharger » devient noir sur noir en menu mobile. */
.penli-site a.penli-signin {
  background: #f7f7f4;
  color: #111827;
  border: 1px solid #d0ceca;
}

.penli-site a.penli-signin:hover {
  background: #e5e5e5;
  color: #111827;
}

.penli-site a.penli-download {
  background: #26251e;
  color: #fff;
  border: 1px solid #26251e;
}

.penli-site a.penli-download:hover {
  background: #1e1d18;
  color: #fff;
}

.penli-site .lang-link {
  color: #52525b;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0 6px;
}

.penli-site .menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: 9999px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.penli-site .menu-toggle:hover {
  background: #f4f4f5;
}

.penli-site .menu-toggle span {
  display: block;
  width: 16px;
  height: 1.75px;
  margin: 0;
  border-radius: 2px;
  background: #18181b;
  transition:
    transform 0.22s ease,
    opacity 0.16s ease;
}

.penli-site .menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.75px) rotate(45deg);
}

.penli-site .menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.penli-site .menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.75px) rotate(-45deg);
}

.penli-site .nav-cta {
  display: none;
}

@media (max-width: 1079px) {
  .penli-site .site-header .inner {
    width: calc(100% - 24px);
  }
  .penli-site .header-actions .penli-signin,
  .penli-site .header-actions .penli-download {
    display: none;
  }
  /* Le sélecteur de langue reste atteignable : sans lui, aucun moyen de passer
     en EN sur mobile puisque le pied de page n'en propose pas. */
  .penli-site .header-actions .lang-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 6px;
    font-size: 13px;
  }
  /* Menu plein écran : le panneau occupe tout le viewport sous le header, qui
     reste visible pour garder le bouton de fermeture atteignable.
     `backdrop-filter` sur le header en fait le bloc conteneur des enfants
     `fixed` : impossible de s'appuyer sur `bottom: 0`, la hauteur est calculée
     depuis le viewport. */
  .penli-site .site-header .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    /* main.css cale `.nav` sur un tiroir de 360px : sans cet override, les
       insets gauche/droite ne pilotent pas la largeur. */
    width: auto;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--penli-bg);
    border: none;
    border-radius: 0;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    transform: translateY(-8px);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s;
  }
  .penli-site .site-header .nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .penli-site .site-header .nav > a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 8px;
    border-radius: 0;
    border-bottom: 1px solid var(--penli-line);
    font-size: 17px;
    font-weight: 500;
    text-align: left;
  }
  .penli-site .nav-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    border-top: none;
  }
  .penli-site .nav-cta .penli-signin,
  .penli-site .nav-cta .penli-download {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }
  .penli-site .nav-cta a.penli-download {
    color: #fff;
  }
  .penli-site .nav-cta a.penli-signin {
    color: #111827;
  }
}

/* Menu ouvert : on bloque le défilement du fond (body est le conteneur de scroll) */
html.nav-open body.penli-site {
  overflow: hidden;
}

@media (min-width: 1080px) {
  .penli-site .menu-toggle {
    display: none;
  }
}

/* L'inner du header ne fait que 85% du viewport : entre 1080 et 1200 px, la barre
   complète (marque + 5 liens + Connexion + Télécharger) ne tient qu'avec un
   padding horizontal resserré. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .penli-site .site-header .nav {
    gap: 2px;
  }

  .penli-site .site-header .nav > a {
    padding: 8px 10px;
  }
}

/* Footer Penligent-style */
.penli-site .site-footer,
.penli-footer {
  background: #f2f1ed;
  border-top: none;
  color: #4b5563;
  padding: 48px 0 32px;
}

.penli-footer-inner {
  width: min(1232px, calc(100% - 48px));
  margin-inline: auto;
}

/* Référence Penligent : bloc marque, 4 colonnes de liens (gap 32px), puis le
   sélecteur de langue calé à droite en bas de la rangée. */
.penli-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 126px)) 1fr;
  gap: 32px;
}

.penli-footer-brand a {
  color: #374151;
  font-size: 16px;
}

.penli-footer-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: end;
  gap: 12px;
}

.penli-footer-lang-label {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

.penli-footer-lang .lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: transparent;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.penli-footer-lang .lang-link:hover {
  border-color: #9ca3af;
  color: #111827;
}

.penli-site .site-footer h4 {
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.penli-site .site-footer .footer-col a {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  padding: 5px 0;
}

.penli-site .site-footer a:hover {
  color: #111827;
}

.penli-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.penli-disclaimer {
  margin: 0;
  padding: 0;
  max-width: 1006px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

.penli-footer-copy {
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 900px) {
  .penli-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .penli-footer-lang {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Layout */
.penli-main {
  overflow-x: clip;
}

.penli-wrap {
  max-width: var(--penli-max);
  width: calc(100% - 32px);
  margin-inline: auto;
}

.penli-section {
  padding: 80px 0;
}

.penli-section--tight {
  padding: 48px 0;
}

.penli-section--hero {
  padding: 40px 0 0;
  text-align: center;
}

/* Hero : tailles Penligent (text-xl → lg:text-4xl) */
.penli-hero-copy {
  width: min(720px, calc(100% - 32px));
  margin: 40px auto 0;
}

.penli-hero h1 {
  font-size: clamp(1.25rem, 3.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: #111827;
  max-width: none;
  margin: 0;
}

.penli-type {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  color: #1f2937;
  margin: 16px 0 28px;
  min-height: 1.45em;
}

.penli-shimmer {
  background: linear-gradient(90deg, #a78bfa, #f9a8d4, #a78bfa);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: penli-shimmer 3.2s linear infinite;
}

@keyframes penli-shimmer {
  to {
    background-position: 200% center;
  }
}

.penli-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.penli-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.penli-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.penli-btn--primary {
  background: #26251e;
  color: #fafafa;
}

.penli-btn--primary:hover {
  background: #1e1d18;
}

.penli-btn--ghost {
  background: #fff;
  color: var(--penli-text);
  border: 1px solid var(--penli-line-strong);
}

.penli-btn--ghost:hover {
  border-color: var(--penli-muted);
}

.penli-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

/* Les quatre badges demandent plus de large que la colonne de texte pour tenir
   sur une seule ligne : on sort de la colonne en restant centré sur la page. */
@media (min-width: 800px) {
  .penli-badges {
    position: relative;
    left: 50%;
    width: min(880px, 100vw - 32px);
    transform: translateX(-50%);
  }
}

.penli-badge--cert {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 8px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  transition: background-color 0.15s ease;
}

.penli-badge--cert:hover {
  background: rgba(243, 244, 246, 0.8);
}

.penli-badge--cert img {
  width: 32px;
  height: 32px;
  max-width: none;
}

.penli-badge--cert span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.penli-badge--cert strong {
  font-weight: 500;
  font-size: 14px;
  color: #111827;
}

.penli-badge--cert em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: #00c896;
  padding: 2px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Sur mobile, les quatre badges tiennent en grille 2×2 au lieu de quatre lignes */
@media (max-width: 640px) {
  .penli-badges {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    /* start (et non center) : les icônes des deux lignes s'alignent en colonnes,
       sinon chaque badge se centre dans sa cellule et les bords gauches sont décalés */
    justify-items: start;
    align-items: center;
    gap: 4px 8px;
  }

  .penli-badge--cert {
    height: 30px;
    font-size: 12px;
    gap: 5px;
  }

  .penli-badge--cert img {
    width: 22px;
    height: 22px;
  }

  .penli-badge--cert span {
    gap: 5px;
  }

  .penli-badge--cert strong {
    font-size: 12px;
  }

  .penli-badge--cert em {
    font-size: 10px;
    padding: 2px 7px;
  }
}

.penli-demo-stage {
  position: relative;
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 28px 16px 56px;
}

.penli-demo-stage::before {
  content: "";
  position: absolute;
  inset: 0 4% 8%;
  border-radius: 48px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, #b2dffc 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 18% 78%, #c47ba8 0%, transparent 52%),
    linear-gradient(180deg, #dbeafe 0%, #f7f7f8 78%);
  filter: blur(36px);
  opacity: 0.85;
  z-index: 0;
}

.penli-demo-stage > [data-ridge-demo-root] {
  position: relative;
  z-index: 1;
}

.penli-desktop-only {
  display: block;
}

.penli-mobile-only {
  display: none;
}

.penli-mobile-video {
  max-width: min(940px, calc(100% - 24px));
  margin: 0 auto 12px;
}

/* Stacked headline sections (Penligent scroll sections) */
/* Sections alternées texte / visuel · relevé penligent.ai : bloc beige
   #F2F1ED, largeur 85 %, radius 8px, padding 24px, colonne média flex 1.5
   (padding 64px, ratio 16/11) et colonne texte flex 1 alignée en alternance. */
.penli-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 85%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 24px;
  background: #f2f1ed;
  border: none;
  border-radius: 8px;
  text-align: left;
}

.penli-stack--flip {
  flex-direction: row-reverse;
}

.penli-stack-media {
  flex: 1.5 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  padding: 64px;
  border-radius: 8px;
  overflow: hidden;
}

.penli-stack-media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transform: scale(0.9);
  transition: transform 0.5s ease-in-out;
}

.penli-stack-media img:hover {
  transform: scale(1);
}

.penli-stack-copy {
  flex: 1 1 0%;
}

.penli-stack--flip .penli-stack-copy {
  text-align: right;
}

.penli-stack h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
  color: #09090b;
  max-width: none;
  margin: 0 0 16px;
}

.penli-stack-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--penli-muted);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

.penli-stack-link:hover {
  color: var(--penli-text);
}

@media (max-width: 860px) {
  .penli-stack,
  .penli-stack--flip {
    flex-direction: column;
    text-align: center;
  }
  .penli-stack-media {
    width: 100%;
    aspect-ratio: auto;
    padding: 8px 0 24px;
  }
  .penli-stack-media img {
    transform: none;
  }
  .penli-stack--flip .penli-stack-copy {
    text-align: center;
  }
}

/* Tools marquee · valeurs relevées sur penligent.ai : titre 36/700, sous-titre
   18px, logos 100x100 sans cadre, écart 24px, défilement 30s. */
.penli-tools {
  padding: 96px 16px 0;
  text-align: center;
  background: transparent;
  border: none;
}

.penli-tools h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.11;
  color: #111827;
  margin-bottom: 16px;
}

.penli-tools-lead {
  color: #4b5563;
  max-width: none;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.55;
}

.penli-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}

.penli-tool img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.penli-tools-marquee {
  overflow: hidden;
}

.penli-tools-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: penli-marquee 30s linear infinite;
}

.penli-tools-track .penli-tool {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

/* La piste contient deux séries identiques de 12 logos : la moitié de sa
   largeur tombe au milieu d'un écart, d'où le demi-gap ajouté pour une
   boucle sans saut. */
@keyframes penli-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .penli-tools-track {
    animation: none;
  }
}

/* Benefits grid · cartes « liquid glass » de penligent.ai : fond teinté 25 %,
   flou 3px, liseré blanc et double ombre portée. */
.penli-benefits {
  padding: 96px 16px;
}

.penli-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1152px;
  margin: 0 auto;
}

.penli-benefit {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: rgba(247, 247, 244, 0.25);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Reflet supérieur (40 % de la hauteur, opacité 60 %) */
.penli-benefit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

.penli-benefit-head {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.penli-benefit-ico {
  flex-shrink: 0;
  display: block;
  width: 32px;
  height: 32px;
  color: #1f2937;
}

.penli-benefit-ico svg {
  display: block;
  width: 32px;
  height: 32px;
}

.penli-benefit h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.025em;
  color: #111827;
  margin: 0;
}

.penli-benefit p {
  position: relative;
  padding: 0 24px 24px;
  color: #4b5563;
  font-size: 14px;
  line-height: 20px;
}

/* Testimonials */
/* CTA band */
.penli-cta {
  text-align: center;
  padding: 80px 16px;
}

.penli-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 12px;
}

.penli-cta p {
  color: var(--penli-muted);
  margin-bottom: 24px;
}

/* Inner pages */
.penli-page-hero {
  padding: 64px 16px 32px;
  text-align: center;
  border-bottom: 1px solid var(--penli-line);
}

.penli-page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 12px;
}

.penli-page-hero p {
  color: var(--penli-muted);
  max-width: 640px;
  margin: 0 auto;
}

.penli-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 16px 80px;
}

.penli-content--wide {
  max-width: 1120px;
}

.penli-content h2 {
  font-size: 1.35rem;
  margin: 32px 0 12px;
}

.penli-content p,
.penli-content li {
  color: var(--penli-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}

.penli-content ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 16px;
}

.penli-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.penli-card {
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius);
  padding: 24px;
}

.penli-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.penli-price-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 8px;
}

.penli-price-section-head h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.penli-price-section-head p {
  color: var(--penli-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.penli-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 32px auto;
}

.penli-price-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}

.penli-price-card {
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius-lg);
  padding: 32px;
  box-shadow: var(--penli-shadow);
  display: flex;
  flex-direction: column;
}

.penli-price-card .penli-btn {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}

.penli-price-card.featured {
  border-color: var(--penli-accent);
  box-shadow: var(--penli-shadow-lg);
}

.penli-price-amount {
  font-size: 2rem;
  font-weight: 600;
  margin: 12px 0 20px;
}

.penli-price-amount small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--penli-muted);
}

.penli-contact-band {
  text-align: center;
  max-width: 560px;
  margin: 8px auto 48px;
  padding: 28px 24px;
  background: #f2f1ed;
  border-radius: var(--penli-radius-lg);
}

.penli-contact-band p {
  color: var(--penli-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.penli-faq details {
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius);
  padding: 16px 20px;
  margin-bottom: 10px;
}

.penli-faq summary {
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.penli-faq summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 1100px) {
  .penli-price-grid--3 {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

@media (max-width: 900px) {
  .penli-benefits-grid {
    grid-template-columns: 1fr;
  }
  .penli-price-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  .penli-desktop-only {
    display: none;
  }
  .penli-mobile-only {
    display: block;
  }
  .penli-section--hero {
    padding: 28px 0 8px;
  }
  .penli-stack {
    width: calc(100% - 32px);
  }
}

/* Ridge product demo (logiciel IA Workspace) */
.ridge-demo {
  position: relative;
  height: min(720px, 78vh);
  background: #0a0609;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(16, 10, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  color: #f2eef1;
  font-family: Inter, "IBM Plex Sans", sans-serif;
  font-size: 13px;
}

.rd-chrome {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  pointer-events: none;
}

.rd-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.rd-chrome span:nth-child(1) {
  background: #ff5f57;
}
.rd-chrome span:nth-child(2) {
  background: #febc2e;
}
.rd-chrome span:nth-child(3) {
  background: #28c840;
}

.rd-workspace {
  position: relative;
  display: flex;
  height: 100%;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% -10%,
      rgba(178, 223, 252, 0.14),
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 40% at 0% 100%,
      rgba(77, 26, 67, 0.35),
      transparent 50%
    ),
    linear-gradient(180deg, #0a0609 0%, #120a10 100%);
}

.rd-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(178, 223, 252, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 223, 252, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
  opacity: 0.4;
}

.rd-sidebar {
  position: relative;
  z-index: 2;
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(58, 42, 53, 0.5);
  background: rgba(18, 10, 16, 0.5);
  backdrop-filter: blur(12px);
  padding-top: 28px;
}

.rd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 24px;
}

.rd-brand img {
  width: 40px;
  height: 40px;
  max-width: none;
  border-radius: 9px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
}

.rd-wordmark {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: #f2eef1;
}

.rd-wordmark span {
  color: #c47ba8;
}

.rd-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(168, 152, 165, 0.6);
}

.rd-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  flex: 1;
}

.rd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  color: #a898a5;
  font-size: 14px;
}

.rd-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #d4c8d0;
}

.rd-nav-item.is-active {
  background: rgba(142, 207, 245, 0.15);
  color: #f2eef1;
  box-shadow: inset 0 0 0 1px rgba(142, 207, 245, 0.3);
}

.rd-nav-ico {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.rd-nav-ico svg {
  width: 16px;
  height: 16px;
}

.rd-nav-label {
  flex: 1;
}

.rd-nav-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #a898a5;
}

.rd-license {
  margin-top: auto;
  border-top: 1px solid rgba(58, 42, 53, 0.4);
  padding: 16px;
  font-size: 10px;
  line-height: 1.55;
  color: rgba(168, 152, 165, 0.5);
}

.rd-lic-k {
  margin-top: 10px;
  margin-bottom: 2px;
  font-weight: 500;
  color: rgba(168, 152, 165, 0.7);
}

.rd-lic-v {
  color: #c9a227;
}

.rd-license a {
  display: inline-block;
  margin-top: 4px;
  color: #b2dffc;
}

.rd-lic-muted {
  color: rgba(168, 152, 165, 0.4);
}

.rd-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.rd-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(58, 42, 53, 0.5);
}

.rd-topbar-track {
  flex: 1;
  min-width: 0;
}

.rd-topbar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a898a5;
  margin-bottom: 4px;
}

.rd-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8ecff5;
  margin-right: 6px;
}

.rd-progress {
  height: 6px;
  background: #3a2a35;
  border-radius: 999px;
  overflow: hidden;
}

.rd-progress > div {
  height: 100%;
  background: #8ecff5;
}

.rd-topbar-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #a898a5;
}

.rd-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.rd-panel h2 {
  font-size: 20px;
  font-weight: 600;
  color: #f2eef1;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.rd-lead,
.rd-muted {
  color: #a898a5;
  font-size: 13px;
  line-height: 1.5;
}

.rd-mission {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 32px;
}

.rd-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 16px;
}

.rd-mode {
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #3a2a35;
  background: rgba(22, 16, 24, 0.6);
  color: #a898a5;
}

.rd-mode.is-active {
  border-color: rgba(142, 207, 245, 0.45);
  background: rgba(142, 207, 245, 0.1);
  color: #f2eef1;
}

.rd-mode strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.rd-mode span {
  font-size: 11px;
  color: #a898a5;
}

.rd-mission label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(168, 152, 165, 0.7);
  margin-bottom: 12px;
}

.rd-mission input[type="text"],
.rd-mission input:not([type]),
.rd-mission input[readonly] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #3a2a35;
  background: #120a10;
  color: #d4c8d0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.rd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: #d4c8d0;
}

.rd-mission-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(142, 207, 245, 0.35);
  background: rgba(142, 207, 245, 0.1);
  font-size: 12px;
}

.rd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8ecff5;
}

.rd-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #4d1a43;
  color: #f2eef1;
  font-weight: 500;
  font-size: 13px;
}

.rd-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rd-chat-log {
  flex: 1;
  overflow: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-msg {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.rd-msg--user {
  align-self: flex-end;
  background: rgba(142, 207, 245, 0.14);
}

.rd-msg--ai {
  align-self: flex-start;
  background: #161018;
  border: 1px solid #3a2a35;
}

.rd-msg code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #8ecff5;
}

.rd-msg-meta {
  font-size: 11px;
  color: #a898a5;
  margin-top: 8px;
}

.rd-chat-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #3a2a35;
}

.rd-chat-bar input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #3a2a35;
  background: #120a10;
  color: #f2eef1;
}

.rd-chat-bar button {
  padding: 0 16px;
  border-radius: 10px;
  background: #8ecff5;
  color: #0a0609;
  font-weight: 600;
  font-size: 12px;
}

.rd-map {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rd-map-head {
  padding: 20px 24px 8px;
}

.rd-map-head p {
  color: #a898a5;
  font-size: 13px;
}

.rd-map-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.rd-map-canvas {
  flex: 1;
  margin: 12px 16px 16px;
  border: 1px solid #3a2a35;
  border-radius: 12px;
  overflow: hidden;
  background: #120a10;
}

.rd-map-canvas svg {
  width: 100%;
  height: 100%;
}

.rd-bubble {
  cursor: pointer;
}

.rd-sel {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid #3a2a35;
  background: rgba(22, 16, 24, 0.4);
  padding: 16px;
  overflow: auto;
}

.rd-sel-kicker,
.rd-sel-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(168, 152, 165, 0.6);
}

.rd-sel-title {
  font-size: 14px;
  font-weight: 600;
  color: #f2eef1;
  margin: 4px 0;
}

.rd-sel-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #8ecff5;
  margin-top: 4px;
}

.rd-sel ul {
  margin-top: 12px;
}
.rd-sel li button {
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 0;
  border-top: 1px solid #3a2a35;
  color: #d4c8d0;
  font-size: 12px;
}

.rd-vulns {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rd-vulns-head {
  padding: 20px 24px 8px;
}

.rd-vulns-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #a898a5;
}

/* Bascule Technical / Non-technical : segmented control du Workspace réel */
.rd-vtabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid #3a2a35;
  border-radius: 12px;
  background: rgba(22, 16, 24, 0.4);
}

.rd-vtab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #a898a5;
  transition:
    background 0.15s,
    color 0.15s;
}

.rd-vtab:hover {
  color: #f2eef1;
}

.rd-vtab.is-on {
  background: #4d1a43;
  color: #b2dffc;
}

.rd-vtab-ico svg {
  display: block;
  width: 14px;
  height: 14px;
}

.rd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.rd-chip {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #3a2a35;
  background: #161018;
  color: #a898a5;
  font-size: 12px;
}

.rd-chip.is-on {
  background: #8ecff5;
  color: #0a0609;
  border-color: #8ecff5;
}

.rd-vulns-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
}

.rd-findings-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rd-finding-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  text-align: left;
  width: 100%;
}

.rd-finding-row.is-active,
.rd-finding-row:hover {
  background: rgba(178, 223, 252, 0.06);
}

.rd-finding-row span {
  color: #f2eef1;
  font-size: 12px;
}
.rd-finding-row em {
  font-style: normal;
  font-size: 10px;
  line-height: 1.45;
  color: #a898a5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rd-sev {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--sev-bg);
  color: var(--sev-text);
}

.rd-finding-detail {
  background: #161018;
  border: 1px solid #3a2a35;
  border-radius: 10px;
  padding: 16px;
  overflow: auto;
}

.rd-finding-detail header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.rd-finding-detail h3 {
  font-size: 15px;
  color: #f2eef1;
}

.rd-finding-detail dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a898a5;
  margin: 10px 0 4px;
}

.rd-finding-detail dd {
  font-size: 13px;
  color: #d4c8d0;
  line-height: 1.5;
}

.rd-finding-detail code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  background: #0a0609;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Onglet Technical : entête méta en monospace, puis blocs de preuve */
.rd-tech-grid {
  display: grid;
  gap: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #a898a5;
  word-break: break-all;
}

.rd-finding-detail dd pre {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0a0609;
  color: rgba(242, 238, 241, 0.9);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.rd-finding-detail dd pre.rd-cmd {
  color: rgba(142, 207, 245, 0.9);
}

.rd-finding-detail dd pre.rd-creds {
  border: 1px solid rgba(155, 28, 58, 0.4);
  background: rgba(155, 28, 58, 0.12);
  color: #f2eef1;
}

/* Onglet Non-technical : impact métier d'abord, jargon retiré */
/* Onglet Non-technical : accordéon pleine largeur, comme dans le logiciel.
   La ligne repliée porte l'explication en langage clair ; dépliée, l'impact
   métier passe en tête, avant l'explication, l'emplacement et la consigne. */
.rd-vulns-body--simple {
  grid-template-columns: 1fr;
}

.rd-acc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  min-height: 0;
}

.rd-acc-item {
  /* Sans cela le conteneur flex à hauteur contrainte écrase les cartes et
     rogne le sous-titre comme le corps déplié. */
  flex: 0 0 auto;
  border: 1px solid #3a2a35;
  border-radius: 12px;
  background: rgba(22, 16, 24, 0.55);
  overflow: hidden;
}

.rd-acc-item.is-open {
  border-color: #5a3550;
  background: rgba(32, 20, 32, 0.75);
}

.rd-acc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
}

.rd-acc-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.rd-acc-title {
  flex: 1;
  color: #f2eef1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.rd-acc-caret {
  flex-shrink: 0;
  color: #a898a5;
}

.rd-acc-caret svg {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}

.rd-acc-item.is-open .rd-acc-caret svg {
  transform: rotate(180deg);
}

.rd-acc-endpoint {
  color: #8ecff5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  word-break: break-all;
}

.rd-acc-sub {
  color: #a898a5;
  font-size: 12px;
  line-height: 1.5;
}

.rd-acc-body {
  padding: 0 14px 14px;
  border-top: 1px solid #3a2a35;
}

/* L'impact métier ouvre la fiche : c'est la phrase que le client retient. */
.rd-acc-impact {
  margin: 14px 0 0;
  color: #f2eef1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.rd-acc-plain {
  margin: 10px 0 0;
  color: #c9bcc6;
  font-size: 12.5px;
  line-height: 1.6;
}

.rd-acc-loc {
  margin: 12px 0 0;
  color: #a898a5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  word-break: break-all;
}

.rd-acc-loc code {
  color: #8ecff5;
}

.rd-acc-todo {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #3a4a5a;
  border-radius: 10px;
  background: rgba(30, 44, 58, 0.5);
  color: #c9d8e6;
  font-size: 12.5px;
  line-height: 1.6;
}

.rd-acc-todo span {
  color: #8ecff5;
  font-weight: 600;
}


.rd-reports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px;
}

.rd-report-card {
  background: #161018;
  border: 1px solid #3a2a35;
  border-radius: 12px;
  padding: 20px;
}

.rd-report-preview {
  background: #fff;
  color: #18181b;
  border-radius: 12px;
  padding: 20px;
}

.rd-report-kicker {
  font-weight: 600;
  margin-bottom: 12px;
}

.rd-bar {
  height: 6px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.rd-bar--c {
  width: 90%;
  background: #9b1c3a;
}
.rd-bar--h {
  width: 70%;
  background: #b45309;
}
.rd-bar--m {
  width: 50%;
  background: #a16207;
}

.rd-report-preview p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 12px;
}

.rd-activity {
  padding: 24px;
  height: 100%;
}

.rd-activity pre {
  margin-top: 12px;
  padding: 16px;
  background: #0a0609;
  border: 1px solid #3a2a35;
  border-radius: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #a898a5;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .rd-sidebar {
    display: none;
  }
  .rd-map-body,
  .rd-vulns-body,
  .rd-reports,
  .rd-fields,
  .rd-modes {
    grid-template-columns: 1fr;
    display: grid;
  }
  .rd-map-body {
    display: flex;
    flex-direction: column;
  }
  .rd-sel {
    width: auto;
    border-left: none;
    border-top: 1px solid #3a2a35;
  }
}

/* Secondary pages : gallery, chips, buttons */
.penli-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.penli-chip {
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--penli-muted);
}

.penli-content .penli-btn {
  margin-top: 8px;
  margin-right: 8px;
}

.penli-content ul li {
  color: var(--penli-muted);
}

.penli-price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.penli-price-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--penli-line);
  font-size: 14px;
  color: var(--penli-muted);
}

.penli-dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.penli-code {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: #111827;
  color: #f9fafb;
  border-radius: 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.penli-code code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

.penli-cli-panel h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.penli-cli-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--penli-muted);
}

.penli-cli-note code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.penli-dl-grid.one {
  grid-template-columns: 1fr;
  max-width: 400px;
}

.penli-panel {
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius-lg);
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--penli-shadow);
}

.penli-panel table {
  width: 100%;
  font-size: 14px;
}

.penli-panel th {
  text-align: left;
  color: var(--penli-text);
  padding: 8px 12px 8px 0;
  width: 100px;
}

.penli-panel td {
  color: var(--penli-muted);
  padding: 8px 0;
}

.penli-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.penli-filters button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--penli-line);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--penli-muted);
}

.penli-filters button.active,
.penli-filters button:hover {
  background: var(--penli-accent);
  color: #fff;
  border-color: var(--penli-accent);
}

@media (max-width: 600px) {
  .penli-dl-grid {
    grid-template-columns: 1fr;
  }
}

.penli-site .pdf-viewer {
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius-lg);
  overflow: hidden;
  box-shadow: var(--penli-shadow);
  margin: 24px 0;
}

.penli-site .pdf-frame {
  width: 100%;
  height: min(80vh, 900px);
  border: none;
  display: block;
}

.penli-site .pdf-note,
.penli-site .pdf-fallback {
  font-size: 14px;
  color: var(--penli-muted);
  margin-top: 12px;
}

/* Light theme for pages built on main.css tokens (legal, login, dashboard)
   Remaps the dark Framer tokens instead of duplicating every component rule. */
body.penli-site {
  --bg: #f7f7f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #f4f4f5;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --text: #09090b;
  --mute: #52525b;
  --soft: #71717a;
  --glow: rgba(77, 26, 67, 0.12);
  --glow-soft: rgba(16, 10, 18, 0.06);
  --link: #3d87b8;
  --ok: #00c896;
  --warn: #b45309;
  --danger: #b91c1c;
}

/* Components hardcoded against --white / --black need explicit light values */
.penli-site .btn-primary {
  background: #26251e;
  color: #fafafa;
}

.penli-site .btn-primary:hover {
  background: #1e1d18;
}

.penli-site .btn-ghost {
  background: #fff;
  color: var(--penli-text);
  border: 1px solid var(--penli-line-strong);
}

.penli-site .btn-ghost:hover {
  background: #f4f4f5;
}

.penli-site .btn-soft {
  background: #f4f4f5;
  color: var(--penli-text);
  border: 1px solid var(--penli-line);
}

.penli-site .btn:focus-visible {
  outline: 0.5px solid #316bff;
  outline-offset: 4px;
}

.penli-site .auth-tab {
  color: var(--penli-muted);
}

.penli-site .auth-tab.active {
  background: #fff;
  color: var(--penli-text);
  box-shadow: var(--penli-shadow);
}

.penli-site .check input {
  accent-color: #26251e;
}

.penli-site .field input::placeholder {
  color: #a1a1aa;
}

.penli-site .field input:focus {
  border-color: #26251e;
  box-shadow: 0 0 0 3px rgba(38, 37, 30, 0.1);
}

.penli-site .auth-msg.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.penli-site .auth-msg.ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.penli-site .status-box {
  border-color: #fcd9a8;
  background: #fffbeb;
  color: #92400e;
}

.penli-site .status-box.pro {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #075985;
}

/* Legal pages */
.penli-site .legal h1,
.penli-site .legal h2,
.penli-site .legal h3 {
  font-weight: 600;
}

.penli-site .legal a {
  color: var(--penli-text);
}

/* Auth / dashboard chrome */
.penli-site .app-login {
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.penli-site .auth-card {
  box-shadow: var(--penli-shadow-lg);
  border-color: var(--penli-line);
}

.penli-site .auth-icon {
  background: #f4f4f5;
  color: var(--penli-text);
}

.penli-site .app-side {
  background: #fff;
}

.penli-site .app-nav a:hover {
  background: #f4f4f5;
  color: var(--penli-text);
}

.penli-site .app-nav a.active {
  background: #f4f4f5;
  color: var(--penli-text);
}

.penli-site .brand-name,
.penli-site .app-topbar h1 {
  color: var(--penli-text);
}

.penli-site .usage-chart {
  background: #fafafa;
}

/* ── Bandeau cookies : carte compacte claire, cohérente avec le thème penli ── */
.penli-site .cookie-banner {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  z-index: 10000;
  padding: 0;
  pointer-events: none;
}

/* La carte flotte : elle ne doit pas décaler la mise en page */
html.has-cookie-banner body.penli-site {
  padding-bottom: 0;
}

/* Sauf sur l'écran d'auth, centré verticalement, que la carte recouvrirait */
html.has-cookie-banner .penli-site .app-login {
  padding-bottom: 240px;
}

.penli-site .cookie-banner-inner {
  pointer-events: auto;
  display: block;
  width: 360px;
  max-width: calc(100vw - 48px);
  margin: 0;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid var(--penli-line, #e4e4e7);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 12px 32px rgba(16, 24, 40, 0.1);
  backdrop-filter: none;
  animation: penli-cookie-in 0.28s ease both;
}

@keyframes penli-cookie-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .penli-site .cookie-banner-inner {
    animation: none;
  }
}

.penli-site .cookie-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.penli-site .cookie-banner-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8e8bdf;
}

.penli-site .cookie-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}

.penli-site .cookie-banner-text {
  margin: 0;
  flex: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--penli-muted, #52525b);
}

.penli-site .cookie-banner-links {
  margin: 8px 0 0;
  font-size: 12px;
  color: #a1a1aa;
}

.penli-site .cookie-banner-links a {
  color: var(--penli-muted, #52525b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.penli-site .cookie-banner-links a:hover {
  color: #111827;
}

.penli-site .cookie-banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.penli-site .cookie-banner-actions .btn {
  flex: 1;
  height: 34px;
  min-height: 0;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.penli-site .cookie-banner-actions .btn-ghost {
  background: #fff;
  border: 1px solid var(--penli-line, #e4e4e7);
  color: #111827;
}

.penli-site .cookie-banner-actions .btn-ghost:hover {
  background: #f4f4f5;
}

.penli-site .cookie-banner-actions .btn-primary {
  background: #09090b;
  border: 1px solid #09090b;
  color: #fafafa;
}

.penli-site .cookie-banner-actions .btn-primary:hover {
  background: #26262b;
  border-color: #26262b;
}

/* Mobile : feuille pleine largeur en bas, la page laisse la place */
@media (max-width: 640px) {
  .penli-site .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .penli-site .cookie-banner-inner {
    width: auto;
    max-width: none;
    padding: 16px;
  }

  html.has-cookie-banner body.penli-site {
    padding-bottom: 210px;
  }
}

/* Captures produit grand format (pages /demo/ et /produit/) : ratio natif, aucun
   recadrage, et sortie de la colonne de 800 px pour occuper toute la largeur utile. */
.penli-shots {
  display: grid;
  gap: 40px;
  margin: 40px 0 8px;
}

@media (min-width: 900px) {
  .penli-shots {
    position: relative;
    left: 50%;
    width: min(1200px, 100vw - 48px);
    transform: translateX(-50%);
  }
}

.penli-shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: var(--penli-radius-lg);
  overflow: hidden;
  box-shadow: var(--penli-shadow);
}

.penli-shot[hidden] {
  display: none;
}

.penli-shot-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: #f4f4f5;
  border-bottom: 1px solid var(--penli-line);
}

.penli-shot-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.penli-shot-chrome i:nth-child(1) {
  background: #ff5f57;
}

.penli-shot-chrome i:nth-child(2) {
  background: #febc2e;
}

.penli-shot-chrome i:nth-child(3) {
  background: #28c840;
}

.penli-shot-chrome span {
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--penli-muted);
}

.penli-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
  background: #0a0609;
}

.penli-shot figcaption {
  padding: 16px 20px;
  border-top: 1px solid var(--penli-line);
}

.penli-shot figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--penli-text);
  font-size: 15px;
  font-weight: 600;
}

.penli-shot figcaption span {
  display: block;
  color: var(--penli-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .penli-shots {
    gap: 24px;
    margin: 24px 0 8px;
  }

  .penli-shot-chrome {
    height: 32px;
    padding: 0 12px;
    gap: 5px;
  }

  .penli-shot-chrome i {
    width: 8px;
    height: 8px;
  }

  .penli-shot-chrome span {
    font-size: 11px;
  }

  .penli-shot figcaption {
    padding: 12px 14px;
  }
}

/* Aperçu PDF : même sortie de colonne pour un rendu nettement plus grand */
@media (min-width: 900px) {
  .penli-site .pdf-viewer {
    position: relative;
    left: 50%;
    width: min(1200px, 100vw - 48px);
    transform: translateX(-50%);
  }
}

.penli-site .pdf-frame {
  height: min(88vh, 1180px);
}

@media (max-width: 640px) {
  .penli-site .pdf-frame {
    height: min(72vh, 620px);
  }
}

/* ==========================================================================
   i18n · sélecteur de langue, lien d'évitement, écritures droite-à-gauche
   ========================================================================== */

/* Lien d'évitement : masqué par découpe jusqu'à la prise de focus clavier.
   Surtout pas `left: -9999px` : en écriture droite-à-gauche l'origine du
   défilement s'inverse et la page gagne 10 000 px de scroll horizontal. */
.skip-link {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2000;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: #09090b;
  color: #fafafa;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
}

/* Sélecteur complet du pied de page : pastille + panneau de toutes les langues.
   Ce sont de vrais liens vers la page équivalente, donc suivis par les
   crawlers même sans ouvrir le `<details>`. */
.lang-picker {
  position: relative;
}

.lang-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.lang-picker > summary::-webkit-details-marker {
  display: none;
}

.lang-picker > summary:hover,
.lang-picker[open] > summary {
  border-color: #9ca3af;
  color: #111827;
}

.lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, minmax(148px, 1fr));
  gap: 2px;
  max-height: 340px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--penli-line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
}

.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu a:hover {
  background: #f3f4f6;
  color: #111827;
}

.lang-menu a[aria-current="true"] {
  background: #111827;
  color: #fff;
}

.lang-menu em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .lang-menu {
    grid-template-columns: 1fr;
    right: auto;
    left: 0;
    max-height: 60vh;
  }
}

/* --- Écritures droite-à-gauche (ar, he) ------------------------------------
   La mise en page est en flex/grid : elle s'inverse d'elle-même sous
   `dir="rtl"`. Seuls les blocs dont le sens est intrinsèquement latin
   (marquee de logos, empreintes SHA-256, extraits de commandes) sont
   reforcés en LTR. */
[dir="rtl"] .penli-tools-marquee,
[dir="rtl"] .penli-tools-track {
  direction: ltr;
}

[dir="rtl"] .penli-shot-chrome,
[dir="rtl"] .shot-chrome {
  direction: ltr;
}

[dir="rtl"] .penli-panel table td,
[dir="rtl"] .penli-panel p[style*="Plex Mono"],
[dir="rtl"] .penli-chip {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .skip-link {
  border-radius: 0 0 0 10px;
}

/* ==========================================================================
   Fil d'Ariane et bloc de faits (SEO / moteurs de réponse)
   ========================================================================== */

/* Miroir visible du `BreadcrumbList` JSON-LD. */
.penli-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(85%, 100% - 32px);
  margin: 0 auto;
  padding: 20px 0 0;
  color: #6b7280;
  font-size: 13px;
}

.penli-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
}

.penli-breadcrumb a:hover {
  color: #111827;
  text-decoration: underline;
}

.penli-breadcrumb span[aria-hidden="true"] {
  color: #d1d5db;
}

.penli-breadcrumb [aria-current="page"] {
  color: #111827;
}



/* --- Démo · cas d'engagement (New Mission) ---------------------------------
   Reprise de l'écran réel : compteur + remise aux défauts du mode, liste
   défilante groupée par catégorie, pastille de profondeur (light / standard /
   deep) et outils typiques en monospace. */
.rd-cases {
  margin-top: 14px;
}

.rd-cases-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rd-cases-label {
  color: #a898a5;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rd-cases-reset {
  color: #8ecff5;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rd-cases-reset:hover {
  text-decoration: underline;
}

.rd-cases-lead {
  margin: 6px 0 10px;
  color: #a898a5;
  font-size: 11.5px;
  line-height: 1.55;
}

.rd-cases-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 260px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #3a2a35;
  border-radius: 12px;
  background: rgba(10, 6, 9, 0.4);
}

.rd-case-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rd-case-cat {
  color: #7d6d7a;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rd-case {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(58, 42, 53, 0.6);
  border-radius: 10px;
  background: transparent;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.rd-case:hover {
  border-color: #3a2a35;
}

.rd-case.is-on {
  border-color: rgba(142, 207, 245, 0.4);
  background: rgba(142, 207, 245, 0.1);
}

.rd-case-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.rd-case-title {
  color: #f2eef1;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.rd-case-depth {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rd-case-depth--deep {
  background: rgba(180, 83, 9, 0.18);
  color: #f0c48a;
}

.rd-case-depth--standard {
  background: rgba(142, 207, 245, 0.15);
  color: #8ecff5;
}

.rd-case-depth--light {
  background: #3a2a35;
  color: #a898a5;
}

.rd-case-sum {
  color: rgba(168, 152, 165, 0.85);
  font-size: 10.5px;
  line-height: 1.45;
}

.rd-case-tools {
  color: rgba(168, 152, 165, 0.5);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  line-height: 1.4;
}

/* ridge.css */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root {
  --ridge-ink: #152b38;
  --ridge-muted: #556574;
  --ridge-blue: #315de5;
  --ridge-blue-hover: #254bbe;
  --ridge-sky: #eaf0ff;
  --ridge-bg: #fff;
  --ridge-surface: #f4f6f8;
  --ridge-line: #dce3e8;
  --ridge-green: #176244;
  --ridge-warn: #a54325;
  --ridge-shadow: 0 24px 70px -32px #263c6540;
  --ridge-radius: 16px;
  --ridge-font: Manrope, system-ui, sans-serif;
}
html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}
body.penli-site {
  --bg: #fff;
  --bg-card: #f4f6f8;
  --text: var(--ridge-ink);
  --text-muted: var(--ridge-muted);
  --line: var(--ridge-line);
  font-family: var(--ridge-font);
  color: var(--ridge-ink);
  background: var(--ridge-bg);
  line-height: 1.65;
  overflow-x: clip;
}
body.penli-site h1,
body.penli-site h2,
body.penli-site h3,
body.penli-site h4 {
  font-family: var(--ridge-font);
  color: var(--ridge-ink);
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
body.penli-site p {
  color: var(--ridge-muted);
  text-wrap: pretty;
}
body.penli-site a {
  color: inherit;
  text-underline-offset: 5px;
}
body.penli-site :where(button, input, select, textarea) {
  font-family: inherit;
}
body.penli-site button {
  cursor: pointer;
}
body.penli-site [hidden] {
  display: none !important;
}
body.penli-site :focus-visible {
  outline: 0.5px solid #316bff;
  outline-offset: 4px;
}
::selection {
  background: #cbd9ff;
  color: var(--ridge-ink);
}
input,
textarea {
  caret-color: var(--ridge-blue);
}
* {
  scrollbar-color: #acb8c5 #f4f6f8;
  scrollbar-width: thin;
}
body.penli-site .skip-link:focus {
  position: fixed;
  z-index: 200;
  inset: 10px auto auto 10px;
  clip-path: none;
  width: auto;
  height: auto;
  background: white;
  padding: 10px 18px;
}
.ridge-container {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.ridge-main {
  padding-top: 0;
}
.ridge-main h1,
.ridge-main h2,
.ridge-main h3,
.ridge-main p {
  margin: 0;
}
.ridge-main svg,
.ridge-button svg,
.ridge-text-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ridge-mark {
  object-fit: contain;
  flex-shrink: 0;
}
.ridge-main .ridge-muted {
  color: var(--ridge-muted);
}
.ridge-main .ridge-micro,
.ridge-micro {
  display: block;
  font-size: 12px;
  color: var(--ridge-muted);
  margin-top: 16px;
  line-height: 1.6;
}
.ridge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.ridge-main .ridge-button,
.ridge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.5;
  transition:
    background 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.ridge-main .ridge-button--primary,
.ridge-button--primary {
  background: var(--ridge-blue);
  color: white;
}
.ridge-main .ridge-button--primary:hover,
.ridge-button--primary:hover {
  background: var(--ridge-blue-hover);
  box-shadow: 0 8px 22px -12px #315de5aa;
}
.ridge-main .ridge-button--secondary,
.ridge-button--secondary {
  background: white;
  color: var(--ridge-ink);
  border-color: var(--ridge-line);
}
.ridge-main .ridge-button--secondary:hover,
.ridge-button--secondary:hover {
  background: var(--ridge-surface);
  border-color: #a6b6c8;
}
.ridge-main .ridge-button--text {
  padding-inline: 0;
  background: none;
  color: var(--ridge-ink);
}
.ridge-button:active {
  transform: translateY(1px);
}
.ridge-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 14px;
  min-height: 44px;
  text-decoration: none;
}
.ridge-text-link:hover {
  text-decoration: underline;
}
/* Shared navigation, deliberately compact. */
body.penli-site .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fffffff5;
  border-bottom: 1px solid #edf0f3;
  backdrop-filter: blur(16px);
  height: 80px;
}
body.penli-site .site-header .inner {
  width: min(1376px, calc(100% - 64px));
  height: 80px;
  display: flex;
  align-items: center;
  gap: 34px;
  max-width: none;
  margin: auto;
}
body.penli-site .brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--ridge-ink);
}
body.penli-site .brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
}
body.penli-site .brand-name {
  font-family: var(--ridge-font);
  font-size: 24px;
  letter-spacing: -1px;
  font-weight: 750;
}
body.penli-site .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  position: static;
}
body.penli-site .nav > a {
  padding: 12px 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--ridge-muted);
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.penli-site .nav > a:hover,
body.penli-site .nav > a[aria-current] {
  color: var(--ridge-blue);
  background: none;
}
body.penli-site .header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  flex-shrink: 0;
}
body.penli-site .penli-signin {
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.penli-site .penli-download {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--ridge-ink);
  color: #fff;
  border-radius: 8px;
  padding: 10px 17px;
  font-size: 13px;
  font-weight: 650;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
}
body.penli-site .penli-download:hover {
  background: #2a4657;
}
body.penli-site .nav-cta {
  display: none;
}
body.penli-site .lang-link {
  border: 0;
  background: none;
  min-height: 44px;
  color: var(--ridge-ink);
}
body.penli-site .menu-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--ridge-line);
  border-radius: 8px;
  background: #fff;
}
/* The first view gives the offer, action and evidence equal clarity. */
.ridge-hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 78px;
  padding-bottom: 56px;
}
.ridge-hero h1 {
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.11;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 780px;
}
.ridge-hero-intro > p {
  font-size: 17px;
  line-height: 1.8;
  max-width: 46ch;
  margin-bottom: 26px;
}
.ridge-hero-intro strong {
  font-weight: 600;
  color: var(--ridge-ink);
}
.ridge-hero-intro .ridge-button--text {
  font-size: 13px;
}
.ridge-product-stage {
  background: var(--ridge-sky);
  padding: 36px 44px 0;
  border-radius: 20px;
  position: relative;
  isolation: isolate;
}
.ridge-product-window {
  background: #fff;
  border-radius: 13px 13px 0 0;
  box-shadow: var(--ridge-shadow);
  overflow: hidden;
  position: relative;
}
.ridge-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ridge-line);
  height: 64px;
  padding: 0 24px;
}
.ridge-window-brand {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ridge-window-brand img {
  width: 35px;
  height: 35px;
}
.ridge-window-brand strong {
  font-size: 16px;
  letter-spacing: -0.6px;
}
.ridge-window-brand > span {
  font-size: 11px;
  border-inline-start: 1px solid var(--ridge-line);
  padding-inline-start: 16px;
  margin-inline-start: 12px;
  color: var(--ridge-muted);
}
.ridge-example-label {
  font-size: 10px;
  letter-spacing: 0.01em;
  background: var(--ridge-surface);
  color: var(--ridge-muted);
  padding: 5px 10px;
  border-radius: 5px;
}
.ridge-window-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 384px;
}
.ridge-preview-side {
  border-inline-end: 1px solid var(--ridge-line);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  background: #fcfdff;
}
.ridge-preview-workspace {
  font-size: 10px;
  font-weight: 600;
  color: var(--ridge-muted);
  padding: 0 10px;
  margin-bottom: 16px;
}
.ridge-preview-nav,
.ridge-preview-side > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  font-size: 12px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ridge-muted);
  border-radius: 6px;
}
.ridge-preview-nav.is-selected {
  background: #eaf0ff;
  color: #254bbe;
  font-weight: 650;
}
.ridge-preview-side > a:hover {
  background: var(--ridge-surface);
}
.ridge-preview-side svg {
  width: 17px;
  height: 17px;
}
.ridge-preview-local {
  margin-top: auto;
  padding: 36px 4px 0;
  display: flex;
  gap: 8px;
  align-items: start;
  font-size: 10px;
  color: var(--ridge-green);
}
.ridge-preview-local small {
  color: var(--ridge-muted);
  font-size: 9px;
}
.ridge-preview-content {
  padding: 26px 36px 16px;
}
.ridge-preview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.ridge-preview-title .ridge-muted {
  font-size: 11px;
}
.ridge-preview-title h2 {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.24;
  margin-top: 8px;
  letter-spacing: -1px;
}
.ridge-complete {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: var(--ridge-green);
  white-space: nowrap;
}
.ridge-complete svg {
  width: 15px;
  height: 15px;
}
.ridge-preview-tabs {
  display: flex;
  border-bottom: 1px solid var(--ridge-line);
  margin-top: 20px;
  gap: 28px;
}
.ridge-preview-tabs button {
  font-size: 11px;
  padding: 12px 0;
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--ridge-muted);
  font-weight: 550;
}
.ridge-preview-tabs button[aria-selected="true"] {
  color: var(--ridge-blue);
  border-bottom-color: var(--ridge-blue);
}
.ridge-finding {
  padding-top: 18px;
  min-height: 164px;
}
.ridge-finding-head {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 10px;
}
.ridge-severity {
  font-size: 10px;
  line-height: 1.5;
  color: #94381f;
  background: #fff0e9;
  border-radius: 4px;
  padding: 3px 7px;
  font-weight: 650;
}
.ridge-proof-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ridge-muted);
}
.ridge-proof-status svg {
  width: 13px;
  height: 13px;
}
.ridge-finding h3 {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  font-weight: 650;
}
.ridge-finding p {
  font-size: 11px;
  line-height: 1.7;
  max-width: 65ch;
  margin-top: 6px;
}
.ridge-finding-action {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f4f6f9;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 14px;
  font-size: 10px;
  color: var(--ridge-ink);
}
.ridge-finding-action svg {
  width: 16px;
  height: 16px;
}
.ridge-preview-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #edf0f3;
  font-size: 10px;
  color: var(--ridge-muted);
}
.ridge-preview-bottom a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--ridge-blue);
  text-decoration: none;
  min-height: 26px;
}
.ridge-preview-bottom svg {
  width: 14px;
  height: 14px;
}
.ridge-stage-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  font-size: 11px;
  color: #42536c;
}
.ridge-stage-caption span,
.ridge-stage-caption a {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ridge-stage-caption a {
  font-weight: 650;
  min-height: 44px;
  text-decoration: none;
}
.ridge-stage-caption svg {
  width: 17px;
  height: 17px;
}
.ridge-audience {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: center;
  padding-block: 42px;
  border-bottom: 1px solid var(--ridge-line);
}
.ridge-audience p {
  font-size: 12px;
  line-height: 1.65;
}
.ridge-audience > div {
  display: flex;
  flex-wrap: wrap;
  gap: 42px;
  color: #657583;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
/* Public content and conversion. */
.ridge-section {
  padding-top: 108px;
}
.ridge-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: 42px;
}
.ridge-main h2 {
  font-size: clamp(29px, 3.1vw, 43px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.ridge-section-heading h2 {
  flex: 1;
}
.ridge-section-heading > p {
  flex: 0 1 430px;
  font-size: 15px;
  line-height: 1.85;
}
.ridge-benefit-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 22px;
}
.ridge-benefit-main {
  grid-row: span 2;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 35px;
  background: #f0f3f9;
  padding: 42px 38px;
  border-radius: 16px;
  align-items: center;
}
.ridge-paper {
  min-height: 328px;
  transform: rotate(-4deg);
  padding: 24px 26px;
  background: white;
  box-shadow: 0 20px 35px -24px #152b3866;
  max-width: 285px;
  justify-self: center;
  width: 100%;
  border-radius: 3px;
}
.ridge-paper-brand {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 750;
}
.ridge-paper-brand img {
  height: 25px;
  width: 25px;
}
.ridge-paper > p {
  margin: 15px 0 12px;
  font-size: 10px;
}
.ridge-paper-rule {
  height: 1px;
  background: var(--ridge-line);
  margin-bottom: 18px;
}
.ridge-paper > strong {
  font-size: 25px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.8px;
}
.ridge-paper-lines {
  display: grid;
  gap: 6px;
  margin-top: 22px;
}
.ridge-paper-lines i {
  display: block;
  height: 4px;
  background: #edf0f3;
  border-radius: 2px;
}
.ridge-paper-lines i:nth-child(2) {
  width: 87%;
}
.ridge-paper-lines i:last-child {
  width: 66%;
}
.ridge-paper-footer {
  display: block;
  font-size: 9px;
  color: var(--ridge-muted);
  margin-top: 20px;
}
.ridge-benefit-main h3 {
  font-size: 27px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.ridge-benefit-main p {
  font-size: 13px;
  line-height: 1.85;
}
.ridge-benefit-main .ridge-text-link {
  margin-top: 18px;
  font-size: 12px;
}
.ridge-benefit-small {
  background: #f4f6f8;
  padding: 27px 28px;
  border-radius: 16px;
}
.ridge-feature-icon {
  color: var(--ridge-blue);
  display: block;
  margin-bottom: 14px;
}
.ridge-feature-icon svg {
  width: 25px;
  height: 25px;
}
.ridge-benefit-small h3 {
  font-size: 20px;
  line-height: 1.35;
}
.ridge-benefit-small p {
  font-size: 12px;
  line-height: 1.85;
  margin-top: 12px;
}
.ridge-inline-note {
  display: block;
  font-size: 11px;
  font-weight: 650;
  margin-top: 18px;
}
.ridge-benefit-small .ridge-text-link {
  font-size: 11px;
  margin-top: 10px;
}
.ridge-process {
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--ridge-line);
}
.ridge-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.ridge-steps article {
  padding-top: 15px;
}
.ridge-step-number {
  color: var(--ridge-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--ridge-sky);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  position: relative;
}
.ridge-steps h3 {
  font-size: 21px;
  line-height: 1.35;
  margin: 22px 0 12px;
}
.ridge-steps p {
  font-size: 14px;
  line-height: 1.85;
}
.ridge-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.ridge-scenarios article {
  padding: 28px 0;
  border-top: 1px solid var(--ridge-line);
}
.ridge-scenarios h3 {
  font-size: 25px;
  line-height: 1.3;
  margin: 18px 0 16px;
  max-width: 24ch;
}
.ridge-scenarios p {
  font-size: 14px;
  line-height: 1.85;
}
.ridge-scenarios a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  margin-top: 18px;
  min-height: 44px;
  text-decoration: none;
}
.ridge-pricing-section {
  padding-top: 85px;
}
.ridge-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ridge-offer {
  border: 1px solid var(--ridge-line);
  padding: 28px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  background: white;
}
.ridge-offer.is-featured {
  background: #f1f5ff;
  border-color: #b8caf6;
}
.ridge-offer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
  min-height: 32px;
}
.ridge-offer-icon {
  color: var(--ridge-blue);
}
.ridge-offer-icon svg {
  width: 26px;
  height: 26px;
}
.ridge-recommended {
  font-size: 10px;
  font-weight: 650;
  color: #294fbf;
  background: #dfe9ff;
  border-radius: 5px;
  padding: 5px 8px;
}
.ridge-offer h3 {
  font-size: 22px;
  line-height: 1.3;
  min-height: 58px;
}
.ridge-offer > p {
  font-size: 13px;
  line-height: 1.8;
  min-height: 70px;
  margin-top: 8px;
}
.ridge-price {
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -2px;
  font-weight: 600;
  margin: 18px 0 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ridge-price > span {
  font-size: 27px;
  vertical-align: top;
  display: inline-block;
  margin: 8px 5px 0 7px;
  letter-spacing: -0.5px;
}
.ridge-price small {
  display: block;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--ridge-muted);
  margin-top: 4px;
}
.ridge-offer ul {
  padding: 22px 0 24px;
  margin: 0;
  border-top: 1px solid var(--ridge-line);
  list-style: none;
  display: grid;
  gap: 13px;
}
.ridge-offer li {
  display: flex;
  gap: 9px;
  font-size: 12px;
  line-height: 1.65;
}
.ridge-offer li svg {
  width: 16px;
  height: 19px;
  color: var(--ridge-green);
}
.ridge-offer .ridge-button {
  margin-top: auto;
  font-size: 12px;
  justify-content: space-between;
}
.ridge-pricing-note {
  font-size: 11px !important;
  text-align: center;
  margin-top: 22px !important;
}
.ridge-faq-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 90px;
  padding-block: 110px;
}
.ridge-faq-section > .ridge-questions {
  margin-top: 0;
}
.ridge-faq-section .ridge-text-link {
  margin-top: 24px;
}
.ridge-questions details {
  border-bottom: 1px solid var(--ridge-line);
}
.ridge-questions summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 72px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}
.ridge-questions summary::-webkit-details-marker {
  display: none;
}
.ridge-questions summary span {
  font-size: 22px;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ridge-questions details[open] summary span {
  transform: rotate(45deg);
}
.ridge-questions p {
  font-size: 13px;
  line-height: 1.9;
  padding-bottom: 24px;
  max-width: 68ch;
}
.ridge-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  background: #eaf0ff;
  padding: 56px 62px;
  border-radius: 18px;
  margin-bottom: 88px;
}
.ridge-final .ridge-mark {
  width: 62px;
  height: 62px;
  margin: 0 0 10px -9px;
}
.ridge-final h2 {
  font-size: 43px;
}
.ridge-final > div:last-child {
  padding-top: 20px;
}
.ridge-final p {
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 24px;
}
.ridge-page-head {
  padding-block: 80px 52px;
}
.ridge-page-head h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.14;
  font-weight: 600;
  max-width: 850px;
}
.ridge-page-head > p {
  font-size: 17px;
  line-height: 1.8;
  max-width: 66ch;
  margin-top: 24px;
}
.ridge-request {
  display: grid;
  grid-template-columns: 0.85fr 1.1fr;
  gap: 100px;
  padding-block: 100px 0;
  scroll-margin-top: 70px;
}
.ridge-request > div > p {
  margin-top: 20px;
  max-width: 40ch;
  font-size: 15px;
}
.ridge-human {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 35px;
  margin-bottom: 16px;
}
.ridge-human > span {
  background: #f4f6f8;
  border-radius: 10px;
  padding: 8px;
}
.ridge-human > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ridge-human strong {
  font-size: 14px;
}
.ridge-human span {
  font-size: 12px;
  color: var(--ridge-muted);
}
.ridge-request-form {
  background: #f4f6f8;
  padding: 32px;
  border-radius: 16px;
}
.ridge-request-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.ridge-request-form legend {
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 14px;
}
.ridge-choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ridge-choice-row label {
  position: relative;
  cursor: pointer;
}
.ridge-choice-row label > span {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid #c9d4de;
  border-radius: 8px;
  background: white;
  font-size: 11px;
  gap: 6px;
}
.ridge-choice-row strong {
  font-size: 16px;
  font-weight: 650;
}
.ridge-choice-row input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.ridge-choice-row input:checked + span {
  border-color: var(--ridge-blue);
  background: var(--ridge-sky);
  color: #254bbe;
  box-shadow: inset 0 0 0 1px var(--ridge-blue);
}
.ridge-choice-row input:focus-visible + span {
  border-color: #316bff;
  outline: none;
  box-shadow: none;
}
.ridge-field {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 22px;
}
.ridge-field input,
.ridge-field select,
.ridge-field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #c7d1da;
  background: white;
  border-radius: 7px;
  color: var(--ridge-ink);
  font-size: 14px;
  min-height: 48px;
  box-sizing: border-box;
}
.ridge-field textarea {
  resize: vertical;
}
.ridge-field input::placeholder,
.ridge-field textarea::placeholder {
  color: #657583;
  font-size: 12px;
}
.ridge-field .ridge-muted {
  font-weight: 400;
}
.ridge-request-result {
  padding: 22px 0 0;
  margin-top: 20px;
  border-top: 1px solid var(--ridge-line);
}
.ridge-request-result strong {
  font-size: 16px;
}
.ridge-request-result p {
  font-size: 13px;
  margin: 8px 0 16px;
}
.ridge-faq-full {
  max-width: 850px;
  padding-bottom: 90px;
}
.ridge-detail-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
  padding-block: 85px;
}
.ridge-detail-split p {
  font-size: 15px;
  line-height: 1.85;
  margin: 22px 0;
}
.ridge-detail-split figure {
  margin: 0;
  background: #eaf0ff;
  padding: 24px;
  border-radius: 16px;
}
.ridge-detail-split img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.ridge-detail-split figcaption {
  font-size: 11px;
  color: var(--ridge-muted);
  margin-top: 14px;
}
.ridge-dual-path {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding-top: 80px;
}
.ridge-dual-path article {
  padding: 40px;
  background: #f4f6f8;
  border-radius: 16px;
}
.ridge-dual-path article > svg {
  width: 32px;
  height: 32px;
  color: var(--ridge-blue);
  margin-bottom: 25px;
}
.ridge-dual-path h2 {
  font-size: 32px;
}
.ridge-dual-path p {
  margin: 22px 0 28px;
  font-size: 14px;
  line-height: 1.85;
}
.ridge-note-block {
  padding-block: 85px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.ridge-note-block h2 {
  font-size: 32px;
}
.ridge-note-block p {
  font-size: 15px;
  line-height: 1.9;
}
/* Footer and legacy translated page layout inherit the new identity. */
body.penli-site .ridge-footer {
  padding: 60px 0 25px;
  border-top: 1px solid var(--ridge-line);
  background: #fff;
}
body.penli-site .ridge-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 60px;
}
body.penli-site .ridge-footer .brand {
  margin-bottom: 16px;
}
body.penli-site .ridge-footer-about {
  font-size: 12px;
  max-width: 27ch;
  line-height: 1.9;
}
body.penli-site .ridge-footer .footer-col {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
}
body.penli-site .ridge-footer .footer-col h2 {
  font-size: 12px;
  font-weight: 750;
  margin: 8px 0 18px;
  letter-spacing: 0;
}
body.penli-site .ridge-footer .footer-col a {
  font-size: 12px;
  min-height: 38px;
  text-decoration: none;
  color: var(--ridge-muted);
  display: flex;
  align-items: center;
}
body.penli-site .ridge-footer .footer-col a:hover {
  color: var(--ridge-blue);
}
.ridge-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 30px;
  margin-top: 38px;
  border-top: 1px solid var(--ridge-line);
  font-size: 11px;
  color: var(--ridge-muted);
}
.ridge-footer-disclaimer {
  font-size: 10px;
  max-width: 85ch;
  margin-top: 18px !important;
}
.ridge-footer .lang-selector {
  max-width: 100%;
  font-size: 12px;
}
body.penli-site .page,
body.penli-site .penli-page {
  width: min(1120px, calc(100% - 96px));
  max-width: 1120px;
  padding-top: 65px;
  padding-bottom: 80px;
}
body.penli-site .penli-page h1,
body.penli-site .page h1 {
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
body.penli-site .page .lead,
body.penli-site .penli-page .lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ridge-muted);
  max-width: 70ch;
}
body.penli-site .penli-breadcrumb {
  font-size: 11px;
  color: var(--ridge-muted);
  margin-bottom: 30px;
}
body.penli-site .penli-shot {
  border: 0;
  box-shadow: var(--ridge-shadow);
  background: #edf2fb;
  border-radius: 16px;
  width: 100%;
  left: auto;
  transform: none;
  margin-block: 32px;
}
body.penli-site .penli-shot-chrome {
  background: #eaf0ff;
  color: #526582;
}
body.penli-site .btn-primary,
body.penli-site .penli-btn--primary {
  background: var(--ridge-blue);
  color: white;
  border-radius: 8px;
  border-color: transparent;
}
body.penli-site .btn-primary:hover,
body.penli-site .penli-btn--primary:hover {
  background: var(--ridge-blue-hover);
}
body.penli-site .btn,
body.penli-site .penli-btn {
  min-height: 46px;
  font-family: var(--ridge-font);
  font-size: 13px;
  border-radius: 8px;
}
body.penli-site .btn-ghost,
body.penli-site .btn-soft,
body.penli-site .penli-btn--ghost {
  background: #fff;
  color: var(--ridge-ink);
  border: 1px solid var(--ridge-line);
}
body.penli-site .penli-callout {
  background: var(--ridge-sky);
  border: 0;
  border-radius: 14px;
  padding: 30px;
}
body.penli-site .penli-callout h2 {
  font-size: 28px;
}
body.penli-site .penli-gallery {
  gap: 28px;
}
body.penli-site .penli-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 24px;
}
body.penli-site .penli-filter {
  min-height: 44px;
  background: #f4f6f8;
  color: var(--ridge-ink);
  border: 1px solid var(--ridge-line);
  border-radius: 8px;
}
body.penli-site .penli-filter.active {
  background: var(--ridge-ink);
  color: #fff;
}
body.penli-site .penli-dl-grid,
body.penli-site .penli-pricing {
  gap: 22px;
}
body.penli-site .penli-dl-card,
body.penli-site .penli-price-card {
  border-radius: 16px;
  background: #f4f6f8;
  border: 1px solid var(--ridge-line);
  padding: 28px;
}
body.penli-site .penli-dl-card h2,
body.penli-site .penli-price-card h2 {
  font-size: 26px;
}
body.penli-site .penli-hero h1 {
  font-size: clamp(38px, 5vw, 70px);
}
body.penli-site .penli-stack {
  background: #f1f4fa;
  border-radius: 16px;
}
body.penli-site .penli-benefit {
  border: 0;
  box-shadow: none;
  background: #f4f6f8;
}
body.penli-site .cookie-banner {
  font-family: var(--ridge-font);
  border-radius: 14px;
}
body.penli-site .penli-report-frame {
  border-radius: 14px;
  width: 100%;
  left: auto;
  transform: none;
}
body.penli-site pre,
body.penli-site code {
  overflow-wrap: anywhere;
}
body.penli-site table {
  max-width: 100%;
}
/* App and authentication: brand precision, task-first composition. */
body.penli-site .app-login {
  min-height: 100dvh;
  padding: 32px 48px;
  background: #f8faff;
  display: block;
}
.ridge-auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - 64px);
  max-width: 1440px;
  margin: auto;
}
.ridge-auth-story {
  background: #eaf0ff;
  border-radius: 20px;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 620px;
}
.ridge-auth-story h2 {
  font-size: clamp(36px, 3.2vw, 50px);
  line-height: 1.18;
  margin: 45px 0 24px;
}
.ridge-auth-story p {
  font-size: 15px;
  max-width: 38ch;
}
.ridge-auth-points {
  display: grid;
  gap: 18px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.ridge-auth-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.ridge-auth-points svg {
  width: 18px;
  height: 18px;
  color: var(--ridge-green);
}
.ridge-auth-footer {
  font-size: 11px;
  color: var(--ridge-muted);
}
body.penli-site .auth-wrap {
  width: min(420px, 100%);
  align-self: center;
  justify-self: center;
  padding: 35px 0;
  margin: 0;
}
body.penli-site .auth-brand {
  margin-bottom: 24px;
  justify-content: space-between;
}
.ridge-auth-layout .auth-brand > .brand {
  display: none;
}
body.penli-site .auth-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
body.penli-site .auth-card h1 {
  font-size: 34px;
  line-height: 1.25;
  margin: 18px 0 12px;
}
body.penli-site .auth-card .sub {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 22px;
}
body.penli-site .auth-icon {
  background: var(--ridge-sky);
  border: 0;
  color: var(--ridge-blue);
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
body.penli-site .auth-tabs {
  padding: 4px;
  background: #eaf0f6;
  border: 0;
  border-radius: 8px;
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
}
body.penli-site .auth-tab {
  flex: 1;
  min-height: 42px;
  font-size: 12px;
  background: none;
  color: var(--ridge-muted);
  border: 0;
  border-radius: 6px;
}
body.penli-site .auth-tab.active {
  background: #fff;
  box-shadow: 0 2px 5px #18334a0c;
  color: var(--ridge-ink);
}
body.penli-site .field {
  margin-bottom: 18px;
}
body.penli-site .field label {
  font-size: 12px;
  font-weight: 650;
  color: var(--ridge-ink);
  margin-bottom: 7px;
  display: block;
}
body.penli-site .field input {
  min-height: 48px;
  border: 1px solid #c6d1dc;
  border-radius: 7px;
  background: #fff;
  color: var(--ridge-ink);
  font-size: 14px;
  box-shadow: none;
}
body.penli-site .field input::placeholder {
  color: #687785;
  font-size: 12px;
}
body.penli-site .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  line-height: 1.8;
  margin: 22px 0;
}
.check input {
  accent-color: var(--ridge-blue);
  min-width: 18px;
  min-height: 18px;
  margin-top: 3px;
}
body.penli-site .auth-msg.show {
  display: block;
  border-radius: 8px;
  background: #fff0eb;
  color: #8b321c;
  padding: 12px 14px;
  font-size: 12px;
  margin-bottom: 20px;
}
body.penli-site .auth-msg.ok {
  background: #e6f4ed;
  color: #176244;
}
body.penli-site .app-login-foot {
  font-size: 12px;
  margin-top: 26px;
}
.ridge-password-toggle {
  border: 0;
  background: none;
  color: var(--ridge-muted);
  font-size: 11px;
  min-height: 44px;
  text-decoration: underline;
  float: right;
  margin-top: -12px;
}
.ridge-auth-support {
  font-size: 11px;
  color: var(--ridge-muted);
  text-align: center;
  margin-top: 24px;
}
body.penli-site .app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 244px 1fr;
  background: #f5f7fa;
}
body.penli-site .app-side {
  position: sticky;
  top: 0;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: white;
  border-inline-end: 1px solid var(--ridge-line);
  padding: 24px 22px;
  color: var(--ridge-ink);
  width: auto;
}
body.penli-site .app-side .brand-name {
  font-size: 22px;
}
body.penli-site .brand-sub {
  margin: 5px 0 35px 51px;
  font-size: 10px;
  color: var(--ridge-muted);
}
body.penli-site .app-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
body.penli-site .app-nav a {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--ridge-muted);
  text-decoration: none;
}
body.penli-site .app-nav a.active,
body.penli-site .app-nav a:hover {
  background: #eaf0ff;
  color: var(--ridge-blue);
}
.app-nav svg {
  width: 18px;
  height: 18px;
}
.ridge-sidebar-help {
  margin-top: auto;
  background: var(--ridge-surface);
  padding: 16px;
  border-radius: 10px;
}
.ridge-sidebar-help strong {
  font-size: 12px;
}
.ridge-sidebar-help p {
  font-size: 11px;
  line-height: 1.75;
  margin: 7px 0;
}
.ridge-sidebar-help a {
  font-size: 11px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ridge-blue) !important;
}
body.penli-site .app-user {
  border-top: 1px solid var(--ridge-line);
  margin-top: 22px;
  padding-top: 18px;
}
body.penli-site .app-user .email {
  font-size: 11px;
  overflow-wrap: anywhere;
  color: var(--ridge-muted);
}
body.penli-site .app-user .tier {
  font-size: 10px;
  margin-top: 7px;
  border: 0;
  background: #eaf0ff;
  color: #294fbf;
  display: inline-block;
  border-radius: 4px;
  padding: 3px 7px;
}
body.penli-site .app-main {
  padding: 35px 42px;
  min-width: 0;
  width: 100%;
  max-width: 1350px;
  margin: auto;
  box-sizing: border-box;
  align-self: start;
}
body.penli-site .app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
body.penli-site .app-topbar h1 {
  font-size: 29px;
  line-height: 1.35;
  letter-spacing: -1px;
  margin: 0;
}
body.penli-site .app-topbar .hint {
  font-size: 12px;
  margin-top: 7px;
}
.ridge-app-top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ridge-dashboard-welcome {
  padding: 32px;
  background: #eaf0ff;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 25px;
}
.ridge-dashboard-welcome h2 {
  font-size: 25px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.ridge-dashboard-welcome p {
  font-size: 12px;
  max-width: 60ch;
  margin: 0;
}
.ridge-dashboard-welcome > .ridge-mark {
  width: 110px;
  height: 110px;
  opacity: 0.8;
}
.ridge-onboarding {
  background: white;
  border: 1px solid var(--ridge-line);
  padding: 27px;
  border-radius: 14px;
  margin-bottom: 25px;
}
.ridge-onboarding-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.ridge-onboarding h2 {
  font-size: 19px;
  margin: 0;
}
.ridge-onboarding-progress {
  font-size: 11px;
  color: var(--ridge-muted);
  white-space: nowrap;
}
.ridge-onboarding-track {
  height: 4px;
  border-radius: 5px;
  background: #e8edf4;
  margin: 22px 0;
}
.ridge-onboarding-track > span {
  display: block;
  height: 100%;
  background: var(--ridge-blue);
  border-radius: 5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.ridge-onboarding-list {
  display: grid;
  gap: 0;
}
.ridge-onboarding-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #edf0f4;
}
.ridge-onboarding-step:last-child {
  border: 0;
  padding-bottom: 0;
}
.ridge-step-check {
  width: 22px;
  height: 22px;
  border: 1px solid #acbdcd;
  accent-color: var(--ridge-blue);
  cursor: pointer;
}
.ridge-onboarding-step h3 {
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 5px;
  letter-spacing: -0.1px;
}
.ridge-onboarding-step p {
  font-size: 11px;
  margin: 0;
  line-height: 1.7;
}
.ridge-onboarding-step a {
  font-size: 11px;
  padding: 8px 11px;
  min-height: 40px;
}
.ridge-goal-select {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.ridge-goal-select select {
  background: #fff;
  border: 1px solid var(--ridge-line);
  border-radius: 7px;
  padding: 9px;
  min-height: 44px;
  max-width: 100%;
  font-size: 12px;
  color: var(--ridge-ink);
}
body.penli-site .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 0 0 24px;
}
body.penli-site .metric {
  background: white;
  border: 1px solid var(--ridge-line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: none;
}
body.penli-site .metric .label {
  font-size: 11px;
  color: var(--ridge-muted);
}
body.penli-site .metric .value {
  font-size: 31px;
  color: var(--ridge-ink);
  font-weight: 600;
  letter-spacing: -1px;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
body.penli-site .metric .hint {
  font-size: 10px;
  color: var(--ridge-muted);
  margin-top: 7px;
}
body.penli-site .panel-box {
  background: #fff;
  border: 1px solid var(--ridge-line);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: none;
}
body.penli-site .panel-box h2 {
  font-size: 20px;
  margin: 0 0 12px;
}
body.penli-site .panel-box p {
  font-size: 12px;
  line-height: 1.85;
}
body.penli-site .status-box {
  font-size: 11px;
  line-height: 1.8;
  background: #edf2f8;
  border: 0;
  color: var(--ridge-muted);
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.ridge-dashboard-columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
}
.ridge-resource-list {
  display: grid;
  gap: 0;
}
.ridge-resource-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ridge-line);
  padding: 16px 0;
  font-size: 12px;
  text-decoration: none;
  min-height: 50px;
}
.ridge-resource-list a:first-child {
  border: 0;
}
.ridge-empty-state {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ridge-empty-state > svg {
  width: 32px;
  height: 32px;
  color: var(--ridge-blue);
  flex-shrink: 0;
}
.ridge-empty-state h3 {
  font-size: 14px;
  margin: 0 0 8px;
}
.ridge-empty-state p {
  margin: 0;
}
.ridge-loading-bars {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  max-width: 70%;
}
.ridge-loading-bars span {
  display: block;
  height: 13px;
  border-radius: 5px;
  background: #eaf0f6;
}
.ridge-loading-bars span:nth-child(2) {
  width: 80%;
}
.ridge-loading-bars span:last-child {
  width: 55%;
}
.ridge-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.ridge-auth-error:empty {
  display: none;
}
.ridge-mobile-app-brand {
  display: none;
}
@media (min-width: 1100px) {
  .ridge-product-window {
    animation: ridge-arrive 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes ridge-arrive {
    from {
      opacity: 0.6;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 1199px) {
  body.penli-site .site-header .inner {
    gap: 24px;
    width: calc(100% - 48px);
  }
  body.penli-site .nav {
    gap: 19px;
  }
  .ridge-hero {
    gap: 32px;
  }
  .ridge-hero h1 {
    font-size: 56px;
  }
  .ridge-hero-intro > p {
    font-size: 15px;
  }
  .ridge-hero-intro .ridge-actions {
    gap: 10px;
  }
  .ridge-hero-intro .ridge-button {
    font-size: 12px;
    padding-inline: 15px;
  }
  .ridge-audience > div {
    gap: 24px;
    font-size: 14px;
  }
  .ridge-benefit-main {
    padding: 30px 25px;
    gap: 25px;
  }
  .ridge-benefit-main h3 {
    font-size: 23px;
  }
  .ridge-benefit-small {
    padding: 25px;
  }
  .ridge-offer {
    padding: 23px;
  }
  .ridge-recommended {
    font-size: 9px;
  }
  .ridge-preview-content {
    padding-inline: 26px;
  }
  .ridge-auth-layout {
    gap: 35px;
  }
  .ridge-auth-story {
    padding: 36px;
  }
  .ridge-auth-layout .auth-wrap {
    padding: 30px 20px;
  }
  body.penli-site .app-main {
    padding: 30px 28px;
  }
  .ridge-request {
    gap: 55px;
  }
}
@media (max-width: 1050px) {
  body.penli-site .site-header,
  body.penli-site .site-header .inner {
    height: 72px;
  }
  body.penli-site .site-header .inner {
    justify-content: space-between;
  }
  body.penli-site .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px;
  }
  body.penli-site .menu-toggle span {
    width: 17px;
    height: 1.5px;
    background: var(--ridge-ink);
    display: block;
  }
  body.penli-site .nav {
    display: none;
    position: fixed;
    inset: 72px 0 auto 0;
    height: calc(100dvh - 72px);
    width: 100%;
    background: white;
    padding: 24px;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: start;
    overflow: auto;
    gap: 0;
    z-index: 51;
  }
  body.penli-site .nav.open {
    display: flex;
    flex-direction: column;
  }
  body.penli-site .nav > a {
    font-size: 20px;
    padding: 18px 6px;
    min-height: 64px;
    border-bottom: 1px solid var(--ridge-line);
  }
  body.penli-site .nav-cta {
    margin-top: auto;
    padding-top: 25px;
    display: flex;
    gap: 12px;
    flex-direction: column;
  }
  body.penli-site .nav-cta a {
    min-height: 48px;
    justify-content: center;
  }
  .ridge-container {
    width: calc(100% - 56px);
  }
  .ridge-hero {
    padding-top: 56px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ridge-hero h1 {
    font-size: 60px;
    max-width: 850px;
  }
  .ridge-hero-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 35px;
    align-items: center;
  }
  .ridge-hero-intro > p {
    grid-row: span 2;
    margin: 0;
  }
  .ridge-hero-intro .ridge-actions {
    align-items: start;
    justify-content: end;
  }
  .ridge-hero-intro .ridge-micro {
    text-align: end;
    margin-top: 10px;
  }
  .ridge-product-stage {
    padding: 28px 28px 0;
  }
  .ridge-window-body {
    grid-template-columns: 170px 1fr;
  }
  .ridge-preview-side {
    padding: 22px 12px;
  }
  .ridge-preview-content {
    padding-inline: 24px;
  }
  .ridge-preview-title h2 {
    font-size: 24px;
  }
  .ridge-preview-tabs {
    gap: 20px;
  }
  .ridge-audience {
    gap: 25px;
  }
  .ridge-audience > div {
    gap: 20px;
  }
  .ridge-section-heading {
    gap: 35px;
  }
  .ridge-section-heading > p {
    flex-basis: 330px;
    font-size: 13px;
  }
  .ridge-benefit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ridge-benefit-main {
    grid-row: auto;
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
    padding: 40px;
  }
  .ridge-benefit-small {
    padding: 30px;
  }
  .ridge-steps {
    gap: 30px;
  }
  .ridge-scenarios {
    gap: 25px;
  }
  .ridge-scenarios h3 {
    font-size: 22px;
  }
  .ridge-offers {
    gap: 12px;
  }
  .ridge-offer {
    padding: 20px;
  }
  .ridge-offer-top {
    flex-direction: column;
    align-items: start;
    min-height: 65px;
    gap: 14px;
  }
  .ridge-offer h3 {
    font-size: 20px;
  }
  .ridge-offer .ridge-button {
    font-size: 11px;
    padding: 12px;
  }
  .ridge-price {
    font-size: 40px;
  }
  .ridge-faq-section {
    gap: 45px;
  }
  .ridge-final {
    padding: 42px;
    gap: 45px;
  }
  .ridge-final h2 {
    font-size: 37px;
  }
  .ridge-footer-grid {
    gap: 30px !important;
  }
  .ridge-detail-split {
    gap: 40px;
  }
  .ridge-dual-path article {
    padding: 30px;
  }
  .ridge-auth-story {
    padding: 30px;
  }
  .ridge-auth-story h2 {
    font-size: 38px;
  }
  body.penli-site .app {
    grid-template-columns: 205px 1fr;
  }
  body.penli-site .app-side {
    padding: 23px 16px;
  }
  body.penli-site .app-side .brand-name {
    font-size: 19px;
  }
  body.penli-site .app-main {
    padding: 25px;
  }
  .ridge-dashboard-columns {
    grid-template-columns: 1fr;
  }
  .ridge-onboarding-step {
    grid-template-columns: 24px 1fr;
  }
  .ridge-onboarding-step > a {
    grid-column: 2;
    justify-self: start;
  }
  .ridge-dashboard-welcome > .ridge-mark {
    width: 75px;
    height: 75px;
  }
}
@media (max-width: 760px) {
  .ridge-container {
    width: calc(100% - 40px);
  }
  body.penli-site .site-header .inner {
    width: calc(100% - 32px);
    gap: 15px;
  }
  body.penli-site .brand-name {
    font-size: 22px;
  }
  body.penli-site .header-actions {
    gap: 12px;
  }
  body.penli-site .header-actions > .penli-signin,
  body.penli-site .header-actions > .penli-download {
    display: none;
  }
  .ridge-hero {
    padding-block: 43px 36px;
    gap: 25px;
  }
  .ridge-hero h1 {
    font-size: clamp(36px, 7.8vw, 55px);
    line-height: 1.15;
  }
  .ridge-hero-intro {
    display: block;
  }
  .ridge-hero-intro > p {
    font-size: 14px;
    max-width: 54ch;
    margin-bottom: 23px;
  }
  .ridge-hero-intro .ridge-actions {
    justify-content: start;
    gap: 22px;
  }
  .ridge-hero-intro .ridge-micro {
    text-align: start;
    font-size: 10px;
    margin-top: 14px;
  }
  .ridge-product-stage {
    padding: 16px 16px 0;
    border-radius: 14px;
  }
  .ridge-preview-side {
    display: none;
  }
  .ridge-window-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ridge-window-bar {
    height: 51px;
    padding: 0 15px;
  }
  .ridge-window-brand > span {
    display: none;
  }
  .ridge-window-brand strong {
    font-size: 14px;
  }
  .ridge-window-brand img {
    width: 28px;
    height: 28px;
  }
  .ridge-example-label {
    font-size: 8px;
    padding: 4px 7px;
  }
  .ridge-preview-content {
    padding: 22px 20px 12px;
  }
  .ridge-preview-title h2 {
    font-size: 25px;
  }
  .ridge-complete {
    font-size: 9px;
  }
  .ridge-preview-tabs {
    gap: 20px;
    margin-top: 17px;
  }
  .ridge-preview-tabs button {
    font-size: 10px;
  }
  .ridge-finding {
    min-height: 184px;
  }
  .ridge-finding h3 {
    font-size: 15px;
    line-height: 1.5;
  }
  .ridge-finding p {
    font-size: 11px;
  }
  .ridge-finding-action {
    font-size: 10px;
  }
  .ridge-preview-bottom {
    gap: 8px;
  }
  .ridge-preview-bottom > span {
    display: none;
  }
  .ridge-preview-bottom > a {
    margin-inline-start: auto;
  }
  .ridge-stage-caption {
    min-height: 63px;
    gap: 10px;
    flex-wrap: wrap;
    padding-block: 12px;
    font-size: 9px;
  }
  .ridge-stage-caption a {
    min-height: 32px;
  }
  .ridge-audience {
    padding-block: 29px;
    display: block;
  }
  .ridge-audience p {
    font-size: 11px;
    margin-bottom: 18px;
  }
  .ridge-audience p br {
    display: none;
  }
  .ridge-audience > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 13px;
  }
  .ridge-section {
    padding-top: 65px;
  }
  .ridge-section-heading {
    display: block;
    margin-bottom: 29px;
  }
  .ridge-main h2 {
    font-size: 32px;
  }
  .ridge-section-heading > p {
    font-size: 14px;
    margin-top: 20px;
    max-width: 56ch;
  }
  .ridge-benefit-main {
    padding: 32px;
    gap: 35px;
  }
  .ridge-benefit-main h3 {
    font-size: 25px;
  }
  .ridge-paper {
    min-height: 290px;
    padding: 20px;
  }
  .ridge-paper > strong {
    font-size: 24px;
  }
  .ridge-benefit-small {
    padding: 25px;
  }
  .ridge-benefit-small h3 {
    font-size: 21px;
  }
  .ridge-process {
    padding-block: 65px 50px;
  }
  .ridge-section-heading > .ridge-button {
    margin-top: 16px;
  }
  .ridge-steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ridge-steps article {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .ridge-step-number {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    font-size: 11px;
  }
  .ridge-steps h3 {
    font-size: 20px;
    margin: 4px 0 10px;
  }
  .ridge-steps p {
    font-size: 13px;
  }
  .ridge-scenarios {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ridge-scenarios article {
    padding-block: 25px;
  }
  .ridge-scenarios h3 {
    max-width: 35ch;
    margin-block: 12px;
    font-size: 24px;
  }
  .ridge-scenarios p {
    max-width: 65ch;
    font-size: 13px;
  }
  .ridge-scenarios a {
    margin-top: 10px;
  }
  .ridge-pricing-section {
    padding-top: 50px;
  }
  .ridge-offers {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ridge-offer {
    padding: 28px;
  }
  .ridge-offer-top {
    flex-direction: row;
    align-items: center;
    min-height: 32px;
    margin-bottom: 18px;
  }
  .ridge-recommended {
    font-size: 10px;
  }
  .ridge-offer h3 {
    font-size: 25px;
    min-height: 0;
  }
  .ridge-offer > p {
    min-height: 0;
    font-size: 13px;
    max-width: 50ch;
  }
  .ridge-price {
    font-size: 44px;
    margin: 18px 0 22px;
    display: flex;
    gap: 0;
    align-items: baseline;
  }
  .ridge-price > span {
    font-size: 28px;
  }
  .ridge-price small {
    margin-inline-start: 9px;
  }
  .ridge-offer ul {
    padding-block: 19px;
  }
  .ridge-offer .ridge-button {
    font-size: 13px;
    margin-top: 3px;
  }
  .ridge-pricing-note {
    text-align: start;
    font-size: 10px !important;
    padding-inline: 5px;
  }
  .ridge-faq-section {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-block: 65px;
  }
  .ridge-faq-section .ridge-text-link {
    margin-top: 15px;
  }
  .ridge-questions summary {
    font-size: 13px;
    min-height: 68px;
  }
  .ridge-questions p {
    font-size: 12px;
  }
  .ridge-final {
    grid-template-columns: 1fr;
    padding: 30px;
    gap: 16px;
    margin-bottom: 55px;
  }
  .ridge-final h2 {
    font-size: 36px;
  }
  .ridge-final > div:last-child {
    padding-top: 0;
  }
  .ridge-final p {
    font-size: 13px;
  }
  .ridge-final .ridge-mark {
    width: 52px;
    height: 52px;
  }
  .ridge-page-head {
    padding-block: 45px 35px;
  }
  .ridge-page-head h1 {
    font-size: 44px;
  }
  .ridge-page-head > p {
    font-size: 14px;
    margin-top: 18px;
  }
  .ridge-request {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 60px;
  }
  .ridge-request > div > p {
    max-width: 60ch;
    font-size: 14px;
  }
  .ridge-human {
    margin-top: 23px;
  }
  .ridge-request-form {
    padding: 25px;
  }
  .ridge-choice-row strong {
    font-size: 14px;
  }
  .ridge-request-form .ridge-button {
    font-size: 13px;
  }
  .ridge-faq-full {
    padding-bottom: 60px;
  }
  .ridge-detail-split {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 60px;
  }
  .ridge-detail-split p {
    font-size: 14px;
  }
  .ridge-detail-split figure {
    padding: 18px;
  }
  .ridge-dual-path {
    grid-template-columns: 1fr;
    padding-top: 50px;
    gap: 20px;
  }
  .ridge-dual-path article {
    padding: 28px;
  }
  .ridge-note-block {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 60px;
  }
  .ridge-note-block p {
    font-size: 14px;
  }
  body.penli-site .ridge-footer {
    padding-top: 40px;
  }
  body.penli-site .ridge-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .ridge-footer-brand-block {
    grid-column: 1/-1;
  }
  .ridge-footer-about {
    max-width: 60ch !important;
  }
  .ridge-footer-bottom {
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
    padding-top: 25px;
  }
  .ridge-footer .footer-col h2 {
    margin-bottom: 12px !important;
  }
  .ridge-footer-bottom > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .ridge-footer .footer-col a {
    min-height: 44px !important;
  }
  .ridge-footer-disclaimer {
    font-size: 9px;
  }
  body.penli-site .page,
  body.penli-site .penli-page {
    width: calc(100% - 40px);
    padding-top: 36px;
    padding-bottom: 50px;
  }
  body.penli-site .penli-shot {
    width: 100%;
    margin-block: 25px;
  }
  body.penli-site .penli-dl-grid {
    grid-template-columns: 1fr;
  }
  body.penli-site .penli-pricing {
    grid-template-columns: 1fr;
  }
  body.penli-site .app-login {
    padding: 24px 20px;
    background: white;
  }
  .ridge-auth-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 48px);
    gap: 0;
  }
  .ridge-auth-story {
    display: none;
  }
  .ridge-auth-layout .auth-brand > .brand {
    display: flex;
  }
  body.penli-site .auth-wrap {
    width: min(420px, 100%);
    padding: 0;
    align-self: center;
  }
  body.penli-site .auth-brand {
    margin-bottom: 35px;
  }
  body.penli-site .auth-card h1 {
    font-size: 31px;
  }
  .ridge-auth-support {
    margin-top: 25px;
  }
  body.penli-site .app {
    display: block;
  }
  body.penli-site .app-side {
    position: relative;
    height: auto;
    padding: 15px 20px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ridge-line);
  }
  body.penli-site .app-side > .brand {
    display: none;
  }
  body.penli-site .brand-sub,
  .ridge-sidebar-help {
    display: none;
  }
  body.penli-site .app-nav {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow: auto;
  }
  body.penli-site .app-nav a {
    white-space: nowrap;
    font-size: 10px;
    min-height: 42px;
    padding: 8px 11px;
  }
  body.penli-site .app-nav svg {
    width: 15px;
    height: 15px;
  }
  .ridge-mobile-app-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .ridge-mobile-app-brand .brand img {
    width: 33px;
    height: 33px;
  }
  .ridge-mobile-app-brand .brand-name {
    font-size: 20px;
  }
  body.penli-site .app-main {
    padding: 25px 20px;
  }
  body.penli-site .app-topbar {
    margin-bottom: 22px;
  }
  body.penli-site .app-topbar h1 {
    font-size: 26px;
  }
  .ridge-app-top-actions {
    gap: 6px;
  }
  .ridge-app-top-actions [data-refresh] {
    font-size: 10px;
    padding: 7px 9px;
  }
  .ridge-dashboard-welcome {
    padding: 25px;
    gap: 15px;
  }
  .ridge-dashboard-welcome h2 {
    font-size: 23px;
  }
  .ridge-dashboard-welcome p {
    font-size: 11px;
  }
  .ridge-dashboard-welcome > .ridge-mark {
    display: none;
  }
  .ridge-onboarding {
    padding: 22px;
  }
  .ridge-onboarding-head {
    display: block;
  }
  .ridge-onboarding-progress {
    display: block;
    margin-top: 8px;
  }
  .ridge-onboarding h2 {
    font-size: 20px;
  }
  .ridge-goal-select {
    display: block;
  }
  .ridge-goal-select select {
    display: block;
    width: 100%;
    margin-top: 8px;
  }
  .ridge-onboarding-step {
    gap: 12px;
  }
  .ridge-onboarding-step h3 {
    font-size: 12px;
  }
  body.penli-site .metric-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.penli-site .metric {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 18px 22px;
  }
  body.penli-site .metric .value {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 26px;
    margin: 0;
  }
  body.penli-site .metric .hint {
    grid-column: 1;
  }
  body.penli-site .panel-box {
    padding: 24px;
  }
  .ridge-dashboard-columns {
    gap: 0;
  }
  body.penli-site .panel-box h2 {
    font-size: 19px;
  }
}
@media (max-width: 480px) {
  .ridge-container {
    width: calc(100% - 36px);
  }
  .ridge-hero h1 {
    font-size: 38px;
  }
  .ridge-hero-intro .ridge-actions {
    gap: 13px;
  }
  .ridge-hero-intro .ridge-button--primary {
    padding: 13px 15px;
    font-size: 12px;
  }
  .ridge-hero-intro .ridge-button--text {
    font-size: 11px;
    gap: 6px;
  }
  .ridge-hero-intro .ridge-button--text svg {
    width: 15px;
  }
  .ridge-product-stage {
    padding: 11px 11px 0;
  }
  .ridge-window-bar {
    padding: 0 11px;
  }
  .ridge-preview-content {
    padding: 18px 15px 10px;
  }
  .ridge-preview-title h2 {
    font-size: 21px;
  }
  .ridge-preview-title .ridge-muted {
    font-size: 9px;
  }
  .ridge-complete {
    display: none;
  }
  .ridge-preview-tabs {
    justify-content: space-between;
    gap: 8px;
  }
  .ridge-preview-tabs button {
    font-size: 9px;
  }
  .ridge-finding h3 {
    font-size: 14px;
  }
  .ridge-finding p {
    font-size: 10px;
  }
  .ridge-finding-head {
    gap: 8px;
  }
  .ridge-severity,
  .ridge-proof-status {
    font-size: 8px;
  }
  .ridge-finding-action {
    font-size: 9px;
    padding: 9px;
    align-items: start;
  }
  .ridge-stage-caption {
    font-size: 8px;
    gap: 3px;
  }
  .ridge-stage-caption svg {
    width: 13px;
  }
  .ridge-stage-caption span {
    gap: 6px;
  }
  .ridge-stage-caption a {
    gap: 5px;
  }
  .ridge-benefit-grid {
    grid-template-columns: 1fr;
  }
  .ridge-benefit-main {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 32px;
  }
  .ridge-paper {
    max-width: 230px;
    min-height: 280px;
  }
  .ridge-benefit-main h3 {
    font-size: 27px;
  }
  .ridge-benefit-small h3 {
    font-size: 24px;
  }
  .ridge-benefit-small p {
    font-size: 13px;
  }
  .ridge-main h2 {
    font-size: 31px;
  }
  .ridge-final h2 {
    font-size: 32px;
  }
  .ridge-page-head h1 {
    font-size: 39px;
  }
  .ridge-request-form {
    padding: 20px;
  }
  .ridge-choice-row label > span {
    padding: 11px 8px;
    font-size: 10px;
  }
  .ridge-choice-row strong {
    font-size: 13px;
  }
  .ridge-request .ridge-text-link {
    font-size: 12px;
  }
  .ridge-footer-grid {
    gap: 20px !important;
  }
  .ridge-final {
    padding: 26px;
  }
  body.penli-site .app-topbar {
    align-items: start;
  }
  .ridge-app-top-actions {
    flex-direction: column;
    align-items: end;
  }
  .ridge-app-top-actions .lang-link {
    font-size: 10px;
  }
  body.penli-site .app-topbar h1 {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .ridge-product-window {
    transform: none !important;
    opacity: 1 !important;
  }
}
@media print {
  .site-header,
  .ridge-footer,
  .ridge-actions,
  .ridge-button,
  .ridge-preview-side,
  .cookie-banner {
    display: none !important;
  }
  .ridge-container {
    width: 100%;
  }
  .ridge-product-stage,
  .ridge-final,
  .ridge-offer {
    background: white !important;
    box-shadow: none !important;
  }
  .ridge-hero {
    padding-top: 10px;
  }
  .ridge-section {
    break-inside: avoid;
    padding-top: 30px;
  }
}

body.penli-site .brand-name {
  text-transform: none;
}
body.penli-site .ridge-hero {
  grid-template-columns: 1.5fr 1fr;
}
body.penli-site .ridge-hero h1 {
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 600;
}
body.penli-site .ridge-preview-title h2 {
  font-size: 27px;
  font-weight: 600;
}
@media (max-width: 1050px) {
  body.penli-site .ridge-hero {
    grid-template-columns: 1fr;
  }
  body.penli-site .ridge-hero h1 {
    font-size: 56px;
  }
}
@media (max-width: 760px) {
  body.penli-site .ridge-hero h1 {
    font-size: clamp(36px, 7.8vw, 55px);
  }
  body.penli-site .ridge-preview-title h2 {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  body.penli-site .ridge-hero h1 {
    font-size: 38px;
  }
  body.penli-site .ridge-preview-title h2 {
    font-size: 21px;
  }
}
/* Shared reading, demonstration and installation pages. */
body.penli-site .penli-page-hero {
  width: min(1184px, calc(100% - 64px));
  margin: auto;
  padding: 72px 0 42px;
  text-align: left;
  border: 0;
}
body.penli-site .penli-page-hero h1 {
  font-size: clamp(38px, 4.3vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.14;
  max-width: 21ch;
  margin: 0 0 23px;
}
body.penli-site .penli-page-hero p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  max-width: 65ch;
  color: var(--ridge-muted);
}
body.penli-site .penli-page-hero .penli-hero-cta {
  justify-content: flex-start;
  margin-top: 27px;
}
body.penli-site .penli-content {
  width: min(1184px, calc(100% - 64px));
  max-width: none;
  padding: 15px 0 70px;
  margin: auto;
}
body.penli-site .penli-content > h2 {
  margin-top: 40px;
  font-size: 27px;
  letter-spacing: -0.025em;
}
body.penli-site .penli-content > p {
  max-width: 75ch;
}
body.penli-site .penli-card,
body.penli-site .penli-panel {
  box-shadow: none;
  border: 1px solid var(--ridge-line);
  border-radius: 12px;
  padding: 30px;
}
body.penli-site .penli-card h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
}
body.penli-site .penli-dl-grid.one {
  max-width: none;
  grid-template-columns: 1fr;
}
body.penli-site .penli-dl-grid.one .penli-card {
  max-width: 584px;
}
body.penli-site .penli-panel table th,
body.penli-site .penli-panel table td {
  padding-block: 14px;
  border-bottom: 1px solid var(--ridge-line);
}
body.penli-site .penli-panel table tr:last-child th,
body.penli-site .penli-panel table tr:last-child td {
  border: 0;
}
body.penli-site .penli-code {
  background: var(--ridge-ink);
  font-size: 12px;
  padding: 22px;
  overflow: auto;
}
body.penli-site .penli-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
body.penli-site .penli-shot {
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--ridge-line);
  border-radius: 12px;
  background: #f5f7fa;
  overflow: hidden;
}
body.penli-site .penli-shot[hidden] {
  display: none;
}
body.penli-site .penli-shot img {
  width: 100%;
  height: auto;
  display: block;
}
body.penli-site .penli-shot figcaption {
  padding: 24px;
  background: white;
  font-size: 13px;
}
body.penli-site .penli-shot figcaption strong {
  font-size: 17px;
  margin-bottom: 6px;
}
body.penli-site .penli-shot-chrome {
  background: #f5f7fa;
  border-color: var(--ridge-line);
  color: var(--ridge-muted);
  font-family: inherit;
  font-size: 11px;
}
body.penli-site .penli-filters {
  margin-bottom: 28px;
}
body.penli-site .penli-filters button {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
}
body.penli-site .penli-filters button.active {
  background: var(--ridge-ink);
  border-color: var(--ridge-ink);
  color: white;
}
body.penli-site .pdf-viewer {
  box-shadow: none;
  border: 1px solid var(--ridge-line);
  border-radius: 12px;
}
body.penli-site .pdf-frame {
  height: 780px;
  width: 100%;
}
body.penli-site .penli-cta {
  text-align: left;
  padding-bottom: 35px;
}
body.penli-site .penli-cta h2 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
body.penli-site .penli-cta .penli-hero-cta {
  justify-content: flex-start;
}
body.penli-site .penli-price-grid--trial {
  grid-template-columns: 1fr;
  max-width: 584px;
}
body.penli-site .legal {
  max-width: 820px;
  padding: 58px 0 70px;
  line-height: 1.85;
}
body.penli-site .legal h1 {
  font-size: 46px;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-weight: 600;
}
body.penli-site .legal h2 {
  margin-top: 40px;
  font-size: 25px;
}
body.penli-site .legal p,
body.penli-site .legal li {
  font-size: 14px;
  color: var(--ridge-muted);
}
body.penli-site .legal-box {
  background: var(--ridge-sky);
  border: 0;
  border-radius: 12px;
  padding: 24px;
}
body.penli-site .ridge-footer-languages {
  margin-top: 22px;
  max-width: 280px;
}
body.penli-site .ridge-footer-languages select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--ridge-line);
  border-radius: 6px;
  background: white;
  color: var(--ridge-muted);
  font-size: 12px;
}
@media (max-width: 760px) {
  body.penli-site .penli-page-hero,
  body.penli-site .penli-content {
    width: calc(100% - 40px);
  }
  body.penli-site .penli-page-hero {
    padding-top: 42px;
    padding-bottom: 32px;
  }
  body.penli-site .penli-page-hero h1 {
    font-size: 40px;
  }
  body.penli-site .penli-page-hero p {
    font-size: 14px;
  }
  body.penli-site .penli-shots {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.penli-site .penli-dl-grid {
    grid-template-columns: 1fr;
  }
  body.penli-site .penli-content > h2 {
    font-size: 25px;
  }
  body.penli-site .penli-card,
  body.penli-site .penli-panel {
    padding: 24px;
  }
  body.penli-site .penli-cta h2 {
    font-size: 30px;
  }
  body.penli-site .pdf-frame {
    height: 470px;
  }
  body.penli-site .legal {
    width: calc(100% - 40px);
    padding-top: 35px;
  }
  body.penli-site .legal h1 {
    font-size: 34px;
  }
  body.penli-site .legal h2 {
    font-size: 23px;
  }
  body.penli-site .legal p,
  body.penli-site .legal li {
    font-size: 14px;
  }
  body.penli-site .penli-code {
    padding: 17px;
    font-size: 11px;
  }
  body.penli-site .penli-panel table {
    font-size: 12px;
  }
}

/* Finish review: effective touch targets and readable secondary controls. */
body.penli-site .lang-link,
body.penli-site .header-actions .lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  opacity: 1;
  color: var(--ridge-muted);
}
.ridge-step-target {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.ridge-onboarding-step {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}
.ridge-onboarding-step > a,
.ridge-preview-bottom a,
.ridge-stage-caption a,
.ridge-preview-tabs button,
body.penli-site .auth-tab,
body.penli-site .app-nav a,
body.penli-site .ridge-footer .footer-col a {
  min-height: 44px;
  min-width: 44px;
}
@media (max-width: 1050px) {
  .ridge-onboarding-step {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

body.penli-site .ridge-footer .lang-picker > summary {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--ridge-muted);
  font-size: 12px;
  border: 1px solid var(--ridge-line);
  border-radius: 6px;
}

/* immersive.css */
@font-face {
  font-family: RidgeInter;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ridge-ink: #18181a;
  --ridge-muted: #545461;
  --ridge-blue: #242424;
  --ridge-blue-hover: #3e3e3e;
  --ridge-sky: #f7f7f7;
  --ridge-line: #dedede;
  --ridge-font: RidgeInter, Inter, sans-serif;
  --ridge-heading: Manrope, sans-serif;
  --ridge-scene: #375d89;
  --ease-out: cubic-bezier(.23,1,.32,1);
}
body.penli-site { font-family: var(--ridge-font); background: #fff; }
body.penli-site :is(h1,h2,h3,h4) { font-family: var(--ridge-heading); font-weight: 500; letter-spacing: -.02em; }
::selection { background: #dce9fa; color: #18181a; }
body.penli-site :focus-visible {
  outline: 0.5px solid #316bff;
  outline-offset: 4px;
}
body.penli-site .site-header { height: 64px; background: #fff; backdrop-filter: none; border-bottom: 1px solid #dedede; }
body.penli-site .site-header .inner { width: calc(100% - 64px); max-width: 1280px; height: 64px; min-height: 64px; gap: 32px; }
body.penli-site .brand { gap: 0; flex-shrink: 0; }
body.penli-site .brand > img:first-child { width: 34px; height: 34px; object-fit: contain; }
body.penli-site .brand .ridge-wordmark { width: 132px; height: 44px; object-fit: contain; max-width: none; }
body.penli-site .site-header .nav { gap: 30px; margin-inline-end: auto; flex: 0 1 auto; justify-content: flex-start; }
body.penli-site .site-header .nav > a { font-size: 14px; font-weight: 400; color: #18181a; }
body.penli-site .header-actions { gap: 8px; }
body.penli-site .penli-signin { border: 0; background: transparent; color: #707070; font-size: 14px; padding: 7px 14px; min-height: 36px; }
body.penli-site .penli-download { color: white; font-size: 14px; line-height: 21px; padding: 7px 14px; min-height: 36px; white-space: nowrap; }
body.penli-site .penli-demo { font-size: 14px; padding: 7px 14px; line-height: 21px; min-height: 36px; white-space: nowrap; }
body.penli-site .ridge-button, body.penli-site .btn { border-radius: 12px; }
.v7-button, body.penli-site .penli-download, body.penli-site .ridge-button--primary, body.penli-site .btn-primary {
  background: linear-gradient(#222 0%,#3e3e3e 100%) padding-box,linear-gradient(#2e2e2e 0%,#252525 39%) border-box;
  border: 1px solid transparent; color: #fff; border-radius: 12px;
  box-shadow: inset 0 1px 1px #ffffff30,0 2px 3px #0000001a;
}
body.penli-site :is(.penli-download,.penli-demo) { border-radius: 10px; height: 36px; min-height: 36px; padding: 6px 14px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.v7-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 17px; font: 500 16px/24px var(--ridge-font);
  letter-spacing: -.01em; text-decoration: none; transition: background .15s,box-shadow .15s,transform .15s var(--ease-out);
}
body.penli-site .v7-button { color: #fff; }
.v7-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.v7-button--white, .v7-button--secondary, body.penli-site .penli-demo, body.penli-site .ridge-button--secondary {
  background: linear-gradient(#fff,#f7f7f7); border: 1px solid #e6e6e6; color: #18181a !important;
  box-shadow: inset 0 0 0 1px #fff,0 2px #0000000d;
}
body.penli-site .v7-button--outline {
  color: #fff; background: linear-gradient(#ffffff0d 19.23%,#f7f7f703 128.85%),radial-gradient(71.81% 71.81% at 50% 14.41%,#ffffff26,transparent);
  border: 1px solid #ffffff40; box-shadow: 0 2px #0000000d;
}
.v7-button:active { transform: translateY(1px); }
.v7-button:disabled { opacity: .45; cursor: not-allowed; }
.v7-container { width: calc(100% - 64px); max-width: 1280px; margin-inline: auto; }
.v7-main { overflow: clip; }
body.penli-site .v7-main h2 { font-size: 40px; line-height: 44px; margin: 0 0 24px; }
body.penli-site .v7-main p { font-size: 16px; line-height: 24px; margin: 0 0 24px; }
.v7-main a { text-decoration: none; }
.v7-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.v7-text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; min-height: 44px; }
.v7-text-link svg, .v7-pricing-foot svg { width: 18px; height: 18px; flex-shrink: 0; }
.v7-text-link svg { transition: transform .18s var(--ease-out); }
.v7-hero { position: relative; isolation: isolate; background: var(--ridge-scene); padding-top: 372px; padding-bottom: 64px; }
.v7-hero:after { content: ''; position: absolute; z-index: -1; inset: auto 0 0; height: 350px; background: linear-gradient(transparent,#fff); }
.v7-panorama { position: absolute; z-index: -1; inset: 0 0 auto; height: 440px; overflow: hidden; }
.v7-panorama img { width: 100%; height: auto; display: block; min-height: 100%; object-fit: cover; object-position: center top; }
.v7-panorama:after { content: ''; position: absolute; inset: auto 0 0; height: 190px; background: linear-gradient(transparent,var(--ridge-scene) 90%); }
body.penli-site .v7-hero-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 0 40px 80px; align-items: start; }
body.penli-site .v7-hero h1 { margin: 0; color: #fff; font-size: 56px; line-height: 64px; letter-spacing: -.04em; text-wrap: initial; }
body.penli-site .v7-hero-copy p { color: #fff; font-size: 20px; line-height: 24px; letter-spacing: -.02em; margin: 0 0 24px; text-wrap: initial; }
.v8-hero-details { display: flex; flex-direction: column; }
.v7-hero-copy .v7-actions { margin-top: 8px; }
.v7-hero-copy .v7-button svg { display: none; }
.v7-live { background: #fff; border: 1px solid #dedede; border-radius: 12px; overflow: hidden; scroll-margin-top: 84px; box-shadow: 0 12px 34px -20px #35201035; }
body.penli-site .v7-live .ridge-demo { height: 600px; border: 0; border-radius: 0; box-shadow: none; font-family: var(--ridge-font); }
body.penli-site .v7-live .rd-panel :is(h1,h2,h3) { color: #f4edf3; font-family: var(--ridge-font); font-size: inherit; letter-spacing: -.025em; font-weight: 550; }
body.penli-site .v7-live .rd-panel h2 { font-size: 23px; margin: 0 0 15px; line-height: 1.2; }
body.penli-site .v7-live .rd-panel h3 { font-size: 16px; margin: 0 0 10px; line-height: 1.3; }
body.penli-site .v7-live .rd-panel p { font-size: 13px; line-height: 1.55; color: #b8acb5; margin: 0 0 12px; }
body.penli-site .v7-live .rd-panel a { color: #b2dffc; }
.v7-live .rd-panel { scrollbar-color: #5d4a58 #160e14; scrollbar-width: thin; }
.rd-brand > img[src*='/brand/v7/'] { filter: brightness(0) invert(1); box-shadow: none; border-radius: 0; }
.v7-live .rd-nav-item { min-height: 42px; }
.v7-tools { padding: 16px 0 48px; text-align: center; }
body.penli-site .v7-tools h2 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
body.penli-site .v7-tools p { max-width: 700px; margin: 0 auto 32px; color: #63636b; }
.v8-tools-window { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.v8-tools-track { display: flex; width: max-content; animation: ridge-tools 48s linear infinite; }
.v8-tools-group { display: flex; align-items: center; gap: 64px; padding-inline-end: 64px; }
.v8-tool { flex: 0 0 100px; display: grid; place-items: center; width: 100px; height: 100px; background: transparent; }
.v8-tool img { display: block; width: 100px; height: 100px; object-fit: contain; }
.v8-tools-window:is(:hover,:focus-within,[data-offscreen='true']) .v8-tools-track { animation-play-state: paused; }
.v8-tools-controls { display: flex; justify-content: center; gap: 24px; align-items: center; margin-top: 16px; }
@keyframes ridge-tools { to { transform: translateX(-50%); } }
.v8-divider { height: 56px; border-block: 1px solid #dedede; background: repeating-linear-gradient(-45deg,#dedede99 0 8px,transparent 8px 16px); }
.v7-intro, .v7-stories, .v7-moments, .v7-faq { border-inline: 1px solid #dedede; }
.v7-intro { text-align: center; padding: 88px 48px 40px; border-bottom: 1px solid #dedede; }
.v7-intro p { max-width: 680px; margin-inline: auto !important; }
.v7-stories { padding: 32px 48px 72px; position: relative; }
.v7-story { position: sticky; top: calc(96px + var(--story-index)*24px); display: grid; grid-template-columns: .88fr 1.12fr; gap: 56px; align-items: stretch; padding: 32px 32px 32px 48px; min-height: 600px; margin-bottom: 80px; background: #fff; border: 1px solid #ededed; border-radius: 48px; }
.v7-story:last-child { margin-bottom: 0; }
.v7-story-copy { order: 0; padding: 0 0 32px; align-self: center; }
body.penli-site .v7-story-copy h2 { font-size: 32px; line-height: 40px; letter-spacing: -.02em; margin-bottom: 20px; text-wrap: initial; }
.v8-story-step { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border: 4px solid #fff; outline: 1px solid #ddd; border-radius: 50%; background: linear-gradient(135deg,#85a5c9,#345d8c); color: #fff; font-size: 12px; font-weight: 600; }
.v7-story:nth-child(2) .v8-story-step { background: linear-gradient(135deg,#527cb3,#1d3056); }
.v7-story:nth-child(3) .v8-story-step { background: linear-gradient(135deg,#a993b5,#5a3569); }
.v7-story-visual { order: 1; min-width: 0; overflow: hidden; border-radius: 22px; display: flex; align-items: center; padding: 40px 0 40px 32px; position: relative; background: #375d89 url('/assets/brand/v7/hero-1280.webp') center/cover; }
.v7-story:nth-child(2) .v7-story-visual { background: #eef0f4; }
.v7-story:nth-child(3) .v7-story-visual { background: #ebe7ed; }
.v7-story-visual img { display: block; width: 125%; max-width: none; height: auto; border-radius: 12px; box-shadow: 0 20px 45px -25px #0008; }
.v7-story-copy ul, .v7-price ul { padding: 0; list-style: none; margin: 24px 0; }
.v7-story-copy li, .v7-price li { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 14px; line-height: 22px; color: #545461; }
.v7-story-copy li svg, .v7-price li svg { width: 18px; height: 22px; flex-shrink: 0; color: #316bff; }
.v7-risk-section { border-block: 1px solid #dedede; background: #fbfbfb; }
.v7-risk-layout { border-inline: 1px solid #dedede; padding: 96px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.v7-risk-example { background: #fff; border: 1px solid #dedede; border-radius: 16px; overflow: hidden; }
.v7-risk-tabs { display: flex; border-bottom: 1px solid #dedede; padding: 0 24px; gap: 22px; }
.v7-risk-tabs button { position: relative; border: 0; background: transparent; color: #63636b; font-size: 13px; font-weight: 500; padding: 16px 0; min-height: 48px; white-space: nowrap; }
.v7-risk-tabs button[aria-selected='true'] { color: #2254c8; box-shadow: inset 0 -2px #316bff; }
.v7-risk-example [role='tabpanel'] { padding: 32px; min-height: 310px; }
.v7-example { font-size: 11px; line-height: 16px; color: #63636b; display: block; margin: 16px 0 0; }
body.penli-site .v7-risk-example h3 { font-size: 24px; line-height: 32px; margin: 0 0 16px; }
body.penli-site .v7-risk-example p { font-size: 14px; }
.v7-risk-action { display: flex; gap: 8px; padding: 16px; background: #f2f7f4; border-radius: 8px; color: #2f5949; font-size: 12px; line-height: 20px; }
.v7-risk-action svg { width: 18px; height: 20px; flex-shrink: 0; }
.v7-local { border-bottom: 1px solid #dedede; }
.v7-local-inner { border-inline: 1px solid #dedede; padding: 80px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.v7-local-art { min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fbfbfb; border: 1px solid #eee; border-radius: 24px; }
.v7-local-art > img { width: 160px; height: 160px; object-fit: contain; }
.v7-local-platform { margin-top: 24px; text-align: center; }
.v7-local-platform span { display: block; font-size: 16px; font-weight: 500; }
.v7-local-platform span + span { font-size: 13px; color: #63636b; margin-top: 6px; }
.v7-local small { display: block; color: #63636b; font-size: 12px; line-height: 20px; margin-top: 20px; }
.v7-moments { padding: 96px 64px; }
.v7-section-head { text-align: center; max-width: 850px; margin: 0 auto 48px; }
.v7-section-head > p { max-width: 620px; margin-inline: auto !important; }
.v7-moment-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.v7-moment-grid article { border-top: 1px solid #dedede; padding: 28px 0 0; display: flex; flex-direction: column; }
body.penli-site .v7-moment-grid h3 { font-size: 24px; line-height: 32px; margin: 0 0 16px; }
body.penli-site .v7-moment-grid p { font-size: 14px; }
.v7-moment-grid a { margin-top: auto; }
.v7-pricing-section { background: #fbfbfb; border-block: 1px solid #dedede; }
.v7-pricing-section > .v7-container { padding: 88px 48px; border-inline: 1px solid #dedede; }
.v7-prices { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.v7-price { padding: 32px 24px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; border: 1px solid #dedede; }
.v7-price--featured { border-color: #a9bfff; background: #f3f7ff; }
body.penli-site .v7-price h3 { font-size: 20px; line-height: 28px; margin: 0 0 4px; }
body.penli-site .v7-price .v7-price-name { font-size: 14px; color: #63636b; margin-bottom: 24px; }
.v7-price-amount { font: 500 48px/56px var(--ridge-heading); letter-spacing: -.03em; margin-bottom: 24px; font-variant-numeric: tabular-nums; color: #18181a; white-space: nowrap; }
.v7-price-amount > span { font-size: 30px; }
.v7-price-amount small { display: block; font: 400 12px/20px var(--ridge-font); color: #63636b; letter-spacing: 0; }
body.penli-site .v7-price > p { font-size: 14px; margin-bottom: 8px; }
.v7-price ul { flex: 1; margin: 16px 0 24px; }
.v7-price li { font-size: 13px; }
.v7-price .v7-button { font-size: 14px; padding-inline: 10px; }
body.penli-site .v7-pricing-foot { margin: 32px 0 0; font-size: 13px; text-align: center; }
.v7-pricing-foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.v7-faq { padding: 96px 64px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.v7-faq .ridge-questions { margin: 0; }
.v7-faq .ridge-questions details:first-child { border-top: 1px solid #dedede; }
body.penli-site .v7-faq .ridge-questions p { font-size: 14px; }
.v7-final { position: relative; isolation: isolate; background: #345b88 url('/assets/brand/v7/hero.webp') center 35%/cover; padding: 80px 0; }
.v7-final:before { content: ''; position: absolute; inset: 0; z-index: -1; background: #15375bc9; }
.v7-final .v7-container > div { max-width: 720px; margin-inline: auto; text-align: center; }
.v7-final img { width: 56px; height: 56px; filter: brightness(0) invert(1); margin-bottom: 24px; }
body.penli-site .v7-final h2 { color: #fff; font-size: 48px; line-height: 56px; }
body.penli-site .v7-final p { color: #fff; }
.v7-final .v7-actions { justify-content: center; }
body.penli-site .ridge-page-head { padding-top: 80px; padding-bottom: 48px; }
body.penli-site .ridge-page-head h1 { font-size: 56px; line-height: 64px; letter-spacing: -.04em; max-width: 980px; }
body.penli-site .ridge-offer.is-featured { border-color: #bbceff; background: #f3f7ff; }
body.penli-site .ridge-recommended { background: #fff; color: #2254c8; }
body.penli-site .ridge-footer { background: #fbfbfb; border-top: 1px solid #dedede; }
body.penli-site .ridge-footer p { color: #63636b; }
body.penli-site .ridge-footer .brand .ridge-wordmark { width: 150px; height: auto; }
@media (hover:hover) and (pointer:fine) {
  .v7-button:hover,body.penli-site .penli-download:hover { background: linear-gradient(#2a2a2a,#4a4a4a); }
  .v7-button--white:hover,.v7-button--secondary:hover,body.penli-site .penli-demo:hover { background: #fff; box-shadow: inset 0 0 0 1px #fff,0 3px 5px #00000014; }
  body.penli-site .v7-button--outline:hover { background: #ffffff24; }
  .v7-text-link:hover svg { transform: translateX(3px); }
}

body.penli-site .ridge-auth-story {
  background: #345d8c url("/assets/brand/v7/hero.webp") center top / auto 60%
    no-repeat;
  position: relative;
  isolation: isolate;
  justify-content: space-between;
}
body.penli-site .ridge-auth-story:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#345d8c22 10%, #345d8c 59%);
}
body.penli-site .ridge-auth-story .brand img {
  filter: brightness(0) invert(1);
}
body.penli-site .ridge-auth-story h2 {
  color: #fff;
}
body.penli-site .ridge-auth-story :is(p, li, .ridge-auth-footer) {
  color: #e3edf9;
}
body.penli-site .ridge-auth-story > div {
  margin-top: 210px;
}
body.penli-site .ridge-auth-story .ridge-auth-points svg {
  color: #c6def7;
}
body.penli-site .app-side {
  background: #fbfbfb;
}
body.penli-site .app-side > .brand .ridge-wordmark {
  width: 137px;
  height: auto;
}
body.penli-site .ridge-dashboard-welcome {
  background: #345d8c url("/assets/brand/v7/hero.webp") right 45% / cover
    no-repeat;
  position: relative;
  isolation: isolate;
  min-height: 230px;
  border: 0;
}
body.penli-site .ridge-dashboard-welcome:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #183c63fa, #254d7899 65%, #254d7800);
  border-radius: inherit;
  z-index: -1;
}
body.penli-site .ridge-dashboard-welcome h2 {
  color: #fff;
  max-width: 550px;
}
body.penli-site .ridge-dashboard-welcome p {
  color: #e3edf9;
  max-width: 490px;
}
body.penli-site .ridge-dashboard-welcome > .ridge-mark {
  display: none;
}
body.penli-site .ridge-onboarding {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0 30px;
  background: transparent;
}
body.penli-site .app-nav a.active {
  color: #2254c8;
  background: #e9f3ff;
}
.v7-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 25px 0;
  margin-top: 18px;
  border-top: 1px solid #e3e7ed;
}
.v7-setup h3 {
  font-size: 18px;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.v7-setup p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: #626d7d;
}
.v7-setup label {
  font-size: 12px;
  font-weight: 550;
  display: block;
  margin: 0 0 8px;
}
.v7-setup input[type="url"] {
  width: 100%;
  border: 1px solid #d7dfe9;
  background: #fff;
  padding: 13px;
  border-radius: 7px;
  min-height: 46px;
  font-size: 14px;
  margin-bottom: 10px;
}
.v7-setup .v7-setup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 8px;
  font-weight: 400;
  line-height: 1.6;
}
.v7-setup-consent input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 1px 0;
}
.v7-setup-note {
  font-size: 11px;
  color: #6b7584;
  line-height: 1.6;
  display: block;
  margin-top: 9px;
}
.v7-setup-summary {
  background: #f4f7fb;
  padding: 22px;
  border-radius: 10px;
}
.v7-setup-summary textarea {
  width: 100%;
  height: 135px;
  border: 0;
  background: transparent;
  resize: vertical;
  font: 12px/1.65 var(--ridge-font);
  color: #3f4e63;
  display: block;
  margin-bottom: 12px;
}
.v7-setup-summary .v7-button {
  font-size: 12px;
  min-height: 43px;
}
.v7-platforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.v7-platforms a {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 13px;
  align-items: center;
  border: 1px solid #d9e1ed;
  background: white;
  border-radius: 7px;
  font-size: 12px;
  text-decoration: none;
}
.v7-setup-status {
  min-height: 22px;
  font-size: 12px;
  margin-top: 8px;
  color: #37694f;
}

body.penli-site .ridge-onboarding-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
body.penli-site .ridge-onboarding-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  border: 1px solid #e3e7ed;
  border-radius: 10px;
  padding: 16px 12px;
  align-items: start;
  background: #fafbfc;
}
body.penli-site .ridge-onboarding-step.is-current {
  background: #edf3fb;
  border-color: #b7cce7;
}
body.penli-site .ridge-onboarding-step h3 {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 6px;
}
body.penli-site .ridge-onboarding-step p {
  font-size: 11px;
  line-height: 1.6;
}
body.penli-site .ridge-onboarding-step .ridge-step-target {
  width: 44px;
  height: 44px;
  margin-top: -6px;
}
body.penli-site .ridge-onboarding-step button {
  grid-column: 2;
  align-self: end;
  justify-content: flex-start;
  min-height: 40px;
  font-size: 11px;
  padding: 7px 12px;
  border: 1px solid #d6e0ed;
}
.v7-onboarding-panels {
  border-top: 1px solid #e1e7ef;
  margin-top: 24px;
  padding-top: 26px;
}
.v7-onboarding-panels [hidden] {
  display: none !important;
}
.v7-onboarding-panels h3 {
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 12px;
}
.v7-onboarding-panels p {
  font-size: 13px;
  line-height: 1.75;
  color: #626c7b;
}
.v7-onboarding-panels .v7-setup {
  margin: 0;
  padding: 0;
  border: 0;
}
.v7-install-guide {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: center;
}
.v7-install-guide img {
  width: 100%;
  height: auto;
  box-shadow: 0 12px 28px -15px #20324b66;
  border-radius: 8px;
}
.v7-install-guide .v7-button {
  font-size: 12px;
}
.v7-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rd-brand > img[src*="/brand/v7/"] {
  filter: brightness(0) invert(1);
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 900px) {
  body.penli-site .ridge-onboarding-list {
    grid-template-columns: 1fr;
  }
  body.penli-site .ridge-onboarding-step {
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    padding: 14px;
  }
  body.penli-site .ridge-onboarding-step button {
    grid-column: 3;
  }
  body.penli-site .ridge-onboarding-step .ridge-step-target {
    width: 44px;
    margin: 0;
  }
  .v7-install-guide {
    grid-template-columns: 1fr;
  }
  .v7-install-guide img {
    max-width: 430px;
  }
  .v7-setup {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  body.penli-site .ridge-onboarding-step {
    grid-template-columns: 44px 1fr;
    gap: 8px;
  }
  body.penli-site .ridge-onboarding-step button {
    grid-column: 2;
    justify-self: start;
  }
  body.penli-site .ridge-onboarding-step .ridge-step-target {
    width: 44px;
  }
  .v7-install-guide img {
    display: none;
  }
}

.ridge-resource-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ridge-sidebar-help a,
.app-login-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ridge-sidebar-help svg,
.app-login-foot svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ridge-back-arrow {
  display: inline-flex;
  transform: rotate(180deg);
}
@media (max-width: 1180px) {
  body.penli-site .site-header .inner { gap: 20px; }
  body.penli-site .site-header .nav { gap: 18px; }
  body.penli-site .header-actions > .penli-signin { display: none; }
  .v7-story { padding: 32px; gap: 32px; }
  .v7-stories { padding-inline: 32px; }
}
@media (max-width: 1050px) {
  body.penli-site .site-header,body.penli-site .site-header .inner { height: 60px; min-height: 60px; }
  body.penli-site .header-actions > .penli-demo { display: none; }
  body.penli-site .site-header .nav { gap: 0; margin: 0; top: 60px; }
  body.penli-site .site-header .nav > a { font-size: 16px; }
  body.penli-site .site-header .nav-cta { display: flex; flex-direction: column; gap: 12px; }
  body.penli-site .site-header .nav-cta a { min-height: 44px; }
  body.penli-site .site-header .inner { width: calc(100% - 32px); }
  .v7-hero { padding-top: 330px; }
  body.penli-site .v7-hero-copy { gap: 36px; padding-inline: 16px; }
  body.penli-site .v7-hero h1 { font-size: 44px; line-height: 52px; }
  body.penli-site .v7-hero-copy p { font-size: 18px; line-height: 24px; }
  .v7-story { min-height: 530px; gap: 24px; }
  body.penli-site .v7-story-copy h2 { font-size: 28px; line-height: 36px; }
  .v7-risk-layout,.v7-local-inner,.v7-faq { padding: 64px 32px; gap: 32px; }
  .v7-moments,.v7-pricing-section > .v7-container { padding: 64px 32px; }
  .v7-prices { grid-template-columns: 1fr; max-width: 560px; margin: auto; }
  .v7-price { padding: 32px; }
  .v7-price .v7-button { align-self: start; min-width: 220px; }
}
@media (max-width: 900px) {
  body.penli-site .v7-hero-copy { grid-template-columns: 1fr; text-align: center; max-width: 650px; gap: 32px; padding-bottom: 48px; }
  body.penli-site .v7-hero h1 { font-size: 40px; line-height: 46px; }
  .v8-hero-details { gap: 32px; }
  .v7-hero-copy .v7-actions { order: -1; margin: 0; justify-content: center; }
  .v7-hero-copy h1 br { display: none; }
  .v7-live .rd-workspace { flex-direction: column; }
  .v7-live .rd-sidebar { display: block !important; width: 100%; padding: 0; border: 0; background: #160e16; flex-shrink: 0; }
  .v7-live .rd-sidebar .rd-brand,.v7-live .rd-license,.v7-live .rd-chrome { display: none; }
  .v7-live .rd-nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; scrollbar-width: thin; }
  .v7-live .rd-nav-item { flex: 0 0 auto; width: auto; min-height: 44px; padding: 9px 13px; font-size: 11px; }
  .v7-live .rd-nav-count { display: none; }
  .v7-live .rd-main,.v7-live .rd-panel { min-height: 0; }
  .v7-story { position: static; grid-template-columns: 1fr; min-height: 0; margin-bottom: 24px; border-radius: 24px; }
  .v7-story-copy { padding: 0; }
  .v7-story-visual { min-height: 320px; padding: 24px; }
  .v7-story-visual img { width: 100%; }
  .v7-story-copy ul { margin: 16px 0; }
  .v7-story-copy .v8-story-step { margin-bottom: 20px; }
  .v7-local-art { min-height: 300px; }
  .v7-risk-layout,.v7-local-inner,.v7-faq { grid-template-columns: 1fr; gap: 32px; }
  .v7-local-art { order: 1; }
  .v7-moment-grid { grid-template-columns: 1fr; gap: 24px; }
  .v7-final,body.penli-site .ridge-auth-story,body.penli-site .ridge-dashboard-welcome { background-image: url('/assets/brand/v7/hero-1280.webp'); }
}
@media (max-width: 640px) {
  .v7-container { width: calc(100% - 32px); }
  body.penli-site .brand > img:first-child { width: 32px; height: 32px; }
  body.penli-site .brand .ridge-wordmark { width: 128px; height: 42px; }
  body.penli-site .header-actions .lang-switcher { display: none; }
  body.penli-site .site-header .menu-toggle { width: 36px; height: 36px; border: none; background: transparent; padding: 8px; }
  .v7-hero { padding-top: 300px; padding-bottom: 32px; }
  .v7-panorama { top: 0; height: 350px; }
  .v7-panorama img { height: 100%; width: 100%; object-fit: cover; }
  .v7-panorama:after { height: 160px; background: linear-gradient(transparent,var(--ridge-scene) 80%); }
  body.penli-site .v7-hero-copy { width: calc(100% - 32px); padding: 0 0 32px; gap: 32px; }
  body.penli-site .v7-hero h1 { font-size: 32px; line-height: 36px; letter-spacing: -.03em; }
  body.penli-site .v7-hero-copy p { font-size: 20px; line-height: 24px; letter-spacing: -.02em; margin-bottom: 24px; }
  .v7-hero-copy .v7-actions { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
  .v7-hero-copy .v7-button { min-height: 44px; width: 100%; font-size: 16px; }
  .v8-hero-description p:last-child { margin-bottom: 0 !important; }
  .v7-live { width: calc(100% - 32px); border-radius: 12px; }
  .v7-live .rd-nav-ico { display: none; }
  .v7-live .rd-nav-item { padding-inline: 10px; }
  body.penli-site .v7-live .ridge-demo { height: 535px; }
  .v7-live .rd-panel { padding: 16px !important; }
  .v7-live .rd-topbar { padding-inline: 13px; height: 43px; }
  .v7-live .rd-vulns-body { display: flex; flex-direction: column; }
  .v7-live .rd-vuln-list { max-height: 150px; overflow: auto; }
  .v7-live .rd-panel :is(input,select,textarea) { max-width: 100%; min-width: 0; }
  .v7-live .rd-panel pre { max-width: 100%; overflow: auto; }
  .v7-live .rd-panel .rd-vtabs { flex-wrap: wrap; }
  .v7-tools { padding: 16px 0 28px; }
  body.penli-site .v7-tools h2 { font-size: 22px; line-height: 28px; }
  body.penli-site .v7-tools p { font-size: 14px; line-height: 22px; }
  .v8-tools-group { gap: 32px; padding-inline-end: 32px; }
  .v8-tool,.v8-tool img { width: 76px; height: 76px; }
  .v8-tool { flex-basis: 76px; }
  .v8-tools-controls { gap: 12px; margin-top: 12px; }
  .v8-tools-controls .v7-text-link { font-size: 12px; }
  .v8-divider { height: 32px; }
  body.penli-site .v7-main h2 { font-size: 28px; line-height: 32px; margin-bottom: 20px; }
  .v7-intro { padding: 48px 16px 24px; }
  .v7-intro p { font-size: 14px !important; line-height: 22px !important; }
  .v7-intro h2 br { display: none; }
  .v7-stories { padding: 16px 12px 32px; }
  .v7-story { padding: 24px 16px 16px; border-radius: 20px; gap: 20px; }
  body.penli-site .v7-story-copy h2 { font-family: var(--ridge-font); font-size: 20px; line-height: 28px; letter-spacing: -.02em; font-weight: 600; }
  body.penli-site .v7-story-copy p { font-size: 14px; line-height: 22px; margin-bottom: 16px; }
  .v7-story-copy li { font-size: 12px; line-height: 20px; }
  .v7-story-visual { min-height: 0; padding: 16px; border-radius: 12px; }
  .v7-story-visual img { border-radius: 6px; }
  .v7-risk-layout,.v7-local-inner,.v7-faq { padding: 48px 16px; gap: 24px; }
  .v7-risk-tabs { gap: 14px; padding-inline: 16px; }
  .v7-risk-tabs button { font-size: 11px; }
  .v7-risk-example [role='tabpanel'] { padding: 24px 18px; min-height: 320px; }
  body.penli-site .v7-risk-example h3 { font-size: 22px; line-height: 28px; }
  .v7-risk-action { padding: 12px; font-size: 11px; }
  .v7-local-art { min-height: 250px; }
  .v7-local-art > img { width: 130px; height: 130px; }
  .v7-moments,.v7-pricing-section > .v7-container { padding: 48px 16px; }
  .v7-section-head { margin-bottom: 28px; }
  body.penli-site .v7-section-head p { font-size: 14px; line-height: 22px; }
  .v7-moment-grid article { padding-top: 24px; }
  body.penli-site .v7-moment-grid h3 { font-size: 22px; line-height: 28px; }
  .v7-price { padding: 24px 20px; }
  .v7-price .v7-button { min-width: 0; width: 100%; }
  .v7-prices { gap: 16px; }
  .v7-final { padding: 56px 0; }
  body.penli-site .v7-final h2 { font-size: 36px; line-height: 40px; }
  .v7-final .v7-actions { flex-direction: column; }
  .v7-final .v7-button { width: 100%; }
  body.penli-site .ridge-page-head { padding-top: 40px; padding-bottom: 24px; }
  body.penli-site .ridge-page-head h1 { font-size: 36px; line-height: 40px; }
  body.penli-site .ridge-dashboard-welcome { min-height: 220px; background-position: center; }
  body.penli-site .ridge-dashboard-welcome h2 { font-size: 28px; }
  .v7-setup { gap: 16px; }
  .v7-setup-summary { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v8-tools-track { animation: none; }
  .v8-tools-group[aria-hidden='true'] { display: none; }
  .v8-tools-window { overflow-x: auto; mask-image: none; }
  .v7-story { position: static; }
  .v7-button,.v7-text-link svg { transition: none; }
  .v7-button:active,.v7-text-link:hover svg { transform: none; }
  html { scroll-behavior: auto; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v7-panorama img {
      animation: ridge-scene-depth linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      transform-origin: 50% 40%;
    }
    @keyframes ridge-scene-depth {
      from { transform: scale(1); }
      to { transform: scale(1.07); }
    }
  }
}

/* suite.css */
/* The orbital mark and wordmark keep their order in right-to-left layouts. */
body.penli-site .brand { direction: ltr; }
/* v9: lemlist's original CSS is loaded before the AgentRidge adaptation.
   Reference measurements and untouched SHA-256 sources: spec 017. */
body.penli-site [hidden] { display: none !important; }
body.penli-site .site-announcement { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 20px; background: #24476f; color: #fff; text-align: center; font: 400 13px/20px var(--ridge-font); text-wrap: balance; }
.site-announcement-inner { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 1280px; }
.site-announcement-icon { display: inline-flex; flex: 0 0 16px; }
.site-announcement-icon svg { display: block; }
.site-announcement-message { min-width: 0; }
.site-announcement strong { font-weight: 600; white-space: nowrap; }
body.penli-site .site-header { overflow: visible; z-index: 100; }
body.penli-site .site-header .inner { position: relative; gap: 28px; }
body.penli-site .site-header .nav { gap: 4px; }
body.penli-site .site-header .nav > a { padding: 8px 14px; }
.nav-dropdown { position: static; }
.nav-trigger { display: flex; align-items: center; gap: 6px; min-height: 36px; border: 0; border-radius: 8px; padding: 8px 12px; color: var(--ridge-ink); background: transparent; font: 400 14px/20px var(--ridge-font); white-space: nowrap; cursor: pointer; }
.nav-trigger:hover,.nav-trigger[aria-expanded='true'] { background: #fafafa; }
.nav-chevron { flex: 0 0 12px; width: 12px; height: 12px; transition: transform .16s ease-out; }
.nav-trigger[aria-expanded='true'] .nav-chevron { transform: rotate(180deg); }
.mega-panel { position: absolute; inset: 74px 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fff; border: 1px solid var(--ridge-line); border-radius: 12px; box-shadow: 0 8px 16px -10px #0005; overflow: hidden; color: var(--ridge-ink); z-index: 102; }
.mega-panel:before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.mega-column { min-width: 0; padding: 24px 8px; }
.mega-column + .mega-column { border-inline-start: 1px solid var(--ridge-line); }
.mega-column-head { display: flex; gap: 12px; min-height: 98px; padding: 8px 12px 20px; border-bottom: 1px solid var(--ridge-line); margin: 0 -8px 16px; }
.mega-column-head > img { flex: 0 0 48px; width: 48px; height: 48px; margin-inline-start: 8px; padding: 10px; border-radius: 10px; background: #f1f5fa; }
body.penli-site .mega-column h2 { font: 600 12px/18px var(--ridge-font); letter-spacing: 0; margin: 0 0 5px; }
.mega-column p { color: #63636b; font: 400 12px/17px var(--ridge-font); margin: 0; }
.mega-links { display: flex; flex-direction: column; gap: 2px; }
body.penli-site .mega-panel .mega-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 12px; font: 500 13px/20px var(--ridge-font); color: var(--ridge-ink); border-radius: 8px; text-decoration: none; }
.mega-link img { width: 14px; opacity: 0; transition: opacity .16s; }
body.penli-site .mega-panel .mega-link:hover,body.penli-site .mega-panel .mega-link:focus-visible { background: #f7f7f7; color: #18181a; }
.mega-link:is(:hover,:focus-visible) img { opacity: 1; }
.mega-panel--solutions { max-width: 770px; grid-template-columns: 320px minmax(0,1fr); }
body.penli-site .mega-panel .mega-feature { position: relative; isolation: isolate; min-height: 282px; margin: 12px; padding: 24px; display: flex; align-items: flex-end; border-radius: 16px; overflow: hidden; text-decoration: none; background: #254b74; color: #fff; }
.mega-feature > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; z-index: -2; }
.mega-feature:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#17334fff,#17334f15); }
body.penli-site .mega-feature h2 { color: #fff; font: 500 26px/30px var(--ridge-heading); margin: 0 0 10px; letter-spacing: -.02em; }
.mega-feature p { color: #e9eff6; font-size: 13px; line-height: 20px; margin: 0 0 16px; }
.mega-feature span { display: inline-flex; gap: 10px; align-items: center; color: #18181a; background: white; border-radius: 8px; font-size: 12px; padding: 9px 12px; }
.mega-panel--resources { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.penli-site .lang-picker { position: relative; text-align: start; }
body.penli-site .lang-picker > summary { display: flex; align-items: center; gap: 8px; list-style: none; padding: 10px; min-height: 40px; color: var(--ridge-ink); cursor: pointer; font: 500 12px/20px var(--ridge-font); border: 0; border-radius: 8px; background: transparent; }
.lang-picker > summary::-webkit-details-marker { display: none; }
body.penli-site .lang-picker > summary:hover { background: #f7f7f7; }
.lang-flag { display: inline-block; width: 16px; height: 16px; object-fit: cover; border-radius: 3px; flex: 0 0 16px; }
body.penli-site .lang-menu { position: absolute; inset: auto 0 48px auto; z-index: 110; width: 264px; max-height: min(440px,65dvh); overflow: auto; background: #fff; border: 1px solid var(--ridge-line); border-radius: 12px; padding: 6px; box-shadow: 0 8px 20px -8px #0003; display: block; }
body.penli-site .lang-picker--compact .lang-menu { inset: 46px 0 auto auto; }
body.penli-site .lang-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; text-decoration: none; color: #18181a; border-radius: 7px; font-size: 13px; }
body.penli-site .lang-menu a:hover,body.penli-site .lang-menu a[aria-current] { background: #f1f5fa; }
.lang-menu a span { flex: 1; }.lang-menu em { font: 400 11px var(--ridge-font); color: #63636b; }
body.penli-site .header-actions > .lang-picker { margin-inline-end: 6px; padding-inline-end: 14px; border-inline-end: 1px solid var(--ridge-line); }
.suite-page { padding-top: 40px; }
.suite-rail { width: calc(100% - 64px); max-width: 1280px; margin-inline: auto; border-inline: 1px solid var(--ridge-line); }
.suite-breadcrumb { padding: 20px 64px 0; border-top: 1px solid var(--ridge-line); }
body.penli-site .suite-breadcrumb .penli-breadcrumb { margin: 0; padding: 20px 0 0; width: 100%; font-size: 12px; }
.suite-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 630px; border-bottom: 1px solid var(--ridge-line); }
.suite-hero-copy { padding: 60px 64px 72px; border-inline-end: 1px solid var(--ridge-line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
body.penli-site .suite-hero h1 { font-size: 48px; line-height: 50px; letter-spacing: -.04em; margin: 0 0 30px; text-wrap: initial; }
.suite-hero p { color: #63636b; font-size: 18px; line-height: 26px; letter-spacing: -.015em; margin: 0 0 24px; }
.suite-hero .v7-actions { gap: 12px; }
.suite-hero .v7-button { font-size: 14px; min-height: 38px; padding: 7px 13px; border-radius: 10px; }
.v7-button > img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.v7-button--secondary > img { filter: none; }
.suite-hero-art { align-self: center; margin: 40px; min-width: 0; padding: 60px 24px 24px; background: #375d89 url('/assets/brand/v7/hero-1280.webp') center/cover; border-radius: 38px; position: relative; isolation: isolate; }
.suite-hero-art:before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent,#294d74df); z-index: -1; }
.suite-hero-art > img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 28px -12px #10223da8; }
.suite-art-caption { display: block; color: #fff; text-align: center; margin: 30px 0 0; font-size: 12px; }
.suite-subnav { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 12px 32px; border-bottom: 1px solid var(--ridge-line); }
.suite-subnav a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; min-height: 44px; color: #545461; text-decoration: none; }
.suite-subnav a:hover { color: #18181a; }
.suite-features { padding: 88px 64px 0; }
body.penli-site .suite-section-title { text-align: center; max-width: 750px; margin: 0 auto 72px; font-size: 40px; line-height: 44px; }
.suite-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; padding-bottom: 96px; }
.suite-feature--reverse .suite-feature-copy { order: 1; }.suite-feature--reverse figure { order: 0; }
body.penli-site .suite-feature h2 { font-size: 32px; line-height: 40px; margin: 0 0 20px; }
.suite-feature p { font-size: 16px; line-height: 26px; color: #63636b; margin: 0 0 24px; }
.suite-feature ul { padding: 0; list-style: none; margin: 24px 0; }
.suite-feature li { display: flex; align-items: start; gap: 10px; font-size: 14px; line-height: 22px; margin: 10px 0; }
.suite-feature li img { margin-top: 2px; flex: 0 0 18px; }
.suite-feature figure { margin: 0; min-width: 0; padding: 40px 24px 20px; border-radius: 24px; background: #eef2f6; }
.suite-feature figure > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.suite-feature figcaption { font-size: 11px; color: #545461; text-align: center; margin-top: 18px; }
.suite-inline { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; color: #18181a; text-decoration: none; }
.suite-inline:hover { text-decoration: underline; text-underline-offset: 4px; }
.suite-steps { padding: 72px 64px; border-block: 1px solid var(--ridge-line); background: #fafafa; }
body.penli-site .suite-steps h2 { font-size: 36px; margin: 0 0 48px; }
.suite-steps ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; }
.suite-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: #345d8c; border-radius: 50%; font-size: 12px; margin-bottom: 20px; }
body.penli-site .suite-steps h3 { font-size: 22px; margin: 0 0 12px; }.suite-steps p { font-size: 14px; color: #63636b; line-height: 24px; }
.suite-faq { padding: 80px 64px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; }
body.penli-site .suite-faq h2 { font-size: 36px; line-height: 42px; margin: 0; }
.suite-faq details { border-bottom: 1px solid var(--ridge-line); }.suite-faq details:first-child { border-top: 1px solid var(--ridge-line); }
.suite-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding: 16px 0; cursor: pointer; font-size: 15px; font-weight: 500; }.suite-faq summary::-webkit-details-marker { display: none; }.suite-faq summary img { flex: 0 0 18px; }.suite-faq details[open] summary img { transform: rotate(45deg); }
.suite-faq details p { margin: 0 0 24px; color: #63636b; font-size: 14px; line-height: 24px; }
.suite-related { padding: 64px; border-top: 1px solid var(--ridge-line); }.suite-related > h2 { margin: 0 0 36px; font-size: 32px; }.suite-related > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.suite-card { padding: 28px; border: 1px solid var(--ridge-line); border-radius: 16px; display: flex; flex-direction: column; color: #18181a; text-decoration: none; transition: background .16s; }
.suite-card:hover { background: #f7f9fc; }.suite-card > img { width: 28px; height: 28px; margin-bottom: 24px; }
body.penli-site .suite-card h3 { font-size: 23px; line-height: 30px; margin: 0 0 16px; }.suite-card p { font-size: 14px; color: #63636b; line-height: 24px; margin: 0 0 28px; }.suite-card > span { margin-top: auto; display: flex; gap: 12px; font-size: 14px; font-weight: 500; align-items: center; }
.suite-final { background: #274e79 url('/assets/brand/v7/hero-1280.webp') center/cover; color: #fff; position: relative; isolation: isolate; }.suite-final:before { content: ''; position: absolute; inset: 0; background: #193956b8; z-index: -1; }.suite-final > div { padding: 72px 40px; text-align: center; border: 0; }.suite-final img[src*='mark'] { filter: brightness(0) invert(1); margin-bottom: 24px; }
body.penli-site .suite-final h2 { color: #fff; font-size: 44px; line-height: 52px; margin: 0 0 24px; }body.penli-site .suite-final p { color: #edf3fb; max-width: 580px; margin: 0 auto 32px; font-size: 16px; line-height: 26px; }.suite-final .v7-actions { justify-content: center; }
.suite-index { padding: 40px 64px 72px; text-align: center; border-block: 1px solid var(--ridge-line); }
.suite-index .penli-breadcrumb { text-align: start; }.suite-index .v7-actions { justify-content: center; }
body.penli-site .suite-index h1 { font-size: 52px; line-height: 58px; letter-spacing: -.04em; margin: 48px auto 24px; max-width: 1000px; }.suite-index > p { margin: 0 auto 28px; max-width: 630px; color: #63636b; font-size: 18px; line-height: 28px; }
.suite-product-catalog { padding: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }.suite-personas { padding: 64px 48px; border-top: 1px solid var(--ridge-line); }.suite-personas h2 { font-size: 36px; text-align: center; margin: 0 0 40px; }.suite-personas > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.suite-page :is(section,nav)[id] { scroll-margin-top: 90px; }
@media (max-width: 1200px) and (min-width:1101px) {
  body.penli-site .site-header .inner { width: calc(100% - 40px); gap: 12px; }
  body.penli-site .site-header .brand .ridge-wordmark { width: 112px; }
  .nav-trigger { padding-inline: 8px; }
  body.penli-site .header-actions .penli-signin { padding-inline: 8px; }
}
@media (max-width:1100px) {
  body.penli-site .site-header,body.penli-site .site-header .inner { height: 60px; min-height: 60px; }
  body.penli-site .site-header .inner { width: calc(100% - 40px); justify-content: space-between; }
  body.penli-site .header-actions { margin-inline-start: auto; }.header-actions > .penli-demo,.header-actions > .penli-download,body.penli-site .header-actions > .penli-signin { display: none; }
  body.penli-site .menu-toggle { display: flex; width: 44px; height: 44px; min-width: 44px; justify-content: center; align-items: center; gap: 4px; flex-direction: column; background: #fff; border: 1px solid #e6e6e6; }
  body.penli-site .site-header .nav { display: none; position: fixed; inset: var(--ridge-mobile-nav-top,60px) 0 0; height: calc(100dvh - var(--ridge-mobile-nav-top,60px)); width: 100%; padding: 20px; overflow: auto; align-items: stretch; gap: 0; flex: none; margin: 0; background: #fff; }
  body.penli-site .site-header .nav.open { display: flex; flex-direction: column; }
  .nav-trigger { width: 100%; min-height: 56px; justify-content: space-between; padding: 12px 4px; font-size: 18px; border-radius: 0; border-bottom: 1px solid var(--ridge-line); }
  .mega-panel { position: static; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
  .mega-column { padding: 16px 0; }.mega-column + .mega-column { border: 0; }.mega-column-head { padding: 0 12px 12px; margin: 0 0 8px; min-height: auto; border: 0; }.mega-column-head > img { width: 30px; height: 30px; padding: 4px; flex-basis: 30px; margin: 0; }.mega-column p { display: none; }.mega-column h2 { padding-top: 5px; }
  body.penli-site .mega-panel .mega-link { min-height: 44px; font-size: 14px; padding: 10px 12px; }.mega-link img { opacity: .5; }
  body.penli-site .mega-panel .mega-feature { min-height: 230px; margin: 16px 0; }
  body.penli-site .site-header .nav > a { min-height: 56px; padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--ridge-line); }
  body.penli-site .nav-cta { display: flex; flex-direction: column; margin-top: auto; padding-top: 24px; gap: 12px; }.nav-open { overflow: hidden; }
  body.penli-site .nav-cta :is(.penli-demo,.penli-download,.penli-signin) { min-height: 44px; display: flex; justify-content: center; align-items: center; }
  .suite-hero-copy { padding: 48px 32px; }.suite-hero-art { margin: 24px; padding: 40px 18px 20px; }
  body.penli-site .suite-hero h1 { font-size: 40px; line-height: 44px; }.suite-hero { min-height: 570px; }.suite-features { padding-inline: 36px; }.suite-feature { gap: 40px; }
}
@media (max-width:700px) {
  body.penli-site .site-announcement { padding: 9px 16px 10px; font-size: 12px; line-height: 18px; }
  .site-announcement-inner { gap: 8px; }
  body.penli-site .site-header .inner { width: calc(100% - 32px); gap: 8px; }
  body.penli-site .site-header .brand .ridge-wordmark { width: 110px; height: 40px; }body.penli-site .site-header .brand > img:first-child { width: 30px; height: 30px; }
  body.penli-site .header-actions > .lang-picker { margin: 0; padding-inline-end: 2px; border: 0; }
  .mega-panel { grid-template-columns: 1fr; }.mega-column { padding-block: 12px; }.mega-column-head { padding-inline: 4px; }.mega-column-head > img { width: 24px; height: 24px; flex-basis: 24px; }.mega-column-head h2 { font-size: 12px; }.mega-links { padding-inline-start: 24px; }
  body.penli-site .lang-menu { width: 250px; max-height: 55dvh; }
  .suite-page { padding-top: 20px; }.suite-rail { width: calc(100% - 32px); }.suite-breadcrumb { padding: 14px 16px 0; }.suite-breadcrumb .penli-breadcrumb { font-size: 11px; }
  .suite-hero { grid-template-columns: 1fr; }.suite-hero-copy { border: 0; padding: 32px 20px 28px; }body.penli-site .suite-hero h1 { font-size: 34px; line-height: 39px; margin-bottom: 20px; }
  .suite-hero p { font-size: 16px; line-height: 25px; }.suite-hero .v7-actions { display: grid; }.suite-hero .v7-button { min-height: 44px; }.suite-hero-art { margin: 0 20px 32px; border-radius: 24px; padding-top: 36px; }.suite-art-caption { margin-top: 18px; font-size: 11px; }
  .suite-subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 8px 16px; }.suite-subnav a { font-size: 11px; }
  .suite-features { padding: 48px 20px 0; }body.penli-site .suite-section-title { font-size: 29px; line-height: 35px; margin-bottom: 40px; text-align: start; }
  .suite-feature { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }.suite-feature--reverse .suite-feature-copy { order: 0; }.suite-feature--reverse figure { order: 1; }body.penli-site .suite-feature h2 { font-size: 27px; line-height: 34px; }.suite-feature p { font-size: 15px; line-height: 25px; }.suite-feature figure { padding: 24px 12px 14px; border-radius: 16px; }.suite-feature figcaption { font-size: 10px; }
  .suite-steps { padding: 44px 20px; }body.penli-site .suite-steps h2 { font-size: 29px; line-height: 35px; margin-bottom: 32px; }.suite-steps ol { grid-template-columns: 1fr; gap: 32px; }.suite-steps li { position: relative; padding-inline-start: 42px; }.suite-steps li > span { position: absolute; inset-inline-start: 0; top: 0; }.suite-steps h3 { padding-top: 2px; }.suite-steps p { margin-bottom: 6px; }
  .suite-faq { padding: 48px 20px; grid-template-columns: 1fr; gap: 28px; }body.penli-site .suite-faq h2 { font-size: 29px; line-height: 35px; }.suite-faq summary { font-size: 14px; }
  .suite-related,.suite-personas { padding: 40px 20px; }.suite-related > div,.suite-personas > div,.suite-product-catalog { grid-template-columns: 1fr; }.suite-card { padding: 24px; }.suite-card p { margin-bottom: 20px; }
  .suite-final > div { padding: 48px 16px; }body.penli-site .suite-final h2 { font-size: 32px; line-height: 38px; }.suite-final .v7-actions { flex-direction: column; }.suite-final .v7-button { width: 100%; }
  .suite-index { padding: 20px 20px 40px; }body.penli-site .suite-index h1 { margin-top: 32px; font-size: 34px; line-height: 40px; }.suite-index p { font-size: 16px; line-height: 25px; }.suite-product-catalog { padding: 24px 20px; }
}
@media (prefers-reduced-motion:reduce) { .nav-chevron,.suite-card,.mega-link img { transition: none; } }
/* The public authentication screen follows the measured 24px inset / 50:50 shell. */
body.penli-site .suite-login { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; justify-items: stretch; gap: 24px; padding: 24px; min-height: 100dvh; background: #17283c; color: #223d5e; }
.suite-auth-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff; border-radius: 24px; padding: 80px 40px; min-width: 0; }
.suite-auth-tools { position: absolute; inset: 20px 24px auto; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.suite-auth-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: #636b77; text-decoration: none; }.suite-auth-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
body.penli-site .suite-login .auth-wrap { width: 100%; max-width: 432px; padding: 40px 0; margin: 0; }
body.penli-site .suite-login .auth-brand { display: flex; justify-content: center; margin: 0 0 28px; }
body.penli-site .suite-login .auth-brand .brand { display: inline-flex; }
body.penli-site .suite-login .auth-brand .brand .ridge-wordmark { width: 154px; height: 48px; }
body.penli-site .suite-login .auth-card { background: transparent; padding: 0; border: 0; box-shadow: none; }
body.penli-site .suite-login h1 { font: 600 26px/34px var(--ridge-font); color: #223d5e; letter-spacing: -.02em; margin: 0 0 12px; text-align: center; }
body.penli-site .suite-login .auth-card .sub { color: #596779; margin-bottom: 28px; font-size: 14px; line-height: 22px; text-align: center; }
body.penli-site .suite-login .field { margin: 0 0 16px; }
body.penli-site .suite-login .field label { font-size: 12px; font-weight: 500; color: #496387; margin-bottom: 6px; }
body.penli-site .suite-login .field input { color: #223d5e; background: #fff; border: 1px solid #dedfe2; height: 44px; min-height: 44px; border-radius: 10px; padding: 10px 12px; font-size: 14px; box-shadow: none; width: 100%; }
body.penli-site .suite-login input::placeholder { color: #667589; }.suite-login input:focus { border-color: #316bff; }
body.penli-site .suite-login .btn-primary { background: #316bff; color: #fff; border: 1px solid #316bff; box-shadow: inset 0 1px 0 #ffffff2a; min-height: 44px; font: 500 14px var(--ridge-font); border-radius: 10px; }
body.penli-site .suite-login .btn-primary:hover { background: #255add; }.suite-login .btn:disabled { opacity: .6; cursor: wait; }
.suite-auth-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -8px 0 16px; }
body.penli-site .suite-login .ridge-password-toggle { float: none; }
body.penli-site .suite-login .ridge-password-toggle,.suite-auth-link { background: transparent; border: 0; box-shadow: none; color: #315074; font: 400 12px/20px var(--ridge-font); cursor: pointer; min-height: 40px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; margin: 0; }
body.penli-site .suite-login .check { color: #596779; font-size: 12px; line-height: 20px; margin: 10px 0 20px; gap: 10px; align-items: flex-start; }.suite-login .check input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; }
body.penli-site .suite-login .suite-auth-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; padding: 0; background: transparent; border: 0; font-size: 13px; color: #496387; }
body.penli-site .suite-login .auth-tab { background: transparent; border: 0; box-shadow: none; padding: 6px 0; min-width: 0; min-height: 44px; flex: none; color: #223d5e; font: 500 13px/20px var(--ridge-font); text-decoration: underline; text-underline-offset: 4px; }
.suite-auth-support { position: absolute; inset: auto 24px 18px; text-align: center; font-size: 11px; line-height: 20px; color: #636b77; margin: 0; }.suite-auth-support a { color: #315074; text-decoration: underline; text-underline-offset: 3px; }.suite-auth-support span { display: block; }
.suite-auth-world { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-radius: 24px; }
.suite-auth-landscape { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% top; }
.suite-auth-world:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#1b355124,#132c4ae8 70%); z-index: -1; }
.suite-auth-proof { margin: 80px 40px; padding: 38px; background: #1c314ade; border: 1px solid #8599b440; border-radius: 24px; color: #fff; }
.suite-auth-proof > img { filter: brightness(0) invert(1); width: 64px; height: 64px; margin-bottom: 24px; }
body.penli-site .suite-auth-proof h2 { color: #fff; font: 500 38px/46px var(--ridge-heading); letter-spacing: -.03em; margin: 0 0 24px; }body.penli-site .suite-auth-proof p { color: #e4edf8; font-size: 17px; line-height: 28px; margin: 0 0 28px; }
.suite-auth-proof a { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 14px; min-height: 44px; }.suite-auth-proof svg { width: 18px; height: 18px; }
.suite-auth-bottom { position: absolute; inset: auto 32px 32px; display: flex; justify-content: space-between; gap: 16px; color: #dce6f3; font-size: 11px; }
.suite-auth-success { display: block; padding-top: 12px; text-decoration: underline; }
.suite-auth-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.suite-auth-note { font-size: 13px; line-height: 1.6; color: #596779; margin: 0 0 18px; overflow-wrap: anywhere; }
[data-resend-status] { margin: 12px 0 0; }
[data-resend-status]:empty { display: none; }
/* Workspace: measured application controls, restrained blue selection, real account states. */
body.penli-site .suite-workspace { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100dvh; background: #fff; }
body.penli-site .suite-workspace :is(h1,h2,h3) { font-family: var(--ridge-heading); letter-spacing: -.025em; font-weight: 500; color: #18181a; }
body.penli-site .suite-workspace .app-side { position: sticky; top: 0; height: 100dvh; width: 232px; display: flex; flex-flow: column nowrap; gap: 24px; padding: 20px 12px 12px; background: #fbfbfb; border-inline-end: 1px solid #e4e7ec; overflow-y: auto; }
body.penli-site .suite-workspace .app-side > .brand { display: flex; padding-inline: 4px; }
body.penli-site .suite-workspace .app-side .ridge-wordmark { width: 144px; height: 44px; }
body.penli-site .suite-workspace .app-nav { display: flex; flex-flow: column nowrap; flex-shrink: 0; gap: 4px; margin: 0; padding: 0; }
body.penli-site .suite-workspace .app-nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 500; color: #596779; }
body.penli-site .suite-workspace .app-nav a img { width: 18px; height: 18px; opacity: .72; }.suite-workspace .app-nav a span { white-space: nowrap; }
body.penli-site .suite-workspace .app-nav a:hover { background: #f0f2f5; }
body.penli-site .suite-workspace .app-nav a.active { background: #eaf0ff; color: #2755b0; border-color: #dbe5fc; }
.workspace-sidebar-bottom { margin-top: auto; padding: 4px; }.workspace-sidebar-bottom > a { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 12px; padding: 6px 10px; color: #596779; text-decoration: none; }
body.penli-site .suite-workspace .app-user { margin: 14px 0 0; border: 0; border-top: 1px solid #e4e7ec; border-radius: 0; padding: 16px 8px 0; background: transparent; }.suite-workspace .app-user .email { font-size: 11px; }
.workspace-signout { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 0; min-height: 44px; font-size: 11px; color: #596779; cursor: pointer; margin-top: 8px; }
body.penli-site .suite-workspace .app-main { width: 100%; max-width: none; padding: 0; margin: 0; background: #fff; }
.workspace-topbar { height: 64px; padding: 0 32px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #e4e7ec; }
.workspace-crumb { display: flex; gap: 12px; font-size: 12px; align-items: center; color: #667589; }.workspace-crumb strong { font-weight: 500; color: #25364b; }
.workspace-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 22px; }.workspace-top-actions > a { color: #596779; font-size: 12px; text-decoration: none; }.workspace-menu { display: none; }
.workspace-body { padding: 32px; max-width: 1350px; margin-inline: auto; }
.workspace-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
body.penli-site .suite-workspace .workspace-page-heading h1 { font-size: 30px; line-height: 38px; margin: 0 0 8px; font-weight: 500; }.workspace-page-heading p { margin: 0; font-size: 13px; color: #667589; }
body.penli-site .suite-workspace .btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; padding: 9px 14px; min-height: 40px; font: 500 12px/20px var(--ridge-font); text-decoration: none; box-shadow: none; letter-spacing: 0; white-space: normal; }
body.penli-site .suite-workspace .btn-primary { background: #316bff; border: 1px solid #316bff; color: #fff; }.suite-workspace .btn-primary img { filter: brightness(0) invert(1); }
body.penli-site .suite-workspace .btn-primary:hover { background: #255add; }
body.penli-site .suite-workspace .btn-ghost { background: #fff; border: 1px solid #dce1e9; color: #394f6b; }
body.penli-site .suite-workspace .btn-ghost:hover { background: #f8f9fc; }.suite-workspace button:disabled { opacity: .55; cursor: wait; }
.workspace-welcome { background: #294b70 url('/assets/brand/v7/hero-1280.webp') center/cover; border-radius: 14px; padding: 30px 32px; min-height: 226px; position: relative; isolation: isolate; margin-bottom: 24px; overflow: hidden; }
.workspace-welcome:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#193652fa,#1b3f6699 60%,#1b3f6610); z-index: -1; }
body.penli-site .workspace-welcome h2 { color: #fff; font: 500 32px/38px var(--ridge-heading); margin: 0 0 14px; }body.penli-site .workspace-welcome p { max-width: 440px; color: #e6effa; font-size: 13px; line-height: 21px; margin: 0 0 22px; }
body.penli-site .suite-workspace .workspace-welcome .btn-primary { background: #fff; border-color: #fff; color: #25364b; }.workspace-welcome .btn-primary img { filter: none; }
body.penli-site .suite-workspace .metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 0 0 24px; }
body.penli-site .suite-workspace .metric { border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; padding: 20px; box-shadow: none; }.suite-workspace .metric .label { color: #596779; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
body.penli-site .suite-workspace .metric .value { font: 550 28px/36px var(--ridge-font); color: #25364b; margin: 8px 0 4px; }.suite-workspace .metric .hint { color: #667589; font-size: 11px; line-height: 17px; }
.workspace-overview-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 24px; }
.workspace-panel { padding: 24px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; }
body.penli-site .workspace-panel h2 { font-size: 16px; line-height: 24px; margin: 0 0 18px; }body.penli-site .workspace-panel h3 { font-size: 16px; line-height: 24px; margin: 0 0 16px; }.workspace-panel p { color: #667589; font-size: 13px; line-height: 22px; }
.workspace-section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }.workspace-section-head h2,.workspace-section-head h3 { margin: 0 !important; }.workspace-section-head > span { font-size: 11px; color: #667589; }
.workspace-checklist > a { display: flex; align-items: center; gap: 12px; padding: 16px 0; text-decoration: none; border-top: 1px solid #eef0f3; }.workspace-checklist > a > span:nth-child(2) { flex: 1; }.workspace-checklist strong { display: block; font-size: 12px; color: #25364b; font-weight: 500; }.workspace-checklist small { display: block; font-size: 11px; color: #667589; margin-top: 5px; line-height: 18px; }.workspace-check { display: grid; place-items: center; border: 1px solid #dce1e9; background: #fafbfc; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; opacity: .5; }.workspace-check.is-complete { opacity: 1; background: #e3f5e9; border-color: #93c9a7; }
.workspace-resource { display: flex; align-items: center; gap: 14px; padding: 15px 0; text-decoration: none; color: #25364b; border-top: 1px solid #eef0f3; }.workspace-resource > img:first-child { width: 22px; height: 22px; opacity: .72; flex: 0 0 22px; }.workspace-resource > div { flex: 1; }body.penli-site .workspace-resource h3 { margin: 0 0 4px; font-size: 12px; font-weight: 500; line-height: 18px; }.workspace-resource p { font-size: 11px; color: #667589; margin: 0; line-height: 18px; }.workspace-resource:hover h3 { color: #255add; }
.workspace-local-note { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 22px 0 0; color: #667589; }.workspace-local-note p { font-size: 11px; line-height: 18px; margin: 0; }.workspace-local-note img { opacity: .65; flex: 0 0 18px; width: 18px; }
.workspace-view-intro { margin-bottom: 28px; }body.penli-site .workspace-view-intro h2 { font-size: 22px; line-height: 30px; margin: 0 0 12px; max-width: 760px; }.workspace-view-intro p { color: #667589; font-size: 14px; line-height: 24px; max-width: 720px; margin: 0; }
.workspace-heading-action { display: flex; align-items: center; justify-content: space-between; gap: 28px; }.workspace-heading-action .btn { flex: 0 0 auto; }
body.penli-site .suite-workspace .ridge-onboarding { border: 0; padding: 0; border-radius: 0; }.suite-workspace .ridge-onboarding-head h2 { font-size: 17px; }.suite-workspace .ridge-onboarding-list { margin-top: 20px; }.suite-workspace .v7-install-guide { padding-top: 24px; }.suite-workspace .v7-install-guide img { align-self: center; }.suite-workspace .v7-onboarding-panels p { font-size: 13px; line-height: 23px; }
.workspace-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.suite-workspace :is(input,select,textarea) { font: 400 13px/20px var(--ridge-font); width: 100%; background: #fff; color: #25364b; border: 1px solid #dce1e9; border-radius: 8px; padding: 10px 12px; min-height: 42px; box-shadow: none; }
.suite-workspace :is(input,textarea)::placeholder { color: #667589; }.suite-workspace label { display: block; font-size: 12px; line-height: 20px; font-weight: 500; color: #394f6b; }.suite-workspace label :is(input,select,textarea) { margin-top: 6px; }.suite-workspace input[type=checkbox] { width: 17px; height: 17px; min-height: 17px; margin: 2px 0 0; flex: 0 0 17px; accent-color: #316bff; }
.workspace-scope-editor { margin-bottom: 24px; }.workspace-check-label { display: flex !important; gap: 10px; align-items: flex-start; margin: 22px 0; font-weight: 400 !important; }.workspace-form-actions { display: flex; gap: 10px; }
.workspace-empty { text-align: center; padding: 64px 24px; }.workspace-empty > img { width: 36px; height: 36px; opacity: .65; margin-bottom: 20px; }.workspace-empty h3 { font-size: 20px !important; }.workspace-empty p { max-width: 440px; margin: 0 auto 24px; }
.workspace-table-wrap { border: 1px solid #e4e7ec; border-radius: 12px; overflow-x: auto; }.workspace-table { width: 100%; border-collapse: collapse; min-width: 500px; font-size: 12px; }.workspace-table th { text-align: start; padding: 14px 20px; font-weight: 500; color: #667589; background: #fafbfc; }.workspace-table td { padding: 18px 20px; border-top: 1px solid #e4e7ec; vertical-align: middle; }.workspace-table td:first-child { width: 55%; }.workspace-table strong { font-weight: 500; display: block; color: #25364b; }.workspace-domain { display: block; color: #667589; font-size: 11px; margin-top: 5px; overflow-wrap: anywhere; }.workspace-table small { display: block; margin-top: 6px; color: #667589; max-width: 420px; overflow-wrap: anywhere; }.workspace-env { white-space: nowrap; display: inline-block; font-size: 10px; padding: 4px 8px; background: #f0f4f9; border-radius: 5px; color: #496387; }.workspace-row-actions { display: flex; gap: 6px; align-items: center; }.workspace-delete { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }.workspace-delete:hover { background: #fff1f0; }
.suite-workspace textarea { resize: vertical; min-height: 88px; }
.workspace-page-heading h1:focus { outline: none; }
.workspace-status { font-size: 12px; line-height: 21px; color: #315b4d; margin: 14px 0 0; }.workspace-status:empty { display: none; }.workspace-caption { font-size: 11px; line-height: 19px; color: #667589; margin-top: 20px; }.workspace-caption a { color: #315074; text-decoration: underline; }
.workspace-report { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: #f3f6fb; border-radius: 14px; padding: 32px; margin-bottom: 28px; }.workspace-report > img { width: 100%; height: auto; border-radius: 10px; }.workspace-report h3 { font-size: 24px; margin: 0 0 14px; }.workspace-report p { font-size: 14px; line-height: 24px; color: #667589; }.workspace-report span { display: block; font-size: 10px; color: #667589; margin-top: 12px; }.workspace-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.workspace-download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.workspace-download-grid .workspace-panel { display: flex; flex-direction: column; align-items: flex-start; }.workspace-download-grid .workspace-panel > img { margin-bottom: 24px; }.workspace-download-grid h3 { font-size: 22px !important; margin-bottom: 8px !important; }.workspace-download-grid p { margin: 0 0 16px; }.workspace-download-grid .workspace-panel > span { font-size: 11px; color: #667589; margin-bottom: 24px; }.workspace-download-grid .btn { width: 100%; }.workspace-small-link { display: inline-flex; align-items: center; min-height: 40px; background: transparent; border: 0; padding: 6px 0; color: #315074; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; cursor: pointer; }.workspace-cli { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 24px; }.workspace-cli h3 { margin: 12px 0 8px !important; }.workspace-cli p { margin: 0; }
.workspace-license-offer { display: grid; grid-template-columns: 1fr auto; gap: 36px; padding: 28px 0; border-top: 1px solid #e4e7ec; margin-top: 24px; }.workspace-license-offer ul { padding-inline-start: 18px; font-size: 12px; line-height: 24px; color: #596779; }.workspace-license-offer > div:last-child { display: flex; flex-direction: column; justify-content: center; gap: 20px; }.workspace-license-offer strong { font-size: 32px; font-weight: 550; color: #25364b; white-space: nowrap; }.workspace-license-offer small { font-size: 14px; font-weight: 400; color: #667589; }.suite-workspace .status-box { margin: 20px 0; font-size: 13px; line-height: 24px; }
.workspace-service-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid #e4e7ec; }.workspace-service-row h3 { font-size: 16px; margin: 0 0 8px; }.workspace-service-row p { font-size: 12px; line-height: 20px; color: #667589; margin: 0; }
.workspace-account-form { max-width: 700px; }.workspace-account-form label { margin-bottom: 20px; }.workspace-account-form input[readonly] { background: #f7f8fa; color: #596779; }.workspace-account-form .workspace-caption { margin: -6px 0 24px; }
.workspace-account-security { max-width: 700px; margin-top: 24px; }.workspace-account-security > div { display: flex; justify-content: space-between; gap: 24px; align-items: center; }.workspace-account-security strong { font-size: 13px; font-weight: 500; color: #25364b; }.workspace-account-security p { margin: 8px 0 0; font-size: 12px; }
.workspace-loading { padding: 32px 0; }.workspace-loading h1 { font-size: 26px; }.workspace-loading p { color: #667589; font-size: 14px; }.workspace-error h1 { font-size: 24px; margin-top: 0; }
@media (max-width:1100px) {
  .suite-auth-proof { padding: 28px; margin-inline: 20px; }body.penli-site .suite-auth-proof h2 { font-size: 32px; line-height: 40px; }.suite-auth-panel { padding-inline: 30px; }
  body.penli-site .suite-workspace { grid-template-columns: 210px minmax(0,1fr); }body.penli-site .suite-workspace .app-side { width: 210px; padding-inline: 10px; }body.penli-site .suite-workspace .app-nav a { font-size: 11px; padding-inline: 9px; }.workspace-body { padding: 24px; }.workspace-overview-grid { grid-template-columns: 1fr; gap: 20px; }.workspace-topbar { padding-inline: 24px; }.workspace-download-grid { gap: 12px; }.workspace-download-grid .workspace-panel { padding: 18px; }
}
@media (max-width:800px) {
  body.penli-site .suite-login { grid-template-columns: 1fr; padding: 16px; }.suite-auth-world { display: none; }.suite-auth-panel { min-height: calc(100dvh - 32px); padding: 82px 28px; }.suite-auth-support { bottom: 18px; }
  body.penli-site .suite-workspace { display: block; }
  body.penli-site .suite-workspace .app-side { display: none; position: fixed; z-index: 101; inset: 64px auto 0; inset-inline-start: 0; height: calc(100dvh - 64px); width: 244px; box-shadow: 8px 0 30px -16px #0006; }
  body.penli-site .suite-workspace.workspace-nav-open .app-side { display: flex; }
  body.penli-site .suite-workspace .app-side > .brand { display: flex; }.suite-workspace .app-nav { display: flex; }body.penli-site .suite-workspace .app-nav a { font-size: 12px; min-height: 44px; }.workspace-menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; flex: 0 0 40px; }
  .workspace-topbar { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 16px; gap: 8px; }.workspace-crumb > span { display: none; }.workspace-top-actions { gap: 12px; }.workspace-top-actions > a { display: none; }
  .workspace-body { padding: 24px 20px; }.workspace-page-heading { align-items: flex-start; gap: 12px; }body.penli-site .suite-workspace .workspace-page-heading h1 { font-size: 24px; line-height: 30px; }.workspace-page-heading p { font-size: 12px; line-height: 20px; }.workspace-page-heading > button { display: none !important; }
  .workspace-welcome { padding: 28px 24px; }.workspace-heading-action { align-items: flex-start; flex-direction: column; gap: 18px; }.workspace-report { padding: 24px; }.workspace-license-offer { gap: 24px; }
}
@media (max-width:560px) {
  .workspace-table { min-width: 0; }
  .workspace-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .workspace-table tbody { display: block; }
  .workspace-table tr { display: grid; grid-template-columns: 1fr auto; padding: 18px; gap: 14px; border-top: 1px solid #e4e7ec; }
  .workspace-table tr:first-child { border-top: 0; }
  .workspace-table td { border: 0; padding: 0; align-self: center; }
  .workspace-table td:first-child { grid-column: 1 / -1; width: 100%; }

  body.penli-site .suite-login { padding: 10px; }.suite-auth-panel { border-radius: 18px; padding: 76px 20px 86px; min-height: calc(100dvh - 20px); }.suite-auth-tools { inset: 14px 16px auto; }.suite-auth-tools .suite-auth-back { font-size: 11px; }body.penli-site .suite-login .auth-wrap { padding: 20px 0; }body.penli-site .suite-login .auth-brand { margin-bottom: 24px; }body.penli-site .suite-login h1 { font-size: 24px; line-height: 30px; }body.penli-site .suite-login .auth-card .sub { font-size: 13px; line-height: 22px; }.suite-auth-support { inset-inline: 12px; font-size: 10px; }
  .workspace-body { padding: 24px 16px; }.workspace-topbar { padding-inline: 8px; }.workspace-crumb { font-size: 11px; }.workspace-welcome { padding: 24px 20px; min-height: 240px; }body.penli-site .workspace-welcome h2 { font-size: 27px; line-height: 34px; }.workspace-welcome p { font-size: 12px; line-height: 20px; }
  body.penli-site .suite-workspace .metric-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; }body.penli-site .suite-workspace .metric { border: 0; border-radius: 0; border-bottom: 1px solid #e4e7ec; display: grid; grid-template-columns: 1fr auto; padding: 16px 20px; align-items: center; gap: 6px 16px; }.suite-workspace .metric:last-child { border-bottom: 0; }body.penli-site .suite-workspace .metric .value { font-size: 21px; line-height: 28px; margin: 0; grid-row: span 2; }.suite-workspace .metric .hint { grid-column: 1; grid-row: 2; }
  .workspace-panel { padding: 20px; }.workspace-section-head { gap: 12px; }.workspace-overview-grid { gap: 18px; }.workspace-local-note { align-items: flex-start; }.workspace-checklist small { font-size: 10px; }
  .workspace-fields,.workspace-report,.workspace-resource-grid,.workspace-download-grid,.workspace-license-offer { grid-template-columns: 1fr; }.workspace-report { gap: 24px; }.workspace-report h3 { font-size: 22px; }.workspace-cli,.workspace-service-row,.workspace-account-security > div { flex-direction: column; align-items: flex-start; gap: 18px; }.workspace-download-grid { gap: 16px; }
  body.penli-site .suite-workspace .ridge-onboarding { padding: 0; }.suite-workspace .ridge-onboarding-head { align-items: flex-start; gap: 12px; }.suite-workspace .ridge-onboarding-head h2 { font-size: 16px; line-height: 23px; }.suite-workspace .ridge-onboarding-progress { font-size: 10px; white-space: nowrap; }.suite-workspace .ridge-goal-select { display: block; }.suite-workspace .ridge-goal-select select { width: 100%; margin-top: 8px; }.suite-workspace .ridge-onboarding-list { grid-template-columns: 1fr; }.suite-workspace .v7-install-guide { display: flex; flex-direction: column; gap: 24px; }.suite-workspace .v7-install-guide img { width: 100%; }.suite-workspace .v7-setup { grid-template-columns: 1fr; }.suite-workspace .v7-setup-summary { padding: 16px; }.suite-workspace .v7-setup input[type=url] { font-size: 13px; }.suite-workspace .v7-platforms a { font-size: 11px; }
  body.penli-site .suite-workspace .btn { min-height: 44px; }.workspace-form-actions { flex-wrap: wrap; }.workspace-account-security button { width: 100%; }
}

/* Workspace uses the same type, neutral surfaces and control sizes as the site. */
body.penli-site .suite-workspace .app-side { padding-top: 12px; gap: 28px; }
body.penli-site .suite-workspace .app-side > .brand { min-height: 40px; }
body.penli-site .suite-workspace .app-nav a { min-height: 44px; font-size: 13px; }
body.penli-site .suite-workspace .app-nav a.active { background: #edf2fc; border-color: transparent; color: #2254c8; }
body.penli-site .suite-workspace .workspace-page-heading p { font-size: 14px; line-height: 24px; }
body.penli-site .suite-workspace .metric-grid { gap: 0; border-block: 1px solid #e4e7ec; margin-block: 28px; }
body.penli-site .suite-workspace .metric { border: 0; border-radius: 0; padding: 24px; background: transparent; }
body.penli-site .suite-workspace .metric + .metric { border-inline-start: 1px solid #e4e7ec; }
body.penli-site .suite-workspace .metric .value { font-family: var(--ridge-heading); font-weight: 500; color: #18181a; }
body.penli-site .suite-workspace .workspace-overview-grid > .workspace-panel { border: 0; padding: 0; border-radius: 0; }
body.penli-site .suite-workspace .workspace-overview-grid { gap: 36px; margin-top: 32px; }
body.penli-site .suite-workspace .workspace-section-head h2, body.penli-site .suite-workspace .workspace-overview-grid > .workspace-panel > h2 { font-size: 20px; line-height: 28px; }
body.penli-site .suite-workspace .btn { border-radius: 10px; min-height: 44px; font-size: 13px; }
body.penli-site .suite-workspace .workspace-panel { border-color: #dedede; }
.suite-workspace :is(input,select,textarea) { border-color: #dcdfe4; min-height: 44px; font-size: 14px; }
@media (max-width:800px) {
  body.penli-site .suite-workspace .workspace-page-heading h1 { font-size: 27px; line-height: 34px; }
  body.penli-site .suite-workspace .metric { padding: 18px 12px; }
  body.penli-site .suite-workspace .workspace-overview-grid { gap: 28px; }
}
@media (max-width:480px) {
  body.penli-site .suite-workspace .metric:first-child { grid-column: 1/-1; border-bottom: 1px solid #e4e7ec; }
  body.penli-site .suite-workspace .metric:nth-child(2) { border-inline-start: 0; }
}

/* commerce.css */
/* Commercial surfaces, aligned with the public product and application theme. */
body.penli-site :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"]), textarea, select):focus {
  border-color: #316bff;
  outline: none;
  box-shadow: none;
}
.suite-pricing-page { padding-top: 0; }
.suite-pricing-head { padding-block: 76px 52px; text-align: center; }
body.penli-site .suite-pricing-head h1 { font: 500 48px/1.12 var(--ridge-heading); letter-spacing: -.035em; max-width: 850px; margin: 0 auto 24px; }
body.penli-site .suite-pricing-head p { font-size: 17px; line-height: 27px; margin: 0 auto; max-width: 700px; }
.suite-pricing { border: 1px solid #dedede; border-radius: 16px; overflow: hidden; background: #fafafa; }
.suite-pricing-groups { display: grid; grid-template-columns: 2fr 1fr; background: #fff; border-bottom: 1px solid #dedede; }
.suite-pricing-groups span { text-align: center; font-size: 13px; font-weight: 500; color: #545461; padding: 16px; }
.suite-pricing-groups span + span { border-inline-start: 1px solid #dedede; }
.suite-price-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.suite-price-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; background: #fafafa; }
.suite-price-card + .suite-price-card { border-inline-start: 1px solid #dedede; }
body.penli-site .suite-price-card h3 { font: 500 24px/1.3 var(--ridge-heading); letter-spacing: -.03em; margin: 0 0 16px; }
body.penli-site .suite-price-card .suite-price-desc { font-size: 15px; line-height: 24px; min-height: 72px; margin: 0; }
.suite-price-value { font: 600 52px/1.2 var(--ridge-heading); letter-spacing: -.035em; margin: 24px 0 12px; color: #18181a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suite-price-value > span { font-size: 32px; }
.suite-price-value small { display: block; font: 400 13px/20px var(--ridge-font); letter-spacing: 0; margin-top: 6px; color: #545461; }
body.penli-site .suite-price-card .suite-price-note { font-size: 13px; line-height: 20px; margin: 0 0 24px; min-height: 40px; }
.suite-price-card .v7-button { justify-content: space-between; width: 100%; min-height: 50px; font-size: 14px; gap: 12px; }
.suite-price-card ul { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid #dedede; list-style: none; display: grid; gap: 15px; }
.suite-price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 23px; }
.suite-price-card li svg { width: 18px; height: 22px; flex: 0 0 18px; color: #2254c8; }
body.penli-site .suite-price-card--featured { background: #274f91; color: #fff; }
body.penli-site .suite-price-card--featured h3, .suite-price-card--featured .suite-price-value, .suite-price-card--featured li svg { color: #fff; }
body.penli-site .suite-price-card--featured :is(.suite-price-desc,.suite-price-note), .suite-price-card--featured .suite-price-value small { color: #e7eefb; }
.suite-price-card--featured ul { border-color: #ffffff38; }
body.penli-site .suite-pricing-terms { font-size: 12px; line-height: 21px; color: #63636b; text-align: center; margin: 22px 0 0; }
.suite-comparison { padding-block: 100px; }
.suite-comparison-head { display: flex; justify-content: space-between; gap: 64px; align-items: center; margin-bottom: 40px; }
body.penli-site .suite-comparison-head h2 { font: 500 38px/1.18 var(--ridge-heading); letter-spacing: -.03em; margin: 0; }
body.penli-site .suite-comparison-head p { max-width: 390px; margin: 0; font-size: 16px; line-height: 26px; }
.suite-table-scroll { overflow: auto; border: 1px solid #dedede; border-radius: 12px; }
.suite-table-scroll table { border-collapse: collapse; width: 100%; min-width: 740px; table-layout: fixed; font-size: 14px; line-height: 23px; }
.suite-table-scroll th, .suite-table-scroll td { text-align: start; padding: 22px 26px; border-bottom: 1px solid #e7e7e7; vertical-align: top; color: #545461; }
.suite-table-scroll thead th { background: #f8f9fb; color: #18181a; font-weight: 600; }
.suite-table-scroll tbody th { color: #18181a; font-weight: 500; }
.suite-table-scroll tbody tr:last-child > * { border-bottom: 0; }
.suite-contact { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dedede; border-radius: 24px; overflow: hidden; scroll-margin-top: 90px; }
.suite-contact-story { position: relative; isolation: isolate; background: #24476f; color: #fff; min-width: 0; }
.suite-contact-scene { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.suite-contact-story:before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,#193957e8 0%,#193957ed 52%,#19395782 100%); }
.suite-contact-copy { position: relative; padding: 52px; height: 100%; display: flex; flex-direction: column; }
body.penli-site .suite-contact-copy h2 { color: #fff; font: 500 42px/1.16 var(--ridge-heading); letter-spacing: -.03em; margin: 0 0 24px; }
body.penli-site .suite-contact-copy > p { color: #e4edf9; font-size: 16px; line-height: 27px; margin: 0; max-width: 40ch; }
.suite-contact-steps { list-style: none; padding: 0; margin: 42px 0 64px; display: grid; gap: 28px; }
.suite-contact-steps li { display: flex; gap: 16px; align-items: flex-start; }
.suite-contact-steps li > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid #ffffff5c; border-radius: 50%; font-size: 12px; }
.suite-contact-steps strong { font-size: 15px; line-height: 25px; font-weight: 500; }
body.penli-site .suite-contact-steps p { font-size: 13px; line-height: 22px; color: #e4edf9; margin: 5px 0 0; }
.suite-contact-team { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.suite-contact-team > img { filter: brightness(0) invert(1); }
.suite-contact-team strong { display: block; font-size: 14px; font-weight: 500; }
.suite-contact-team span { display: block; font-size: 12px; color: #e4edf9; margin-top: 5px; }
.suite-contact-form { background: #fff; border-radius: 0; padding: 48px; min-width: 0; }
body.penli-site .suite-contact-form h3 { font: 500 28px/1.3 var(--ridge-heading); letter-spacing: -.025em; margin: 0 0 12px; }
body.penli-site .suite-contact-form .suite-form-intro { font-size: 14px; line-height: 23px; margin: 0 0 28px; }
.suite-contact-form fieldset { margin-bottom: 26px; }
.suite-contact-form legend { font-size: 13px; font-weight: 500; }
.suite-contact-form .ridge-choice-row { gap: 8px; }
.suite-contact-form .ridge-choice-row label > span { border-color: #dedede; padding: 12px 10px; gap: 8px; color: #545461; border-radius: 10px; font-size: 12px; }
.suite-contact-form .ridge-choice-row strong { font-size: 14px; font-weight: 600; color: #18181a; }
.suite-contact-form .ridge-choice-row input:checked + span { border-color: #2254c8; background: #f1f5fd; color: #2254c8; box-shadow: none; }
.suite-contact-form .ridge-choice-row input:focus-visible + span { border-color: #316bff; outline: none; box-shadow: none; }
.suite-contact-form .ridge-field { font-size: 13px; line-height: 21px; font-weight: 500; margin-bottom: 22px; color: #18181a; }
.suite-contact-form :is(input,select,textarea) { font-family: var(--ridge-font); font-weight: 400; }
.suite-contact-form .ridge-field :is(input,select,textarea) { border-color: #dcdfe4; border-radius: 8px; min-height: 48px; padding: 12px; font-size: 14px; background: #fff; }
.suite-contact-form :is(input,textarea)::placeholder { color: #72727a; font-size: 13px; }
body.penli-site .suite-field-help { font-size: 12px; line-height: 20px; margin: -14px 0 22px; color: #63636b; }
.suite-contact-form > .ridge-button { width: 100%; justify-content: space-between; font-size: 14px; min-height: 50px; }
body.penli-site .suite-contact-privacy { display: flex; gap: 8px; align-items: flex-start; color: #63636b; font-size: 11px; line-height: 18px; margin: 14px 0 0; }
.suite-contact-privacy img { opacity: .65; flex: 0 0 16px; }
body.penli-site .suite-contact-direct { border-top: 1px solid #e7e7e7; padding-top: 22px; margin: 24px 0 0; font-size: 12px; line-height: 20px; }
.suite-contact-direct a { display: block; color: #18181a; font-weight: 500; min-height: 36px; padding-top: 6px; overflow-wrap: anywhere; text-underline-offset: 4px; }
.suite-contact-result-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.suite-contact-result-actions .ridge-button { font-size: 13px; min-height: 44px; }
.suite-copy-request { color: #2254c8; background: transparent; border: 0; padding: 10px 0; font: 500 13px/22px var(--ridge-font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; }
.suite-copy-request:hover { color: #193b74; }
body.penli-site .ridge-request-result [data-copy-status] { font-size: 12px; line-height: 21px; margin-bottom: 0; }
[data-copy-status]:empty { display: none; }
/* The footer is a shared navigation surface, with one balanced hierarchy. */
body.penli-site .suite-footer { background: #f8f9fb; padding: 0; border-top: 1px solid #dedede; }
.suite-footer-intro { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 52px 36px; border-bottom: 1px solid #e0e2e6; }
body.penli-site .suite-footer .brand { margin-bottom: 16px; }
body.penli-site .suite-footer-intro p { font-size: 14px; line-height: 24px; margin: 0; max-width: 420px; color: #545461; }
.suite-footer-socials { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
body.penli-site .suite-footer-socials a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; color: #545461; text-decoration: none; }
body.penli-site .suite-footer-socials a:is(:hover, :focus-visible) { color: #2254c8; }
.suite-footer-socials svg { display: block; width: 20px; height: 20px; }
.suite-footer-intro .v7-button { flex-shrink: 0; font-size: 14px; gap: 24px; }
.suite-footer .v7-button img { width: 17px; height: 17px; }
body.penli-site .suite-footer .ridge-footer-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px; padding: 40px 0; }
body.penli-site .suite-footer .footer-col { gap: 0; align-items: flex-start; }
body.penli-site .suite-footer .footer-col h2 { font: 600 14px/22px var(--ridge-font); color: #18181a; margin: 0 0 16px; }
body.penli-site .suite-footer .footer-col a { display: flex; align-items: center; min-height: 40px; padding-block: 8px; font-size: 13px; line-height: 20px; color: #545461; text-decoration: none; }
body.penli-site .suite-footer .footer-col a:hover { color: #2254c8; text-decoration: underline; text-underline-offset: 4px; }
.suite-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e0e2e6; padding-top: 24px; font-size: 12px; color: #63636b; }
.suite-footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.suite-footer-legal a { display: inline-flex; align-items: center; min-height: 40px; color: #545461; text-underline-offset: 4px; }
body.penli-site .suite-footer .ridge-footer-languages { margin: 0; padding: 0; }
body.penli-site .suite-footer .ridge-footer-disclaimer { font-size: 11px; line-height: 20px; color: #63636b; max-width: 100ch; margin: 18px 0 0; padding-bottom: 32px; }
@media (max-width:1100px) {
  .suite-price-card { padding: 28px 24px; }
  body.penli-site .suite-price-card h3 { font-size: 22px; }
  .suite-contact-copy { padding: 40px 32px; }
  .suite-contact-form { padding: 40px 32px; }
  body.penli-site .suite-contact-copy h2 { font-size: 36px; }
  .suite-price-card li { font-size: 13px; }
  .suite-footer-bottom { flex-wrap: wrap; }
}
@media (max-width:800px) {
  .suite-pricing-head { padding-block: 48px 36px; }
  body.penli-site .suite-pricing-head h1 { font-size: 38px; }
  .suite-price-grid { grid-template-columns: 1fr; }
  .suite-pricing-groups { display: none; }
  .suite-price-card { padding: 32px; }
  .suite-price-card + .suite-price-card { border-inline-start: 0; border-top: 1px solid #dedede; }
  body.penli-site .suite-price-card h3 { font-size: 26px; }
  body.penli-site .suite-price-card .suite-price-desc { min-height: 0; max-width: 45ch; }
  body.penli-site .suite-price-card .suite-price-note { min-height: 0; }
  .suite-price-card li { font-size: 14px; }
  .suite-comparison { padding-block: 64px; }
  .suite-comparison-head { display: block; }
  body.penli-site .suite-comparison-head h2 { font-size: 32px; }
  body.penli-site .suite-comparison-head p { margin-top: 20px; }
  .suite-contact { grid-template-columns: 1fr; border-radius: 16px; }
  .suite-contact-story { min-height: 400px; order: 2; }
  .suite-contact-form { order: 1; }
  .suite-contact-copy { padding: 36px; }
  .suite-contact-steps { margin: 28px 0 36px; gap: 20px; }
  .suite-contact-team { margin-top: 0; }
  .suite-contact-form { padding: 36px; }
  .suite-footer-intro { align-items: flex-start; }
  body.penli-site .suite-footer .ridge-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .suite-footer-bottom { justify-content: flex-start; }
  .suite-footer-legal { order: 3; width: 100%; }
  body.penli-site .suite-footer .ridge-footer-languages { margin-inline-start: auto; }
}
@media (max-width:480px) {
  body.penli-site .suite-pricing-head h1 { font-size: 34px; line-height: 39px; }
  .suite-pricing-head h1 br, .suite-pricing-head p br { display: none; }
  body.penli-site .suite-pricing-head p { font-size: 16px; line-height: 25px; }
  .suite-price-card { padding: 28px 24px; }
  body.penli-site .suite-price-card h3 { font-size: 24px; }
  .suite-price-value { font-size: 46px; }
  .suite-table-scroll th, .suite-table-scroll td { padding: 18px; }
  .suite-contact-copy, .suite-contact-form { padding: 28px 22px; }
  body.penli-site .suite-contact-copy h2 { font-size: 32px; }
  body.penli-site .suite-contact-form h3 { font-size: 25px; }
  .suite-contact-form .ridge-choice-row { gap: 6px; }
  .suite-contact-form .ridge-choice-row label > span { font-size: 11px; padding: 12px 8px; }
  .suite-contact-form .ridge-choice-row strong { font-size: 12px; }
  .suite-contact-form .ridge-field select { font-size: 13px; }
  .suite-footer-intro { flex-direction: column; gap: 24px; padding-block: 40px 32px; }
  .suite-footer-intro .v7-button { width: 100%; justify-content: space-between; }
  body.penli-site .suite-footer .ridge-footer-grid { gap: 32px 20px; padding-block: 32px; }
  body.penli-site .suite-footer .footer-col a { font-size: 12px; min-height: 44px; }
  body.penli-site .suite-footer .footer-col h2 { font-size: 13px; }
  .suite-footer-bottom { font-size: 11px; gap: 12px; }
  .suite-footer-legal { gap: 0 16px; }
}