/* ─────────────────────────────────────────────────────────────────────────
   TFH Vertical Page Kit — shared chrome for premium vertical landing pages.
   The "duplicatable win" doctrine, one level up: the generated pages
   (make-vertical.mjs) stay for volume verticals; THIS kit is for the
   hand-built flagship pages — phone-frame video mockups, swipe rails,
   format cards. A new flagship vertical = copy the HTML, swap the assets.

   Page supplies the palette via :root. Kit never hardcodes brand colour.
   CSP-safe by construction: no inline JS anywhere, external kit.js only.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Phone-frame video mockup ─────────────────────────────────────────────
   A real device, not a rounded rectangle: machined bezel, dynamic-island
   pill, screen inset, glass sheen. Width is set by the parent (--pw). */
.phone{
  position:relative;
  width:var(--pw,268px);
  aspect-ratio:9/19.5;
  border-radius:calc(var(--pw,268px) * .155);
  padding:calc(var(--pw,268px) * .034);
  background:linear-gradient(155deg,#3B4457 0%,#151B27 26%,#0C111B 55%,#2A3243 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 2px 3px rgba(255,255,255,.16) inset,
    0 34px 70px -18px rgba(0,0,0,.85),
    0 8px 22px -8px rgba(0,0,0,.6);
  flex:0 0 auto;
}
.phone .screen{
  position:relative;
  width:100%;height:100%;
  border-radius:calc(var(--pw,268px) * .124);
  overflow:hidden;
  background:#05070C;
  box-shadow:0 0 0 1px rgba(0,0,0,.9) inset;
}
.phone video,.phone img.pshot{
  width:100%;height:100%;
  object-fit:cover;display:block;
  background:#05070C;
}
/* dynamic island */
.phone .island{
  position:absolute;top:calc(var(--pw,268px) * .035);left:50%;
  transform:translateX(-50%);
  width:31%;height:calc(var(--pw,268px) * .075);
  background:#05070C;border-radius:999px;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
/* glass sheen across the screen */
.phone .sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(128deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 17%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 100%);
}
/* soft ground shadow under a standing phone */
.phone.grounded::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:34px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%);
  filter:blur(8px);z-index:-1;
}

/* ── Swipe rail: drag / scroll / snap card carousel ───────────────────── */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:26px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:8px 0 40px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rail.dragging *{pointer-events:none}
.rail > *{scroll-snap-align:center}

/* rail arrows */
.rail-nav{
  position:absolute;top:38%;z-index:6;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:rgba(12,18,32,.72);backdrop-filter:blur(14px);
  color:var(--ink);font-size:19px;cursor:pointer;
  transition:transform .18s ease,opacity .25s ease,background .25s ease;
}
.rail-nav:hover{transform:scale(1.08);background:rgba(12,18,32,.94)}
.rail-nav[disabled]{opacity:0;pointer-events:none}
.rail-nav.prev{left:-16px}
.rail-nav.next{right:-16px}

/* rail progress dots */
.rail-dots{display:flex;gap:8px;justify-content:center;margin-top:2px}
.rail-dots i{
  width:28px;height:4px;border-radius:99px;
  background:rgba(241,245,251,.16);transition:background .35s ease;cursor:pointer;
}
.rail-dots i.on{background:var(--a)}

/* swipe affordance on touch */
.rail-hint{
  display:none;text-align:center;margin-top:6px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--soft);
}

/* ── Format card (phone + copy) ───────────────────────────────────────── */
.fcard{
  width:min(88vw,320px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.fcard .phone{margin-bottom:26px;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fcard:hover .phone{transform:translateY(-8px)}
.fcard .tag{
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a2);margin-bottom:8px;
}
.fcard h3{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.fcard p{color:var(--soft);font-size:.95rem;line-height:1.62}
/* the copy block grows so every card's ARC line sits on the same baseline */
.fcard .body{flex:1 1 auto;display:flex;flex-direction:column}
.fcard .arcline{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink);opacity:.82;
}
.fcard .arcline b{color:var(--a)}

@media(max-width:860px){
  .rail-nav{display:none}
  .rail-hint{display:block}
  .rail{gap:18px;padding-inline:calc((100vw - min(88vw,320px))/2 - 26px)}
}
@media(prefers-reduced-motion:reduce){
  .rail{scroll-behavior:auto}
  .fcard:hover .phone{transform:none}
}