/* v7 · Security — what we provide, what we never touch.
   The vault door as a navy duotone head; the data and order flow drawn as a plate of three white nodes on a
   dark fibre photograph, with your own AI as the highlighted middle node; the two lists as a pair of
   photographed cards, the second set in navy for what is never touched; the compliance points beside a
   column photograph; the fraud warning as a stark, red-ruled notice. Layout and look only: the text, its
   order, the flow labels and the menu are untouched. */

/* ── photographs (each used once on this page) ── */
body[data-page="security"] {
  --hero: url("../img/photos/hero-security.jpg"); --hero-pos: 50% 50%; --hero-blend: luminosity;
  --cta: url("../img/photos/nyc-manhattan-night.jpg"); --cta-pos: 50% 60%; --cta-blend: normal;
}
body[data-page="security"] .split-2 > .ai-block:nth-child(1) { --img: url("../img/photos/aud-desks-sm.jpg"); --img-pos: 50% 58% }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) { --img: url("../img/photos/brass-knobs-sm.jpg"); --img-pos: 40% 50% }

/* ── head ── */
body[data-page="security"] .hero { min-height: clamp(520px, 74vh, 760px) }
@media (min-width: 641px) {
  body[data-page="security"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .92) 0%, rgba(11, 19, 34, .78) 40%, rgba(11, 19, 34, .3) 72%, rgba(11, 19, 34, .12) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .6), rgba(11, 19, 34, 0) 50%),
      var(--hero);
  }
}
/* the eyebrow's red rule now comes from v7.css */
body[data-page="security"] .hero h1 { max-width: 13ch; margin-top: 1rem }
body[data-page="security"] .hero .lede { max-width: 40rem; font-size: 1.3rem; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-top: 1.6rem }

/* ── 01 · the flow: three white nodes on a dark fibre plate ── */
body[data-page="security"] .flow {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.4rem, 3.4vw, 3.2rem);
  border-radius: var(--radius); gap: 1.3rem; align-items: stretch;
  background-color: var(--navy-deep);
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .9), rgba(11, 19, 34, .55) 50%, rgba(11, 19, 34, .9)), url("../img/photos/fibre-streak.jpg");
  background-size: cover; background-position: center, 50% 50%;
}
body[data-page="security"] .flow-node { min-height: 200px; padding: 1.8rem 1.7rem; gap: .5rem; align-content: start; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .5) }
body[data-page="security"] .flow-node .flow-k { padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); line-height: 1.5 }
body[data-page="security"] .flow-node strong { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.08 }
body[data-page="security"] .flow-node small { font-size: .95rem; line-height: 1.5; color: var(--muted) }
body[data-page="security"] .flow-yours { border: 0; box-shadow: 0 0 0 4px rgba(224, 100, 107, .4), inset 0 4px 0 var(--red), 0 30px 60px rgba(0, 0, 0, .45) }
body[data-page="security"] .flow-edge { align-self: center; color: rgba(255, 255, 255, .86); font-size: .72rem; line-height: 1.5; letter-spacing: .02em; max-width: 9rem }
body[data-page="security"] .flow-edge span::after { color: #E0646B; font-size: 1.7rem; margin-top: .35rem }
body[data-page="security"] .flow-back {
  max-width: 54rem; margin-top: 1.4rem; padding: 1.2rem 1.5rem;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; color: var(--fg);
  border-left-width: 3px;
}

/* ── 02 · the two lists: a photographed pair, the second in navy ── */
body[data-page="security"] .split-2 { gap: 1.4rem; margin-top: clamp(1.6rem, 3vw, 2.4rem) }
body[data-page="security"] .split-2 > .ai-block { display: flex; flex-direction: column }
body[data-page="security"] .split-2 > .ai-block::before {
  content: ""; display: block; aspect-ratio: 16 / 8;
  background: var(--navy) var(--img, none) center / cover no-repeat; background-position: var(--img-pos, 50% 50%);
}
body[data-page="security"] .split-2 .ai-content { padding: clamp(1.8rem, 3vw, 2.6rem); gap: 1rem; flex: 1; align-content: start }
body[data-page="security"] .split-2 .ai-content h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.06 }
body[data-page="security"] .split-2 .ai-block ul { gap: 0; padding-top: 0; border-top: 2px solid var(--fg) }
body[data-page="security"] .split-2 .ai-block li { font-size: 1rem; line-height: 1.5; padding: .78rem 0; border-bottom: 1px solid var(--line); color: #3A4458 }
body[data-page="security"] .split-2 .ai-block li:last-child { border-bottom: 0 }
body[data-page="security"] .split-2 .ai-block li::before { width: 5px; height: 5px; border-radius: 0; margin-top: .6em }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) { background: var(--navy); border-color: var(--navy) }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) h3 { color: #fff }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) ul { border-top-color: rgba(255, 255, 255, .55) }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) li { color: #D3D9E3; border-bottom-color: rgba(255, 255, 255, .14) }
body[data-page="security"] .split-2 > .ai-block:nth-child(2) li::before { background: #E0646B }

/* ── 03 · for your compliance team: a column photograph beside the four points ── */
body[data-page="security"] .poster > section.machine:has(> ol.points) {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 4.4vw, 4.4rem); row-gap: 0;
}
body[data-page="security"] .poster > section.machine:has(> ol.points) > .sh { grid-column: 1 / -1; grid-row: 1 }
body[data-page="security"] .poster > section.machine:has(> ol.points)::before {
  content: ""; grid-column: 1; grid-row: 2; margin-top: clamp(1.6rem, 3vw, 2.4rem); min-height: 380px;
  border-radius: var(--radius);
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(11, 19, 34, .12), rgba(11, 19, 34, .55)), url("../img/photos/columns-sm.jpg");
  background-size: cover; background-position: center, 50% 40%; background-repeat: no-repeat; background-blend-mode: normal, luminosity;
}
body[data-page="security"] .poster > section.machine:has(> ol.points) > ol.points { grid-column: 2; grid-row: 2; margin-top: clamp(1.6rem, 3vw, 2.4rem); gap: 0 2.6rem; align-content: start }
body[data-page="security"] ol.points li { padding: 1.5rem 0 1.7rem }
body[data-page="security"] ol.points li:nth-child(-n+2) { border-top: 2px solid var(--fg) }
body[data-page="security"] ol.points li strong { font-size: 1.36rem }
body[data-page="security"] ol.points li p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: #3A4458 }

/* ── fraud warning: a stark, red-ruled notice ── */
body[data-page="security"] #fraud .sh { border-top: 2px solid var(--red); align-items: center }
body[data-page="security"] #fraud .sh-num {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: 0;
}
body[data-page="security"] #fraud .notice {
  max-width: none; margin-top: clamp(1.4rem, 2.6vw, 2rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.8rem clamp(2rem, 5vw, 5rem);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--red); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 40px rgba(11, 19, 34, .08);
}
body[data-page="security"] #fraud .notice > p:first-child {
  grid-column: 1; grid-row: 1; align-self: start;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.16; letter-spacing: -.02em; color: var(--fg);
}
body[data-page="security"] #fraud .notice ul { grid-column: 2; grid-row: 1; list-style: none; padding: 0; gap: 0; border-top: 2px solid var(--fg) }
body[data-page="security"] #fraud .notice li { position: relative; padding: .85rem 0 .85rem 2rem; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; color: #2A3448 }
body[data-page="security"] #fraud .notice li::before {
  content: ""; position: absolute; left: .1rem; top: 1.12rem; width: 12px; height: 12px; transform: rotate(45deg);
  background: linear-gradient(var(--red), var(--red)) center / 12px 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 12px no-repeat;
}
body[data-page="security"] #fraud .notice > p:last-child {
  grid-column: 1 / -1; grid-row: 2; padding: 1.4rem 1.6rem; background: #F7E9EA; border-left: 3px solid var(--red);
  font-family: var(--serif); font-size: 1.14rem; line-height: 1.6; color: var(--fg);
}
body[data-page="security"] #fraud .notice strong { font-family: var(--mono); font-weight: 500; font-size: .92em; color: var(--fg) }

/* ── close: Home's band — the call stacked on the left, the footer straight after (v7.css closes the gaps) ── */
body[data-page="security"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="security"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="security"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }

/* ── responsive ── */
@media (max-width: 1100px) {
  body[data-page="security"] .flow { padding-inline: 1.2rem; gap: .9rem }
  body[data-page="security"] .flow-node { min-height: 0; padding: 1.4rem 1.3rem }
  body[data-page="security"] .flow-edge { max-width: 6.8rem }
}
@media (max-width: 1000px) {
  body[data-page="security"] .poster > section.machine:has(> ol.points) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="security"] .poster > section.machine:has(> ol.points)::before { grid-column: 1; grid-row: 2; min-height: 0; aspect-ratio: 16 / 7 }
  body[data-page="security"] .poster > section.machine:has(> ol.points) > ol.points { grid-column: 1; grid-row: 3 }
}
@media (max-width: 860px) {
  body[data-page="security"] .flow { padding: 1.6rem 1.2rem; gap: .9rem }
  body[data-page="security"] .flow-edge { max-width: none; padding: .2rem 0 }
  body[data-page="security"] .split-2 { grid-template-columns: minmax(0, 1fr) }
  body[data-page="security"] .split-2 > .ai-block::before { aspect-ratio: 16 / 6 }
  body[data-page="security"] #fraud .notice { grid-template-columns: minmax(0, 1fr) }
  body[data-page="security"] #fraud .notice > p:first-child, body[data-page="security"] #fraud .notice ul { grid-column: 1; grid-row: auto }
  body[data-page="security"] #fraud .notice > p:last-child { grid-row: auto }
  body[data-page="security"] ol.points li:nth-child(2) { border-top-width: 1px; border-top-color: var(--line) }
}
@media (max-width: 640px) {
  body[data-page="security"] .hero { min-height: 560px }
  body[data-page="security"] .hero .lede { font-size: 1.12rem }
  body[data-page="security"] .flow-back { font-size: 1.04rem; padding: 1rem 1.1rem }
  body[data-page="security"] .split-2 > .ai-block::before { aspect-ratio: 16 / 8 }
  body[data-page="security"] .poster > section.machine:has(> ol.points)::before { aspect-ratio: 16 / 9 }
  body[data-page="security"] #fraud .notice { padding: 1.5rem 1.2rem; border-radius: 0 0 12px 12px }
  body[data-page="security"] #fraud .notice > p:last-child { padding: 1.1rem 1.1rem; font-size: 1.05rem }
  body[data-page="security"] .cta-band { min-height: 0; padding: 4.4rem 1rem; background-image: linear-gradient(90deg, rgba(11, 19, 34, .92), rgba(11, 19, 34, .74)), var(--cta) }
  body[data-page="security"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); text-wrap: balance }   /* one line at 390 */
  body[data-page="security"] .cta-band p { font-size: 1.12rem }
}