/* Studio Mo
   Plain CSS. No framework, no build step, nothing to keep up to date.

   The studio itself is deliberately colourless: near-black and white, carried
   by type and spacing. Each app page overrides --accent with its own colour, so
   a new app never has to fit the studio's palette. */

:root {
    /* A warm off-white rather than pure #fff — softer on the eye, and it makes
       the app icons sit on the page instead of floating on a void. */
    --bg:      #fbfbf9;
    --raised:  #f3f3f0;
    --line:    #e5e4df;
    --ink:     #14141a;          /* Studio Mo ink */
    --muted:   #6a6d76;
    --accent:  #14141a;          /* neutral by default; app pages override */

    /* Studio Mo brand. Two ambers on purpose: the bright one is built for dark
       grounds and goes muddy on this off-white page, so light surfaces use the
       deep one. --brand-ink and --brand-paper are for reversed panels. */
    --amber:       #E8A200;
    --amber-light: #FFBC14;
    --brand-ink:   #14141a;
    --brand-paper: #F2F2F0;
    --measure: 34rem;
    --radius:  12px;
}

/* Deliberately light in both system appearances. The studio has a light tone,
   and a site that flips to near-black would be a different brand. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.7 ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* ---------- header ---------- */

/* Centred, not baseline-aligned. The brand is an inline-flex box whose first
   child is the lockup image, so its baseline resolves to the bottom of that
   image — below the rule under the MO — and the nav sat visibly low against it. */
.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2.25rem 0;
}

/* The mark stays --ink on every page. App pages override --accent with their
   own colour, and a studio mark that changed colour per product would read as
   the product's mark rather than the studio's. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 660;
    letter-spacing: -0.025em;
    font-size: clamp(1.3rem, 2.4vw, 1.55rem);
}
/* The MO lockup. It carries its own brand colours rather than currentColor, so
   it stays the studio's mark on app pages that override --accent. Roughly
   1.78:1, so it takes a width and lets height follow. */
.brand .mark { width: 2.5em; height: auto; flex: none; }
.brand:hover { color: var(--ink); }

.head nav { display: flex; gap: 1.6rem; font-size: 1rem; color: var(--muted); }
.head nav a:hover { color: var(--ink); }

/* ---------- type ---------- */

h1 {
    font-size: clamp(2rem, 5.5vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.032em;
    font-weight: 660;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.0625rem;
    font-weight: 640;
    letter-spacing: 0.01em;
    margin: 3.5rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

h3 { font-size: 1rem; font-weight: 620; margin: 2rem 0 0.35rem; }

p { max-width: var(--measure); margin: 0 0 1.1rem; }
.lede { font-size: 1.1875rem; color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
small { font-size: 0.875rem; color: var(--muted); }

.intro { padding: 2rem 0 1rem; }

/* ---------- app list ----------
   A list, not a card grid: it reads as a considered shelf rather than a
   storefront, and it still looks right with one item or with ten. */

.apps { list-style: none; padding: 0; margin: 0; }

.apps li { border-bottom: 1px solid var(--line); }
.apps li:first-child { border-top: 1px solid var(--line); }

.apps a,
.apps .row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.35rem 0.25rem;
    transition: padding-left .18s ease;
}
.apps a:hover { padding-left: 0.75rem; color: inherit; }

.apps img {
    width: 3rem; height: 3rem;
    border-radius: 0.65rem;
    flex: none;
    display: block;
}

.apps .slot {
    width: 3rem; height: 3rem;
    border-radius: 0.65rem;
    border: 1px dashed var(--line);
    flex: none;
}

.apps .text { flex: 1 1 auto; min-width: 0; }
/* Spans, so they need explicit block display to stack. */
.apps .name { display: block; font-weight: 620; letter-spacing: -0.01em; }
.apps .desc { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }

.apps .meta {
    flex: none;
    font-size: 0.8125rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.apps li.soon .row { opacity: 0.5; }

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.75rem 0 0.75rem; }

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.7rem 1.35rem;
    border-radius: 100px;
    border: 1px solid var(--accent);
    transition: opacity .18s ease;
}
.btn:hover { opacity: 0.86; color: var(--bg); }

.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--accent); color: var(--ink); opacity: 1; }

/* ---------- app page hero ---------- */

.appicon { width: 5rem; height: 5rem; border-radius: 1.1rem; display: block; margin-bottom: 1.5rem; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.shot {
    width: 100%;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 2rem 0 0;
    background: var(--raised);
}

/* ---------- screenshot strip ----------
   Scrolls sideways rather than stacking, so five Mac screenshots don't turn the
   page into a mile of scrolling. The negative margin lets it bleed to the edges
   of the viewport on small screens while the text stays within its measure. */

.shots {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 1.75rem -1.5rem 0;
    padding: 0 1.5rem 1.25rem;
}

.shots img {
    flex: none;
    height: auto;
    display: block;
    scroll-snap-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--raised);
}

.shots.mac img   { width: min(86vw, 32rem); }
.shots.phone img { width: min(42vw, 11rem); border-radius: 1.4rem; }

/* ---------- feature list ---------- */

.feats { list-style: none; padding: 0; margin: 0; }
.feats li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); max-width: var(--measure); }
.feats li:last-child { border-bottom: 0; }
.feats strong { font-weight: 620; }
.feats span { display: block; color: var(--muted); font-size: 0.9375rem; }

/* ---------- documents ---------- */

.doc ul { max-width: var(--measure); padding-left: 1.2rem; }
.doc li { margin-bottom: 0.5rem; }
.doc code {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.9375rem;
}

/* ---------- footer ---------- */

.foot {
    margin-top: 5rem;
    padding: 2rem 0 3.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted);
}
.foot nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 34rem) {
    .head { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1.75rem 0; }
    .apps .meta { display: none; }
}