/* ============================================================
   SGELA — SITE.  The same execution at page scale.

   Layers on tokens.css + components.css + surface.css, and reuses
   surface.css's primitives directly: .ap-stack / .ap-card for the
   stacks, .ap-dot for the pills, .ap-circ for the round controls.
   Only the things a page needs and a phone screen does not are
   defined here.

   THE TRANSLATION
     a screen is one colour      ->  a SECTION is one colour, full bleed
     one oversized screen title  ->  one oversized SECTION title
     cards stack and overlap     ->  same, in a column narrow enough
                                     that the overlap still reads
   ============================================================ */

/* ─────────── Full-bleed section ───────────
   Edge to edge. The colour is the section, not a card inside it. */
.sv-sec { padding-block: var(--space-6);
          scroll-margin-top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); }
.sv-sec--indigo { background: var(--indigo); color: var(--on-indigo); }
.sv-sec--spark  { background: var(--spark);  color: var(--on-spark); }
.sv-sec--growth { background: var(--growth); color: var(--on-growth); }
.sv-sec--ink    { background: var(--ink);    color: var(--on-ink); }
.sv-sec--warm   { background: var(--paper-warm); }

/* On a filled section every foreground is the section's own, so the
   muted roles must stop being muted — grey on indigo is 2.1:1. */
.sv-sec--indigo .sg-caption, .sv-sec--spark .sg-caption,
.sv-sec--growth .sg-caption, .sv-sec--ink .sg-caption,
.sv-sec--indigo .sg-label,   .sv-sec--spark .sg-label,
.sv-sec--growth .sg-label,   .sv-sec--ink .sg-label,
.sv-sec--indigo .sv-kicker,  .sv-sec--spark .sv-kicker,
.sv-sec--growth .sv-kicker,  .sv-sec--ink .sv-kicker { color: inherit; }
/* Inside a filled CARD on a plain section, the card's own foreground wins. */
.ap-card .sv-kicker, .ap-card .sg-caption { color: inherit; }

.sv-wrap   { max-width: 1060px; margin: 0 auto; padding-inline: var(--space-2); }
/* The stage needs more room than a text column: the callouts live in the
   margin beside the mockups, and at 1060 they sat a third of the way over
   a phone screen, covering the thing they point at. */
.sv-wrap--wide { max-width: 1240px; }
.sv-narrow { max-width: 760px; }
.sv-col    { display: flex; flex-direction: column; gap: var(--space-3); }
.sv-col-2  { display: flex; flex-direction: column; gap: var(--space-2); }
.sv-row    { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ─────────── The section title ───────────
   The single biggest typographic move on the page. Varela Round
   ships one weight, so the size IS the emphasis. */
.sv-mega { font-family: var(--font-display); font-size: var(--text-mega);
           line-height: var(--lh-tight); letter-spacing: var(--track-caps);
           text-transform: uppercase; margin: 0; text-wrap: balance; }
 /* --ink-soft, not --grey: grey clears 4.5:1 on --paper (4.84) but
    only reaches 4.34:1 on --paper-warm, and half these sections are
    warm. Quiet comes from size and tracking, not from a lighter ink. */
.sv-kicker { font-family: var(--font-body); font-weight: 600;
             font-size: var(--text-label); letter-spacing: var(--track-caps);
             text-transform: uppercase; display: block; color: var(--ink-soft); }

/* ─────────── Stacks at page width ───────────
   The overlap only reads in a narrow-ish column; past about 760px
   a stacked card becomes a letterbox and the effect dies. */
.sv-stack { max-width: 760px; }
.sv-stack .ap-card { padding: var(--space-3); }
.sv-stack .ap-card--collapsed { padding-bottom: calc(var(--stack-peek) - var(--space-1)); }

/* Side by side once there is room — the stack is for phones and
   for the single-column sections. */
.sv-grid  { display: grid; gap: var(--space-2);
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sv-grid .ap-card { padding: var(--space-3); }
.sv-grid .ap-card + .ap-card { margin-top: 0; }

/* ─────────── Nav ─────────── */
.sv-nav-shell { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
                padding: var(--space-2) var(--space-2) 0; }
.sv-nav { max-width: 1060px; margin: 0 auto; display: flex; align-items: center;
          gap: var(--space-3); background: var(--paper);
          border: var(--stroke); border-radius: var(--radius-pill);
          padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
          box-shadow: var(--drop-sm); }
.sv-nav__brand { margin-right: auto; display: flex; }
.sv-nav__brand img { height: 24px; width: auto; display: block; }
.sv-nav__links { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.sv-nav__links a { font-size: var(--text-ui); color: var(--ink); text-decoration: none;
                   font-weight: 500; }
.sv-nav__links a:hover { text-decoration: underline; text-decoration-thickness: 2px;
                         text-underline-offset: 4px; }
@media (max-width: 820px) { .sv-nav__links { display: none; } }

/* ─────────── Brand chip ───────────
   sgela-logo.svg is drawn in --indigo and white, so on an indigo
   or ink ground half of it disappears. On any filled section the
   logo sits in a paper chip rather than directly on the colour.
   Retires the day there is a single-colour logo variant. */
.sv-brandchip { display: inline-flex; align-items: center; background: var(--paper);
                border: var(--stroke); border-radius: var(--radius-pill);
                padding: var(--space-1) var(--space-2); box-shadow: var(--drop-sm); }
.sv-brandchip img { height: 22px; width: auto; display: block; }

/* ─────────── Hero ─────────── */
.sv-hero { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .sv-hero { grid-template-columns: 1.1fr .9fr; } }

/* The photograph slot. Marked, never faked — see DESIGN.md. */
.sv-photo { aspect-ratio: 4/5; border-radius: var(--radius-xl);
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: var(--space-1); text-align: center;
            padding: var(--space-3);
            background:
              repeating-linear-gradient(45deg, var(--paper-warm) 0 14px,
                                        var(--paper-hatch) 14px 28px); }

/* ─────────── Pull quote, on a filled section ─────────── */
.sv-quote { border-left: 4px solid currentColor; padding-left: var(--space-2);
            font-size: var(--text-lead); line-height: var(--lh-body); margin: 0;
            font-family: var(--font-display); letter-spacing: var(--track-heading); }

/* ─────────── Footer ─────────── */
.sv-foot { border-top: var(--stroke); background: var(--paper);
           padding-block: var(--space-4);
           padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.sv-foot .sv-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sv-foot img { height: 26px; width: auto; }
.sv-foot .sg-caption { margin-right: auto; }

/* ============================================================
   STAGE, MOCKUPS AND CALLOUTS
   Art direction taken from the reference the founders chose: a
   focal visual with small labelled pills floating around its
   edges, and short callout cards scattered around a centred
   statement. The pills are our own .ap-dot — the reference tints
   each one a different pastel; ours carry the dot instead, which
   is the same job done in our palette.

   The focal visual is the APP ITSELF, rendered live in a phone
   frame rather than shipped as a screenshot: crisper at any
   density, nothing to re-export when a screen changes, and no
   image weight on a page our audience pays for by the megabyte.
   ============================================================ */

/* ─────────── Phone frame ───────────
   One definition, used by the platform gallery and the site. */
.sv-phone { width: 280px; flex: none; border: 9px solid var(--ink-fixed);
            border-radius: 44px; overflow: hidden; background: var(--paper);
            box-shadow: var(--drop-lg); position: relative; }
.sv-phone--tall { height: 580px; }
.sv-phone__notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
                   width: 100px; height: 23px; border-radius: var(--radius-pill);
                   background: var(--ink-fixed); z-index: 4; }
.sv-phone__view { height: 100%; overflow: hidden; }
.sv-phone .ap { padding-top: var(--space-4); min-height: 100%; }

/* ─────────── Stage ───────────
   Holds the mockups and, at desktop width, the callouts pinned
   around them. Below 900px the callouts stop floating and flow
   as an ordinary row — a pill pinned over a phone on a 360px
   screen covers the thing it is pointing at. */
.sv-stage { position: relative; display: flex; justify-content: center;
            align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.sv-stage__phones { display: flex; gap: var(--space-2); justify-content: center;
                    flex-wrap: wrap; }
.sv-stage__phones .sv-phone:nth-child(2) { margin-top: var(--space-4); }

.sv-callouts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
               margin-top: var(--space-2); }
.sv-callout { box-shadow: var(--drop-sm); border: var(--stroke-thin);
              border-color: var(--ink-fixed); }

@media (min-width: 900px) {
  .sv-stage { min-height: 620px; }
  .sv-callouts { display: contents; }
  .sv-callout { position: absolute; margin: 0; z-index: 3; }
  /* Staggered, never stacked in a straight column, and each one only
     just touching the frame it belongs to. */
  .sv-callout--1 { top: 7%;  left: 5%; }
  .sv-callout--2 { top: 19%; right: 5%; }
  .sv-callout--3 { top: 41%; left: 3%; }
  .sv-callout--4 { top: 55%; right: 4%; }
  .sv-callout--5 { top: 76%; left: 9%; }
  .sv-callout--6 { top: 86%; right: 7%; }
}

/* ─────────── Scattered callout cards ───────────
   The reference pairs a small photo with one line of text. The
   photo slot is marked until the library lands — see DESIGN.md. */
.sv-scatter { display: grid; gap: var(--space-2); justify-items: center;
              grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sv-note { display: flex; align-items: center; gap: var(--space-2);
           background: var(--paper); color: var(--ink);
           border: var(--stroke-thin); border-color: var(--ink-fixed);
           border-radius: var(--radius-lg); padding: 10px var(--space-2) 10px 10px;
           box-shadow: var(--drop-sm); max-width: 380px; }
.sv-note__thumb { width: 52px; height: 52px; flex: none; border-radius: var(--radius-md);
                  background: repeating-linear-gradient(45deg,
                    var(--paper-warm) 0 7px, var(--paper-hatch) 7px 14px); }
.sv-note__t { font-size: var(--text-caption); line-height: 1.4; margin: 0; }
@media (min-width: 1000px) {
  .sv-scatter > :nth-child(3n+1) { transform: translateY(-14px); }
  .sv-scatter > :nth-child(3n)   { transform: translateY(14px); }
}

/* ─────────── Stat row ───────────
   Number above, label below, nothing boxed. */
.sv-stats { display: grid; gap: var(--space-3);
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            text-align: center; }
.sv-stats b { font-family: var(--font-display); font-size: var(--text-stat);
              line-height: var(--lh-tight); letter-spacing: var(--track-stat);
              display: block; font-weight: 400; }

/* ─────────── Audience tabs ─────────── */
.sv-tabrow { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sv-tabrow button { font-family: var(--font-body); font-weight: 600;
                    font-size: var(--text-label); letter-spacing: var(--track-caps);
                    text-transform: uppercase; cursor: pointer;
                    background: var(--paper); color: var(--ink);
                    border: var(--stroke-thin); border-color: var(--ink-fixed);
                    border-radius: var(--radius-pill); padding: 9px var(--space-2);
                    appearance: none; }
.sv-tabrow button[aria-selected="true"] { background: var(--ink-fixed); color: var(--paper); }
.sv-tabrow button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sv-panel[hidden] { display: none; }

/* ─────────── Pair grid (use cases) ─────────── */
.sv-pairs { display: grid; gap: var(--space-3);
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sv-pair { border-top: var(--stroke); padding-top: var(--space-2); }