/* =====================================================================
   Free website check (site/src/pages/security-evaluation.html).
   Built on the cube system (home.css, body.home-v2) and the UI kit:
   the kit terminal in narrator mode, a glass form with the kit drop zone,
   glass step cards, and the prices as 3D cards on the kit inspector.
   This file is page layout and the card faces only.

   Bilingual: the shared language button sets body.lang-en / body.lang-ar
   and html[dir]; the header and footer stay left to right (site.css).
   Accents: the headline's red phrase and the "Free" price are the only
   two loud reds; the submit button is the action.
   ===================================================================== */

.security-evaluation-page .site-main { overflow-x: clip; }
body.security-evaluation-page .hv-eyebrow { color: #55585e; }   /* AA on the page ground */

/* ------------------------------------------------------------ Hero */
.se-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(2.5rem, 6vh, 4rem);
}

/* One composition: the promise and its screen on the left, the request on
   the right, both hung from the same top line. The left column stays in
   view while the (taller) form scrolls past it on desktop. */
.se-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.se-lead { min-width: 0; }
.se-formwrap { position: relative; z-index: 1; min-width: 0; }
@media (min-width: 981px) and (min-height: 760px) {
  .se-lead { position: sticky; top: calc(var(--header-h, 80px) + 1.5rem); }
}

.home-v2 .se-title { font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: .98; }
/* The promise gets its own line, so the red phrase lands as the answer. */
.se-title .hv-accent { display: block; }
.se-title { text-wrap: balance; }
.se-intro .hv-lead { margin-top: 1.4rem; color: #4b4e54; }

/* --------------------------------------------------- The terminal */
/* The kit terminal, at the kit inspector's perspective: tilted back like a
   screen on a desk, leaning toward the form. It straightens while the
   visitor types, and its phosphor glow brightens. */
.se-screen { position: relative; margin-top: clamp(1.8rem, 4vh, 2.6rem); perspective: 1200px; }
.se-term {
  height: clamp(220px, 28vh, 260px);
  transform: rotateX(9deg) rotateY(7deg);
  transform-origin: 50% 100%;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
html[dir="rtl"] .se-term { transform: rotateX(9deg) rotateY(-7deg); }
.se-screen.is-live .se-term { transform: none; box-shadow: 0 30px 70px rgba(18, 22, 30, .26), 0 0 0 1px rgba(134, 255, 166, .18), 0 0 34px rgba(90, 255, 140, .14); }

/* Phosphor glow behind the tube (the course TV's glow, page-sized). It
   breathes slowly while idle and brightens when the preview runs. */
.se-screen__glow {
  position: absolute;
  inset: 8% -6% -12% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(57, 255, 122, .2), rgba(57, 255, 122, .06) 50%, rgba(57, 255, 122, 0) 70%);
  filter: blur(20px);
  opacity: .6;
  pointer-events: none;
  animation: se-breathe 6s ease-in-out infinite;
  transition: opacity .8s var(--ease);
}
.se-screen.is-live .se-screen__glow { opacity: .95; animation: none; }
/* Bezel: a thin lit rim on the tube, so it reads as a lit screen. */
.se-term.kt { border-color: #000; box-shadow: 0 24px 60px rgba(18, 22, 30, .22), 0 0 0 1px rgba(134, 255, 166, .1), inset 0 0 0 1px rgba(134, 255, 166, .08); }
/* "Sent": one short pulse of the rim. */
.se-screen.is-sent .se-term { animation: se-sent 1.1s var(--ease) 1; }
@keyframes se-breathe { 50% { opacity: .85; } }
@keyframes se-sent {
  0% { box-shadow: 0 30px 70px rgba(18, 22, 30, .26), 0 0 0 1px rgba(134, 255, 166, .18), 0 0 0 rgba(90, 255, 140, 0); }
  30% { box-shadow: 0 30px 70px rgba(18, 22, 30, .26), 0 0 0 2px rgba(134, 255, 166, .9), 0 0 54px rgba(90, 255, 140, .45); }
  100% { box-shadow: 0 30px 70px rgba(18, 22, 30, .26), 0 0 0 1px rgba(134, 255, 166, .18), 0 0 34px rgba(90, 255, 140, .14); }
}
.se-term .kt__screen { font-size: 13.5px; }
/* Arabic inside the terminal: the line reads right to left in the Arabic
   face (monospace fonts have no Arabic); bars and the pill stay LTR. */
.se-term .kt-rtl { direction: rtl; text-align: right; unicode-bidi: plaintext; }
.se-term .kt-rtl, .se-term .kt-arf, .se-term .kt__pill, .se-term .kt__title { font-family: "JetBrains Mono", "Noto Kufi Arabic", ui-monospace, Consolas, monospace; }
.se-term .kt-rtl, .se-term .kt-arf { line-height: 1.75; }
.se-term__fallback { margin: 0; padding: 1rem 1.2rem; color: #86ffa6; font: 500 14px/1.6 ui-monospace, Consolas, monospace; }
.se-term:not(.kt) { border-radius: 20px; background: #020a05; }

.se-facts { margin-top: clamp(1.6rem, 3.5vh, 2.2rem); color: #55585e; }
.se-facts li::before { background: var(--hv-ink); }

/* ------------------------------------------------------- The form */
.se-form, .se-done { padding: clamp(1.5rem, 3vw, 2.2rem); }
.se-form {
  box-shadow: var(--hv-lift-shadow);
  transform: perspective(1200px) rotateX(var(--se-rx, 0deg)) rotateY(var(--se-ry, 0deg));
  transition: transform .5s var(--ease);
}
.se-form__head { margin-bottom: 1.5rem; }
.site-themed .se-form__title { font-size: clamp(1.3rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--hv-ink); }
.se-form__sub { margin-top: .35rem; font-size: .92rem; line-height: 1.5; color: #55585e; }

.se-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.se-field { margin-bottom: 1.05rem; min-width: 0; }
.se-field label, .se-proof legend {
  display: block;
  margin-bottom: .45rem;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hv-ink);
}
.se-optional { font-weight: 500; color: #55585e; }
.se-field input {
  width: 100%;
  min-height: 50px;
  padding: .75rem .95rem;
  border: 1px solid rgba(13, 13, 15, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  font: inherit;
  font-size: 1rem;
  color: var(--hv-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.se-field input::placeholder { color: #686c72; opacity: 1; }
.se-field input:hover { border-color: rgba(13, 13, 15, .32); }
.se-field input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 35, 26, .14); }
.se-field input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 35, 26, .16); }

.se-proof { min-width: 0; margin: .4rem 0 1.1rem; padding: 0; border: 0; }
.se-proof legend { padding: 0; }
.se-hint { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.55; color: #55585e; }
.se-privacy { display: flex; gap: .55rem; margin: .8rem 0 0; font-size: .85rem; line-height: 1.5; color: #55585e; }
.se-privacy::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .5em; border-radius: 2px; background: var(--hv-ink); }

/* The kit drop zone, given more room and a larger target on this page. */
.se-proof .kit-drop__zone { gap: .45rem; padding: 1.5rem 1rem 1.35rem; border-radius: 16px; background: rgba(255, 255, 255, .62); }
.se-proof .kit-drop__icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: .2rem; }
.se-proof .kit-drop svg { width: 20px; height: 20px; }
.se-proof .kit-drop__zone:hover .kit-drop__icon { transform: translateY(-2px); }
.se-proof .kit-drop__title { font-size: 1rem; }
.se-proof .kit-drop__rules { font-size: .82rem; color: #55585e; }
.se-proof .kit-drop__input:focus-visible + .kit-drop__zone { border-style: solid; }
/* File chips: one row each, quiet until hovered. */
.se-proof .kit-drop__file { border-color: rgba(13, 13, 15, .1); background: #fff; }
html[dir="rtl"] .se-proof .kit-drop__name span { direction: ltr; unicode-bidi: plaintext; text-align: right; }

/* Bot trap: off-screen, out of the tab order, hidden from screen readers. */
.se-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.se-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 0 0 1.2rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(13, 13, 15, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  font-size: .94rem;
  line-height: 1.5;
  color: var(--hv-ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.se-consent:hover { border-color: rgba(13, 13, 15, .28); }
.se-consent:has(input:checked) { background: #fff; border-color: rgba(13, 13, 15, .3); }
.se-consent input { width: 19px; height: 19px; margin-top: .12rem; accent-color: var(--accent); }
.se-consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.se-consent.is-invalid { border-color: var(--accent); }

.se-error {
  margin-bottom: 1rem;
  padding: .75rem .95rem;
  border-radius: 12px;
  background: rgba(226, 35, 26, .09);
  color: #a3150e;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
}
.se-submit { width: 100%; justify-content: center; }
.se-submit[disabled] { opacity: .6; pointer-events: none; }
.se-form[aria-busy="true"] .se-submit { cursor: progress; }

/* ------------------------------------------------- Success panel */
.se-done:focus { outline: none; }
.se-done__mark { display: block; width: 56px; height: 56px; margin-bottom: 1.3rem; }
.se-done__mark circle { fill: var(--hv-ink); }
.se-done__mark path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 0; }
.se-done.is-shown .se-done__mark { animation: se-pop .5s var(--ease) both; }
.se-done.is-shown .se-done__mark path { animation: se-draw .45s .25s var(--ease) both; }
@keyframes se-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes se-draw { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
.site-themed .se-done h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--hv-ink); }
.se-done__lead { margin-top: .8rem; font-size: 1rem; line-height: 1.6; color: #4b4e54; }
.se-done__facts { display: grid; gap: 2px; margin: 1.4rem 0 0; overflow: hidden; border-radius: 14px; }
.se-done__facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .8rem 1rem; background: rgba(255, 255, 255, .7); }
.se-done__facts dt { font-size: .86rem; font-weight: 600; color: #55585e; }
.se-done__facts dd { margin: 0; font-size: .95rem; font-weight: 700; color: var(--hv-ink); overflow-wrap: anywhere; }
.se-done .btn { margin-top: 1.4rem; }
.se-demo-note {
  margin-top: 1rem;
  padding: .7rem .95rem;
  border: 1px dashed rgba(13, 13, 15, .22);
  border-radius: 12px;
  font-size: .88rem;
  line-height: 1.5;
  color: #55585e;
}

/* ------------------------------------------ Sections: shared rhythm */
.se-section { position: relative; isolation: isolate; padding: clamp(3rem, 7vh, 5rem) 0; }
.se-section + .se-section { padding-top: clamp(1rem, 3vh, 2rem); }
.se-head { margin-bottom: clamp(1.8rem, 4vh, 2.6rem); }
.home-v2 .se-head .hv-eyebrow { margin-bottom: 1.1rem; }
.home-v2 .se-head .hv-h2 { max-width: 24ch; }
.se-head__note { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: #4b4e54; }

/* -------------------------------------------------- Steps (glass) */
.se-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.se-step {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 200px;
  padding: 1.5rem 1.4rem 1.4rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #4b4e54;
  transition: transform .5s var(--ease), box-shadow .35s var(--ease);
}
/* Steps reveal one by one (site.js .reveal), then lift on hover. */
html.js .se-step.reveal { transition: opacity .55s var(--ease), transform .55s var(--ease), box-shadow .35s var(--ease); }
.se-step.reveal:nth-child(2) { transition-delay: .08s; }
.se-step.reveal:nth-child(3) { transition-delay: .16s; }
.se-step.reveal:nth-child(4) { transition-delay: .24s; }
.se-step.is-visible:hover { transform: translateY(-5px); box-shadow: var(--hv-lift-shadow); transition-delay: 0s; }
.se-step strong { margin-top: auto; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.25; color: var(--hv-ink); }
.se-n { font: 700 .82rem/1 "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .08em; color: #55585e; }
/* The visitor's two steps sit on a brighter card than ours. */
.se-step:nth-child(-n+2) { background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)); }

/* ---------------------------------------------- Prices (3D cards) */
.se-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.se-offer { display: flex; flex-direction: column; min-width: 0; }
.se-stage { height: clamp(360px, 46vh, 440px); --kit-object-radius: 8px; }
.se-stage:focus-visible { box-shadow: none; }
.se-stage:focus-visible .kit-face { box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px var(--accent); }
/* Hover tilt sits on the wrapper, so it adds to the inspector's own turn. */
.se-stage .kit-enter { transition: transform .45s var(--ease); }

/* The controls sit on the card's own width (--card-w from the inspector):
   "Turn over" under its left edge, the next step under its right. */
.se-offer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  width: max(var(--card-w, 70%), 15.5rem);
  max-width: 100%;
  min-height: 44px;
  margin: .2rem auto 0;
}
.se-turn {
  min-height: 40px;
  padding: .5rem 1rem;
  border: 1px solid rgba(13, 13, 15, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--hv-ink);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.se-turn:hover, .se-turn:focus-visible { border-color: var(--hv-ink); background: #fff; outline: none; }
.se-turn:active { transform: scale(.97); }
.se-turn:focus-visible { box-shadow: 0 0 0 3px rgba(226, 35, 26, .25); }
.home-v2 .se-offer__go { margin: 0; padding: 0; font-size: .92rem; }
.se-offer__note { font-size: .86rem; font-weight: 600; color: #55585e; }

/* Card faces: one set. Every front is the same dark ink card with a lit top
   edge; every back is the same lined paper. Sizes follow the card width
   (--ow, set by the inspector). */
.se-card {
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: 11% 10% 10%;
  font: 500 max(11px, calc(var(--ow, 240) * .058px))/1.4 var(--kit-ui, "Inter", system-ui, sans-serif);
  text-align: start;
}
.lang-ar .se-card { font-family: "Noto Kufi Arabic", "Inter", sans-serif; }
.se-card--dark {
  background:
    radial-gradient(130% 55% at 18% 0%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 62%),
    linear-gradient(165deg, #1c1c20, #0b0b0d 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: #f4f4f5;
}
.se-card--paper {
  background:
    repeating-linear-gradient(180deg, rgba(5, 5, 5, 0) 0 1.7em, rgba(5, 5, 5, .045) 1.7em calc(1.7em + 1px)),
    linear-gradient(160deg, #fff, #efeee9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(5, 5, 5, .1);
  color: #0d0d0f;
}
.se-card__top { display: flex; flex-direction: column; gap: .7em; }
.se-card__num { font: 700 .72em/1 "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .1em; color: rgba(244, 244, 245, .55); }
.se-card__name { font-size: .78em; font-weight: 800; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; opacity: .78; }
.se-card__price { margin-top: auto; font-size: 3.2em; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.se-card__price small { font-size: .3em; font-weight: 700; letter-spacing: .06em; opacity: .75; }
.se-card__price--accent { color: #ff4a40; }
.se-card__line { font-size: .92em; line-height: 1.5; opacity: .8; }
.se-card__list { display: grid; gap: .75em; margin: auto 0 0; padding: 0; list-style: none; font-size: .95em; line-height: 1.45; }
.se-card__list li { position: relative; padding-inline-start: 1.15em; }
.se-card__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .52em; width: .45em; height: .45em; border-radius: 2px; background: currentColor; opacity: .75; }
.lang-ar .se-card__name { font-size: .86em; line-height: 1.6; }
.lang-ar .se-card__price { letter-spacing: 0; }
.lang-ar .se-card__line, .lang-ar .se-card__list { line-height: 1.7; }

/* --------------------------------------------------- The promise */
.se-promise {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 3.75rem);
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 2rem);
  border-radius: var(--hv-radius, 26px);
  background: rgba(255, 255, 255, .6);
}
.se-safe { display: flex; align-items: flex-start; gap: .85rem; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--hv-ink); }
.se-safe__mark { flex: none; width: 11px; height: 11px; margin-top: .42em; border-radius: 3px; background: var(--hv-ink); }
.se-close { margin: 0; font-size: .98rem; line-height: 1.6; color: #4b4e54; }
.se-close a { color: var(--hv-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.se-close a:hover, .se-close a:focus-visible { color: var(--accent); }

/* ---------------------------------------------------------- Arabic */
.home-v2.lang-ar .se-title { font-size: clamp(2rem, 3.4vw, 3.05rem); line-height: 1.35; }
.home-v2.lang-ar .se-head .hv-h2 { max-width: 34ch; }
.site-themed.lang-ar .se-form__title { letter-spacing: 0; line-height: 1.45; }
.lang-ar .se-step strong { line-height: 1.5; }
.site-themed.lang-ar .se-done h2 { line-height: 1.45; }
.lang-ar .se-field label, .lang-ar .se-proof legend { line-height: 1.5; }

/* ------------------------------------------------------ Responsive */
@media (max-width: 980px) {
  .se-layout { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 5vh, 2.75rem); }
  .se-formwrap { width: 100%; }
  .se-term, html[dir="rtl"] .se-term { height: 220px; transform: rotateX(6deg); }
  .se-form { transform: none; }
  .se-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-offers { grid-template-columns: minmax(0, 1fr); max-width: 24rem; margin-inline: auto; gap: 1.75rem; }
  .se-stage { height: 400px; }
  .se-promise { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .se-row, .se-steps { grid-template-columns: 1fr; }
  .se-step { min-height: 0; }
  .se-step strong { margin-top: .7rem; }
  .se-term, html[dir="rtl"] .se-term { height: 210px; transform: none; }
  .se-term .kt__screen { font-size: 12.5px; padding: 12px 14px 14px; }
  .se-stage { height: 420px; }
  .se-form, .se-done { padding: 1.35rem 1.15rem; border-radius: 22px; }
  .home-v2 .se-title { font-size: 2.35rem; }
  .se-title .hv-accent { display: inline; }
  .home-v2.lang-ar .se-title { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .se-term, .se-step, .se-stage .kit-enter, .se-field input, .se-form, .se-screen__glow, .se-turn, .se-consent { transition: none; }
  .se-term, html[dir="rtl"] .se-term, .se-form { transform: none; }
  .se-step.is-visible:hover, .se-proof .kit-drop__zone:hover .kit-drop__icon { transform: none; }
  .se-screen__glow, .se-screen.is-sent .se-term, .se-done.is-shown .se-done__mark, .se-done.is-shown .se-done__mark path { animation: none; }
}