/* ============================================
   RhythmoSync project page - ffenjil.com/rhythmo

   Standalone on purpose. style.css locks the body to
   100vh with overflow hidden so the profile card can
   sit dead centre, and this page needs to scroll, so
   sharing it would mean fighting it the whole way.
   Same palette and same space background though, so
   the two pages still read as one site.
   ============================================ */

:root {
    --bg:            #05060e;
    --card:          rgba(17, 18, 26, 0.72);
    --card-solid:    #12131c;
    --divider:       #262838;
    --text-header:   #f2f3f5;
    --text-normal:   #dbdee1;
    --text-muted:    #949ba4;
    --blurple:       #5865F2;
    --blurple-soft:  #8b7bff;
    --green:         #23a559;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    /* Dark page, so scrollbars and any native control render dark too */
    color-scheme: dark;
}

body {
    touch-action: manipulation;          /* No 300ms double-tap zoom delay */
    -webkit-tap-highlight-color: rgba(88, 123, 255, 0.25);
    overflow-x: hidden;                  /* Belt and braces against sideways scroll */
    font-family: 'gg sans', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    background-color: var(--bg);
    color: var(--text-normal);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* The star canvas is fixed rather than absolute - this page scrolls,
   and an absolute canvas would slide away with the content. */
#spaceCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    /* env(safe-area-inset-*) keeps content clear of notches and the iOS
       home indicator; it resolves to 0 everywhere else. */
    padding:
        clamp(28px, 6vw, 56px)
        calc(clamp(16px, 5vw, 24px) + env(safe-area-inset-right))
        calc(clamp(48px, 10vw, 80px) + env(safe-area-inset-bottom))
        calc(clamp(16px, 5vw, 24px) + env(safe-area-inset-left));
}

/* --------------------------------------------
   BACK LINK
   -------------------------------------------- */
.back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 40px;
    transition: color 0.2s ease;
    /* WCAG asks for 24x24 minimum on pointer targets. The text alone was
       22px tall, so the padding is doing real work here, and the negative
       margin keeps it visually flush with the content below. */
    min-height: 24px;
    padding: 2px 6px;
    margin-left: -6px;
}
.back:hover { color: var(--text-header); }

/* --------------------------------------------
   HERO
   -------------------------------------------- */
.hero {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.hero-mark {
    width: clamp(64px, 16vw, 96px);
    height: clamp(64px, 16vw, 96px);
    border-radius: clamp(16px, 4vw, 24px);
    flex-shrink: 0;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

.hero h1 {
    font-size: clamp(26px, 6.4vw, 40px);
    text-wrap: balance;
    font-weight: 800;
    color: var(--text-header);
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.hero .sub {
    font-size: clamp(14px, 3.4vw, 16px);
    color: var(--text-muted);
    margin-top: 4px;
}

.lede {
    font-size: clamp(15px, 3.6vw, 17px);
    text-wrap: pretty;
    color: var(--text-normal);
    max-width: 62ch;
    margin-bottom: 26px;
}

/* --------------------------------------------
   CALL TO ACTION + STATS
   -------------------------------------------- */
.actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
    background: var(--blurple);
    color: #fff;
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.32);
}
.btn-primary:hover {
    background: #4752c4;
    transform: translateY(-2px);
    box-shadow: 0 9px 26px rgba(88, 101, 242, 0.45);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-normal);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
}

.stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 46px;
}
.stat-num {
    font-size: clamp(18px, 4.4vw, 22px);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-header);
}
.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 700;
}

/* --------------------------------------------
   SECTIONS
   -------------------------------------------- */
h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 800;
    color: var(--text-muted);
    margin: 0 0 16px;
}

section { margin-bottom: 46px; }

/* --------------------------------------------
   FEATURE CARDS
   -------------------------------------------- */
.features {
    display: grid;
    /* 300px min gives a clean 2x2 at full width instead of an
       awkward row of three with one card stranded underneath. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.feature {
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 20px;
}
.feature h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-header);
    margin-bottom: 6px;
}
.feature p {
    font-size: 13.5px;
    color: var(--text-muted);
}
.feature .ico {
    font-size: 18px;
    color: var(--blurple-soft);
    margin-bottom: 10px;
    display: block;
}

/* --------------------------------------------
   COMMAND TABLES
   -------------------------------------------- */
.cmd-group { margin-bottom: 26px; }

.cmd-group h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-header);
    margin-bottom: 10px;
}

/* Wide content scrolls inside its own box rather than
   pushing the whole page sideways on a phone. */
.cmd-scroll {
    overflow-x: auto;
    /* Stops a swipe inside the table from scrolling the whole page once
       it hits the end. */
    overscroll-behavior-x: contain;
    border-radius: 10px;
}
.cmd-scroll:focus-visible {
    outline: 2px solid var(--blurple-soft);
    outline-offset: 2px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13.5px;
    min-width: 460px;
}

th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--divider);
    white-space: nowrap;
}

td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
}
tr:last-child td { border-bottom: none; }

td.cmd {
    white-space: nowrap;
    width: 1%;
    font-family: 'Consolas', 'SF Mono', 'Menlo', monospace;
    color: var(--blurple-soft);
    font-weight: 600;
}
td.desc { color: var(--text-muted); }

/* --------------------------------------------
   FOOTER
   -------------------------------------------- */
footer {
    border-top: 1px solid var(--divider);
    padding-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.95;   /* room for the padded links to breathe */
}
footer a {
    color: var(--blurple-soft);
    text-decoration: none;
    /* Inline links in prose were only 17px tall. inline-block lets the
       vertical padding actually grow the hit area. */
    display: inline-block;
    padding: 4px 2px;
    margin: -4px -2px;
}
footer a:hover { text-decoration: underline; }

/* --------------------------------------------
   RESPONSIVE
   Most of the scaling is handled by clamp() above, so these breakpoints
   only deal with things that need to actually change shape.
   -------------------------------------------- */

/* Tablets and small laptops - stats can still sit in a row */
@media (max-width: 900px) {
    .features { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* Phones - stack the buttons full width so they're easy to hit */
@media (max-width: 600px) {
    .hero { gap: 16px; }
    .btn { width: 100%; justify-content: center; }
    .features { grid-template-columns: 1fr; }
    .stats { gap: 18px; padding: 16px 18px; }
    table { min-width: 380px; }
}

/* Narrow phones (iPhone SE and similar, 320-380px) */
@media (max-width: 380px) {
    .stats { flex-direction: column; gap: 14px; }
    th, td { padding: 9px 12px; }
    table { min-width: 320px; font-size: 12.5px; }
}

/* Phone in landscape - very little vertical room, so claw some back */
@media (max-height: 480px) and (orientation: landscape) {
    .page { padding-top: 20px; padding-bottom: 32px; }
    .back { margin-bottom: 20px; }
    section { margin-bottom: 30px; }
}

/* Very wide screens - keep the measure readable rather than stretching */
@media (min-width: 1400px) {
    .page { max-width: 960px; }
}

/* --------------------------------------------
   ACCESSIBILITY
   -------------------------------------------- */
.skip-link {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--blurple);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* The browser default ring barely shows on this background.
   :focus-visible so it only appears for keyboard use, not on click. */
.btn:focus-visible,
.back:focus-visible,
.skip-link:focus-visible,
footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Someone who asked for less motion shouldn't get a
   moving star field behind their reading. */
@media (prefers-reduced-motion: reduce) {
    #spaceCanvas { display: none; }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}