/* RivalNote landing components: hero, inline headline objects, the two CSS-only demos,
   steps, the insight anatomy, plans, the terminal block and the closing band.
   Tokens and shared parts are in /assets/site.css. Every animation sits inside
   prefers-reduced-motion:no-preference; without it the demos show their final state. */

/* hero: near-black first screen, vermillion glow, vertical-light texture (CSS only) */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(232,81,46,.58),rgba(232,81,46,.16) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(232,81,46,.14),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(232,81,46,0) 0,rgba(232,81,46,0) 14px,rgba(232,81,46,.3) 44px,rgba(255,160,130,.18) 49px,rgba(232,81,46,.06) 78px,rgba(232,81,46,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); pointer-events:none;}
.hero .copy{max-width:900px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,8.6vw,62px); line-height:1.16; letter-spacing:-.025em; font-weight:800; color:#fff; text-wrap:balance;}
.hero .lead{margin:24px auto 0; max-width:60ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.hero .actions,.final .actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:32px;}
/* keyword chips in the lead */
.kw{display:inline-block; font-weight:600; line-height:1.25; padding:1px 8px 2px; margin:0 1px; border-radius:7px; border:1px solid transparent;}
.kw-o{color:#ffb39d; background:rgba(232,81,46,.2); border-color:rgba(255,148,120,.32);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.kw-v{color:#c4b2ff; background:rgba(139,92,246,.22); border-color:rgba(196,178,255,.32);}

/* inline objects in the headline, decorative, text supplied by CSS */
.ob{display:inline-block; vertical-align:baseline; position:relative;}
.nb{white-space:nowrap;}
.ob-score{display:inline-flex; align-items:center; height:.84em; padding:0 .36em; margin:0 0 0 .22em; vertical-align:-.02em; border-radius:99px; background:linear-gradient(180deg,#d4492a,#a93718); box-shadow:0 0 .9em rgba(232,81,46,.7), inset 0 .04em .06em rgba(255,255,255,.3), 0 0 0 .03em rgba(255,148,120,.5);}
.ob-score::before{content:attr(data-n); display:block; font-family:var(--display); font-weight:800; font-size:.5em; line-height:1; letter-spacing:0; padding-bottom:.03em; color:#fff;}
.ob-mail{width:1.02em; height:1.02em; vertical-align:-.17em; margin:0 0 0 .26em;}
.ob-mail svg{width:100%; height:100%; filter:drop-shadow(0 .06em .18em rgba(0,0,0,.45));}
.ob-mail .bd::before{content:attr(data-n);}
.ob-mail .bd{position:absolute; top:-.5em; right:-1.9em; min-width:2.3em; height:1.55em; padding:0 .45em; display:flex; align-items:center; justify-content:center; border-radius:99px; background:#d92d20; color:#fff; font-family:var(--display); font-weight:800; font-size:.34em; line-height:1; letter-spacing:0; box-shadow:0 0 0 .22em var(--d0), 0 .3em 1em rgba(217,45,32,.55); transform-origin:0% 100%;}
@media(prefers-reduced-motion:no-preference){
  .ob-score{animation:scPop .5s .6s cubic-bezier(.3,1.5,.5,1) both;}
  .ob-mail .bd{animation:bdPop .5s 1.2s cubic-bezier(.3,1.6,.5,1) both;}
  @keyframes scPop{from{transform:scale(.4); opacity:0;}}
  @keyframes bdPop{0%{transform:scale(0);} 100%{transform:scale(1);}}
}

/* the product demo in a large rounded frame with a vermillion rim light */
.hframe{position:relative; margin:64px auto 0; max-width:1040px; border-radius:30px; padding:10px; background:linear-gradient(160deg,rgba(255,170,145,.5),rgba(232,81,46,.22) 40%,rgba(232,81,46,.1)); box-shadow:0 0 0 1px rgba(255,148,120,.18), 0 40px 140px -30px rgba(232,81,46,.6), 0 0 90px -10px rgba(232,81,46,.3);}
.hframe-in{border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#151a28,#0d111d); border:1px solid rgba(255,255,255,.08);}
.hframe-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--dline); text-align:left;}
.hframe-bar .pill{min-height:30px; padding:0 12px; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff;}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.7);}
.hframe-body{display:grid; gap:20px; padding:20px 12px 24px; text-align:left;}
@media(min-width:900px){ .hframe-body{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:32px; padding:36px; align-items:start;} }
@media(max-width:560px){ .hframe{padding:6px; border-radius:24px; margin-top:48px;} .hframe-in{border-radius:19px;} .hframe-bar{padding:12px 14px;} .hframe-bar .caption{display:none;} }

/* demo 1a: the briefing, drawn from the dashboard's insight card */
.app{background:#fff; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.app-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--tint);}
.app-bar .dots{display:flex; gap:6px;}
.app-bar .dots i{width:9px; height:9px; border-radius:50%; background:#d5dae4;}
.app-bar .ttl{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.app-stat{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line);}
.app-stat .st{padding:12px 16px; border-left:1px solid var(--line);}
.app-stat .st:first-child{border-left:0;}
.app-stat .k{font-size:11.5px; line-height:1.3; color:var(--muted);}
.app-stat .v{font-family:var(--display); font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.02em;}
.app-stat .v.urg{color:var(--accent-dk);}
.irow{padding:14px 16px 15px; border-bottom:1px solid var(--line);}
.irow:last-child{border-bottom:0;}
.irow .meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:6px;}
.irow .who{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;}
.irow .cat{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.irow .sc{margin-left:auto; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.irow .sc b{display:block; width:46px; height:5px; border-radius:99px; background:var(--line); position:relative; overflow:hidden;}
.irow .sc b::after{content:""; position:absolute; inset:0; width:var(--w); border-radius:99px; background:var(--accent);}
.irow .sc.med b::after{background:#b7791f;}
.irow .sc.high{color:var(--accent-dk);}
.irow .sc.med{color:var(--warn-ink);}
.irow .ih{font-family:var(--display); font-size:15px; line-height:1.35; font-weight:700; letter-spacing:-.005em;}
.irow p.d{margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--muted);}
.irow .act{display:flex; gap:8px; margin-top:8px; font-size:13px; line-height:1.45; color:var(--ink);}
.irow .act svg{width:14px; height:14px; margin-top:2px; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* demo 1b: a chat alert card, built from the Block Kit alert (header, context, headline, three buttons) */
.slk{background:#fff; color:#1d1c1d; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.slk-head{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid #e3e3e3; font-weight:700; font-size:14px;}
.slk-head span{color:#616061; font-weight:500; font-size:12.5px; margin-left:auto;}
.slk-msg{display:flex; gap:12px; padding:16px;}
.slk-av{flex:none; width:36px; height:36px; border-radius:9px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:16px;}
.slk-body{min-width:0;}
.slk-who{font-weight:700; font-size:14px;}
.slk-who i{font-style:normal; font-weight:400; color:#616061; font-size:12px; margin-left:6px;}
.slk-card{margin-top:8px; border-left:4px solid var(--accent); padding:2px 0 2px 12px;}
.slk-card .h{font-weight:700; font-size:14px; line-height:1.35;}
.slk-card .c{margin-top:2px; font-size:12px; color:#616061;}
.slk-card .t{margin-top:8px; font-size:14px; line-height:1.45;}
.slk-card .t b{display:block; margin-bottom:2px;}
.slk-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.slk-btns span{display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border:1px solid #c5c5c5; border-radius:7px; font-size:13px; font-weight:600; color:#1d1c1d; background:#fff;}
.hframe .app,.hframe .slk{min-width:0;}
@media(prefers-reduced-motion:no-preference){
  .hframe .irow{animation:rowIn .55s var(--ease) both;}
  .hframe .irow:nth-of-type(1){animation-delay:.3s;}
  .hframe .irow:nth-of-type(2){animation-delay:.75s;}
  .hframe .irow:nth-of-type(3){animation-delay:1.2s;}
  .hframe .irow .sc b::after{animation:barFill .8s .6s var(--ease) both;}
  .hframe .slk{animation:rowIn .6s 1.7s var(--ease) both;}
  @keyframes rowIn{from{opacity:0; transform:translateY(10px);}}
  @keyframes barFill{from{width:0;}}
}

/* sections */
.cols{display:grid; gap:48px; align-items:start;}
@media(min-width:900px){ .cols{grid-template-columns:1fr 1fr; gap:80px;} .cols .panel{position:sticky; top:112px;} }
.panel{position:relative; background:var(--soft); border:1px solid var(--soft-line); border-radius:28px; padding:20px 14px; overflow:hidden;}
@media(min-width:900px){ .panel{padding:32px 24px;} }

/* the steps: icon tile, mono pill, display heading, one or two lines */
.steps{margin-top:40px;}
.steps li{position:relative; display:grid; grid-template-columns:48px 1fr; gap:0 20px; padding:0 0 34px;}
.steps li:last-child{padding-bottom:0;}
.steps li:not(:last-child)::after{content:""; position:absolute; left:23px; top:56px; bottom:8px; width:2px; background:linear-gradient(var(--soft-line),var(--line));}
.st-ico{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--soft); border:1px solid var(--soft-line); color:var(--accent-dk);}
.st-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.st-pill{display:inline-block; font-family:var(--mono); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); background:var(--soft); border:1px solid var(--soft-line); border-radius:999px; padding:6px 10px; margin-top:4px;}
.steps h3{font-size:22px; line-height:1.2; font-weight:800; margin-top:12px;}
.steps p{margin-top:6px; color:var(--muted); max-width:48ch;}

/* demo 2: a page diff turns into one insight */
.flow{display:grid; gap:14px;}
.diff{background:#0e121c; color:#e8ecf4; border-radius:16px; overflow:hidden; box-shadow:0 18px 50px -24px rgba(10,13,20,.6);}
.diff-bar{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; background:#151a28; border-bottom:1px solid var(--dline); font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.72);}
.diff pre{margin:0; padding:12px 0; font-family:var(--mono); font-size:12.5px; line-height:1.7; overflow:hidden;}
.diff .l{display:block; padding:0 14px; white-space:pre-wrap; overflow-wrap:anywhere;}
.diff .l.ctx{color:rgba(255,255,255,.62);}
.diff .l.del{background:rgba(217,45,32,.22); color:#ffb4ab;}
.diff .l.add{background:rgba(18,183,106,.2); color:#7ee8b5;}
.arrow-d{display:flex; justify-content:center; color:var(--accent-dk);}
.arrow-d svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.ins{background:#fff; border:1px solid var(--soft-line); border-radius:16px; padding:16px; box-shadow:0 18px 50px -28px rgba(194,64,31,.5);}
.ins .top{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:8px;}
.ins .tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-dk); background:var(--soft); border:1px solid var(--soft-line); border-radius:999px; padding:4px 9px;}
.ins .sc{margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent-dk);}
.ins .ih{font-family:var(--display); font-size:16px; line-height:1.35; font-weight:700;}
.ins .kv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin-top:10px; font-size:13px; line-height:1.45;}
.ins .kv dt{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:2px;}
.ins .kv dd{color:var(--ink);}
@media(prefers-reduced-motion:no-preference){
  .flow .diff .l{animation:rowIn .5s var(--ease) both;}
  .flow .diff .l:nth-child(1){animation-delay:.2s;} .flow .diff .l:nth-child(2){animation-delay:.5s;} .flow .diff .l:nth-child(3){animation-delay:.8s;} .flow .diff .l:nth-child(4){animation-delay:1.1s;} .flow .diff .l:nth-child(5){animation-delay:1.4s;}
  .flow .arrow-d{animation:rowIn .5s 1.9s var(--ease) both;}
  .flow .ins{animation:rowIn .6s 2.2s var(--ease) both;}
}

/* two columns: the manual routine against RivalNote */
.two{display:grid; gap:20px;}
@media(min-width:900px){ .two{grid-template-columns:1fr 1fr; gap:24px;} }
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px 24px;}
@media(min-width:640px){ .cmp{padding:40px 40px 32px;} }
.cmp.us{background:var(--soft); border-color:var(--soft-line);}
.cmp h3{display:flex; align-items:center; gap:12px; font-size:24px; line-height:1.2; font-weight:800; margin-bottom:16px;}
.cmp h3 .badge-ico{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--tint); border:1px solid var(--line); color:var(--muted);}
.cmp.us h3 .badge-ico{background:#fff; border-color:var(--soft-line); color:var(--accent-dk);}
.cmp li{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); color:var(--body);}
.cmp.us li{border-top-color:var(--soft-line);}
.cmp li .ico{margin-top:2px; color:var(--muted);}
.cmp.us li .ico{color:var(--accent-dk);}

/* insight anatomy on a dark band */
.anat{display:grid; gap:40px; align-items:start;}
@media(min-width:900px){ .anat{grid-template-columns:.9fr 1.1fr; gap:80px;} }
.fields{border-top:1px solid var(--dline);}
.fields div{display:grid; gap:4px 24px; padding:16px 0; border-bottom:1px solid var(--dline);}
@media(min-width:640px){ .fields div{grid-template-columns:190px 1fr;} }
.fields dt{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--accent-on-dark);}
.fields dd{color:var(--dtext2); line-height:1.55;}

/* tuning list: two columns of plain rows */
.tune{display:grid; gap:0 56px; border-top:1px solid var(--line);}
@media(min-width:760px){ .tune{grid-template-columns:1fr 1fr;} }
.tune div{padding:20px 0; border-bottom:1px solid var(--line);}
.tune dt{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.015em;}
.tune dd{margin-top:4px; color:var(--muted); max-width:46ch;}

/* audiences: two plain rows, no cards */
.aud{display:grid; gap:0; border-top:1px solid var(--line);}
.aud article{display:grid; gap:8px 48px; padding:28px 0; border-bottom:1px solid var(--line);}
@media(min-width:900px){ .aud article{grid-template-columns:.8fr 1.2fr;} }
.aud h3{font-size:24px; line-height:1.2; font-weight:800; letter-spacing:-.02em;}
.aud p{color:var(--body); max-width:62ch;}

/* plans */
.plans{display:grid; gap:16px;}
@media(min-width:900px){ .plans{grid-template-columns:repeat(3,1fr); gap:20px;} }
.plan{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 24px;}
.plan .pn{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--accent-dk);}
.plan .pr{margin-top:12px; font-family:var(--display); font-weight:800; font-size:44px; line-height:1; letter-spacing:-.04em;}
.plan .pr small{font-size:16px; font-weight:600; letter-spacing:0; color:var(--muted);}
.plan .yr{margin-top:8px; font-size:14px; color:var(--muted);}
.plan .tl{margin-top:14px; color:var(--body); min-height:3em;}
.plan ul{margin-top:18px; border-top:1px solid var(--line);}
.plan li{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.4;}
.plan li:last-child{border-bottom:0;}
.plan li .ico{width:18px; height:18px; margin-top:1px; color:var(--accent-dk);}
.plan li.off{color:var(--muted);}
.plan li.off .ico{color:var(--line-strong);}
.plans-note{margin-top:24px; max-width:70ch; font-size:14.5px; line-height:1.6; color:var(--muted);}

/* terminal block */
.term{background:#0e121c; color:#e8ecf4; border-radius:16px; overflow:hidden; border:1px solid var(--dline);}
.term-bar{display:flex; gap:6px; padding:12px 14px; background:#151a28; border-bottom:1px solid var(--dline);}
.term-bar i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22);}
.term pre{margin:0; padding:16px 18px; font-family:var(--mono); font-size:13px; line-height:1.75; overflow-x:auto;}
.term .p{color:var(--accent-on-dark);}
.term .c{color:rgba(255,255,255,.62);}

/* closing band */
.final{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:88px 0;}
@media(min-width:900px){ .final{padding:120px 0;} }
.final::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 50% 110%,rgba(232,81,46,.5),rgba(232,81,46,.12) 55%,transparent 78%);}
.final .copy{max-width:760px; margin:0 auto; text-align:center;}
.final h2{font-size:clamp(30px,5vw,48px); line-height:1.08; letter-spacing:-.03em; font-weight:800; text-wrap:balance;}
.final p{margin:18px auto 0; max-width:54ch; font-size:17px; color:var(--dtext2);}

/* fact table on the signals page */
.facts{display:grid; gap:0; border-top:1px solid var(--line); margin:0 0 24px;}
.facts div{display:grid; gap:2px 24px; padding:14px 0; border-bottom:1px solid var(--line);}
@media(min-width:640px){ .facts div{grid-template-columns:220px 1fr;} }
.facts dt{font-weight:650; color:var(--ink);}
.facts dd{color:var(--body);}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none;}
.rd .chips li{margin:0; padding:5px 11px; list-style:none; font-family:var(--mono); font-size:12.5px; border:1px solid var(--soft-line); background:var(--soft); color:var(--accent-dk-2); border-radius:999px;}
.codeblock{background:#0e121c; color:#e8ecf4; border-radius:14px; padding:16px 18px; margin:0 0 20px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.75;}
.codeblock .c{color:rgba(255,255,255,.62);}

/* in-text links in section intros must look like links without hover */
.sub a.ul{text-decoration:underline; text-underline-offset:3px; background:none; font-weight:600;}

.founding{margin-top:28px; background:var(--soft); border:1px solid var(--soft-line); border-left:4px solid var(--accent); border-radius:14px; padding:16px 20px; max-width:70ch;}
.founding p{margin:0; font-size:17px; line-height:1.5; color:var(--ink);}
.founding .fn{margin-top:4px; font-size:14.5px; color:var(--muted);}
.rd .founding{margin:0 0 20px; max-width:none;}
.plan .conv{margin-top:18px; font-size:14.5px; line-height:1.5; color:var(--body);}
.plan .btn{margin-top:14px; align-self:flex-start;}
.pro-note{margin:20px 0 28px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;}