/* ════════════════════════════════════════════════════════════════
   REMORA INC — secure.css  (Security + DPA pages)
   Shared component styles (nav, phero, joinbp, footer, pill, cards)
   come from css/global.css + css/index.css. This file adds only the
   Security / DPA section layouts + the .acc accordion (copied from
   guarantee.css so the FAQ works without linking that page's sheet).
   ════════════════════════════════════════════════════════════════ */

/* content sections need an opaque background: the footer wordmark is a fixed
   layer (z-index:-1) behind the page and would otherwise bleed through */
.secpage { background: var(--c-light); }
.secpage.theme-medium { background: var(--c-medium); }
.secpage.theme-dark { background: var(--c-dark); }

.secpage__body {
  max-width: 72ch;
  margin: 1.25rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.65;
  color: var(--c-body);
}
.theme-dark .secpage__body, .theme-medium .secpage__body,
.theme-dark .lede, .theme-medium .lede { color: var(--c-body-dark); }
.secpage__narrow { max-width: 820px; }
.secpage__body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }

.security-bot {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: visible;
  padding-bottom: clamp(10rem, 16vw, 15rem);
}
.security-ddos {
  position: relative;
  z-index: 1;
  padding-top: clamp(10rem, 16vw, 15rem);
  overflow: hidden;
}
.security-bot > .container,
.security-ddos > .container {
  position: relative;
  z-index: 4;
}
.security-dam-boundary {
  position: relative;
  z-index: 10;
  height: 0;
  overflow: visible;
}
.security-dam__visual {
  --dam-shift: 0px;
  --dam-scale: 1;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 100vw;
  max-width: none;
  margin: 0;
  transform: translate3d(-50%, calc(-28% + var(--dam-shift)), 0) scale(var(--dam-scale));
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}
.security-dam__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.security-ddos__camera {
  --camera-rise: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: min(32vw, 460px);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, var(--camera-rise), 0);
  transform-origin: right bottom;
  will-change: transform;
}
@media (max-width: 900px) {
  .security-bot { padding-bottom: var(--sec-pad); }
  .security-ddos {
    padding-top: var(--sec-pad);
  }
  .security-dam-boundary { display: none !important; }
}
@media (max-width: 767px) {
  .security-ddos__camera { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .security-ddos__camera {
    width: min(22vw, 190px);
    opacity: 0.22;
  }
}
@media (prefers-reduced-motion: reduce) {
  .security-dam__visual {
    --dam-shift: 0px !important;
    --dam-scale: 1 !important;
    will-change: auto;
  }
  .security-ddos__camera {
    --camera-rise: 0% !important;
    will-change: auto;
  }
}

/* feature card grid */
.secgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.secgrid .card { background: var(--c-white); border: 1px solid var(--c-line); }
.secgrid .card h3 { color: var(--c-dark); }        /* keep card text dark on themed (dark) sections */
.secgrid .card p { color: var(--c-body); }
/* Infrastructure + Additional Safeguards: fixed 3-up on desktop, collapsing on smaller screens */
#infrastructure .secgrid, #safeguards .secgrid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { #infrastructure .secgrid, #safeguards .secgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #infrastructure .secgrid, #safeguards .secgrid { grid-template-columns: 1fr; } }

/* ── DPA plain-language callout + lists ── */
:is(#how-we-process, #laws, #agreement, #third-parties) h2 {
  font-size: clamp(2.05rem, 4vw, 3.2rem);
}
:is(#how-we-process, #laws, #agreement, #third-parties) .secpage__body {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.dpa-note {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.3rem;
  background: rgba(122, 151, 191, 0.10);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-body);
}
.dpa-ph { color: var(--c-accent-2); font-style: italic; }   /* [placeholder] marker */
.dpa-list { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.dpa-list li { padding: 0.6rem 0; border-top: 1px solid var(--c-line); font-size: 1.02rem; line-height: 1.55; }
.dpa-list li:first-child { border-top: none; }

/* ════════════════════════════════════════════════════════════════
   CASTLE SCENE (security hero) — the castle rises from dark-teal water
   that fades into the cream page; 3 shark fins circle it; 2 rooftop
   cameras aim at the cursor (js/security.js SEC-02). Pairs with the
   markup appended to sections/security/hero.part.
   ════════════════════════════════════════════════════════════════ */
/* hero keeps its full height, but its copy sits in the upper area so the
   overlapping castle owns the lower area without colliding with the paragraph */
/* Safari can composite the fixed, negative-z footer wordmark through fractional
   gaps between sibling sections. Keep the reveal in a normal base layer and
   explicitly stack every Security page surface above it. The empty space after
   the footer remains uncovered, so the intended footer reveal still works. */
body:has(#security-top) .footer-reveal {
  z-index: 0;
  visibility: hidden;
}
body:has(#security-top) .footer-reveal.is-security-visible { visibility: visible; }
#security-top,
.secpage,
.joinbp {
  position: relative;
  z-index: 1;
}
#security-top .phero__frame {
  min-height: clamp(42rem, 78svh, 52rem);
  align-items: flex-start;
}
#security-top .phero__grid { padding-top: clamp(6rem, 16vh, 10rem); gap: clamp(1.5rem, 4vh, 2.75rem); }
#security-top .phero__title { white-space: nowrap; }
@media (max-width: 640px) {
  #security-top .phero__frame { min-height: clamp(36rem, 72svh, 44rem); }
  #security-top .phero__grid { padding-top: clamp(9rem, 22svh, 11.5rem); }
  #security-top .phero__title { font-size: 4.5vw; }
}
/* Keep the first content heading below the water's cream-merge zone. The live
   portal uses #activity-monitoring; #commitment supports the local legacy copy. */
#commitment,
#activity-monitoring {
  position: relative; z-index: 2;            /* behind the water, so the water fades on its own (uncut) */
  margin-top: 0;                             /* no gap — cream stays continuous so the footer mark can't show through */
  padding-top: clamp(150px, 17vh, 210px);    /* push the title down (inside the cream) to clear the water */
  background: var(--c-light);
  box-shadow: 0 -4px 0 var(--c-light);       /* seals subpixel seam above the section without shifting layout */
}

.castle {
  --tealDeep: #0c242c;
  --teal:     #144350;
  --tealLite: #2f7d8f;
  --castle-overlap: clamp(190px, 26vh, 320px);
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--castle-overlap)); /* pull the castle up to overlap the hero */
  height: clamp(460px, 58vh, 640px);
  /* transparent over the hero (so the dark hero shows through at full height and
     the castle just overlaps it), turning to cream at the exact hero-bottom
     distance. The 2px overlap prevents Safari subpixel compositing seams. */
  background: linear-gradient(
    to bottom,
    transparent 0 calc(var(--castle-overlap) - 2px),
    var(--c-light) calc(var(--castle-overlap) - 2px) 100%
  );
  pointer-events: none;                          /* never blocks the page */
  /* clip the wider-than-viewport water/greens horizontally (no sideways scroll on
     phones) while still letting the scene spill downward into the cream section */
  overflow-x: clip;
  overflow-y: visible;
}

/* Keep the water below the hero and inside the scene's own bottom edge. */
.castle__pool {
  position: absolute; inset: 0; z-index: 1;
  clip-path: inset(calc(var(--castle-overlap) - 2px) -100vw -120px -100vw);
  pointer-events: none;
}

/* ── moat: a real water-surface image that the castle island sits in. It
   has its own faded edges, so it blends into the cream ground and the sky.
   Sits behind the castle (z below the stage). ── */
.castle__moat {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(-150px, -11vh, -90px);
  width: min(1360px, 138vw, max(114vw, calc(55vw + 531px)));
  z-index: 1;
  pointer-events: none;
}
/* The animated SVG owns its wave displacement and respects reduced motion. */
.castle__moat-img { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 734; }
/* Suppress the retired caustic overlays if an older portal content block is cached. */
.castle__moat-flow { display: none !important; }

/* Legacy portal hero markup may still include the removed rear shark. Keep it
   suppressed even while an older content block is cached or awaiting replacement. */
.castle__fins-back { display: none !important; }

/* ── shark fins: dorsal fins circling in the foreground water. Their side
   lanes stay clear of the castle while the foreground layer keeps them visible. ── */
/* the fins overlay shares the moat's exact box (same anchor, width and image
   aspect) so top:% positions remain seated on the water */
.castle__fins {
  --shark-edge: min(500px, calc(50vw - 44px));
  --shark-lane: calc(var(--shark-edge) - 120px);
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(-150px, -11vh, -90px);
  width: min(1360px, 138vw, max(114vw, calc(55vw + 531px)));
  aspect-ratio: 1536 / 734;
  z-index: 5; pointer-events: none;
  overflow: hidden;
  contain: paint;
  -webkit-mask: url("../img/security/moat.avif") center / 100% 100% no-repeat;
          mask: url("../img/security/moat.avif") center / 100% 100% no-repeat;
}
/* sharks: the outer element cruises along a wandering path (kept in the open
   water below the castle); the inner fin sways side-to-side like a body driven
   by its tail. Two of them, out of phase. */
.castle__fin {
  position: absolute; left: 50%; z-index: 3;
  width: 0; height: 0; will-change: transform;
}
/* depth: shark 1 rides higher and nearer the castle; shark 2 sits lower/front */
.castle__fin--1 { top: 68%; }
.castle__fin--2 { top: 74%; }
/* heading layer: flips horizontally at each end so the fin always faces its
   travel direction and swims head-first (curved leading edge in front, notched
   edge trailing as the back). It turns through zero-width, never tail-first. */
.castle__fin > i {
  position: absolute; left: 0; top: 0; display: block;
  width: 0; height: 0; will-change: transform;
}
/* body: the Remora brand fin (logo mark) as the shark's dorsal fin */
.castle__fin > i > b {
  position: absolute; left: -28px; top: -32px; display: block;
  width: 56px; height: 52px;
  /* layered shading fakes a rounded, glossy 3D fin: wet sheen + lit top ridge,
     a curved teal body, and a darker occluded base at the waterline */
  background:
    linear-gradient(122deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0) 40%),
    radial-gradient(85% 65% at 52% 3%, rgba(210,242,251,0.60) 0%, rgba(210,242,251,0) 44%),
    linear-gradient(0deg, rgba(3,12,16,0.92) 0%, rgba(3,12,16,0.30) 18%, rgba(3,12,16,0) 40%),
    linear-gradient(162deg, #3a707d 0%, #205160 34%, #10303a 70%, #071c22 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20381.62%20355.77%22%3E%3Cpath%20d%3D%22m381.62%2C355.77c-.76-.76-2.28-1.52-3.04-2.28-33.45-22.05-62.34-48.65-85.14-82.1-6.84-10.64-13.68-22.05-19-34.21-.76-1.52-1.52-2.28-3.8-2.28-15.2-.76-29.65-.76-44.85-1.52h-2.28c3.04-1.52%2C6.08-3.04%2C8.36-4.56%2C9.88-6.08%2C20.53-11.4%2C30.41-17.48.76-.76%2C2.28-.76%2C1.52-3.04-6.08-20.53-9.12-41.05-9.12-63.1v-2.28h-28.89v-.76c3.8-3.8%2C8.36-7.6%2C12.16-10.64%2C6.08-5.32%2C12.16-10.64%2C18.24-15.96.76-.76%2C1.52-1.52%2C1.52-3.04%2C3.04-18.24%2C7.6-36.49%2C15.2-53.21%2C6.84-15.2%2C15.96-28.13%2C25.09-41.81%2C1.52-2.28%2C3.04-3.8%2C4.56-6.08%2C1.52-2.28%2C2.28-5.32%2C0-8.36-1.52-2.28-3.8-3.04-6.84-3.04-38.77%2C1.52-74.5%2C13.68-107.19%2C34.21-38.01%2C23.57-68.42%2C54.73-93.5%2C91.22-24.33%2C34.97-41.05%2C73.74-51.69%2C114.79-5.32%2C19.77-9.88%2C40.29-15.2%2C60.82-2.28%2C8.36-5.32%2C15.96-7.6%2C24.33-4.56%2C11.4-11.4%2C22.05-20.53%2C30.41%2C126.95%2C0%2C254.67%2C0%2C381.62%2C0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20381.62%20355.77%22%3E%3Cpath%20d%3D%22m381.62%2C355.77c-.76-.76-2.28-1.52-3.04-2.28-33.45-22.05-62.34-48.65-85.14-82.1-6.84-10.64-13.68-22.05-19-34.21-.76-1.52-1.52-2.28-3.8-2.28-15.2-.76-29.65-.76-44.85-1.52h-2.28c3.04-1.52%2C6.08-3.04%2C8.36-4.56%2C9.88-6.08%2C20.53-11.4%2C30.41-17.48.76-.76%2C2.28-.76%2C1.52-3.04-6.08-20.53-9.12-41.05-9.12-63.1v-2.28h-28.89v-.76c3.8-3.8%2C8.36-7.6%2C12.16-10.64%2C6.08-5.32%2C12.16-10.64%2C18.24-15.96.76-.76%2C1.52-1.52%2C1.52-3.04%2C3.04-18.24%2C7.6-36.49%2C15.2-53.21%2C6.84-15.2%2C15.96-28.13%2C25.09-41.81%2C1.52-2.28%2C3.04-3.8%2C4.56-6.08%2C1.52-2.28%2C2.28-5.32%2C0-8.36-1.52-2.28-3.8-3.04-6.84-3.04-38.77%2C1.52-74.5%2C13.68-107.19%2C34.21-38.01%2C23.57-68.42%2C54.73-93.5%2C91.22-24.33%2C34.97-41.05%2C73.74-51.69%2C114.79-5.32%2C19.77-9.88%2C40.29-15.2%2C60.82-2.28%2C8.36-5.32%2C15.96-7.6%2C24.33-4.56%2C11.4-11.4%2C22.05-20.53%2C30.41%2C126.95%2C0%2C254.67%2C0%2C381.62%2C0Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  filter: drop-shadow(0 5px 4px rgba(6,20,26,0.5)) drop-shadow(0 1px 1px rgba(0,0,0,0.4));
  transform-origin: 50% 88%;
  will-change: transform;
}
/* the fin emerges from the surface: a low pool of ripples at the waterline.
   .castle__shadow seats it, .castle__wake is the far side of the pool (behind the
   fin), .castle__surface is the near side + foam waterline that laps the base. */
.castle__shadow {
  position: absolute; left: -60px; top: 16px;
  width: 120px; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 44%, rgba(2,11,16,0.74), rgba(2,11,16,0.44) 38%, rgba(2,11,16,0.16) 60%, transparent 76%);
  filter: blur(4px);
  opacity: 1;
}
.castle__wake {
  position: absolute; left: -74px; top: 2px;
  width: 148px; height: 44px;
  background: radial-gradient(ellipse 70px 13px at 50% 44%,
      transparent 0 16%,
      rgba(255,255,255,0.85) 19% 24%,
      transparent 25% 40%,
      rgba(178,224,248,0.6) 44% 49%,
      transparent 50% 64%,
      rgba(178,224,248,0.32) 84% 89%,
      transparent 90% 100%);
  filter: blur(0.5px);
  opacity: 0.9;
  animation: sharkRings 3.8s ease-in-out infinite;
}
.castle__wake::before, .castle__wake::after {                      /* foam wisps spreading off the sides */
  content: ''; position: absolute; top: 42%; width: 32px; height: 5px; border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent);
  filter: blur(0.6px);
}
.castle__wake::before { left: -2px; transform: scaleX(-1); }
.castle__wake::after  { right: -2px; }
@keyframes sharkRings { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.045); opacity: .98; } }
.castle__surface {
  position: absolute; left: -52px; top: 6px;
  width: 104px; height: 26px;
  background:
    radial-gradient(ellipse 50px 10px at 50% 92%, transparent 0 42%, rgba(180,224,247,0.5) 50% 58%, transparent 66%),
    radial-gradient(ellipse 44px 7px at 50% 58%, rgba(255,255,255,0.95) 0 30%, rgba(232,248,253,0.55) 44%, transparent 72%);
  filter: blur(0.5px);
  animation: sharkRings 3.8s ease-in-out infinite;
}
/* cutting the water: a bow wave at the FRONT (leading edge). Forward-bowing
   ripple arcs peel off the point where the fin slices the surface and grow
   ahead of it, so the front reads as cutting. The layer flips with the heading
   so the bow always sits on the leading edge. */
.castle__cut { position: absolute; left: 14px; top: 20px; width: 0; height: 0; transform-origin: -14px center; }
.castle__cut::before, .castle__cut::after {
  content: ''; position: absolute; left: 0; top: 0;         /* at the front cutting point */
  width: 26px; height: 20px; margin: -10px 0 0 -13px; border-radius: 50%;
  border: 2.5px solid rgba(244,253,255,0.85);
  clip-path: inset(0 -12px 0 54%);                          /* keep only the forward-facing arc */
  transform: translateX(0) scale(.5); opacity: 0;
  animation: sharkEmanate 2.2s ease-out infinite;
}
.castle__cut::after { animation-delay: 1.1s; }
@keyframes sharkEmanate {
  0%   { transform: translateX(0) scale(.5);    opacity: 0; }
  22%  { opacity: .85; }
  100% { transform: translateX(16px) scale(1.7); opacity: 0; }
}
.castle__fin--1 .castle__cut { animation: sharkWakeFlip 22s ease-in-out infinite; }
.castle__fin--2 .castle__cut { animation: sharkWakeFlip 18s ease-in-out infinite; animation-delay: -5s; }
@keyframes sharkWakeFlip {
  0%, 42%  { transform: scaleX(1); }    /* leading edge on the right (moving right) */
  50%, 92% { transform: scaleX(-1); }   /* leading edge on the left  (moving left)  */
  100%     { transform: scaleX(1); }
}
/* each shark swims a back-and-forth lap; the heading layer flips at each end so
   it always goes head-first (never backward). Different depths, speeds and phase
   keep the two apart. */
.castle__fin--1 { animation: sharkLap1 22s ease-in-out infinite; }
.castle__fin--1 > i { animation: sharkFace 22s ease-in-out infinite; }
.castle__fin--1 > i > b { animation: sharkSwish 2.1s ease-in-out infinite; }
.castle__fin--2 { animation: sharkLap2 18s ease-in-out infinite; animation-delay: -5s; }
.castle__fin--2 > i { animation: sharkFace 18s ease-in-out infinite; animation-delay: -5s; }
.castle__fin--2 > i > b { animation: sharkSwish 1.7s ease-in-out infinite; animation-delay: -0.5s; }
@keyframes sharkLap1 {   /* left-side foreground lane */
  0%   { transform: translate(calc(-1 * var(--shark-edge)), -2px) scale(.56); }
  50%  { transform: translate(calc(-1 * var(--shark-lane)), 6px) scale(.62); }
  100% { transform: translate(calc(-1 * var(--shark-edge)), -2px) scale(.56); }
}
@keyframes sharkLap2 {   /* right-side foreground lane; bigger */
  0%   { transform: translate(var(--shark-lane), 6px) scale(1.05); }
  50%  { transform: translate(var(--shark-edge), 13px) scale(1.12); }
  100% { transform: translate(var(--shark-lane), 6px) scale(1.05); }
}
/* heading: a real 3D turn about the vertical axis (perspective rotateY) so the
   fin rotates and foreshortens instead of squashing flat. It always rotates the
   same way (180 -> 360 -> 540deg) and holds facing between turns, timed to each
   lap's direction change so the shark is always head-first. */
@keyframes sharkFace {
  0%, 42%  { transform: perspective(300px) rotateY(180deg); }   /* rightward leg -> face right */
  50%, 92% { transform: perspective(300px) rotateY(360deg); }   /* turn at the right end -> face left */
  100%     { transform: perspective(300px) rotateY(540deg); }   /* turn at the left end -> face right */
}
/* gentle tail sway (does not change heading) */
@keyframes sharkSwish { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .castle__fin, .castle__fin > i, .castle__fin > i > b { animation: none; } }

/* ── castle + cameras stage ── */
/* greenery layer: trees/shrubs that flank the castle, sitting between the
   water (behind) and the castle (in front) */
.castle__greens {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(70px, 10vh, 100px);
  width: min(1480px, 150vw, max(124vw, calc(60vw + 576px))); height: auto;
  max-width: none;
  z-index: 3;
  pointer-events: none;
}
.castle__stage {
  position: absolute; left: 50%; bottom: clamp(20px, 3.5vh, 34px); z-index: 4;
  width: min(940px, 96vw, max(79vw, calc(36.2vw + 383px))); transform: translateX(-50%);
  aspect-ratio: 1536 / 1024;
}
.castle__img { display: block; width: 100%; height: auto; }

/* cameras: 0×0 pivot anchors on the two front towers; the body pivots
   (JS sets rotate) so the lens points at the cursor. */
.castle__cam { position: absolute; width: 0; height: 0; z-index: 6; transform: scale(.8); transform-origin: 6px 2px; }
.castle__cam--l { left: 27%; top: -0.3%; }        /* left tower sits a touch lower, so seat its stand lower */
.castle__cam--r { left: 69.5%; top: -0.3%; }
.castle__cam--c { left: 50%; top: 31%; }        /* on the gatehouse wall right above the door */
/* small mount foot planted on the tower tip; the body pivots on it */
.castle__cam-base {
  position: absolute; left: 6px; top: 0; width: 11px; height: 8px;
  transform: translateX(-50%);
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(#c6cdd1, #8b9398);
  box-shadow: 0 3px 4px rgba(0,0,0,0.45);
}
/* the two tower cameras stand up on a mounting pole rising from the tower tip
   (per the red-square marks); the door camera keeps its short wall mount */
.castle__cam--l .castle__cam-base,
.castle__cam--r .castle__cam-base {
  left: 16px; top: -2px; width: 4px; height: 24px; border-radius: 2px 2px 1px 1px;   /* centered under the camera + shorter stand */
  background: linear-gradient(90deg, #767d82 0%, #cdd4d8 42%, #7c848a 100%);   /* metal post, lit from the left */
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}
/* the tower cameras balance on top of the pole, so they pivot around it (its centre) */
.castle__cam--l .castle__cam-body,
.castle__cam--r .castle__cam-body { transform-origin: 16px 9px; }
.castle__cam-base::after {                       /* base plate resting on the stone */
  content: ''; position: absolute; left: 50%; bottom: -2px; width: 15px; height: 5px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #cdd4d8, #939ba0);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}
/* white bullet housing */
.castle__cam-body {
  position: absolute; left: 0; top: -9px; width: 32px; height: 18px; border-radius: 9px;
  background: linear-gradient(#f7f9fa 0%, #e2e7e9 42%, #b4bcc0 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.12);
  transform-origin: 6px 9px;                    /* pivot near the mount */
  transform: rotate(150deg);
}
/* dark lens face (behind the lens) */
.castle__cam-body::after {
  content: ''; position: absolute; right: -1px; top: 1px; width: 17px; height: 16px; border-radius: 6px; z-index: 0;
  background: #23282c; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.castle__cam--r .castle__cam-body { transform: rotate(30deg); }
.castle__cam-lens {
  position: absolute; right: -2px; top: 50%; margin-top: -8px; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #c6eaf4 0%, #1a333c 46%, #05090b 80%);
  border: 2px solid #0b0f12;
  box-shadow: 0 0 4px rgba(120,200,220,0.5);
}
.castle__cam-lens::before {                      /* IR-LED ring hint */
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px dotted rgba(214,238,247,0.6);
}
/* small red REC dot on the lens */
.castle__cam-led {
  position: absolute; left: 21px; top: 4px; width: 3px; height: 3px; border-radius: 50%; z-index: 3;
  background: #ff3535; box-shadow: 0 0 4px 1px rgba(255,50,50,0.95);
  animation: castleRec 1.15s steps(1, end) infinite;
}
@keyframes castleRec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.12; } }

/* ── phones: the castle scales with vw, but the fins and cameras are pixel-sized,
   so shrink them and narrow the fins' patrol to the smaller water ── */
@media (max-width: 640px) {
  /* the castle image is vw-sized, so tie the box + overlap to vw too (not vh) —
     this lifts the castle so its head still overlaps the hero and the water/greens
     (bottom-anchored) follow it up to stay centered around the base */
  .castle {
    --castle-overlap: 24vw;
    height: 82vw;
    margin-top: calc(-1 * var(--castle-overlap));
  }
  .castle__stage { bottom: 23vw; }
  .castle__moat, .castle__fins { bottom: -2vw; }
  .castle__fins { z-index: 5; }
  .castle__greens { bottom: 30vw; }
  .castle__fin--1 { top: 72%; }
  .castle__fin--2 { top: 80%; }
  .castle__fin--1 { animation-name: sharkLap1Sm; }   /* narrower band + smaller */
  .castle__fin--2 { animation-name: sharkLap2Sm; }
  .castle__cam { transform: scale(.52); }            /* scale the whole camera down, keeps its geometry/aim */
}

/* Ease the whole scene from its phone composition into the desktop horizon.
   Keeping the same width ratios prevents the castle, trees, and water from
   jumping independently at tablet sizes. */
@media (min-width: 641px) and (max-width: 900px) {
  .castle {
    --castle-overlap: clamp(154px, calc(13.85vw + 65px), 190px);
    height: clamp(460px, calc(685px - 25vw), 525px);
  }
  .castle__stage { bottom: clamp(28px, calc(440px - 45.8vw), 147px); }
  .castle__moat,
  .castle__fins { bottom: clamp(-90px, calc(176px - 29.6vw), -13px); }
  .castle__greens { bottom: clamp(70px, calc(468px - 43.1vw), 192px); }
}
@keyframes sharkLap1Sm {   /* higher, nearer the island */
  0%   { transform: translate(-105px, -1px) scale(.34); }
  25%  { transform: translate(-20px, 4px)   scale(.38); }
  50%  { transform: translate(105px, -1px)  scale(.34); }
  75%  { transform: translate(-20px, 4px)   scale(.38); }
  100% { transform: translate(-105px, -1px) scale(.34); }
}
@keyframes sharkLap2Sm {   /* lower/front, bigger */
  0%   { transform: translate(-135px, 4px)  scale(.5); }
  25%  { transform: translate(-16px, 8px)   scale(.55); }
  50%  { transform: translate(135px, 4px)   scale(.5); }
  75%  { transform: translate(-16px, 8px)   scale(.55); }
  100% { transform: translate(-135px, 4px)  scale(.5); }
}
@media (prefers-reduced-motion: reduce) {
  .castle__fin, .castle__fin > i, .castle__fin > i > b,
  .castle__wake, .castle__wake::before, .castle__wake::after, .castle__surface,
  .castle__cut::before, .castle__cut::after,
  .castle__water::before, .castle__water::after { animation: none; }
  .castle__cam-led { animation: none; }
}

/* ── accordion (from guarantee.css SECTION G3) ── */
.acc { border-bottom: 1px solid var(--c-line); }
.acc__item { border-top: 1px solid var(--c-line); transition: background var(--dur) var(--ease); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.1rem, 2.6vh, 1.6rem) 0; background: none; border: none; cursor: pointer; text-align: left; color: var(--c-dark); }
.acc__title { font-family: var(--f-body); font-weight: 500; text-transform: none; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.2; color: inherit; }
.acc__head:hover .acc__title { color: var(--c-primary); }
.acc__icon { position: relative; width: 20px; height: 20px; flex: none; color: var(--c-primary); }
.acc__icon::before, .acc__icon::after { content: ''; position: absolute; background: currentColor; }
.acc__icon::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.acc__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.acc__item.is-open .acc__icon::after { opacity: 0; transform: scaleY(0); }
.acc__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease); }
.acc__item.is-open .acc__panel { max-height: 40rem; opacity: 1; }
.acc__body { margin: 0 0 clamp(1.3rem, 3vh, 1.9rem); max-width: 72ch; font-size: clamp(0.98rem, 1.35vw, 1.08rem); line-height: 1.65; color: var(--c-body); }
.acc__body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 641px) and (max-height: 520px) {
  #security-top .phero__frame { min-height: 82svh; }
  #security-top .phero__grid {
    padding-top: 4.25rem;
    gap: 0.75rem;
  }
  #security-top .phero__col {
    max-width: 32ch;
    margin-right: 1.5rem;
  }
  .castle {
    --castle-overlap: 120px;
    height: 300px;
  }
  .castle__stage { bottom: 28px; }
  .castle__moat,
  .castle__fins { bottom: -60px; }
  .castle__greens { bottom: 28px; }
}