/* RivalNote site stylesheet: design tokens and the components every page shares.
   House structure of the sibling sites (floating nav, near-black hero, pills, light reading
   sections). The accent is the RivalNote dashboard's own vermillion
   (web/dashboard/src/app/globals.css: dark #e8512e, light #c2401f). Home-only components
   are in /assets/landing.css. */

:root{
  /* light theme: reading sections */
  --ink:#0a0d14;
  --body:#343b4a;
  --muted:#545c6e;
  --bg:#ffffff;
  --surface:#ffffff;
  --tint:#f7f8fb;
  --line:#e6e9ef;
  --line-strong:#8791a5;
  --soft:#fdf1ec;
  --soft-line:#f4d2c6;
  /* brand: dashboard vermillion. Buttons carry white text on --accent (AA), text on light uses --accent-dk */
  --accent:#c2401f;
  --accent-dk:#9f3217;
  --accent-dk-2:#7f2812;
  --accent-lt:#e8512e;
  --accent-on-dark:#ff9478;
  --live:#12b76a;
  --wa-btn:#25d366;
  /* dark theme: first screen, closing band, footer */
  --d0:#0a0d14;
  --d1:#10151f;
  --d2:#171d2b;
  --dline:rgba(255,255,255,.1);
  --dtext:#ffffff;
  --dtext2:rgba(255,255,255,.72);
  /* status colours used in the demos and notices */
  --warn-ink:#6b4400;
  --warn-bg:#fff7e0;
  --warn-line:#f0d68a;
  --ok-ink:#085c3a;
  --ok-bg:#e8f8f0;
  --bad-ink:#8a1c14;
  --bad-bg:#fff1ef;
  /* shape and rhythm */
  --radius:10px;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; background:var(--d0);}
body{margin:0; color:var(--ink); background:var(--bg); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight:400; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0; padding:0;}
h1,h2,h3{font-family:var(--display); font-weight:700; color:inherit;}
ul,ol{list-style:none;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;}
.dark :focus-visible,.nav :focus-visible,.ft :focus-visible,.hero :focus-visible,.phd :focus-visible{outline-color:#fff;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media(min-width:900px){ .wrap{padding:0 40px;} }
.wrap.narrow{max-width:860px;}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:12px 16px;}
.skip:focus{left:0;}

/* check and cross icons drawn once as masks */
.ico{display:inline-block; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");}
.i-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");}

/* links: animated hairline underline */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat; transition:background-size .2s var(--ease); padding-bottom:2px;}
.ul:hover,.ul:focus-visible{background-size:100% 2px;}

/* buttons: 48px tall, pill, distinct default / hover / active / focus */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:600; font-size:16px; line-height:1; min-height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.btn svg.wa{fill:currentColor; stroke:none; width:19px; height:19px;}
.btn-wa{background:var(--wa-btn); color:#04170f; border-color:#1aa953; box-shadow:inset 0 -2px 0 rgba(4,23,15,.22);}
.btn-wa:hover{background:#2fe173; border-color:#128a40;}
.btn-wa:active{background:#1fbd5b; box-shadow:inset 0 2px 0 rgba(4,23,15,.22);}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-line:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-line:active{background:#262d3d; border-color:#262d3d; color:#fff;}
.dark .btn-line,.hero .btn-line,.phd .btn-line{color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.04);}
.dark .btn-line:hover,.hero .btn-line:hover,.phd .btn-line:hover{background:#fff; color:var(--ink); border-color:#fff;}
@media(max-width:520px){ .actions .btn{width:100%;} }

/* nav: a floating rounded bar inset from the edges, wordmark only */
.nav{position:sticky; top:12px; z-index:40; height:0;}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; width:calc(100% - 24px); max-width:1120px; margin:0 auto; padding:0 10px 0 22px; border-radius:999px; background:rgba(14,18,28,.84); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 40px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); color:#fff;}
.brand{display:flex; align-items:center; min-height:44px; color:#fff; font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.035em; line-height:1;}
.brand b{font-weight:800; color:var(--accent-on-dark);}
.nav-links{display:flex; align-items:center; gap:26px; font-size:15px; font-weight:500;}
.nav-links a.ul{display:flex; align-items:center; min-height:44px; padding-bottom:0; background-position:0 calc(100% - 9px); color:rgba(255,255,255,.84);}
.nav-links a.ul:hover{color:#fff;}
.nav-links .btn{min-height:44px; padding:0 20px; font-size:15px;}
@media(max-width:940px){ .nav-links a.ul.hide-sm{display:none;} }
.nav-burger{display:none; width:44px; height:44px; margin:0 0 0 2px; align-items:center; justify-content:center; cursor:pointer; border-radius:999px; -webkit-tap-highlight-color:transparent;}
.nav-burger:hover{background:rgba(255,255,255,.08);}
.nav-burger .x{display:none;}
.nav-toggle{display:none; position:absolute; top:10px; right:22px; width:44px; height:44px; margin:0; opacity:0; z-index:3; cursor:pointer;}
.nav-toggle:focus-visible ~ .nav-in .nav-burger{outline:3px solid #fff; outline-offset:-3px;}
.nav-drawer{display:none; position:absolute; top:72px; left:50%; transform:translateX(-50%); width:calc(100% - 24px); max-width:1120px; flex-direction:column; padding:8px 20px 20px; border-radius:24px; background:#0e121c; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 60px -12px rgba(0,0,0,.7); color:#fff;}
.nav-drawer a{display:flex; align-items:center; min-height:48px; font-size:16px; font-weight:500; border-top:1px solid var(--dline);}
.nav-drawer a:first-child{border-top:0;}
.nav-drawer .btn{margin-top:16px; border-top:1px solid #1aa953; justify-content:center;}
@media(max-width:940px){
  .nav-toggle{display:block;}
  .nav-burger{display:inline-flex;}
  .nav-links > .btn{display:none;}
  .nav-toggle:checked ~ .nav-in .nav-burger .bars{display:none;}
  .nav-toggle:checked ~ .nav-in .nav-burger .x{display:inline;}
  .nav-toggle:checked ~ .nav-drawer{display:flex;}
}

/* sections: light, tinted and dark bands */
.sec{padding:72px 0;}
@media(min-width:900px){ .sec{padding:112px 0;} }
.sec.alt{background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec.white{background:var(--surface);}
.dark{background:var(--d0); color:var(--dtext); position:relative; overflow:hidden;}
.dark .sub{color:var(--dtext2);}
/* small section labels: mono, uppercase, wide tracking */
.label{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; 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:8px 14px; margin-bottom:20px;}
.label::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.dark .label{color:var(--accent-on-dark); background:rgba(232,81,46,.12); border-color:rgba(255,148,120,.3);}
.dark .label::before{background:var(--live); box-shadow:0 0 0 3px rgba(18,183,106,.2);}
h2.title{font-size:clamp(30px,4vw,42px); line-height:1.1; letter-spacing:-.03em; font-weight:800; max-width:22ch; text-wrap:balance;}
.sub{margin-top:16px; max-width:58ch; font-size:17px; line-height:1.55; color:var(--muted);}
@media(min-width:900px){ .sub{font-size:18px;} }
.head{margin-bottom:48px;}
@media(min-width:900px){ .head{margin-bottom:64px;} }

/* pills */
.pills{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.pill{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); font-size:13px; font-weight:500; color:rgba(255,255,255,.86);}
.pill svg{width:15px; height:15px; fill:none; stroke:var(--accent-on-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(18,183,106,.22);}

/* footer, dark like the closing band */
.ft{padding:56px 0 32px; border-top:1px solid var(--dline); background:#070a10; font-size:14px; color:rgba(255,255,255,.8);}
.ft-in{display:grid; gap:32px;}
@media(min-width:760px){ .ft-in{grid-template-columns:1fr auto; gap:64px;} .ft .right{text-align:right;} }
.ft small{display:block; margin-top:12px; max-width:44ch; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5;}
.ft .right{display:grid; gap:0; justify-items:start;}
@media(min-width:760px){ .ft .right{justify-items:end;} }
.ft-links{display:flex; flex-wrap:wrap; gap:0 20px;}
@media(min-width:760px){ .ft-links{justify-content:flex-end;} }
.ft-links a{display:flex; align-items:center; min-height:44px;}
.ft .operator-line{margin:24px auto 0; padding:16px 24px 0; max-width:var(--maxw); border-top:1px solid var(--dline); font-size:13px; line-height:1.5; color:rgba(255,255,255,.7); text-align:center;}

/* inner pages: compact dark header, light reading body */
.pg{background:var(--bg);}
.phd{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:104px 0 48px;}
@media(min-width:900px){ .phd{padding:132px 0 64px;} }
.phd::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 90% at 50% -20%,rgba(232,81,46,.5),rgba(232,81,46,.12) 55%,transparent 78%);}
.phd::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,.26) 44px,rgba(255,160,130,.14) 49px,rgba(232,81,46,.05) 78px,rgba(232,81,46,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 90%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 90%); pointer-events:none;}
.crumb{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:32px; padding:6px 14px; margin-bottom:20px; border-radius:999px; border:1px solid rgba(255,148,120,.3); background:rgba(232,81,46,.12); font-family:var(--mono); font-size:12px; line-height:1.2; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-on-dark);}
.crumb a{position:relative; color:inherit;}
.crumb a::after{content:""; position:absolute; inset:-12px -6px;}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px;}
.crumb .sep{opacity:.6;}
.crumb [aria-current]{color:#fff;}
.phd h1{font-size:clamp(32px,6vw,50px); line-height:1.08; letter-spacing:-.03em; font-weight:800; color:#fff; max-width:22ch; text-wrap:balance;}
.phd-lead{margin-top:16px; max-width:62ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .phd-lead{font-size:18px;} }
.phd .actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}
.pg .body{padding:48px 0 80px;}
@media(min-width:900px){ .pg .body{padding:72px 0 112px;} }
.rd{max-width:760px; color:var(--body); font-size:16px; line-height:1.7;}
.rd h2{font-family:var(--display); font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-.025em; font-weight:800; color:var(--ink); margin:48px 0 14px; padding-top:28px; border-top:1px solid var(--line);}
.rd h2:first-child{margin-top:0; padding-top:0; border-top:0;}
.rd h3{font-family:var(--display); font-size:18px; line-height:1.3; letter-spacing:-.015em; font-weight:700; color:var(--ink); margin:28px 0 8px;}
.rd p{margin:0 0 14px;}
.rd ul,.rd ol{margin:0 0 16px; padding-left:22px; list-style:revert;}
.rd li{margin:6px 0; padding-left:2px;}
.rd li::marker{color:var(--accent);}
.rd strong{color:var(--ink); font-weight:650;}
.rd a:not(.btn){color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.rd a:not(.btn):hover{text-decoration-thickness:2px;}
.rd code,.code-inline{font-family:var(--mono); font-size:.9em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px;}
.rd .meta{color:var(--muted); font-size:14px;}
.draft{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); border-radius:14px; padding:14px 18px; font-size:14px; margin:0 0 28px;}
.draft strong{color:var(--warn-ink);}
.callout{background:var(--soft); border:1px solid var(--soft-line); border-left:4px solid var(--accent); border-radius:14px; padding:16px 20px; margin:0 0 20px;}
.callout p:last-child{margin-bottom:0;}
.tw{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
.tw:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.rd table,.tw table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; line-height:1.5;}
.rd th,.rd td,.tw th,.tw td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
.rd th,.tw th{background:var(--tint); color:var(--ink); font-family:var(--display); font-weight:700; font-size:13.5px;}
.rd tr:last-child td,.tw tr:last-child td{border-bottom:0;}
.rd .toc{background:var(--tint); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin:0 0 32px; font-size:14.5px;}
.rd .toc b{font-family:var(--display); color:var(--ink);}
.rd .toc ol{columns:2; column-gap:28px; margin:10px 0 0; padding-left:20px;}
@media(max-width:560px){ .rd .toc ol{columns:1;} }
.rd .cta-box{margin-top:40px; background:var(--tint); border:1px solid var(--line); border-radius:22px; padding:28px 24px;}
.rd .cta-box h2{margin:0 0 8px; padding:0; border:0; font-size:24px;}
.rd .cta-box p{max-width:52ch;}

/* link cards (intent pages hub) */
.cardgrid{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:760px){ .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cardlink{position:relative; display:flex; flex-direction:column; padding:28px 24px 24px; background:var(--surface); border:1px solid var(--line); border-radius:22px; color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease,transform .15s var(--ease);}
.cardlink:hover{border-color:var(--soft-line); box-shadow:0 18px 44px -26px rgba(194,64,31,.5); transform:translateY(-2px);}
.cardlink .tag{align-self:flex-start; 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:7px 11px; margin-bottom:14px;}
.cardlink h3{font-size:21px; line-height:1.2; letter-spacing:-.025em; font-weight:800; margin:0 0 8px;}
.cardlink p{margin:0; color:var(--muted); font-size:15px; line-height:1.55;}
.cardlink .go{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; min-height:44px; font-weight:600; font-size:15px; color:var(--accent-dk);}
.cardlink .go svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s var(--ease);}
.cardlink:hover .go svg{transform:translateX(3px);}

/* questions: native details, no script */
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:16px 0; cursor:pointer; list-style:none; font-family:var(--display); font-weight:700; font-size:18px; line-height:1.3; letter-spacing:-.015em;}
.faq summary::-webkit-details-marker{display:none;}
.faq .pm{position:relative; flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-strong);}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--ink); transform:translate(-50%,-50%);}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .2s var(--ease);}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq .ans{padding:0 48px 22px 0; max-width:70ch; color:var(--body); line-height:1.65;}
.faq .ans p+p{margin-top:10px;}
.faq .ans a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px;}

/* 404 */
.phd.nf{min-height:min(70vh,640px); display:flex; align-items:center; padding-bottom:72px;}
.phd.nf .wrap{width:100%;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cardlink,.cardlink .go svg,.faq .pm::after,.ul{transition:none;}
  .cardlink:hover{transform:none;}
}