/* ==========================================================
   FEARTICKET — Page-specific styles: home.html
   Shared rules live in common.css.
   ========================================================== */

.hero{padding:36px 0 0; position:relative;}

.hero .hero-spacer{margin:0 0 36px;}

.ticket-main .eyebrow{color:var(--ember-dim); margin-bottom:18px;}

.whatsnew{background:var(--ink2); padding-top:88px; padding-bottom:88px;}

#flexibility{background:var(--paper); color:var(--text-ink);}

#flexibility h2{color:var(--ink);}

#flexibility .check-list li{color:#5b5349;}

.rule-visual{background:var(--ink2); border:1px solid rgba(244,236,220,0.14); border-radius:10px;
    overflow:hidden; box-shadow:0 34px 70px -30px rgba(0,0,0,0.4);}

.cap-cloud{background:#fff; border:1px solid var(--paper-line); border-radius:14px;
    padding:30px 26px 32px; box-shadow:0 28px 60px -34px rgba(30,20,10,0.3);}

.cap-cloud-label{display:block; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:#8a7f70;
    padding-bottom:22px; margin-bottom:24px; border-bottom:1px dashed var(--paper-line);}

.cap-cloud-tags{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px;}

.cap-tag{font-family:'Space Grotesk',sans-serif; border-radius:20px; white-space:nowrap;
    border:1px solid var(--paper-line); background:#FAF6EC; color:#5b5349;
    transition:border-color .15s, color .15s, background .15s;}

.cap-tag:hover{border-color:var(--ember); color:var(--ember-dim); background:#fff;}

.cap-tag.t1{font-size:15px; font-weight:700; padding:10px 18px; color:var(--ink); border-color:#C9B98A;}

.cap-tag.t2{font-size:13.5px; font-weight:600; padding:8px 15px; color:#4A423C;}

.cap-tag.t3{font-size:12.5px; font-weight:500; padding:7px 13px;}

@media (max-width:600px){
    .cap-cloud{padding:24px 18px 26px;}
    .cap-cloud-tags{gap:7px;}
    .cap-tag.t1{font-size:13.5px; padding:8px 14px;}
    .cap-tag.t2{font-size:12.5px; padding:7px 12px;}
    .cap-tag.t3{font-size:12px; padding:6px 11px;}
  }

.support247-grid{display:grid; grid-template-columns:260px 1fr; gap:60px; align-items:center;}

.s247-badge-wrap{position:relative; display:flex; align-items:center; justify-content:center; height:260px;}

.s247-glow{position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle, rgba(232,93,47,0.28) 0%, rgba(232,93,47,0.1) 45%, transparent 72%);}

.s247-badge{position:relative; width:170px; height:170px; border-radius:50%; background:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 0 60px rgba(232,93,47,0.35), 0 20px 50px -15px rgba(0,0,0,0.6);}

.s247-num{font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:48px; color:var(--ink); line-height:1;}

.s247-div{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin-top:2px;}

.s247-content .eyebrow{color:var(--ember);}

.s247-content h2{margin:14px 0 16px; font-size:clamp(26px,3.6vw,40px);}

.s247-content > p{font-size:16px; color:var(--fog); line-height:1.6; max-width:640px; margin:0;}

.s247-quote{margin:26px 0 0; padding-left:20px; border-left:3px solid var(--ember);}

.s247-quote p{font-size:17px; color:var(--paper); line-height:1.5; margin:0 0 10px; font-style:normal;}

.s247-quote cite{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--fog-dim); font-style:normal; text-transform:uppercase; display:block;}

.trusted-band{background:var(--ink2); padding:44px 0; border-top:1px solid rgba(244,236,220,0.08); border-bottom:1px solid rgba(244,236,220,0.08);}

.client-logos{margin-top:0; padding-top:0;}

.cl-kicker{display:block; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fog); margin-bottom:28px;}

.cl-slider{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}

.cl-track{display:flex; align-items:center; gap:26px; width:max-content; animation:clScroll 36s linear infinite;}

.cl-slider:hover .cl-track{animation-play-state:paused;}

@keyframes clScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.cl-logo{display:flex; align-items:center; justify-content:center;
  padding:16px 22px; background:transparent; border:1px solid rgba(244,236,220,0.16); border-radius:8px;
  flex-shrink:0; transition:border-color .2s, box-shadow .2s;}

.cl-logo:hover{border-color:rgba(232,93,47,0.45); box-shadow:none;}

.cl-logo img{height:46px; width:auto; max-width:170px; object-fit:contain;}

@media (prefers-reduced-motion: reduce){
  .cl-track{animation:none;}
}

@media (max-width: 980px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .menu-toggle{display:block;}
    .mobile-nav{
      display:block;
      position:fixed; top:64px; right:-100%; width:100%; bottom:0;
      background:var(--ink);
      padding:8px 28px 40px;
      overflow-y:auto;
      transition:right .28s ease;
      z-index:99;
      border-top:1px solid rgba(244,236,220,0.1);
    }
    .mobile-nav.open{right:0;}
    .mobile-nav ul{list-style:none; margin:0; padding:20px 0; display:flex; flex-direction:column; gap:4px;}
    .mobile-nav > ul > li > a{display:block; padding:14px 0; font-size:17px; color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(244,236,220,0.08);}
    .mnav-group{padding:14px 0; border-bottom:1px solid rgba(244,236,220,0.08);}
    .mnav-label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fog-dim); margin-bottom:10px;}
    .mnav-group a{display:block; padding:9px 0 9px 4px; font-size:15px; color:var(--fog); text-decoration:none; border-left:2px solid rgba(244,236,220,0.15); padding-left:14px; margin-bottom:2px;}
    .mnav-group a:last-child{margin-bottom:0;}
    .mobile-nav .btn{width:100%; justify-content:center; margin-top:18px;}
    .ticket{grid-template-columns:1fr;}
    
    .ticket-stub{border-left:none; border-top:2px dashed var(--paper-line); padding:40px 30px;}
    .ticket-stub::before, .ticket-stub::after{left:50%; transform:translateX(-50%);}
    .ticket-stub::before{top:-14px;} .ticket-stub::after{bottom:-14px; top:auto;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .receipt-wrap{grid-template-columns:1fr;}
    .flex-section{grid-template-columns:1fr;}
    .industry-grid{
      grid-template-columns:1fr 1fr; grid-template-rows:none;
      grid-template-areas:"feat a" "b c" "d e";
    }
    .industry-card{min-height:200px;}
    .growth-grid{grid-template-columns:1fr;}
    .support247-grid{grid-template-columns:1fr; text-align:center; justify-items:center;}
    .s247-quote{text-align:left;}
    .stub-row{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .stub-admit{display:none;}
  }

@media (max-width: 600px){
    .feature-grid{grid-template-columns:1fr;}
    .ticket-main{padding:40px 24px 30px;}
    .ticket-stub{padding:34px 24px;}
    .ticket-foot{padding:16px 24px;}
    .foot-grid{grid-template-columns:1fr;}
    .industry-grid{grid-template-columns:1fr; grid-template-areas:"feat" "a" "b" "c" "d" "e";}
    .industry-card{min-height:220px;}
    .cl-track{gap:16px;}
    .cl-logo{padding:13px 18px;}
    .cl-logo img{height:38px; max-width:140px;}
  }

/* ==========================================================
   HERO CAROUSEL — 4 rotating hero banners
   Slide 1 reuses the .ticket styles from common.css.
   Slides 2-4 are self-contained (.s2 / .s3 / .s4) but built from the
   same tokens, display face and button shape as the rest of the site.
   ========================================================== */

.hero-carousel{position:relative;}

/* every slide sits in the same grid cell, so the stage is as tall as the
   tallest slide and all four render at an identical height */
.hero-stage{display:grid;}

.hero-slide{grid-area:1 / 1; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .5s ease;}

.hero-slide.is-active{visibility:visible; opacity:1; pointer-events:auto;}

.hero-slide > .ticket, .hero-slide > .banner{height:100%;}

.hero-slide > .ticket{grid-template-rows:1fr auto;}

.hero-slide > .ticket .ticket-main{align-self:center;}

/* same corner radius and drop shadow as .ticket so all four read as one object */
.banner{position:relative; overflow:hidden; border-radius:6px; min-height:520px;
  display:grid; align-items:center; box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);}

/* CTA row for slides 2-4 — same shape and weight as the site .btn */
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}

.hero .cta-row .b{display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.07em;
  padding:13px 24px; border-radius:3px; text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;}

.hero .cta-row .b:hover{transform:translateY(-1px);}

/* eyebrow/kicker shared by slides 3 and 4 — matches common.css .eyebrow metrics */
.hero .banner .kick{display:block; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px;}

/* ---- controls: dots only ---- */
.hero-controls{display:flex; align-items:center; justify-content:center; margin-top:22px;}

.hero-dots{display:flex; gap:10px;}

.hero-dot{width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(244,236,220,0.26); transition:background .2s ease, transform .2s ease;}

.hero-dot:hover{background:rgba(244,236,220,0.5);}

.hero-dot.is-active{background:var(--ember); transform:scale(1.35);}

/* ==========================================================
   SLIDE 2 — SAME-DAY LAUNCH  (ink + ember, the site's primary pair)
   ========================================================== */
.s2{grid-template-columns:1.15fr 0.85fr;
  background:radial-gradient(ellipse at 18% 8%, rgba(232,93,47,0.22) 0%, transparent 58%),
             linear-gradient(160deg,#241A22,#120E13 72%);
  color:var(--paper);}

.s2::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(244,236,220,0.022) 0 1px, transparent 1px 3px);}

.s2 .hazard{position:absolute; top:0; left:0; right:0; height:8px; z-index:3;
  background:repeating-linear-gradient(45deg,var(--ember) 0 14px,var(--ink) 14px 28px);}

.s2 .main{padding:56px 48px 44px; align-self:center; position:relative; z-index:3;}

.s2 .siren{display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace;
  font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ember); margin-bottom:18px;}

.s2 .siren .blip{width:8px; height:8px; border-radius:50%; background:var(--ember); animation:ftBlip 1.6s infinite;}

@keyframes ftBlip{0%,100%{opacity:1;} 50%{opacity:.3;}}

.hero .s2 h1{font-size:clamp(38px,5.4vw,66px); line-height:0.96; color:var(--paper); max-width:640px;}

.hero .s2 h1 span{color:var(--ember);}

.s2 p{font-size:17px; color:var(--fog); max-width:520px; margin-top:20px; line-height:1.6;}

.s2 .b1{background:var(--ember); color:var(--ink);}

.s2 .b1:hover{background:#FF6E3D;}

.s2 .b2{background:transparent; border:1.5px solid rgba(244,236,220,0.35); color:var(--paper);}

.s2 .b2:hover{border-color:var(--paper); background:rgba(244,236,220,0.06);}

.s2 .panel{padding:52px 44px; align-self:center; position:relative; z-index:3;}

.s2 .plabel{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fog-dim); margin-bottom:20px;}

.s2 .tl{position:relative; padding-left:26px;}

.s2 .tl::before{content:""; position:absolute; left:6px; top:8px; bottom:22px; width:2px;
  background:linear-gradient(to bottom,var(--ember),var(--blood));}

.s2 .tstep{position:relative; margin-bottom:24px;}

.s2 .tstep::before{content:""; position:absolute; left:-26px; top:5px; width:14px; height:14px;
  border-radius:50%; background:var(--ink); border:3px solid var(--ember);}

.s2 .tstep:last-child::before{border-color:var(--scan); background:var(--scan);}

.s2 .tstep .time{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:22px;
  color:var(--ember); letter-spacing:-0.02em;}

.s2 .tstep:last-child .time{color:var(--scan);}

.s2 .tstep .what{font-size:13.5px; color:var(--fog); margin-top:3px;}

.s2 .stamp{display:inline-block; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--scan);
  border:1px dashed rgba(79,217,138,0.5); padding:7px 12px; border-radius:2px;}

/* ==========================================================
   SLIDE 3 — THE LEDGER  (deep green ground, paper receipt)
   ========================================================== */
.s3{grid-template-columns:1.05fr 0.95fr;
  background:radial-gradient(ellipse at 22% 10%, rgba(79,217,138,0.10) 0%, transparent 58%),
             linear-gradient(155deg,#14261E,#0D1714 70%);
  color:var(--paper);}

.s3::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(216,201,163,0.05) 1px,transparent 1px); background-size:100% 34px;}

.s3 .main{padding:56px 48px; align-self:center; position:relative; z-index:2;}

.s3 .rule{width:52px; height:3px; background:var(--gold,#D4B46E); margin-bottom:20px;}

.hero .s3 .kick{color:#D4B46E;}

.hero .s3 h1{font-size:clamp(38px,5.4vw,64px); line-height:0.96; color:var(--paper); max-width:640px;}

.hero .s3 h1 em{font-style:normal; color:#D4B46E;}

.s3 p{font-size:17px; color:var(--fog); max-width:510px; margin-top:20px; line-height:1.6;}

.s3 .b1{background:#D4B46E; color:var(--ink);}

.s3 .b1:hover{background:#E5C883;}

.s3 .b2{background:transparent; border:1.5px solid rgba(244,236,220,0.35); color:var(--paper);}

.s3 .b2:hover{border-color:var(--paper); background:rgba(244,236,220,0.06);}

.s3 .panel{padding:46px 44px; align-self:center; position:relative; z-index:2;}

/* the receipt uses the same paper + perforation language as the ticket slide */
.s3 .ledger{background:var(--paper); color:var(--text-ink); border-radius:6px; padding:26px 26px 22px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.6);
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(34,28,27,0.05) 31px 32px);}

.s3 .lhead{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:#8a7f70; border-bottom:1px dashed var(--paper-line);
  padding-bottom:12px; margin-bottom:14px; display:flex; justify-content:space-between;}

.s3 .lrow{display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono',monospace; font-size:13px; padding:8px 0; color:#5b5349;}

.s3 .lrow b{font-weight:600; color:var(--text-ink);}

.s3 .lrow.neg b{color:var(--blood);}

.s3 .ltotal{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;
  padding-top:14px; border-top:2px dashed var(--paper-line);}

.s3 .ltotal .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:#8a7f70;}

.s3 .ltotal .big{font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:48px;
  line-height:0.9; color:var(--blood); letter-spacing:0.01em;}

.s3 .keep{margin-top:16px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ember-dim);}

.s3 .lnote{margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8a7f70;
  line-height:1.55; text-align:center;}

/* ==========================================================
   SLIDE 4 — MARQUEE  (ink ground, gold marquee accents)
   ========================================================== */
.s4{grid-template-columns:1.08fr 0.92fr;
  background:radial-gradient(ellipse at 76% 14%, rgba(140,29,24,0.34) 0%, transparent 58%),
             linear-gradient(155deg,#241826,#140F17 72%);
  color:var(--paper);}

.s4::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:conic-gradient(from 208deg at 72% 112%, transparent 0deg, rgba(212,180,110,0.08) 14deg,
    transparent 28deg, transparent 38deg, rgba(212,180,110,0.06) 52deg, transparent 66deg);}

.s4 .main{padding:54px 48px; align-self:center; position:relative; z-index:3;}

.s4 .bulbs{display:flex; gap:10px; margin-bottom:20px;}

.s4 .bulb{width:6px; height:6px; border-radius:50%; background:#D4B46E;
  box-shadow:0 0 8px rgba(212,180,110,0.7); animation:ftBulb 1.8s infinite;}

.s4 .bulb:nth-child(2){animation-delay:.25s;}
.s4 .bulb:nth-child(3){animation-delay:.5s;}
.s4 .bulb:nth-child(4){animation-delay:.75s;}
.s4 .bulb:nth-child(5){animation-delay:1s;}

@keyframes ftBulb{0%,100%{opacity:1;} 50%{opacity:.35;}}

.hero .s4 .kick{color:#D4B46E;}

.hero .s4 h1{font-size:clamp(36px,5vw,60px); line-height:0.96; color:var(--paper); max-width:620px;}

.hero .s4 h1 span{color:#D4B46E;}

.s4 p{font-size:16.5px; color:var(--fog); max-width:510px; margin-top:20px; line-height:1.6;}

.s4 .b1{background:#D4B46E; color:var(--ink);}

.s4 .b1:hover{background:#E5C883;}

.s4 .b2{background:transparent; border:1.5px solid rgba(244,236,220,0.35); color:var(--paper);}

.s4 .b2:hover{border-color:var(--paper); background:rgba(244,236,220,0.06);}

.s4 .panel{padding:48px 44px; align-self:center; position:relative; z-index:3;}

.s4 .badge{display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(150deg,var(--blood),#4A130F); border:1px solid rgba(212,180,110,0.4);
  border-radius:6px; padding:18px 22px; margin-bottom:24px; box-shadow:0 18px 40px -18px rgba(0,0,0,0.7);}

.s4 .badge .v{font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:40px;
  line-height:0.9; color:var(--paper); letter-spacing:0.01em;}

.s4 .badge .t{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:#E0C6B4; margin-top:8px;}

.s4 .plabel{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fog-dim); margin-bottom:16px;}

.s4 .rlist{display:flex; flex-direction:column; gap:14px;}

.s4 .ritem{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--fog); line-height:1.5;}

.s4 .ritem::before{content:"\25C6"; color:#D4B46E; font-size:9px; margin-top:5px; flex-shrink:0;}

.s4 .ritem b{color:var(--paper); font-weight:600;}

/* ==========================================================
   CAROUSEL RESPONSIVE
   ========================================================== */
@media (max-width:980px){
  /* equalising to the tallest slide leaves big empty gaps on phones,
     so each slide takes its natural height instead */
  .hero-stage{display:block;}
  .hero-slide{display:none; visibility:visible; opacity:1; transition:none;}
  .hero-slide.is-active{display:block;}
  .banner{min-height:0; grid-template-columns:1fr;}
  .s2 .main, .s3 .main, .s4 .main{padding:44px 26px 28px;}
  .s2 .panel, .s3 .panel, .s4 .panel{padding:0 26px 42px;}
  .hero .s2 h1, .hero .s3 h1{font-size:clamp(34px,8vw,48px);}
  .hero .s4 h1{font-size:clamp(32px,7.4vw,44px);}
}

@media (max-width:560px){
  .hero .cta-row .b{flex:1 1 100%; justify-content:center;}
  .s3 .ledger{padding:20px 18px 18px;}
  .s3 .ltotal .big{font-size:38px;}
  .s4 .badge{padding:15px 18px;}
  .s4 .badge .v{font-size:32px;}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none;}
  .s2 .siren .blip, .s4 .bulb{animation:none;}
}