/* ============================================================
   CutlassEdge v5 shared layer. Carries the home page's depth
   language onto the interior pages: one still frame of the
   depth field, the scroll shade, the depth rail, a cursor glow,
   line-reveal headlines, the app-window frame, grouped check
   lists, the two-pane questions, and the closing section.
   Page-specific parts stay inline on each page.
   ============================================================ */

body.v5{background:var(--abyss)}
body.v5::before{display:none}
#abyss{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#abyss.on{opacity:1}
.depth-shade{position:fixed;inset:0;z-index:0;pointer-events:none;background:#02060B;opacity:0}
body.v5 main,body.v5 footer{position:relative;z-index:2}
body.v5 footer{background:rgba(5,10,17,.72)}

/* cursor glow, pointer:fine only */
#cglow{position:fixed;left:0;top:0;width:340px;height:340px;z-index:1;pointer-events:none;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(212,175,55,.10),rgba(212,175,55,.03) 45%,transparent 70%);transition:opacity .6s ease}
body.cursor-on #cglow{opacity:1}

/* depth rail */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.rail a{display:flex;align-items:center;gap:10px;color:var(--sea-mist);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em}
.rail a .lbl{opacity:0;transform:translateX(6px);transition:all .25s var(--ease-out);text-transform:uppercase}
.rail a .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--sea-mist);transition:all .25s var(--ease-out);flex:none}
.rail a:hover .lbl{opacity:.9;transform:none}
.rail a.cur .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.55)}
.rail a.cur .lbl{opacity:1;transform:none;color:var(--gold)}
.rail .depth-readout{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--sea-mist);opacity:.6}
@media (max-width:1180px){.rail{display:none}}

/* shared type */
.v5 .eyebrow{display:inline-block}
.h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-0.018em;color:var(--fog);margin:16px 0 16px}
.h2 em{font-style:italic;font-weight:500;color:var(--gold)}
.lede5{font-size:18px;line-height:1.65;color:var(--sea-mist);max-width:40em}
.lede5 a{color:var(--gold-bright)}
.center{text-align:center}
.center .lede5{margin-left:auto;margin-right:auto}
.sec{position:relative;padding:120px 0}
.sec.tight{padding:90px 0}
.sec,.final{scroll-margin-top:72px}
.tick{color:var(--gold);margin-top:3px}

/* line-mask headline reveal (same as home) */
.hl .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hl .line>span{display:block;transform:translateY(112%);transition:transform .95s var(--ease-out)}
.hl.in .line>span{transform:none}
.hl.in .line:nth-child(2)>span{transition-delay:.12s}

/* ============================================================
   APP WINDOW FRAME (tilts flat as it scrolls in)
   ============================================================ */
.shot5{position:relative;max-width:1120px;margin:48px auto 0;perspective:1800px}
.shot5 .glow{position:absolute;inset:-6% 4%;background:radial-gradient(50% 50% at 50% 45%,rgba(212,175,55,.13),transparent 70%);filter:blur(10px);pointer-events:none}
.shot5 .win{position:relative;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--hairline-dark);
  box-shadow:0 50px 110px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.4);transform:rotateX(7deg) scale(.97);transform-origin:50% 0;transition:transform 1.2s var(--ease-out)}
.shot5.in .win{transform:none}
.win-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--hairline-dark);background:rgba(12,22,34,.95)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#26374A;display:block}
.win-bar i:nth-child(3){background:var(--gold-deep)}
.win-bar span{margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--sea-mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win img{display:block;width:100%;height:auto}
.win-cap{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid var(--hairline-dark);background:rgba(12,22,34,.95);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--sea-mist)}
.win-cap b{color:var(--gold);font-weight:500;white-space:nowrap}

/* ============================================================
   GROUPED CHECK LISTS
   ============================================================ */
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1120px;margin:56px auto 0}
.group h3{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-bottom:13px;margin-bottom:16px;border-bottom:1px solid var(--hairline-dark)}
.group ul{list-style:none;display:grid;gap:12px}
.group li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:15px;line-height:1.5;color:#C7D2DC}
.group li .tick{margin-top:3px}

/* ============================================================
   QUESTIONS: two panes on desktop, accordion on phones.
   Set --faq-n on .faq5 to the number of questions (default 7).
   ============================================================ */
.faq5{margin:40px 0 0}
.fq-q{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;text-align:left;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:11px;padding:16px 18px;color:var(--sea-mist);
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.3;transition:color .2s,background .25s,border-color .25s,box-shadow .25s}
.fq-q:hover{color:var(--fog);background:rgba(18,32,47,.45)}
.fq-q:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fq-q .mk{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:400;color:var(--gold);flex:none;transition:transform .3s var(--ease-out)}
.fq-item.open .fq-q{color:var(--fog);background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.22);box-shadow:inset 2px 0 0 var(--gold)}
.fq-a{border-radius:14px;overflow:hidden;background:rgba(8,16,26,.86);border:1px solid var(--hairline-dark);box-shadow:0 30px 70px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:8px 0 14px}
.fq-a .win-bar span{letter-spacing:.14em}
.fq-body{padding:22px 24px 24px}
.fq-echo{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fq-body p{font-size:16.5px;line-height:1.72;color:#C9D4DE}
.fq-body a{color:var(--gold-bright)}
.js .fq-item:not(.open) .fq-a{display:none}
.js .fq-item.open .fq-a{animation:fqIn .4s var(--ease-out)}
@keyframes fqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fq-item.open .fq-q .mk{transform:rotate(45deg)}
@media (min-width:901px){
  .js .faq5{display:grid;grid-template-columns:minmax(300px,410px) 1fr;grid-template-rows:repeat(var(--faq-n,7),auto) 1fr;column-gap:32px;row-gap:6px;align-items:start}
  .js .faq5 .fq-item{display:contents}
  .js .faq5 .fq-q{grid-column:1}
  .js .faq5 .fq-q .mk{display:none}
  .js .faq5 .fq-a{grid-column:2;grid-row:1 / -1;margin:0;position:sticky;top:96px;min-height:300px}
  .js .faq5 .fq-body{padding:28px 32px 32px}
  .js .faq5 .fq-body p{font-size:17.5px}
}
@media (max-width:900px){.fq-echo{display:none}}

/* ============================================================
   CLOSING SECTION with a faded screenshot behind it
   ============================================================ */
.final{position:relative;padding:140px 0 130px;overflow:hidden;border-top:1px solid var(--hairline-soft)}
.final .bgshot{position:absolute;left:38%;top:50%;transform:translateY(-50%);width:68%;height:118%;max-width:none;object-fit:cover;object-position:0% 50%;opacity:.45;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}
.final .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,13,21,.97) 40%,rgba(6,13,21,.6) 60%,rgba(6,13,21,.2) 100%)}
.final .inner{position:relative;max-width:600px}
.final .h2{font-size:clamp(38px,5.2vw,68px)}
.final .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.final .ctas .btn{padding:15px 26px;font-size:16px}

/* ============================================================
   RESPONSIVE + REDUCED MOTION
   ============================================================ */
@media (max-width:980px){
  .groups{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .sec{padding:84px 0}
  .sec.tight{padding:68px 0}
  .groups{grid-template-columns:1fr;gap:28px}
  .win-cap{flex-direction:column;gap:4px}
  .final{padding:96px 0 120px}
  .final .bgshot{left:0;width:140%;height:110%;opacity:.18}
  .final .shade{background:linear-gradient(180deg,rgba(6,13,21,.7),rgba(6,13,21,.92))}
}
@media (prefers-reduced-motion: reduce){
  .hl .line>span{transform:none;transition:none}
  .shot5 .win{transform:none;transition:none}
  .js .fq-item.open .fq-a{animation:none}
}