/* Load's site — the structure of Tare's (direction B · The surfaces), in Load's
   language: a white page with cold-slate cards, 12px corners, one warm accent,
   and headings in the condensed display face the apps set their numbers in.
   Four flat pages, one column, no JavaScript. */

.wrap { max-width: 720px; margin: 0 auto;
        padding: var(--load-space-xxl) var(--load-space-m) var(--load-space-xxxl); }

/* --- Navigation ------------------------------------------------------------ */
nav { display: flex; flex-wrap: wrap; gap: var(--load-space-xs) var(--load-space-l);
      align-items: center; padding-bottom: var(--load-space-xl); }
nav a { color: var(--load-ink-muted); text-decoration: none; font: var(--load-body-s); }
nav a:hover { color: var(--load-ink); }
nav a[aria-current="page"] { color: var(--load-ink); font-weight: 600; }

/* The lockup: the mark beside `LOAD` in Barlow Semi Condensed 800, uppercase,
   tracking −1% — the wordmark DESIGN.md specifies, at nav size. Inline SVG
   rather than an <img>, so the glyph takes --load-accent and the bar takes
   --load-ink and both follow the theme. */
nav .mark { display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
            color: var(--load-ink); font: 800 24px/24px var(--load-font-display);
            letter-spacing: -0.01em; text-transform: uppercase; }
.mark-glyph { display: block; flex: none; }

/* --- Hero -------------------------------------------------------------------
   A raised slate card, the way every card in the app sits on its white page. */
.hero { display: flex; align-items: center; gap: var(--load-space-xxl);
        background: var(--load-surface-raised); border: 1px solid var(--load-border);
        border-radius: var(--load-radius-card);
        padding: var(--load-space-xxl) var(--load-space-xl); margin-bottom: var(--load-space-m); }
.hero-text { flex: 1; min-width: 0; }
.hero-glyph { flex: none; }
/* The mark leaves the hero on a phone rather than shrinking beside the
   lockup two rows above it. */
@media (max-width: 640px) { .hero { display: block; padding: var(--load-space-xl) var(--load-space-l); }
                            .hero-glyph { display: none; } }

h1 { font: 800 clamp(32px, 6vw, 44px)/1.05 var(--load-font-display);
     letter-spacing: -0.01em; margin: 0 0 var(--load-space-s); }
.lede { font: var(--load-body-l); color: var(--load-ink-muted); margin: 0; }

/* The landing page's h1 is the wordmark itself, so it takes the wordmark's
   case and weight at the size the door screen draws it. */
h1.wordmark { font: 800 clamp(56px, 12vw, 76px)/0.95 var(--load-font-display);
              text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: var(--load-space-xs); }
.subtitle { font: 600 20px/26px var(--load-font-display); color: var(--load-ink);
            margin: 0 0 var(--load-space-m); }

.updated { font: var(--load-caption); color: var(--load-ink-muted);
           text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--load-space-xs); }

/* --- Sections ------------------------------------------------------------- */
h2 { font: var(--load-heading-m); margin: 0 0 var(--load-space-xs); }
.section { background: var(--load-surface-raised); border: 1px solid var(--load-border);
           border-radius: var(--load-radius-card); padding: var(--load-space-l);
           margin-bottom: var(--load-space-s); }
p, li { font: var(--load-body-m); margin: 0 0 var(--load-space-xs); }
.section p:last-child, .section li:last-child, .section ul:last-child { margin-bottom: 0; }
ul { padding-left: 1.2em; margin: 0 0 var(--load-space-xs); }
strong { font-weight: 600; }

/* **A tinted section, not a red one.** The delete page's two consequences are
   things a reader must see before acting, which is not an error. Critical is
   for the destructive button in the app; the wash carries the emphasis and the
   words carry the meaning — Tare's rule, kept. */
.section.critical { background: var(--load-accent-wash); border-color: transparent; }

.steps { margin: 0 0 var(--load-space-xs); padding-left: 1.4em; }
.steps li { margin-bottom: var(--load-space-xs); }

/* --- Landing: screenshots -------------------------------------------------
   The store panels as they are — headline, device and all — so the site and
   the listing show the same four pictures. 660px files, shown at up to 330:
   always at least 2x. bin/make-shots regenerates them. */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--load-space-s);
         margin: var(--load-space-xl) 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.shots li { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: var(--load-radius-card);
             border: 1px solid var(--load-border); background: #0b1b2e; }

/* --- Landing: features ----------------------------------------------------
   Six short cards, named as the store screenshots are, so the site and the
   listing say the same thing in the same words. */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--load-space-s);
            margin-bottom: var(--load-space-xl); }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }
.features .section { margin-bottom: 0; }

/* --- Landing: free and Pro ------------------------------------------------ */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--load-space-s);
         margin-bottom: var(--load-space-s); }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }
.plans .section { margin-bottom: 0; }
.plan-pro h2 { color: var(--load-premium); }

.state { margin-top: var(--load-space-l); background: var(--load-surface-sunken);
         border-radius: var(--load-radius-card); padding: var(--load-space-m) var(--load-space-l);
         color: var(--load-ink-muted); font: var(--load-body-s); }

/* --- Footer --------------------------------------------------------------- */
footer { max-width: 720px; margin: 0 auto;
         padding: 0 var(--load-space-m) var(--load-space-huge);
         color: var(--load-ink-muted); font: var(--load-body-s);
         display: flex; flex-wrap: wrap; gap: var(--load-space-xs) var(--load-space-m); }
footer a { color: var(--load-ink-muted); }

/* --- Skip link: the only keyboard affordance four pages of prose need. ---- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--load-space-m); top: var(--load-space-s); z-index: 2;
  background: var(--load-surface-raised); color: var(--load-ink);
  padding: var(--load-space-xs) var(--load-space-m);
  border: 1px solid var(--load-border); border-radius: var(--load-radius-field); }

a:focus-visible { outline: 2px solid var(--load-accent); outline-offset: 2px; border-radius: 2px; }