/* ══════════════════════════════════════════════════════════════════════════
   SENTRA — Site vitrine : refonte v5 (09/08/2026), esprit airtable.com
   Fond clair, structure sobre, aucune navigation sur la 1ère page — le
   sommaire (gauche) et les actions de compte (droite) n'apparaissent qu'à
   partir de la 2ème section. Typographie Instrument Sans (display/corps) +
   Instrument Serif italique (accent des titres de catégorie) — à dessein
   loin des choix "démo IA" habituels (Inter/Space Grotesk/Poppins...).
   Dégradé de fond gris très atténué (canvas, body) + dégradé plus marqué sur le hero, sinon zéro
   flou/glassmorphism, coins vifs sauf sur les boutons.
   Distinct de sentra-v2.css (design system de l'application).
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@500;600;700&family=Instrument+Serif:ital@1&display=swap');

:root {
  --bg:      #FFFFFF;
  --bg-2:    #F6F6F8;
  --bg-3:    #E7E9EC; /* palier intermédiaire du dégradé gris du hero, cf. #hero */
  --bg-4:    #C7CBD2; /* palier le plus sombre du dégradé gris du hero, cf. #hero */
  --bg-page-1: #FCFCFD; /* dégradé de fond du reste du site — même famille que le hero, en très atténué */
  --bg-page-2: #F0F1F3;
  --ink:     #14151A;
  --ink-soft:  rgba(20,21,26,.62);
  --ink-faint: rgba(20,21,26,.34);
  --hair:      rgba(20,21,26,.12);
  --surface:        rgba(20,21,26,.03);
  --surface-strong: rgba(20,21,26,.045);

  /* Famille de teintes — une par section, cf. section[data-accent] plus bas */
  --violet: #6C4CF3;
  --blue:   #2563EB;
  --green:  #0F9D64;
  --orange: #E8590C;
  --red:    #E23A5D;
  --cyan:   #0891B2;
  --gold:   #B45309;

  --accent: var(--violet);
  --ok:     var(--green);

  --f-display: 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-body:    'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-accent:  'Instrument Serif', Georgia, serif;
  --f-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  /* Fond de canvas du reste du site : même famille que le dégradé + semis de points du hero
     (cf. #hero plus bas), mais très atténué — évite le blanc plat sans rejouer l'effet du hero.
     background-attachment:fixed pour que le dégradé reste un arrière-plan stable derrière les
     sections (qui n'ont pas de fond propre) plutôt que de s'étirer sur toute la hauteur du document. */
  background:
    radial-gradient(circle, rgba(20,21,26,.045) 1.4px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, var(--bg-page-1) 0%, var(--bg-page-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--f-mono); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 1180px) { .wrap { padding: 0 32px; } }
@media (max-width: 720px)  { .wrap { padding: 0 22px; } }

h1, h2, h3, .disp { font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(24px, 3.4vw, 40px); line-height: 1.12; }
h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
h3 { font-size: 19px; line-height: 1.3; }
p.lead { font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.62; color: var(--ink-soft); max-width: 600px; }
/* Titre de catégorie : flèche haut-gauche + nom en italique coloré (teinte de
   la section) plutôt qu'un petit libellé mono majuscule avec un tiret. */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow .arrow-box { width: 26px; height: 26px; transform: rotate(-135deg); color: var(--ink); flex-shrink: 0; }
.eyebrow-label { font-family: var(--f-accent); font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 42px); color: var(--accent); }

/* ── Marque SENTRA : bouclier (logo fourni) + wordmark. Aplat uni. ── */
.brand-unit { display: inline-flex; align-items: center; gap: .3em; }
.brand-unit-icon { width: 1.15em; height: 1.15em; object-fit: contain; flex-shrink: 0; }
.brand-unit-word {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em;
  color: var(--ink);
}

/* ── Flèche diagonale (↗) : toujours visible, simple, pas de gimmick au
   survol — juste une icône rotée -45° à côté du texte du bouton. ── */
.arrow-box { width: .85em; height: .85em; display: inline-flex; flex-shrink: 0; transform: rotate(-45deg); }
.arrow-icon { width: 100%; height: 100%; }

/* ── Bandeau du haut : toujours visible, dès la 1ère page (logo + SENTRA à
   gauche, actions de compte à droite). Seul le sommaire latéral (plus bas)
   est réservé aux sections suivantes, cf. vitrine.js sentraNavReveal. ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; height: 74px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 40px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--hair);
}
.site-nav .brand-unit { font-size: 18px; }
.site-nav-actions { display: flex; align-items: center; gap: 22px; }
.nav-link { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-soft); }
.nav-link:hover { color: var(--ink); }
.nav-signup {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--ink); padding: 9px 18px; border-radius: 999px;
}
.navbar-burger { display: none; }

.side-nav {
  position: fixed; left: 40px; top: 50%; z-index: 80;
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; transform: translate(-8px, -50%); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.side-nav.nav-revealed { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.nav-item { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); transition: all .2s; }
.nav-label { font-family: var(--f-display); font-size: 13.5px; color: var(--ink-soft); transition: color .2s; }
.nav-item.active .nav-label { color: var(--ink); font-weight: 600; }
.nav-item.active .nav-dot { background: var(--item-color, var(--violet)); }
.nav-item:hover .nav-label { color: var(--ink); }
.nav-item[data-color="violet"] { --item-color: var(--violet); }
.nav-item[data-color="blue"]   { --item-color: var(--blue); }
.nav-item[data-color="green"]  { --item-color: var(--green); }
.nav-item[data-color="orange"] { --item-color: var(--orange); }
.nav-item[data-color="cyan"]   { --item-color: var(--cyan); }
.nav-item[data-color="red"]    { --item-color: var(--red); }
.nav-item[data-color="gold"]   { --item-color: var(--gold); }

@media (max-width: 860px) {
  .side-nav { display: none; } /* le sommaire latéral cède la place au menu du bandeau */
  .site-nav { padding: 0 18px; }
  .site-nav-actions { position: fixed; inset: 74px 0 0 0; background: var(--bg); flex-direction: column;
    align-items: flex-start; padding: 26px 28px; gap: 22px; transform: translateX(100%);
    transition: transform .25s ease; overflow-y: auto; }
  .site-nav-actions.open { transform: translateX(0); }
  .nav-link { font-size: 17px; color: var(--ink); }
  .navbar-burger { display: block; background: none; border: 1px solid var(--hair); color: var(--ink);
    width: 36px; height: 36px; font-family: var(--f-mono); cursor: pointer; }
}

/* ── Sections ── */
section.plate {
  min-height: 100vh; display: flex; align-items: center; padding: 120px 0;
  position: relative; border-bottom: 1px solid var(--hair);
}
section.plate:last-of-type { border-bottom: none; }

/* Couleur d'accent par bloc de contenu : une teinte par section plutôt
   qu'un accent unique, utilisée sobrement (libellés, puces, un bouton). */
section[data-accent="hero"]        { --accent: var(--violet); }
section[data-accent="soc"]         { --accent: var(--blue); }
section[data-accent="audit"]       { --accent: var(--green); }
section[data-accent="phishing"]    { --accent: var(--orange); }
section[data-accent="fonctionnement"] { --accent: var(--cyan); }
section[data-accent="tarifs"]      { --accent: var(--red); }
section[data-accent="data-leak"]   { --accent: var(--gold); }

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 13px;
  letter-spacing: .03em; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .15s;
}
.btn-accent { background: var(--ink); color: #fff; font-weight: 700; }
.btn-accent:hover { filter: brightness(1.3); }
.btn-line { border-color: var(--hair); color: var(--ink); }
.btn-line:hover { border-color: var(--ink-soft); background: var(--surface); }

/* ── Cartes ── */
.annot-card { border: 1px solid var(--hair); padding: 26px 24px 24px; background: var(--surface); }
.annot-card .num { font-family: var(--f-mono); font-size: 11px; color: var(--accent); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.annot-card .num .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.annot-card h3 { margin-bottom: 8px; }
.annot-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ── Tampon de score ── */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--green);
  color: var(--green); position: relative; flex-shrink: 0; font-family: var(--f-mono);
  background: var(--surface);
}
.stamp .stamp-score { font-family: var(--f-display); font-size: 36px; font-weight: 700; line-height: 1; }
.stamp .stamp-label { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; color: var(--ink-soft); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; padding: 4px 9px; }
.chip-ok   { color: var(--green);  background: color-mix(in srgb, var(--green) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.chip-warn { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.chip-crit { color: var(--red);    background: color-mix(in srgb, var(--red) 12%, transparent);    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }

.ruler-line { height: 1px; background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 12px); }

.grid-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

footer.site-footer { padding: 48px 0 56px; position: relative; }
footer.site-footer .foot-legal { font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); }

/* ── Révélation au scroll ── */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ══════════════════════ 00 — HERO : horizontal, logo à gauche / infos à droite ══════════════════════ */
main { padding-top: 74px; }
#hero {
  /* min-height (pas height) : le hero vise toujours l'écran plein, mais peut grandir sans
     jamais rogner le contenu sur un petit/court viewport. Double déclaration vh puis dvh :
     un navigateur qui ne connaît pas dvh ignore juste cette ligne et garde le fallback vh
     (barre d'adresse mobile qui va et vient sans faire "sauter" la mise en page). */
  min-height: calc(100vh - 74px);
  min-height: calc(100dvh - 74px);
  display: flex; overflow: hidden;
  align-items: center; padding: 56px 0; border-bottom: 1px solid var(--hair); position: relative;
  /* Fond gris dégradé — dérogation volontaire au "zéro dégradé" du reste du site, réservée
     à cette section d'ouverture pour donner du relief derrière le logo. Franchement gris dès
     le haut (pas de palier blanc) pour que le dégradé se voie vraiment, pas juste une nuance
     de blanc cassé. Semis de points par-dessus (grille radiale répétée, même esprit que
     .ruler-line déjà utilisé ailleurs sur le site) : une texture, jamais assez marquée pour
     nuire à la lisibilité du texte par-dessus. */
  background:
    radial-gradient(circle, rgba(20,21,26,.09) 1.4px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 45%, var(--bg-4) 100%);
}
.hero-split {
  width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 64px;
}
/* Bandeau des 4 modules, sous le H1 dans .hero-tagline : cellules égales séparées par des filets
   verticaux — joue sur l'horizontalité à l'échelle de la colonne (520px), pas de toute la page.
   Libellés courts (pas "Audit de configuration"/"Campagnes de phishing" en toutes lettres) :
   avec 4 cellules la place manque, et le détail vit de toute façon dans chaque section plus bas —
   cf. side-nav qui utilise déjà ces mêmes formes courtes. */
.hero-modules-bar { width: 100%; display: flex; border-top: 1px solid var(--hair); }
.hmb-item {
  flex: 1; text-align: center; padding: 16px 8px;
  font-family: var(--f-accent); font-style: italic; font-weight: 500;
  font-size: clamp(14px, 1.7vw, 20px); color: var(--item);
  border-left: 1px solid var(--hair); transition: background-color .15s;
  white-space: nowrap;
}
.hmb-item:first-child { border-left: none; }
.hmb-item:hover { background: color-mix(in srgb, var(--item) 7%, transparent); }
@media (max-width: 480px) {
  /* 4 cellules horizontales ne tiennent plus proprement sous ~480px (texte qui se compresse
     jusqu'à devenir illisible) : bascule en grille 2×2, plus lisible qu'une ligne unique étriquée. */
  .hero-modules-bar { flex-wrap: wrap; }
  .hmb-item { flex: 1 1 50%; border-left: none; border-top: 1px solid var(--hair); white-space: normal; }
  .hmb-item:nth-child(odd)  { border-right: 1px solid var(--hair); }
  .hmb-item:nth-child(-n+2) { border-top: none; }
}
/* Logo prédominant : taille fluide (clamp) plutôt que des paliers fixes, pour suivre chaque
   largeur d'écran au lieu de sauter entre 2-3 valeurs. Plancher relevé (280px, avant : 280px
   fixe seulement au-delà de 900px) pour ne jamais régresser, plafond monté à 400px pour que le
   logo domine vraiment sur les grands écrans. */
/* min() avec une borne vh en plus de vw : sur une fenêtre large mais basse (petit écran de
   portable, fenêtre non maximisée), la seule contrainte 24vw ne réagissait pas à la hauteur —
   le logo (~1.15× cette taille) plus la tagline pouvaient dépasser #hero et repousser
   .hero-modules-bar sous le pli. La borne vh force le logo à rétrécir quand la hauteur manque,
   sans jamais dépasser le plafond 400px sur un écran haut. */
.hero-word { font-size: clamp(310px, min(27vw, 42vh), 440px); flex-shrink: 0; }
.hero-word .brand-unit-word { display: none; } /* le mot ne re-paraît pas ici : place au texte à droite */
@media (max-width: 900px) {
  /* Mise en page empilée : le logo peut occuper une bien plus grande part de la largeur
     disponible (centré, seul sur sa ligne) sans écraser le texte en dessous. */
  .hero-word { font-size: clamp(160px, min(36vw, 30vh), 250px); }
}
@media (max-width: 380px) {
  /* Petits téléphones (SE, mini) : on referme un peu le plancher pour garder de la marge
     de chaque côté du bouclier sans le faire toucher les bords. */
  .hero-word { font-size: clamp(140px, min(38vw, 26vh), 200px); }
}
@media (max-height: 480px) and (orientation: landscape) {
  /* Téléphone à plat (paysage, faible hauteur) : la contrainte n'est plus la largeur mais la
     hauteur — on relâche le min-height plein écran et on réduit le logo pour que le texte
     reste visible sans avoir à scroller dans le hero lui-même. */
  #hero { min-height: auto; padding: 88px 0 36px; }
  .hero-word { font-size: clamp(84px, 20vh, 150px); }
}
/* Page d'accueil "un peu animée" : léger flottement continu du bouclier, jamais du texte
   (lisibilité). La rotation 3D testée en CSS a été abandonnée : le logo est un rendu figé à un
   seul angle de caméra, la rotation trahissait l'aplat (reflet en miroir passé 90°) — cf. mémo
   projet pour un éventuel remplacement par un asset dédié. Coupé net par la règle
   prefers-reduced-motion globale en tête de fichier. */
@keyframes sentraFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-word .brand-unit-icon { animation: sentraFloat 5s ease-in-out infinite; }
/* Glissement vers la gauche lié au scroll (vitrine.js, sentraHeroEscape) : le wrapper est un
   élément à part de l'icône flottante ci-dessus pour ne pas faire entrer en conflit une
   animation CSS (transform par keyframes) et une translation pilotée en JS (transform inline)
   sur le même élément. */
.hero-logo-spin { will-change: transform; }
.hero-h1-arrow { width: .72em; height: .72em; margin-right: .28em; vertical-align: .04em; }
.hero-tagline {
  text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
  max-width: 520px;
}
@media (max-width: 900px) {
  .hero-split { flex-direction: column; text-align: center; gap: 40px; padding: 0 28px; }
  .hero-tagline { align-items: center; text-align: center; }
}
/* ══════════════════════ 01 — SOC ══════════════════════ */
.channel-row { display: flex; gap: 12px; margin-top: 22px; }
.channel-pill {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600;
  font-size: 13.5px; color: var(--ink); border: 1px solid var(--hair); padding: 8px 16px 8px 10px; border-radius: 999px;
}
.channel-icon { width: 20px; height: 20px; object-fit: contain; color: var(--ink-soft); }
.teams-card { border: 1px solid var(--hair); padding: 18px 20px; background: var(--surface); }
.teams-card .tc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.teams-card .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.teams-card .tc-title { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; }
.teams-card .tc-body { font-size: 12.5px; color: var(--ink-soft); font-family: var(--f-mono); }
.teams-stack { display: flex; flex-direction: column; gap: 12px; }
.teams-stack .teams-card:nth-child(2) { opacity: .72; }
.teams-stack .teams-card:nth-child(3) { opacity: .48; }
.detect-list { border: 1px solid var(--hair); }
.detect-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hair); gap: 12px; }
.detect-row:last-child { border-bottom: none; }
.detect-row .d-name { font-size: 13.5px; }
.detect-row .d-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* ══════════════════════ 02 — AUDIT ══════════════════════ */
.weight-row { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 12px; margin-bottom: 14px; }
.weight-row .wr-label { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft); }
.weight-row .wr-track { height: 8px; background: var(--surface); overflow: hidden; }
.weight-row .wr-fill { height: 100%; background: var(--accent); }
.weight-row .wr-n { font-family: var(--f-mono); font-size: 11.5px; text-align: right; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-bottom: 44px; }
.cat-cell { background: var(--bg); padding: 16px 14px; }
.cat-cell .cc-n { font-family: var(--f-display); font-size: 22px; font-weight: 700; }
.cat-cell .cc-l { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
@media (max-width: 780px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.fail-card { border: 1px solid var(--hair); padding: 16px 18px; background: var(--surface); }
.fail-card .fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fail-card .fc-id { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-soft); }
.fail-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }

/* ══════════════════════ 03 — PHISHING ══════════════════════ */
.mail-mock { border: 1px solid var(--hair); overflow: hidden; background: var(--surface-strong); position: relative; }
.mail-mock .mm-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.mail-mock .mm-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.mail-mock .mm-head { padding: 14px 18px; border-bottom: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-soft); }
.mail-mock .mm-head strong { color: var(--ink); display: block; font-size: 13.5px; margin-bottom: 3px; }
.mail-mock .mm-body { padding: 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.mail-mock .mm-btn { display: inline-block; margin-top: 12px; background: var(--accent); color: #fff; font-weight: 700; padding: 8px 18px; font-size: 12px; }
.flag-tag { position: absolute; font-family: var(--f-mono); font-size: 9.5px; color: var(--accent); border: 1px solid var(--accent); background: var(--bg); padding: 2px 6px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.cat-pills span { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--hair); padding: 6px 13px; color: var(--ink-soft); }

/* ══════════════════════ 04 — FONCTIONNEMENT ══════════════════════ */
.step-block { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--hair); }
.step-block:last-child { border-bottom: 1px solid var(--hair); }
.step-block .sb-n { font-family: var(--f-display); font-size: 34px; font-weight: 700; color: var(--ink-faint); }
.step-block .sb-body p { color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; max-width: 520px; }
@media (max-width: 640px) { .step-block { grid-template-columns: 1fr; } }
.term-panel { background: var(--ink); border: 1px solid var(--hair); color: #E8ECF0; padding: 20px 22px; font-family: var(--f-mono); font-size: 12px; line-height: 1.85; }
.term-panel .t-ok { color: #6FE3A6; }
.term-panel .t-dim { color: rgba(232,236,240,.5); }
.term-panel .t-prompt { color: #6FCBE3; }
.perm-table { border: 1px solid var(--hair); }
.perm-row { display: grid; grid-template-columns: 1fr 100px; padding: 12px 18px; border-bottom: 1px solid var(--hair); font-size: 12.5px; align-items: center; gap: 10px; }
.perm-row:last-child { border-bottom: none; }
.perm-row .p-name { font-family: var(--f-mono); font-size: 11.5px; }
.perm-row .p-scope { color: var(--ink-soft); font-size: 11px; margin-top: 2px; }

/* ══════════════════════ 05 — CONTACT ══════════════════════ */
.contact-form { max-width: 560px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cf-field label { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft); }
.cf-field input, .cf-field textarea {
  font-family: var(--f-body); font-size: 14.5px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hair); padding: 11px 14px; resize: vertical;
}
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--ink-soft); }
.cf-status { margin-top: 14px; font-size: 13px; }
.cf-status.ok  { color: var(--green); }
.cf-status.err { color: var(--red); }