/* ============================================================================
   RICS motion system — "the substrate resolving"
   ----------------------------------------------------------------------------
   Aesthetic: terminal brutalism. Content arrives the way a terminal renders a
   record — a wipe, a tick, a settle. Machine easing, never springs. Monochrome.

   Constraints this file is built around:
   · No build step. No JS. No animation library. ~4KB, cached once, used by all
     15 pages. The site's own claim is that it is fast on a Lagos 10Mbps upload;
     a 70KB animation library to move things 12px would break that promise.
   · Scroll effects use `animation-timeline: view()` behind @supports, so a
     browser without it renders the FINAL state immediately. Content is never
     hidden waiting for a script — the classic scroll-reveal failure mode.
   · React (dc-runtime) owns the DOM. Everything here is CSS on classes or
     pseudo-elements, so a re-render cannot strip it.
   · Animates transform / opacity / clip-path only — compositor-friendly.
   ========================================================================== */

:root{
  /* Machine easing: fast out, hard stop. Nothing overshoots. */
  --m-snap: cubic-bezier(0.2, 0.9, 0.25, 1);
  --m-cut:  cubic-bezier(0.85, 0, 0.15, 1);
  --m-fast: 140ms;
  --m-base: 260ms;
  --m-slow: 520ms;
}

/* ── 1. Caret ─────────────────────────────────────────────────────────────
   The wordmark cursor. steps(1) so it snaps like a DOS caret, never fades. */
.rics-caret{ animation: ricsCaret 1.06s steps(1,end) infinite; }
@keyframes ricsCaret{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ── 2. Micro-interactions ────────────────────────────────────────────────
   Hover/focus only. Zero cost until touched, and immune to re-render. */

/* Chamfered buttons: the cut corner deepens and a caret slides in.
   Applied via class so it never fights an existing inline style. */
.m-btn{ position:relative; transition: background var(--m-fast) var(--m-snap),
                                        color var(--m-fast) var(--m-snap),
                                        transform var(--m-fast) var(--m-snap); }
.m-btn::after{ content:''; }
/* content is empty until hover, so the glyph can never leak on touch devices
   where :hover never resolves and opacity:0 alone proved unreliable */
.m-btn:hover::after, .m-btn:focus-visible::after{ content:'_'; margin-left:.4em; }
.m-btn:active{ transform: translateY(1px); }

/* Inline links: the underline draws left→right rather than just appearing. */
.m-link{ position:relative; text-decoration:none; }
.m-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition: transform var(--m-base) var(--m-snap);
}
.m-link:hover::after, .m-link:focus-visible::after{ transform:scaleX(1); }

/* Cards / cells: border snaps to ink and the surface lifts a hair.
   No scale — scaling blurs text and reads as "web app", not "instrument". */
.m-cell{ transition: border-color var(--m-fast) var(--m-snap),
                     background   var(--m-fast) var(--m-snap),
                     transform    var(--m-fast) var(--m-snap); }
.m-cell:hover, .m-cell:focus-visible{ transform: translateY(-2px); }

/* Data rows in the mock brief: a left rule wipes in, like a record being
   selected in a terminal. */
.m-row{ position:relative; }
.m-row::before{
  content:''; position:absolute; left:-12px; top:0; bottom:0; width:2px;
  background:currentColor; transform:scaleY(0); transform-origin:top;
  transition: transform var(--m-base) var(--m-cut);
}
.m-row:hover::before{ transform:scaleY(1); }

/* ── 3. Scroll choreography ───────────────────────────────────────────────
   @supports guard is load-bearing: unsupported browsers get the final state
   with no animation and, critically, no hidden content. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* Sections resolve: a clip wipe plus a short rise. */
    .m-reveal{
      animation: mReveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes mReveal{
      from{ opacity:0; transform:translateY(14px); clip-path:inset(0 12% 0 0); }
      to  { opacity:1; transform:none;             clip-path:inset(0 0 0 0);   }
    }

    /* Staggered children — grids, card rows, stat tiles. */
    .m-stagger > *{
      animation: mReveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
    .m-stagger > :nth-child(2){ animation-delay:60ms }
    .m-stagger > :nth-child(3){ animation-delay:120ms }
    .m-stagger > :nth-child(4){ animation-delay:180ms }
    .m-stagger > :nth-child(5){ animation-delay:240ms }
    .m-stagger > :nth-child(6){ animation-delay:300ms }

    /* Rules and dividers draw themselves. */
    .m-draw{
      animation: mDraw var(--m-slow) var(--m-cut) both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    @keyframes mDraw{ from{ transform:scaleX(0); transform-origin:left } to{ transform:scaleX(1) } }

    /* Sticky header gains a hairline once you leave the hero. */
    .m-header{
      animation: mHeader linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }
    @keyframes mHeader{
      from{ box-shadow:0 0 0 rgba(0,0,0,0) }
      to  { box-shadow:0 1px 0 rgba(18,18,18,0.14) }
    }
  }
}

/* ── 4. Reduced motion ────────────────────────────────────────────────────
   Everything resting, everything visible. The caret in particular must stop
   in its VISIBLE half — the global reduce rule clamps iteration-count to 1,
   which would otherwise freeze it mid-cycle and delete the underscore. */
@media (prefers-reduced-motion: reduce){
  .rics-caret{ animation:none !important; opacity:1 !important; }
  .m-reveal, .m-stagger > *, .m-draw, .m-header{
    animation:none !important; opacity:1 !important;
    transform:none !important; clip-path:none !important;
  }
  .m-btn, .m-link, .m-cell, .m-row,
  .m-btn::after, .m-link::after, .m-row::before{ transition:none !important; }
}

/* ============================================================================
   Browser window — mock chrome
   ----------------------------------------------------------------------------
   The product mocks previously read as flat cards, so they looked like slides
   about the product rather than the product. What sells a browser is the TAB:
   an active tab whose fill matches the toolbar and whose bottom edge dissolves
   into it. Traffic lights and an address pill alone are not enough.

   Drawn in the site's own monochrome line language rather than skeuomorphic
   macOS chrome — coloured traffic lights and glossy gradients would be the
   only non-monochrome pixels on the site.

   All chrome is aria-hidden: it is scenery. The content inside stays in the
   accessibility tree, and every window carries a visible caption saying it is
   an illustration.
   ========================================================================== */

.rb{
  border:1px solid var(--line2,#999);
  border-radius:10px 10px 4px 4px;
  overflow:hidden;
  background:var(--bg,#fff);
  box-shadow:0 1px 0 rgba(18,18,18,.04), 0 26px 60px -28px rgba(18,18,18,.30);
}

/* tab strip */
.rb-bar{
  display:flex; align-items:flex-end; gap:8px;
  padding:9px 12px 0;
  background:#E9EAEB;
  border-bottom:1px solid var(--line,#E5E5E5);
}
.rb-dots{ display:flex; gap:6px; padding:0 4px 9px; }
.rb-dots i{ width:10px; height:10px; border-radius:50%; background:#C4C6C8; display:block; }

.rb-tab{
  display:flex; align-items:center; gap:8px;
  max-width:340px; min-width:0;
  padding:8px 12px; margin-bottom:-1px;      /* dissolve into the toolbar */
  background:var(--bg,#fff);
  border:1px solid var(--line,#E5E5E5); border-bottom-color:var(--bg,#fff);
  border-radius:8px 8px 0 0;
  font-family:'Roboto',sans-serif; font-size:0.68rem; color:var(--ink2,#2D2D2D);
}
.rb-fav{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.58rem;
         letter-spacing:0.06em; color:var(--ink,#121212); flex:none; }
.rb-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-x{ color:var(--ink3,#666); font-size:0.8rem; line-height:1; flex:none; }
.rb-plus{ color:#8A8D90; font-size:0.9rem; padding:0 4px 9px; }

/* toolbar */
.rb-tool{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--bg,#fff);
  border-bottom:1px solid var(--line,#E5E5E5);
}
.rb-nav{ color:#9A9DA0; font-size:0.82rem; line-height:1; flex:none; }
.rb-url{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:var(--bg2,#F8F9FA);
  border:1px solid var(--line,#E5E5E5); border-radius:999px;
  padding:5px 12px;
  font-family:'Roboto',sans-serif; font-size:0.7rem; color:var(--ink3,#666);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rb-url svg{ flex:none; }
.rb-host{ color:var(--ink,#121212); }
.rb-meta{ color:var(--ink3,#666); font-family:'Roboto',sans-serif; font-size:0.66rem;
          white-space:nowrap; flex:none; }

/* page area + caption */
.rb-body{ background:var(--bg2,#F8F9FA); }
.rb-cap{
  margin:10px 0 0; color:var(--ink3,#666);
  font-family:'Roboto',sans-serif; font-size:0.68rem; line-height:1.5;
}

@media (max-width:720px){
  .rb-meta, .rb-plus, .rb-x{ display:none; }
  .rb-tab{ max-width:none; flex:1; }
  .rb-bar{ padding:8px 10px 0; }
  .rb-tool{ gap:8px; padding:7px 10px; }
  .rb-nav:nth-of-type(2), .rb-nav:nth-of-type(3){ display:none; }
}
/* ============================================================================
   RICS responsive corrections
   ----------------------------------------------------------------------------
   Loaded on every page alongside motion.css. Kept separate from the per-page
   inline blocks because those are duplicated across 15 files — a fix applied
   there has to be applied fifteen times and drifts the moment one is missed.

   Breakpoint matches the existing rics-mobile block: 720px.
   ========================================================================== */

/* ── Nav CTA cluster ──────────────────────────────────────────────────────
   The mobile rules hide .rics-nav-links and .rics-nav-login, but the CTA
   cluster on the right had no such handling. Once a second CTA was added
   beside the button, the row overflowed and pushed the hamburger off-screen
   entirely — the menu became unreachable on a phone. */
.rics-cta-short{ display:none; }

@media (max-width:720px){
  /* The waitlist already appears in the burger panel; drop the duplicate. */
  .rics-nav-alt{ display:none !important; }

  /* Keep the primary CTA, but at a size a 360px screen can hold. */
  .rics-nav-cta{ padding:9px 13px !important; font-size:0.66rem !important; letter-spacing:0.06em !important; }
  .rics-cta-long{ display:none; }
  .rics-cta-short{ display:inline; }

  /* Nothing in the bar may force the row wider than the screen. */
  nav[aria-label="Main"]{ gap:10px !important; padding:0 14px !important; }
  nav[aria-label="Main"] > *{ min-width:0; }
}

@media (max-width:380px){
  /* At the narrow end, the wordmark and the burger are what matter. */
  .rics-nav-cta{ padding:8px 10px !important; font-size:0.62rem !important; }
}

/* ── Hero and band CTAs ───────────────────────────────────────────────────
   Two chamfered buttons side by side do not fit a phone; they were wrapping
   to different widths and reading as unrelated controls. Full width, stacked,
   equal weight. */
@media (max-width:720px){
  section[data-screen-label="Hero"] a[style*="clip-path:polygon(10px"],
  section[data-screen-label="CTA band"] a[style*="clip-path:polygon(10px"]{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-align:center !important;
    padding:16px 20px !important;
  }
  section[data-screen-label="Hero"] > div > div[style*="display:flex"],
  section[data-screen-label="CTA band"] div[style*="display:flex"]{
    gap:10px !important;
  }
}

/* ── Global overflow guard ────────────────────────────────────────────────
   A single element wider than the screen gives the whole document a
   horizontal scrollbar, which on a phone reads as "broken site". */
@media (max-width:720px){
  html,body{ max-width:100%; overflow-x:hidden; }
  img,svg,table,pre{ max-width:100%; height:auto; }
  /* Long unbroken strings (mock URLs, code spans) must wrap rather than push. */
  code,[style*="white-space:nowrap"]{ overflow-wrap:anywhere; }
}

/* ── Touch targets ────────────────────────────────────────────────────────
   WCAG 2.2 Target Size (Minimum), 2.5.8 AA: 24x24 CSS px. The burger and the
   4x4 cells were the two that sat under it. */
@media (max-width:720px){
  .rics-nav-burger{ min-width:44px !important; min-height:44px !important; }
  [role="grid"] button, [role="table"] button{ min-height:44px !important; }
  .rics-nav-panel a, .rics-nav-panel span{ min-height:44px; display:flex; align-items:center; }
}