/* rakitsu.com — shared stylesheet
   Base tokens carried over verbatim from the design canvas's per-page style blocks
   (design/Main.dc.html, design/Mobile.dc.html, design/License.dc.html, design/Legal.dc.html).
   The @media (max-width: 600px) block encodes every desktop/mobile difference between
   design/Main.dc.html (1440px artboard) and design/Mobile.dc.html (390px artboard) as
   CSS custom-property overrides, so site/index.html ships as one responsive page. */

body {
  margin: 0;
  background: #12121f;
  color: #e0e0e0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #5b8def; text-decoration: none; }
a:hover { color: #8db0f5; }
.nav-link { color: #9a9ab0; }
.nav-link:hover { color: #e0e0e0; }
.foot-link { color: #9a9ab0; font-size: 14px; }
.foot-link:hover { color: #e0e0e0; }
.grid { background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 24px 24px; }
@keyframes rk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pulse { animation: rk-pulse 1.5s infinite; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* "In action" demo videos replace the poster-only stills; same box the <img> used to fill. */
.demo-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: #0d0d18; }

/* Outer page wrapper. The design canvas artboards used a fixed pixel width (1440px desktop /
   390px phone) because they were canvas artboards; the real site uses a fluid container capped
   at the desktop artboard's width so it never overflows a narrow viewport. */
.page-wrap { max-width: 1440px; margin: 0 auto; width: 100%; background: #12121f; color: #e0e0e0; display: flex; flex-direction: column; }

/* Elements/sections whose DOM genuinely differs between the desktop and mobile artboards
   (not just spacing) ship both variants; the media query below picks one. Everything else
   is a single shared DOM parameterized with the custom properties defined below. */
.only-mobile { display: none; }
.only-mobile-flex { display: none; }
.only-desktop { display: block; }
.only-desktop-flex { display: flex; }
.only-desktop-inline { display: inline-flex; }

/* ---- Responsive tokens: default = design/Main.dc.html (1440px desktop) ---- */
:root {
  --hdr-h: 72px;
  --hdr-pad-x: 120px;
  --hdr-gap: 12px;
  --brand-icon: 30px;
  --brand-word-w: 115px;
  --brand-word-h: 15px;

  --hero-pad: 80px 120px 88px;
  --hero-dir: row;
  --hero-gap: 40px;
  --hero-copy-w: 560px;
  --hero-copy-gap: 26px;
  --hero-badge-gap: 12px;
  --hero-badge2-fs: 12px;
  --hero-h1-fs: 64px;
  --hero-h1-lh: 1.02;
  --hero-p-fs: 20px;
  --hero-tagline-fs: 13px;
  --hero-cta-dir: row;
  --hero-cta-gap: 12px;
  --hero-btn-h: 44px;
  --hero-curl-pad: 12px 14px;
  --hero-curl-fs: 13px;

  --feat-pad: 72px 120px;
  --feat-cols: repeat(5, minmax(0, 1fr));
  --feat-gap: 40px;

  --features-pad: 96px 120px;
  --features-gap: 44px;
  --features-head-gap: 14px;
  --features-head-maxw: 760px;
  --features-h2: 40px;
  --features-p: 17px;
  --features-grid-cols: repeat(3, minmax(0, 1fr));
  --features-grid-gap: 24px;

  --inaction-pad: 96px 120px;
  --inaction-gap: 40px;
  --inaction-head-maxw: 780px;
  --inaction-h2: 40px;
  --inaction-p: 17px;
  --inaction-grid-cols: repeat(3, 1fr);
  --inaction-grid-gap: 28px;
  --inaction-fig-pad: 20px 24px;

  --wallpapers-pad: 96px 120px;
  --wallpapers-gap: 40px;
  --wallpapers-head-maxw: 780px;
  --wallpapers-h2: 40px;
  --wallpapers-p: 17px;
  --wallpapers-grid-cols: repeat(3, 1fr);
  --wallpapers-grid-gap: 20px;
  --wallpapers-fig-pad: 16px 18px;
  --wallpapers-hero-span: 2;

  --qs-pad: 96px 120px;
  --qs-dir: row;
  --qs-gap: 64px;
  --qs-align: flex-start;
  --qs-col-w: 520px;
  --qs-h2: 40px;
  --qs-ol-gap: 28px;
  --qs-li-gap: 16px;
  --qs-num-w: 20px;
  --qs-pre-size: 12.5px;
  --qs-term-h: 32px;

  --wf-pad: 96px 120px;
  --wf-gap: 64px;
  --wf-dir: row;
  --wf-head-w: 280px;
  --wf-h2: 32px;
  --wf-p: 17px;

  --lic-pad: 64px 120px;
  --lic-dir: row;
  --lic-align: center;
  --lic-justify: space-between;
  --lic-gap: 48px;
  --lic-h2: 28px;
  --lic-btn-h: 44px;
  --lic-btn-justify: flex-start;

  --ftr-pad: 56px 120px 48px;
}

/* ---- Overrides: design/Mobile.dc.html (390px phone artboard); breakpoint chosen
   below Mobile's own 390px reference width, above where the desktop layout still
   fits comfortably (see the implementation report for the reasoning). ---- */
@media (max-width: 600px) {
  :root {
    --hdr-h: 60px; --hdr-pad-x: 20px; --hdr-gap: 10px;
    --brand-icon: 28px; --brand-word-w: 100px; --brand-word-h: 13px;

    --hero-pad: 40px 20px 48px; --hero-dir: column; --hero-gap: 22px; --hero-copy-w: 100%;
    --hero-copy-gap: 22px; --hero-badge-gap: 10px; --hero-badge2-fs: 11px;
    --hero-h1-fs: 44px; --hero-h1-lh: 1.05; --hero-p-fs: 17px; --hero-tagline-fs: 12px;
    --hero-cta-dir: column; --hero-cta-gap: 10px; --hero-btn-h: 48px;
    --hero-curl-pad: 12px; --hero-curl-fs: 12px;

    --feat-pad: 48px 20px; --feat-cols: 1fr; --feat-gap: 24px;

    --features-pad: 56px 20px; --features-gap: 28px; --features-head-gap: 10px;
    --features-head-maxw: none; --features-h2: 30px; --features-p: 15px;
    --features-grid-cols: 1fr; --features-grid-gap: 16px;

    --inaction-pad: 56px 20px; --inaction-gap: 24px; --inaction-head-maxw: none;
    --inaction-h2: 30px; --inaction-p: 16px; --inaction-grid-cols: 1fr;
    --inaction-grid-gap: 20px; --inaction-fig-pad: 16px 18px;

    --wallpapers-pad: 56px 20px; --wallpapers-gap: 24px; --wallpapers-head-maxw: none;
    --wallpapers-h2: 30px; --wallpapers-p: 16px; --wallpapers-grid-cols: 1fr;
    --wallpapers-grid-gap: 16px; --wallpapers-fig-pad: 14px 16px; --wallpapers-hero-span: 1;

    --qs-pad: 56px 20px; --qs-dir: column; --qs-gap: 28px; --qs-align: stretch; --qs-col-w: 100%;
    --qs-h2: 30px; --qs-ol-gap: 24px; --qs-li-gap: 12px; --qs-num-w: 16px; --qs-pre-size: 11.5px; --qs-term-h: 30px;

    --wf-pad: 56px 20px; --wf-gap: 18px; --wf-dir: column; --wf-head-w: auto;
    --wf-h2: 28px; --wf-p: 16px;

    --lic-pad: 48px 20px; --lic-dir: column; --lic-align: stretch; --lic-justify: flex-start;
    --lic-gap: 18px; --lic-h2: 24px; --lic-btn-h: 48px; --lic-btn-justify: center;

    --ftr-pad: 48px 20px 40px;
  }

  .only-mobile { display: block; }
  .only-mobile-flex { display: flex; }
  .only-mobile-inline { display: inline-flex; }
  .only-desktop, .only-desktop-flex, .only-desktop-inline { display: none; }
}

/* ---- Mobile safety net for the license/terms/privacy pages (site/license, site/terms,
   site/privacy). Those three pages come from single desktop-only artboards (License.dc.html,
   Legal.dc.html) — no companion phone artboard was designed for them, so there is nothing to
   encode pixel-for-pixel the way index.html does. This just keeps them from overflowing or
   clipping on a narrow viewport: shrink the 120px desktop gutters, drop the nav row (the
   design gave it no mobile treatment either), and stack the two-column layouts. ---- */
@media (max-width: 600px) {
  .legal-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .legal-nav { display: none !important; }
  .legal-grid2 { grid-template-columns: 1fr !important; }
  .legal-split { flex-direction: column !important; }
  .legal-split-left { width: auto !important; border-right: 0 !important; border-bottom: 1px solid #2a2a3e; }
  .legal-footer { flex-direction: column !important; gap: 28px !important; }
}