/* Feature detail pages (/features/crm, /features/mobile-app) - the
   "Feature detail" screen of the venue web design. Flutter source:
   lib/venue/features/venue_feature_detail_view.dart. */

.feat{background:
  radial-gradient(ellipse 45% 22% at 85% 8%,rgba(177,58,242,.2),transparent 70%),
  radial-gradient(ellipse 40% 18% at 10% 48%,rgba(0,191,212,.09),transparent 70%),
  radial-gradient(ellipse 50% 14% at 50% 92%,rgba(204,0,204,.16),transparent 70%),
  var(--ink)}
.feat .cl-crumbs,.feat__inner{max-width:calc(1000px + 2 * var(--gutter))}
.feat__inner{padding-top:56px;padding-bottom:120px}

.feat__title{font:400 clamp(44px,5.4vw,68px)/1.02 var(--font-display);color:#fff;text-wrap:balance}
.feat__underline{margin-top:20px;width:96px;height:6px;border-radius:3px;background:#F2FFFE;
  box-shadow:0 0 6px #00F5D4,0 0 16px #00BFD4,0 0 32px rgba(0,191,212,.6)}
.feat__mockup{display:block;width:100%;height:auto;margin-top:40px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}

/* Copy column + menu board */
.feat__grid{margin-top:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:start}
.feat__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.feat__heading{font:400 clamp(30px,3.2vw,38px)/1.1 var(--font-display);color:#fff;text-wrap:balance}
.feat__desc{font:400 16px/1.6 var(--font-body);color:rgba(255,255,255,.76);text-wrap:pretty}
.feat__start{margin-top:10px;padding:15px 30px;border-radius:14px;font-size:15px;font-weight:800;letter-spacing:.9px;
  --k-glow:rgba(20,184,166,.3)}

.feat__board{padding:12px;border-radius:8px;transform:rotate(1deg);
  background:linear-gradient(135deg,#D2A672,#9C6B3E 45%,#C08F5C 75%,#875A30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.35),0 24px 50px rgba(0,0,0,.55)}
.feat__slats{margin:0;padding:22px 26px 16px;list-style:none;border-radius:3px;
  background:repeating-linear-gradient(180deg,#1C1A22 0 6px,#0F0E13 6px 8px);box-shadow:inset 0 0 30px rgba(0,0,0,.7)}
.feat__slats li{display:flex;gap:12px;padding:8px 0;font:800 14px/1.45 var(--font-body);letter-spacing:1.6px;text-transform:uppercase;
  color:#F4F1EA;text-shadow:0 1px 0 rgba(0,0,0,.8)}
.feat__check{flex:none;color:#00F5D4;text-shadow:0 0 8px rgba(0,245,212,.6)}

/* The CRT set - decorative, there is no product video yet. */
.feat__crt{position:relative;margin-top:96px;padding:16px 16px 28px;border-radius:22px;border:1px solid #000;
  background:linear-gradient(180deg,#2A2733,#0E0D13);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px rgba(0,0,0,.6)}
.feat__screen{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,#2E2A45,#0B0A10 75%);box-shadow:inset 0 0 60px rgba(0,0,0,.85)}
.feat__screen::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.feat__play{width:96px;height:96px;padding:0 0 0 4px;border-radius:50%;cursor:default}
.feat__play svg{width:48px;height:48px;display:block;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.5))}
.feat__led{position:absolute;bottom:10px;right:28px;width:6px;height:6px;border-radius:50%;background:#FF5C00;box-shadow:0 0 6px #FF5C00}

.feat__trailing{margin-top:40px;font:400 17px/1.65 var(--font-body);color:rgba(255,255,255,.76);text-wrap:pretty}

/* Closing call to action (hidden in coming-soon mode via [data-live]) */
.feat__cta{margin-top:100px;display:flex;flex-direction:column;align-items:center;gap:40px}
.feat__cta .cl-neonframe{--nf-radius:999px;padding:26px 46px 30px;max-width:100%}
.feat__cta-title{font:400 clamp(30px,4vw,48px)/1.05 var(--font-display);text-align:center}
.feat__claim{padding:20px 40px;border-radius:16px;font-size:18px;letter-spacing:1.08px;--k-glow:rgba(204,0,204,.3)}
