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

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

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

.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.65);}

.client-logos{margin-top:60px; padding-top:38px; border-top:1px dashed var(--paper-line);}

.cl-logo{width:128px; height:56px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(34,28,27,0.03); border:1px dashed var(--paper-line); border-radius:6px;
    opacity:0.55; transition:opacity .15s, border-color .15s;}

.cl-logo:hover{opacity:0.9; border-color:var(--fog-dim);}

.cl-logo svg{width:26px; height:26px; color:var(--fog-dim);}

.cl-logo:nth-child(3n+2){width:150px;}

.cl-logo:nth-child(4n+1){width:112px;}

@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);}
    .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 feat" "a b" "c d";
    }
    .industry-card{min-height:200px;}
    .industry-card.featured{min-height:280px;}
    .ts-slide{flex:0 0 calc((100% - 22px)/2);}
    .ts-nav{width:38px; height:38px; font-size:16px;}
    .ts-nav.prev{left:0;}
    .ts-nav.next{right:0;}
    .growth-grid{grid-template-columns:1fr;}
    .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";}
    .industry-card, .industry-card.featured{min-height:220px;}
    .ts-slide{flex:0 0 calc(100% - 8px);}
    .ts-nav{display:none;}
    .cl-row{gap:14px 22px;}
  }

.p-hero h1{font-size:clamp(38px,5.5vw,64px); color:var(--paper); max-width:820px; margin:0 auto;}

.p-hero .sub{font-size:18px; color:var(--fog); max-width:600px; margin:22px auto 0; line-height:1.6;}

.p-hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}

.feature-ticker-section{padding:0 0 8px;}

.ft-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-dim); margin-bottom:22px;}

.ft-slider{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}

.ft-slider + .ft-slider{margin-top:12px;}

.ft-track{display:flex; align-items:center; gap:12px; width:max-content; animation:ftScroll 60s linear infinite;}

.ft-slider.reverse .ft-track{animation-direction:reverse; animation-duration:72s;}

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

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

.ft-chip{flex-shrink:0; white-space:nowrap;
    font-family:'Space Grotesk',sans-serif; font-size:13.5px; font-weight:600;
    color:var(--fog); background:rgba(244,236,220,0.045);
    border:1px solid rgba(244,236,220,0.12); border-radius:20px;
    padding:9px 18px;}

.ft-chip:nth-child(4n+1){color:var(--paper); border-color:rgba(232,93,47,0.38); background:rgba(232,93,47,0.07);}

@media (prefers-reduced-motion: reduce){
  .ft-track{animation:none;}
  .ft-slider{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
}

@media (max-width:600px){
  .ft-chip{font-size:12.5px; padding:8px 15px;}
  .ft-track{gap:10px;}
}

.platform-tabs-wrap{position:sticky; top:73px; z-index:90;
    background:rgba(16,13,16,0.97);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(244,236,220,0.08); border-bottom:1px solid rgba(244,236,220,0.08);}

html{scroll-padding-top:150px;}

.platform-tabs{display:flex; gap:10px; justify-content:center; padding:14px 28px; max-width:1180px; margin:0 auto;
    
    overflow-x:auto; scrollbar-width:none;}

.platform-tabs::-webkit-scrollbar{display:none;}

.ptab{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--fog); text-decoration:none; padding:8px 15px; border-radius:20px;
    border:1px solid rgba(244,236,220,0.16); transition:color .15s, border-color .15s, background .15s; white-space:nowrap;}

.ptab:hover{color:var(--paper); border-color:var(--ember); background:rgba(232,93,47,0.08);}

.ptab.active{color:var(--ink); border-color:var(--ember); background:var(--ember); font-weight:700;}

.sec-intro{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-bottom:56px;}

.sec-intro .section-head{margin-bottom:0; max-width:none;}

.feed-list{padding:10px 18px;}

.feed-item{display:flex; gap:13px; padding:14px 0;
    border-bottom:1px dashed rgba(244,236,220,0.1);}

.feed-item:last-child{border-bottom:none;}

.feed-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0;}

.feed-dot.ember{background:var(--ember); box-shadow:0 0 8px rgba(232,93,47,0.55);}

.feed-dot.scan{background:var(--scan); box-shadow:0 0 8px rgba(79,217,138,0.55);}

.feed-text{flex:1; min-width:0;}

.feed-text p{margin:0 0 5px; font-size:13px; color:var(--fog); line-height:1.5;}

.feed-text p strong{color:var(--paper); font-weight:700;}

.feed-time{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--fog-dim); text-transform:uppercase; letter-spacing:0.05em;}

@media (max-width:980px){
    .sec-intro{grid-template-columns:1fr; gap:32px;}
  }

.es-builder{display:grid; grid-template-columns:1fr 1.15fr; gap:50px; align-items:center;}

.es-method-list{display:flex; flex-direction:column; gap:4px;}

.es-method{display:flex; gap:18px; padding:20px 4px; border-bottom:1px solid var(--paper-line);
    background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
    font-family:inherit; cursor:pointer;}

.es-method:last-of-type{border-bottom:none;}

.es-method-num{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:26px; color:var(--paper-line);
    flex-shrink:0; line-height:1.2; transition:color .2s;}

.es-method.active .es-method-num{color:var(--ember);}

.es-method h3{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; text-transform:none; color:var(--text-ink); margin-bottom:6px; letter-spacing:0;}

.es-method p{font-size:13.5px; color:#5b5349; line-height:1.55; margin:0;}

.es-browser{background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--paper-line); box-shadow:0 30px 70px -30px rgba(30,20,10,0.3);}

.es-browser-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:#F3ECDC; border-bottom:1px solid var(--paper-line);}

.es-browser-bar .dot{width:9px; height:9px; border-radius:50%; background:#D9C79E; flex-shrink:0;}

.es-browser-url{margin-left:10px; background:#fff; border-radius:20px; padding:5px 14px; font-family:'IBM Plex Mono',monospace;
    font-size:11px; color:#8a7f70; flex:1;}

.es-browser-body{position:relative; padding:26px; height:300px;}

.es-slide{position:absolute; inset:26px; opacity:0; pointer-events:none; transition:opacity .35s ease;}

.es-slide.active{opacity:1; pointer-events:auto;}

/* ---- slide 1: start from scratch - blocks drag in one by one ---- */
.es-slide-scratch{height:100%; background:#F3ECDC; border:2px dashed #C9B98A; border-radius:8px;
    position:relative; overflow:hidden; padding:20px;}

.scr-canvas{height:100%; display:flex; flex-direction:column; gap:10px;}

.scr-block{border-radius:6px; background:#fff; border:1px solid var(--paper-line);
    opacity:0; transform:scale(0.85); transform-origin:left center;
    animation:scrBlockIn 5s ease-in-out infinite;}

.scr-nav{height:18px; width:50%;}

.scr-hero{height:64px; width:100%; background:linear-gradient(135deg, var(--blood), #7a1810); border:none;
    animation-delay:0.35s;}

.scr-line{height:10px;}

.scr-line1{width:78%; animation-delay:0.7s;}

.scr-line2{width:50%; animation-delay:1.05s;}

.scr-btn{height:32px; width:128px; background:var(--ember); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:12px; animation-delay:1.4s;}

@keyframes scrBlockIn{
  0%, 100%{opacity:0; transform:scale(0.85);}
  8%{opacity:1; transform:scale(1);}
  78%{opacity:1; transform:scale(1);}
  92%{opacity:0; transform:scale(0.85);}
}

.scr-cursor{position:absolute; width:16px; height:16px; color:var(--ember-dim); opacity:0;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25)); animation:scrCursorMove 5s ease-in-out infinite;}

.scr-cursor i{font-size:16px;}

@keyframes scrCursorMove{
  0%{top:22px; left:36%; opacity:0;}
  6%{opacity:1;}
  10%, 18%{top:22px; left:46%;}
  30%, 46%{top:56px; left:78%;}
  58%, 66%{top:126px; left:64%;}
  74%, 82%{top:148px; left:48%;}
  90%{top:172px; left:56%; opacity:1;}
  97%, 100%{top:172px; left:56%; opacity:0;}
}

/* ---- slide 2: customize a template - swatches get clicked, theme updates ---- */
.es-slide-tmpl{height:100%; background:#fff; border:1px solid var(--paper-line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;}

.tmpl-header{height:70px; flex-shrink:0; background:linear-gradient(135deg, var(--blood), #7a1810);
    position:relative; display:flex; align-items:flex-end; padding:14px 20px;}

.tmpl-header .tmpl-badge{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
    color:#fff; background:rgba(255,255,255,0.18); padding:4px 10px; border-radius:12px;}

.tmpl-body{padding:18px 20px; flex:1;}

.tmpl-title{height:15px; width:70%; border-radius:4px; background:var(--text-ink); opacity:0.85; margin-bottom:10px;}

.tmpl-title.short{width:42%; opacity:0.4; height:10px;}

.tmpl-meta{display:flex; justify-content:space-between; align-items:center; margin:16px 0;}

.tmpl-date{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8a7f70;}

.tmpl-price{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; color:var(--ember-dim);}

.tmpl-cta{background:var(--ember); color:#fff; text-align:center; border-radius:7px; padding:11px;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
    animation:tmplAccent 6s ease-in-out infinite;}

@keyframes tmplAccent{
  0%, 18%{background:var(--ember);}
  25%, 43%{background:var(--scan);}
  50%, 68%{background:#9B8FD9;}
  75%, 93%{background:#6FAEE0;}
  100%{background:var(--ember);}
}

.tmpl-swatches{display:flex; align-items:center; gap:9px; padding:14px 20px; border-top:1px dashed var(--paper-line); position:relative;}

.tmpl-swatches .sw-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; color:#8a7f70; margin-right:4px;}

.tmpl-swatches .sw{width:18px; height:18px; border-radius:50%; flex-shrink:0; position:relative;
    animation:swPulse 6s ease-in-out infinite;}

.tmpl-swatches .sw::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:10px; font-weight:700; opacity:0; animation:swCheck 6s ease-in-out infinite;}

.tmpl-swatches .sw:nth-child(2){animation-delay:0s;}
.tmpl-swatches .sw:nth-child(2)::after{animation-delay:0s;}
.tmpl-swatches .sw:nth-child(3){animation-delay:1.5s;}
.tmpl-swatches .sw:nth-child(3)::after{animation-delay:1.5s;}
.tmpl-swatches .sw:nth-child(4){animation-delay:3s;}
.tmpl-swatches .sw:nth-child(4)::after{animation-delay:3s;}
.tmpl-swatches .sw:nth-child(5){animation-delay:4.5s;}
.tmpl-swatches .sw:nth-child(5)::after{animation-delay:4.5s;}

@keyframes swPulse{
  0%, 100%{transform:scale(1); box-shadow:none;}
  4%{transform:scale(1.22); box-shadow:0 0 0 3px rgba(34,28,27,0.18);}
  16%{transform:scale(1.22); box-shadow:0 0 0 3px rgba(34,28,27,0.18);}
  22%{transform:scale(1); box-shadow:none;}
}

@keyframes swCheck{
  0%, 100%{opacity:0;}
  4%{opacity:1;}
  16%{opacity:1;}
  22%{opacity:0;}
}

.tmpl-cursor{position:absolute; width:14px; height:14px; color:var(--text-ink); top:-2px; left:14px; opacity:0;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25)); animation:tmplCursorMove 6s ease-in-out infinite;}

.tmpl-cursor i{font-size:14px;}

@keyframes tmplCursorMove{
  0%{left:44px; opacity:0;}
  3%{opacity:1;}
  6%, 18%{left:48px;}
  31%, 43%{left:75px;}
  56%, 68%{left:102px;}
  81%, 93%{left:129px;}
  97%, 100%{left:129px; opacity:0;}
}

/* ---- slide 3: choose from pre-built - cursor hops between template themes ---- */
.es-slide-prebuilt{height:100%; display:grid; grid-template-columns:repeat(6, 1fr); grid-template-rows:1fr 1fr; gap:12px; position:relative;}

.es-slide-prebuilt .blk{border-radius:8px; background:#DCD0AE; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--text-ink); text-align:center;
    animation:blkCycle 8.75s ease-in-out infinite;}

.es-slide-prebuilt .blk i{font-size:17px; opacity:0.55;}

.es-slide-prebuilt .blk span{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; opacity:0.6;}

.es-slide-prebuilt .blk::after{content:"✓"; position:absolute; top:8px; right:10px; color:var(--ember-dim);
    font-weight:700; font-size:15px; opacity:0; animation:blkCheck 8.75s ease-in-out infinite;}

/* bento layout: 3 tiles on top row, 2 wider tiles on bottom row */
.es-slide-prebuilt .blk:nth-child(1){grid-column:1 / 3; grid-row:1; background:#EBC7A6; animation-delay:0s;}
.es-slide-prebuilt .blk:nth-child(1)::after{animation-delay:0s;}
.es-slide-prebuilt .blk:nth-child(2){grid-column:3 / 5; grid-row:1; background:#C9B8C9; animation-delay:1.75s;}
.es-slide-prebuilt .blk:nth-child(2)::after{animation-delay:1.75s;}
.es-slide-prebuilt .blk:nth-child(3){grid-column:5 / 7; grid-row:1; background:#B9C6D6; animation-delay:3.5s;}
.es-slide-prebuilt .blk:nth-child(3)::after{animation-delay:3.5s;}
.es-slide-prebuilt .blk:nth-child(4){grid-column:1 / 4; grid-row:2; background:#CFDDC4; animation-delay:5.25s;}
.es-slide-prebuilt .blk:nth-child(4)::after{animation-delay:5.25s;}
.es-slide-prebuilt .blk:nth-child(5){grid-column:4 / 7; grid-row:2; background:#E3C9A0; animation-delay:7s;}
.es-slide-prebuilt .blk:nth-child(5)::after{animation-delay:7s;}

@keyframes blkCycle{
  0%{opacity:0.55; transform:scale(0.96); box-shadow:none;}
  3%{opacity:1; transform:scale(1.05); box-shadow:0 0 0 2px var(--ember) inset;}
  16%{opacity:1; transform:scale(1.05); box-shadow:0 0 0 2px var(--ember) inset;}
  20%, 100%{opacity:0.55; transform:scale(0.96); box-shadow:none;}
}

@keyframes blkCheck{
  0%, 100%{opacity:0;}
  3%{opacity:1;}
  16%{opacity:1;}
  20%{opacity:0;}
}

.prebuilt-cursor{position:absolute; width:16px; height:16px; color:var(--ember-dim); opacity:0;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25)); animation:prebuiltCursorMove 8.75s ease-in-out infinite;
    transform:translate(-4px,-2px);}

.prebuilt-cursor i{font-size:16px;}

@keyframes prebuiltCursorMove{
  0%{top:25%; left:16.67%; opacity:0;}
  3%{opacity:1;}
  5%, 16%{top:25%; left:16.67%;}
  23%, 36%{top:25%; left:50%;}
  43%, 56%{top:25%; left:83.33%;}
  63%, 76%{top:75%; left:25%;}
  83%, 96%{top:75%; left:75%;}
  98%, 100%{top:75%; left:75%; opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .scr-block, .scr-cursor, .tmpl-cta, .tmpl-swatches .sw, .tmpl-swatches .sw::after,
  .tmpl-cursor, .es-slide-prebuilt .blk, .es-slide-prebuilt .blk::after, .prebuilt-cursor{
    animation:none !important;
  }
  .scr-block{opacity:1; transform:none;}
  .es-slide-prebuilt .blk{opacity:1; transform:none;}
  .scr-cursor, .tmpl-cursor, .prebuilt-cursor{display:none;}
}

.phone-screen{background:var(--paper); border-radius:26px; padding:26px 18px 20px; min-height:490px;}

.phone-top{display:flex; justify-content:space-between; font-size:11px; color:#8a7f70; margin-bottom:20px;}

.phone-event{font-size:11.5px; color:#8a7f70; margin-bottom:3px;}

.phone-event .live-dot{width:6px; height:6px; border-radius:50%; background:#1E8A57; display:inline-block; margin-left:6px;}

.phone-title{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px; letter-spacing:0.06em; color:var(--ink); margin-bottom:14px;}

.phone-stat{background:#fff; border:1px solid var(--paper-line); border-radius:8px; padding:13px 14px;}

.phone-stat .ps-num{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:19px; color:var(--ember); display:block;}

.phone-stat .ps-num.alt{color:var(--ink);}

.phone-stat .ps-lbl{font-size:9.5px; color:#8a7f70; text-transform:uppercase; letter-spacing:0.04em;}

.phone-scan{background:var(--ember); color:#fff; text-align:center; border-radius:8px; padding:12px;
    font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;}

.phone-scan svg{width:15px; height:15px;}

.phone-order{display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a7f70;
    border-bottom:1px dashed var(--paper-line); padding-bottom:8px;}

.phone-order b{color:var(--ink); display:block; font-size:12px; font-weight:600;}

.phone-order .po-amt{color:#1E8A57; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px;}

.bo-more-item i{flex-shrink:0; color:var(--scan); font-size:15px;}

@media (max-width:980px){
    .es-builder{grid-template-columns:1fr; gap:36px;}
    .es-more-row{grid-template-columns:1fr;}
    .mini-grid{grid-template-columns:repeat(2,1fr);}
    .bo-grid{grid-template-columns:1fr; gap:40px;}
    .bo-grid .phone-col{order:-1;}
    .bo-more-grid{grid-template-columns:repeat(2,1fr);}
  }

@media (max-width:600px){
    .es-browser-body{height:240px;}
    .mini-grid{grid-template-columns:1fr;}
    .bo-more-grid{grid-template-columns:1fr;}
    .phone{width:100%; max-width:280px;}
  }