/* RioApps, Inc. — rioapps.net
   Palette from the RioApps logo: phone black, screen red, wordmark blue.
   Type: IBM Plex Serif (display) / IBM Plex Sans (text). */

:root{
  --paper:#FFFFFF;
  --paper-2:#F4F5F7;
  --ink:#16181B;
  --muted:#5B6470;
  --band:#14171B;
  --band-2:#1E2329;
  --red:#B22628;
  --red-dark:#8F1D1F;
  --blue:#1A6FB5;
  --blue-dark:#135A94;
  --rule:#E1E4E8;
  --measure:64ch;
  color-scheme: light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-dark)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-top:4px solid var(--red);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blue);
  font-family:"IBM Plex Serif",Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-.01em}
.wordmark:hover{color:var(--blue)}
.wordmark .wm-text{color:var(--blue)}
.wordmark .wm-text span{color:var(--red)}
.masthead nav{display:flex;gap:26px;font-size:15px;flex-wrap:wrap}
.masthead nav a{color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}

/* ---------- logo mark (inline SVG) ---------- */
.logo-mark{width:46px;height:46px;flex:none;overflow:visible}
.logo-mark .tie,.logo-mark .head,.logo-mark .hand,.logo-mark .arrow{transform-box:fill-box}
.logo-mark .tie{transform-origin:50% 0}
.logo-mark .head{transform-origin:50% 100%}
.logo-mark .hand{opacity:0;transform-origin:50% 50%}
.logo-mark .arrow{stroke-dasharray:120;stroke-dashoffset:0}
.logo-mark .arrowhead{transform-box:fill-box;transform-origin:50% 50%}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(178,38,40,.22), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(26,111,181,.20), transparent 60%),
    linear-gradient(160deg,var(--band) 0%,var(--band-2) 100%);
  color:#F1F3F5;
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:78px;padding-bottom:78px}
.hero h1{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:clamp(34px,4.6vw,49px);
  line-height:1.12;
  letter-spacing:-.015em;
  font-weight:600;
  margin:0 0 20px;
}
.hero p{margin:0;color:#C3C9D1;font-size:19px;max-width:46ch}
.hero .who{margin-top:26px;font-size:15px;color:#8E97A3;max-width:46ch;padding-left:12px;border-left:3px solid var(--red)}

/* docket card — the one loud element */
.docket{background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:0 22px 48px rgba(0,0,0,.38);overflow:hidden}
.docket .cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 18px;border-bottom:3px solid var(--red);
  font-size:13px;color:var(--muted);
}
.docket .cap b{font-family:"IBM Plex Serif",Georgia,serif;font-size:15px;color:var(--ink);font-weight:600}
.docket ol{list-style:none;margin:0;padding:0}
.docket li{
  display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 18px;border-bottom:1px solid var(--rule);font-size:14px;
}
.docket li:last-child{border-bottom:0}
.docket .t{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:600}
.docket .m{color:var(--muted);font-size:13px}
.docket .tag{font-size:12px;color:var(--muted);white-space:nowrap}
.docket .tag.sent{color:var(--red)}
.docket .foot{padding:12px 18px;background:var(--paper-2);font-size:12.5px;color:var(--muted)}

/* ---------- sections ---------- */
main section{padding:64px 0;border-bottom:1px solid var(--rule)}
main section:nth-of-type(even){background:var(--paper-2)}
main section:last-of-type{border-bottom:0}
h2{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:27px;line-height:1.25;font-weight:600;letter-spacing:-.01em;
  margin:0 0 8px;
}
main section h2::before{content:"";display:block;width:36px;height:3px;background:var(--red);margin:0 0 14px}
h2 + .sub{color:var(--muted);margin:0 0 28px;max-width:var(--measure)}
h3{font-family:"IBM Plex Serif",Georgia,serif;font-size:19px;font-weight:600;margin:0 0 6px}
p{margin:0 0 16px;max-width:var(--measure)}
.lede{font-size:19px;color:var(--muted);max-width:58ch}

/* ledger: label left, description right, hairline between */
.ledger{border-top:1px solid var(--rule)}
.ledger div{
  display:grid;grid-template-columns:230px 1fr;gap:28px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.ledger dt{font-weight:600;font-size:15.5px;margin:0;color:var(--ink)}
.ledger dd{margin:0;color:var(--muted);font-size:15.5px}

/* message specimens */
.msgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin:26px 0 8px}
.msg{border-left:3px solid var(--red);padding:2px 0 2px 16px}
.msg .when{font-size:13px;color:var(--muted);margin:0 0 6px}
.msg .body{font-size:15px;margin:0;color:var(--ink)}

.note{background:var(--paper-2);border-left:3px solid var(--blue);padding:18px 20px;margin:26px 0 0;max-width:var(--measure)}
.note p{margin:0;font-size:15.5px}

ul.plain{margin:0 0 16px;padding-left:20px;max-width:var(--measure)}
ul.plain li{margin-bottom:9px;color:var(--muted)}
ul.plain li::marker{color:var(--red)}
ul.plain li strong{color:var(--ink);font-weight:600}

.shot{margin:26px 0;max-width:100%}
.shot img,img{max-width:100%;height:auto}
.shot img{border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* ---------- long-form legal pages ---------- */
.doc{padding:56px 0 8px}
.doc h1{font-family:"IBM Plex Serif",Georgia,serif;font-size:37px;line-height:1.15;letter-spacing:-.015em;font-weight:600;margin:0 0 6px}
.doc .stamp{color:var(--muted);font-size:15px;margin:0 0 34px;padding-bottom:18px;border-bottom:3px solid var(--red);display:inline-block}
.doc h2{font-size:21px;margin-top:38px}
.doc ul{max-width:var(--measure);padding-left:20px}
.doc li{margin-bottom:10px;color:var(--muted)}
.doc li::marker{color:var(--red)}
.doc li strong{color:var(--ink)}
.doc a{color:var(--blue)}

.addr{border-left:3px solid var(--red);padding-left:16px;margin:26px 0}
.addr p{margin:0 0 4px;color:var(--muted)}
.addr a{color:var(--blue)}

/* ---------- footer ---------- */
footer{background:var(--band);color:#9AA3AE;padding:40px 0 34px;font-size:14.5px;border-top:4px solid var(--red)}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer a{color:#E3E7EB;text-decoration:none;border-bottom:1px solid rgba(178,38,40,.7)}
footer a:hover{color:#fff;border-bottom-color:var(--red)}
footer .legal{color:#7D8692}
footer nav{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- motion, focus, small screens ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .docket li{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
  .docket li:nth-child(1){animation-delay:.10s}
  .docket li:nth-child(2){animation-delay:.18s}
  .docket li:nth-child(3){animation-delay:.26s}
  .docket li:nth-child(4){animation-delay:.34s}
  @keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

  /* logo: plays once on load, again on hover — he straightens his tie, ready to work */
  .logo-mark .tie{animation:tie-adjust 1.1s .4s ease-in-out}
  .logo-mark .hand{animation:hand-adjust 1.1s .4s ease-in-out}
  .logo-mark .head{animation:head-nod 1.1s .4s ease-in-out}
  .logo-mark .arrow{animation:arrow-draw .9s .1s ease-out backwards}
  .logo-mark .arrowhead{animation:arrow-pop .4s .9s ease-out backwards}
  .wordmark:hover .logo-mark .tie,.wordmark:focus-visible .logo-mark .tie{animation:tie-adjust 1.1s ease-in-out}
  .wordmark:hover .logo-mark .hand,.wordmark:focus-visible .logo-mark .hand{animation:hand-adjust 1.1s ease-in-out}
  .wordmark:hover .logo-mark .head,.wordmark:focus-visible .logo-mark .head{animation:head-nod2 1.1s ease-in-out}
  .wordmark:hover .logo-mark .arrow{animation:arrow-draw2 .9s ease-out}
  .wordmark:hover .logo-mark .arrowhead{animation:arrow-pop2 .4s .5s ease-out backwards}

  @keyframes tie-adjust{
    0%{transform:rotate(0)}
    18%{transform:rotate(-14deg)}
    38%{transform:rotate(10deg) translateY(-1px)}
    58%{transform:rotate(-6deg) translateY(-1.5px)}
    78%{transform:rotate(2deg) translateY(-.5px)}
    100%{transform:rotate(0)}
  }
  @keyframes hand-adjust{
    0%{opacity:0;transform:translate(6px,4px)}
    15%{opacity:1;transform:translate(0,0)}
    40%{opacity:1;transform:translate(-1px,-1px)}
    62%{opacity:1;transform:translate(0,-2px)}
    82%{opacity:1;transform:translate(1px,-1px)}
    100%{opacity:0;transform:translate(6px,4px)}
  }
  @keyframes head-nod{0%,70%{transform:none}82%{transform:translateY(1.2px)}100%{transform:none}}
  @keyframes head-nod2{0%,70%{transform:none}82%{transform:translateY(1.2px)}100%{transform:none}}
  @keyframes arrow-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
  @keyframes arrow-draw2{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
  @keyframes arrow-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
  @keyframes arrow-pop2{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
}
@media print{.docket li{animation:none!important;opacity:1!important;transform:none!important}}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding-top:52px;padding-bottom:52px}
  .ledger div{grid-template-columns:1fr;gap:4px}
  .wrap{padding:0 20px}
  body{font-size:16px}
  .masthead nav{gap:18px;font-size:14.5px}
}