/* Intro For You - marketing site. Hand-written, no framework.
   Art direction: "The Command Gate" - the landing is the lit lobby of the product itself.
   Tokens are identical to the operator dashboard; emerald = your command, iris = the machine. */

:root{
  /* surfaces */
  --bg:#0b1220; --surface:#111827; --surface-2:#1f2937; --surface-3:#374151;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.05); --inset-hi:rgba(255,255,255,.04);
  /* text */
  --text:#E7E8EA; --muted:#9AA0A6; --faint:#6B7078; --ghost:#474C54;
  /* brand accent (indigo) */
  --accent:#6366f1; --accent-bright:#818cf8; --accent-deep:#4f46e5; --on-accent:#ffffff;
  /* violet (worker mesh + secondary) */
  --iris:#a78bfa; --iris-deep:#8b5cf6;
  /* semantic */
  --amber:#F59E0B; --amber-text:#FBBF24; --danger:#F0616D; --danger-text:#FF8088;
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-hover:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --maxw:1200px; --pad:clamp(96px,12vw,160px);
  --r:12px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px; line-height:1.6; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* grain overlay - kills banding, adds tactility (bg only) */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2}
.eyebrow{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--faint)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.tnum{font-variant-numeric:tabular-nums}

h1,h2,h3{font-weight:600; letter-spacing:-.018em; line-height:1.1; margin:0}
h2{font-size:clamp(25px,3.4vw,39px)}
.lead{color:var(--muted); font-size:16px; max-width:46ch}
.kicker{display:inline-block; margin-bottom:18px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:9px;
  font-size:14px; font-weight:500; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:background .18s var(--ease-hover), border-color .18s var(--ease-hover), transform .24s var(--ease-hover), box-shadow .18s var(--ease-hover)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn-primary:hover{background:var(--accent-bright); box-shadow:0 0 0 1px rgba(16,185,129,.4), 0 8px 22px -10px rgba(16,185,129,.7); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-strong); background:rgba(255,255,255,.025)}
.btn-lg{height:48px; padding:0 22px; font-size:15px}
.btn svg{width:15px;height:15px}

/* ── nav ─────────────────────────────────────────────────────── */
#sentinel{position:absolute; top:0; height:1px; width:1px}
header.nav{position:sticky; top:0; z-index:40; transition:padding .24s var(--ease-hover), background .24s, border-color .24s}
header.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
@supports (backdrop-filter:blur(1px)){ header.nav{backdrop-filter:blur(10px); background:rgba(8,9,12,.35)} }
@supports not (backdrop-filter:blur(1px)){ header.nav{background:rgba(8,9,12,.9)} }
header.nav.scrolled{background:rgba(12,14,18,.72); border-bottom:1px solid var(--border); box-shadow:inset 0 1px 0 var(--inset-hi)}
header.nav.scrolled .wrap{height:56px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.01em}
.mark{width:26px;height:26px;border-radius:7px; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-weight:700; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.nav-links{display:flex; gap:30px}
.nav-links a{position:relative; color:var(--muted); font-size:14px; font-weight:500; transition:color .18s var(--ease-hover)}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px; background:var(--accent-bright); transition:right .22s var(--ease-hover)}
.nav-links a:hover{color:var(--text)} .nav-links a:hover::after{right:0}
.nav-right{display:flex; align-items:center; gap:12px}

/* ── hero ────────────────────────────────────────────────────── */
.hero{position:relative; padding:160px 0 clamp(80px,10vw,128px); overflow:hidden}
/* a faint emerald top-edge wash - NOT a purple/blue aurora glow blob */
.aurora{position:absolute; inset:-14% -10% auto -10%; height:440px; z-index:0; pointer-events:none; opacity:.55;
  background:radial-gradient(760px 260px at 26% 0%, rgba(16,185,129,.06), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
          mask-image:linear-gradient(180deg,#000,transparent);}
.hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:40px; align-items:center; position:relative; z-index:2}
.hero-copy{grid-column:1 / span 5}
.hero h1{font-size:clamp(40px,5.2vw,64px); line-height:1.04; margin:18px 0 22px}
.hero h1 .serif{font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:0; font-size:1.04em}
.hero .sub{color:var(--muted); font-size:18px; line-height:1.55; max-width:46ch; margin:0 0 30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.eyebrow-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border);
  border-radius:999px; background:var(--surface)}
.eyebrow-pill .live{width:6px;height:6px;border-radius:50%; background:var(--accent-bright); box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* the planner window - the signature artifact */
.hero-window{grid-column:6 / span 7; position:relative}
.win-glow{position:absolute; inset:-8% -4% -16% -4%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 70% 0%, rgba(16,185,129,.12), transparent 70%)}
.window{position:relative; z-index:2; margin-right:-40px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4)}
.win-bar{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.22)}
.win-bar .dot{width:11px;height:11px;border-radius:50%}
.win-bar .dot:nth-child(1){background:#F0616D} .win-bar .dot:nth-child(2){background:#F5BF4F} .win-bar .dot:nth-child(3){background:#3EC27A}
.win-title{flex:1; text-align:center; font-size:12px; color:var(--faint)}
.win-chip{font-family:var(--mono); font-size:11px; color:var(--faint); border:1px solid var(--border); border-radius:6px; padding:2px 7px}
.win-body{padding:18px; position:relative}
.window .win-mesh{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.3}
.win-body > *{position:relative; z-index:1}
.cmd{display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:11px 12px}
.cmd .prompt{flex:1; font-family:var(--mono); font-size:13px; color:var(--text)}
.cmd .caret{display:inline-block; width:2px; height:15px; background:var(--accent-bright); vertical-align:-3px; margin-left:1px; animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.cmd .run{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--on-accent); background:var(--accent); border-radius:6px; padding:6px 10px; white-space:nowrap}
.plan-head{display:flex; align-items:center; justify-content:space-between; margin:18px 2px 8px}
.plan-head .t{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em; font-weight:500}
.credits{font-family:var(--mono); font-size:11.5px; color:var(--accent-bright); border:1px solid rgba(16,185,129,.3); background:rgba(16,185,129,.08); border-radius:999px; padding:3px 9px}
.rows{border:1px solid var(--border); border-radius:9px; overflow:hidden; background:rgba(0,0,0,.18)}
.row{display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--hairline); position:relative}
.row:last-child{border-bottom:0}
.row .pd{width:8px;height:8px;border-radius:50%; flex:none}
.pd.ro{background:var(--accent-bright)} .pd.rev{background:var(--amber)} .pd.irr{background:var(--danger)}
.row .rl{flex:1; font-size:13px; color:var(--text)}
.row .rn{font-family:var(--mono); font-size:12px; color:var(--faint)}
.row .chip{font-size:10.5px; color:var(--amber-text); border:1px solid rgba(245,158,11,.3); border-radius:999px; padding:1px 7px}
.row.gated{box-shadow:inset 2px 0 0 var(--danger); background:rgba(240,97,109,.045)}
.row.gated .lock{width:13px;height:13px;stroke:var(--danger-text)}
.row .confirm{font-size:11px; font-weight:600; color:var(--danger-text); border:1px solid rgba(240,97,109,.4); border-radius:6px; padding:4px 9px}
.row.running::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:46%; background:var(--accent-bright); border-radius:2px; animation:grow 2.6s var(--ease-out) infinite}
@keyframes grow{0%{width:8%;opacity:.5} 60%{width:62%;opacity:1} 100%{width:62%;opacity:.5}}
.legend{display:flex; gap:16px; margin-top:12px; padding:0 2px; font-size:11.5px; color:var(--faint)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:7px;height:7px;border-radius:50%; display:inline-block}

/* section scaffolding */
section{padding:var(--pad) 0; position:relative}
.sec-head{max-width:640px; margin-bottom:48px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head p{color:var(--muted); font-size:16px; margin:14px 0 0}

/* ── bento ───────────────────────────────────────────────────── */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; grid-auto-rows:minmax(180px,auto)}
.cell{border:1px solid var(--border); border-radius:var(--r); background:var(--surface); padding:24px;
  box-shadow:inset 0 1px 0 var(--inset-hi); display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:transform .24s var(--ease-hover), border-color .18s var(--ease-hover), box-shadow .18s var(--ease-hover)}
.cell:hover{transform:translateY(-2px); border-color:var(--border-strong); box-shadow:inset 0 1px 0 rgba(52,211,153,.4)}
.cell h3{font-size:15px; margin-bottom:7px}
.cell p{font-size:13px; color:var(--muted); margin:0; max-width:34ch}
.cell .viz{margin-top:auto; padding-top:18px}
.c-corpus{grid-column:span 4; grid-row:span 2}
.c-mail{grid-column:span 2} .c-bounce{grid-column:span 2}
.c-net{grid-column:span 2} .c-reply{grid-column:span 4}
.c-net{position:relative}
/* mini-vizzes */
.recs{position:relative; height:152px; margin-top:20px}
.rec{position:absolute; width:212px; height:36px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  display:flex; align-items:center; gap:9px; padding:0 12px; font-size:12px; color:var(--muted)}
.rec::before{content:""; width:7px;height:7px;border-radius:50%; background:var(--faint); flex:none}
.rec.a{top:0; left:0; opacity:.42} .rec.b{top:24px; left:30px; opacity:.62} .rec.c{top:48px; left:12px; opacity:.82}
.rec.merged{top:104px; left:42px; border-color:rgba(16,185,129,.45); color:var(--accent-bright); background:rgba(16,185,129,.06); font-weight:500}
.rec.merged::before{background:var(--accent-bright); box-shadow:0 0 8px var(--accent-bright)}
.bars{display:flex; gap:8px; align-items:flex-end; height:48px}
.bars i{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(var(--accent-bright),var(--accent-deep)); opacity:.85}
.bars i:nth-child(1){height:60%} .bars i:nth-child(2){height:85%} .bars i:nth-child(3){height:42%}
.gauge{height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.gauge i{display:block; height:100%; width:96%; background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.gauge-l{display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:8px}
.nodes{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.node{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:7px; padding:5px 9px; background:var(--surface-2)}
.node .nd{width:6px;height:6px;border-radius:50%; background:var(--iris)}
.node.on .nd{background:var(--accent-bright); box-shadow:0 0 6px var(--accent-bright)}
.replies{display:flex; flex-direction:column; gap:8px}
.reply{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}
.reply .tag{font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px}
.tag.int{color:var(--accent-bright); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3)}
.tag.no{color:var(--faint); background:var(--surface-2); border:1px solid var(--border)}
.tag.uns{color:var(--danger-text); background:rgba(240,97,109,.08); border:1px solid rgba(240,97,109,.3)}

/* ── how ─────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative}
.steps::before{content:""; position:absolute; top:21px; left:8%; right:8%; height:1px; background:var(--border)}
.step{position:relative}
.step .num{width:44px;height:44px;border-radius:12px; display:grid; place-items:center; font-family:var(--mono); font-size:15px; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--inset-hi); position:relative; z-index:1}
.step.gate .num{color:var(--accent-bright); border-color:rgba(16,185,129,.45); box-shadow:0 0 0 4px rgba(16,185,129,.1)}
.step h3{font-size:17px; margin:18px 0 7px}
.step p{font-size:13.5px; color:var(--muted); margin:0; max-width:30ch}
.log{margin-top:48px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:inset 0 1px 0 var(--inset-hi)}
.log .lh{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.2); font-size:11.5px; color:var(--faint)}
.log .ll{font-family:var(--mono); font-size:12.5px; padding:9px 14px; border-bottom:1px solid var(--hairline); color:var(--muted); display:flex; gap:10px}
.log .ll:last-child{border-bottom:0}
.log .ll .ok{color:var(--accent-bright)} .log .ll .wait{color:var(--amber-text)} .log .ll .ts{color:var(--ghost)}

/* ── proof ───────────────────────────────────────────────────── */
.fullbleed{width:100vw; margin-left:calc(50% - 50vw)}
.quote{max-width:680px; margin:0 auto 56px; text-align:center}
.quote p{font-size:clamp(20px,2.6vw,26px); font-weight:500; line-height:1.4; letter-spacing:-.01em; color:var(--text)}
.quote .by{margin-top:18px; font-size:13px; color:var(--faint)}
.counters{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:720px; margin:0 auto 56px}
.counter{text-align:center; padding:22px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); box-shadow:inset 0 1px 0 var(--inset-hi)}
.counter .v{font-size:34px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.counter .l{font-size:13px; color:var(--muted); margin-top:4px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex; gap:56px; width:max-content; animation:scroll 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-size:15px; font-weight:500; color:var(--faint); opacity:.55; transition:opacity .2s, color .2s; white-space:nowrap}
.marquee span:hover{opacity:1; color:var(--muted)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── pricing ─────────────────────────────────────────────────── */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.tier{border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:28px; display:flex; flex-direction:column; box-shadow:inset 0 1px 0 var(--inset-hi)}
.tier.feat{border-color:rgba(16,185,129,.4); transform:translateY(-8px); position:relative;
  background:radial-gradient(120% 80% at 50% 0%, rgba(16,185,129,.08), var(--surface))}
.tier .tab{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; color:var(--on-accent); background:var(--accent); border-radius:999px; padding:3px 12px}
.tier .nm{font-size:14px; font-weight:600; color:var(--text)}
.tier .pr{font-size:clamp(36px,4vw,48px); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:14px 0 2px}
.tier .pr small{font-size:14px; font-weight:400; color:var(--faint)}
.tier .pd{font-size:13px; color:var(--muted); min-height:38px}
.tier ul{list-style:none; margin:18px 0 24px; padding:0; display:flex; flex-direction:column; gap:11px}
.tier li{display:flex; gap:10px; font-size:13.5px; color:var(--muted)}
.tier li svg{width:16px;height:16px;stroke:var(--accent-bright); flex:none; margin-top:2px}
.tier .btn{margin-top:auto; justify-content:center}

/* ── faq ─────────────────────────────────────────────────────── */
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; cursor:pointer; font-size:15px; font-weight:500; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:16px;height:16px;stroke:var(--faint); transition:transform .2s var(--ease-hover); flex:none}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 2px 22px; color:var(--muted); font-size:14px; max-width:64ch}

/* ── cta ─────────────────────────────────────────────────────── */
.cta-band{text-align:center; border:1px solid var(--border); border-radius:20px; padding:clamp(48px,7vw,80px) 24px;
  background:radial-gradient(100% 85% at 50% 0%, rgba(16,185,129,.05), var(--surface)); box-shadow:inset 0 1px 0 var(--inset-hi)}
.cta-band h2{margin-bottom:14px} .cta-band p{color:var(--muted); font-size:17px; margin:0 auto 28px; max-width:42ch}
.cta-band .hero-cta{justify-content:center}

/* ── footer ──────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); padding:64px 0 40px; margin-top:var(--pad)}
.foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.foot h4{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin:0 0 14px; font-weight:600}
.foot a{display:block; color:var(--muted); font-size:13.5px; padding:5px 0; transition:color .15s}
.foot a:hover{color:var(--text)}
.foot .blurb{color:var(--muted); font-size:13.5px; max-width:260px; margin:14px 0 0}
.foot-legal{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--border)}
.foot-legal .mono{font-size:12px; color:var(--ghost)}

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(16px); filter:blur(6px); transition:opacity .62s var(--ease-out), transform .62s var(--ease-out), filter .62s var(--ease-out); transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1; transform:none; filter:none}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:920px){
  .hero{padding:120px 0 72px}
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero-copy{grid-column:1/-1} .hero-window{grid-column:1/-1}
  .window{margin-right:0}
  .hero .sub,.hero h1{max-width:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .c-corpus,.c-reply{grid-column:span 2; grid-row:auto} .c-mail,.c-bounce,.c-net{grid-column:span 1}
  .steps{grid-template-columns:1fr} .steps::before{display:none}
  .counters{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr} .tier.feat{transform:none}
  .foot{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:560px){ .bento{grid-template-columns:1fr} .cell{grid-column:1/-1 !important} .foot{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none; filter:none}
  html{scroll-behavior:auto}
}

/* ── real product screenshots (rebuild 2026-07) ───────────────────────── */
.shot-frame{
  border:1px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02);
}
.shot-frame img{display:block;width:100%;height:auto}
.hero-shot{position:relative}

.features2{display:flex;flex-direction:column;gap:96px;margin-top:64px}
.frow{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.frow.rev .fr-media{order:2}
.fr-copy .kicker{margin-bottom:14px;display:inline-block}
.fr-copy h3{font-size:26px;line-height:1.18;letter-spacing:-.02em;margin:0 0 14px;color:var(--text)}
.fr-copy p{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:46ch}
.fr-list{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.fr-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:15px}
.fr-list svg{width:18px;height:18px;stroke:var(--accent-bright);flex:none;margin-top:2px}
@media(max-width:880px){
  .frow{grid-template-columns:1fr;gap:28px}
  .frow.rev .fr-media{order:0}
}