/* features.css — shared styles for CrewLogicAI feature detail pages.
   Inherits the design system from ../index.html (tokens + base components copied here so each
   feature subpage stays self-contained, matching the no-build marketing site), plus the
   feature-page-specific components: Features dropdown, breadcrumb, FAB grid, detail strips,
   screenshot slots, related-features row. Do NOT introduce new color tokens. */

:root{
  --bg:#0b131d; --bg-2:#0e1825; --card:#152230; --tile:#1e2f40;
  --ink:#eef4fa; --body:#9fb1c2; --muted:#6e8194;
  --green:#00E785; --green-ink:#04261a; --green-soft:rgba(0,231,133,0.12);
  --border:#22354a; --radius:16px; --shadow:0 18px 44px rgba(0,0,0,0.4);
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--body);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--green);}

/* Buttons (from index.html) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .06s ease,filter .15s ease;font-size:15px;}
.btn:active{transform:scale(0.97);}
.btn-green{background:var(--green);color:var(--green-ink);padding:15px 28px;font-size:16px;box-shadow:0 8px 24px rgba(0,231,133,0.22);}
.btn-green:hover{filter:brightness(1.06);}
.btn-outline{background:rgba(255,255,255,0.03);color:var(--ink);border:1px solid var(--border);padding:14px 24px;}
.btn-outline:hover{border-color:var(--green);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border);padding:9px 20px;font-size:14px;}
.btn-ghost:hover{border-color:var(--green);}

/* Header + nav + Features dropdown */
header{position:sticky;top:0;z-index:50;background:rgba(11,19,29,0.74);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-0.4px;}
.logo .ai-box{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#000;font-weight:800;font-size:15px;line-height:1;letter-spacing:0.5px;border-radius:8px;padding:4px 8px;}
.nav-links{display:flex;align-items:center;gap:10px;}
.dropdown{position:relative;}
.dropdown > .btn-ghost{display:inline-flex;gap:6px;}
.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:8px;flex-direction:column;gap:2px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease,visibility .14s;}
.dropdown-menu a{display:flex;gap:9px;align-items:center;padding:10px 12px;border-radius:9px;color:var(--body);font-size:14px;font-weight:600;}
.dropdown-menu a:hover{background:var(--tile);color:var(--ink);}
.dropdown-menu a[aria-current="page"]{color:var(--green);background:var(--green-soft);}
.dropdown:hover .dropdown-menu,.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}

/* Breadcrumb + back link */
.crumb{font-size:13px;color:var(--muted);padding:16px 0 0;}
.crumb a:hover{color:var(--body);}
.crumb .sep{padding:0 8px;opacity:0.6;}
.crumb b{color:var(--body);font-weight:600;}
.crumb .back{color:var(--green);font-weight:700;}
.crumb .back:hover{color:var(--green);text-decoration:underline;}
/* Bottom back row — a clear exit at the end of a long page */
.backrow{text-align:center;padding:8px 0 4px;}
.backrow a{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:700;font-size:15px;}
.backrow a:hover{text-decoration:underline;}

/* Hero (split: copy + right panel) — from index.html */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(700px 460px at 12% -10%,rgba(0,231,133,0.10),transparent 60%),
             radial-gradient(620px 520px at 92% 0%,rgba(40,90,160,0.16),transparent 55%),
             linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:1px solid var(--border);}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 75%);}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 0.95fr;gap:54px;align-items:center;padding:64px 0 72px;}
.hero h1{font-size:clamp(34px,4.8vw,54px);font-weight:800;line-height:1.06;letter-spacing:-1.3px;margin:18px 0 0;color:var(--ink);}
.hero h1 .accent{color:var(--green);}
.hero .pill{border:1px solid rgba(0,231,133,0.32);background:var(--green-soft);border-radius:999px;padding:7px 16px;}
.hero p.sub{margin:20px 0 0;font-size:clamp(16px,2vw,19px);color:var(--body);max-width:48ch;}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.hero .reassure{margin-top:16px;font-size:13px;color:var(--muted);}

/* How-it-works panel (hero right col) — from index.html */
.how{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:24px 26px 8px;}
.how .lab{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);}
.how .step{display:flex;gap:15px;padding:16px 0;}
.how .step:not(:last-child){border-bottom:1px solid var(--border);}
.how .num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--green-soft);border:1px solid rgba(0,231,133,0.3);color:var(--green);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;font-weight:700;}
.how h4{color:var(--ink);font-size:16px;font-weight:700;}
.how p{color:var(--body);font-size:14px;margin-top:3px;}

/* Sections / section headings — from index.html */
section{padding:80px 0;}
.sec-2{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.head{max-width:680px;margin-bottom:44px;}
.head h2{font-size:clamp(27px,4vw,40px);font-weight:800;letter-spacing:-0.8px;color:var(--ink);margin-top:9px;}
.head p{margin-top:12px;color:var(--body);font-size:17px;}

/* FAB grid — Feature / Advantage / Benefit cards (3-up, built on .feat) */
.fab{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fab .card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.fab .card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--green),transparent);opacity:0;transition:opacity .15s ease;}
.fab .card:hover{transform:translateY(-4px);border-color:#2f4a63;box-shadow:var(--shadow);}
.fab .card:hover::before{opacity:1;}
.fab .ico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(0,231,133,0.22);margin-bottom:14px;}
.fab .card h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25;}
.fab .card .adv{margin-top:9px;color:var(--body);font-size:14.5px;}
.fab .card .ben{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);color:var(--green);font-size:13.5px;font-weight:600;line-height:1.45;}

/* Alternating detail strips */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:46px 0;}
.strip:not(:last-child){border-bottom:1px solid var(--border);}
.strip .lab{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);}
.strip h3{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-0.5px;color:var(--ink);margin-top:10px;line-height:1.15;}
.strip p{margin-top:14px;color:var(--body);font-size:16px;max-width:52ch;}
.strip:nth-child(even) .copy{order:2;}
.strip:nth-child(even) .shot{order:1;}

/* Screenshot slot — real <img>, degrades to a styled placeholder until the file exists */
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--tile);}
.shot img{display:block;width:100%;height:auto;}
.shot figcaption{display:none;}
.shot--empty{border-style:dashed;min-height:260px;display:flex;align-items:center;justify-content:center;}
.shot--empty img{display:none;}
.shot--empty figcaption{display:block;color:var(--muted);font-family:var(--mono);font-size:13px;text-align:center;padding:0 18px;}

/* Proof band — reuse the index.html trust styles */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.trust .t{display:flex;gap:14px;align-items:flex-start;}
.trust .t .tk{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;font-size:19px;}
.trust .t h4{color:var(--ink);font-size:16px;font-weight:700;}
.trust .t p{color:var(--body);font-size:14px;margin-top:3px;}

/* Related features — 3-up cards with an arrow link */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.related a{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.related a:hover{transform:translateY(-4px);border-color:#2f4a63;box-shadow:var(--shadow);}
.related h3{color:var(--ink);font-size:16px;font-weight:700;}
.related p{color:var(--body);font-size:14px;margin-top:6px;}
.related .go{display:inline-block;margin-top:12px;color:var(--green);font-weight:700;font-size:14px;}

/* Trial CTA band */
.cta-band{text-align:center;max-width:640px;margin:0 auto;}
.cta-band h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-0.7px;color:var(--ink);}
.cta-band p{margin-top:12px;color:var(--body);font-size:17px;}
.cta-band .cta-row{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-band .reassure{margin-top:14px;font-size:13px;color:var(--muted);}

/* Footer — from index.html */
footer{background:#08101a;color:var(--muted);padding:32px 0;border-top:1px solid var(--border);}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;}
.foot a{color:var(--body);} .foot a:hover{color:var(--ink);}
.foot .links{display:flex;gap:22px;flex-wrap:wrap;}
.foot .login{color:var(--green);font-weight:700;}

@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding:48px 0 56px;}
  .fab{grid-template-columns:repeat(2,1fr);}
  .strip{grid-template-columns:1fr;gap:26px;padding:38px 0;}
  .strip:nth-child(even) .copy,.strip:nth-child(even) .shot{order:initial;}
  .trust{grid-template-columns:1fr;gap:20px;}
  .related{grid-template-columns:1fr;}
}
@media(max-width:560px){
  section{padding:54px 0;}
  .fab{grid-template-columns:1fr;}
  .nav-links .dropdown > .btn-ghost{padding:9px 14px;}
}