/* ==========================================================================
   Almost an Idea — v2, built 1:1 from the design mockup.

   Every illustration, icon and photo here is a TEMPORARY placeholder drawn in
   SVG or CSS. Search for "PLACEHOLDER" to find each swap point.
   Light-only by design: the palette is warm paper and does not invert.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg:            #faf7f1;
  --card:          #fffdf9;
  --featured:      #eaeee1;
  --ethos:         #efe7e0;
  --panel-soft:    #f1efe4;  /* nested panel, lighter than --featured */

  /* Ink */
  --ink:           #2f4029;
  --ink-body:      #5c6152;
  --muted:         #85897a;

  /* Accents */
  --green:         #56693c;
  --green-dark:    #46572f;
  --green-pale:    #dde5cb;
  --tile-rose:     #f9dfda;
  --tile-sage:     #dfe9da;
  --tile-butter:   #fbebc8;
  --link-rose:     #c4634a;
  --link-sage:     #5a7247;
  --link-amber:    #c2853a;

  /* Lines & shadow */
  --line:          rgba(47, 64, 41, .14);
  --line-soft:     rgba(47, 64, 41, .08);
  --shadow-card:   0 2px 10px rgba(47, 64, 41, .05);
  --shadow-lift:   0 8px 26px rgba(47, 64, 41, .09);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --page: 1480px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--green); }

h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.12; font-weight: 650; letter-spacing: -.015em; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 64px; }

/* ============================================================== hero band == */
/* The photo bleeds off the top and right of the page and fades into the cream
   on the left, with the header and hero copy sitting on top of it. */

.hero-band { position: relative; }
.hero-band > .wrap { position: relative; z-index: 1; }

/* The hero photograph. It bleeds off the top and right and is masked so it
   fades out on the left, leaving the headline on near-plain paper. */
.hero-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 68%;
  overflow: hidden;
  /* Anchored to the top so none of the plain wall above the branch is cropped
     away — that strip is what the nav sits on. The wall tone continues above
     the photo, so the crop can never expose bare page. */
  background-color: #f4eee4;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 46%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 46%);
}
/* The nav clears the branch on its own, so this is only a whisper of lift over
   the dappled wall — not the heavy scrim it needs to be if the leaves rise. */
.hero-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(250,247,241,.35), rgba(250,247,241,0));
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  padding: 26px 0 46px;
}
.hero-copy { grid-column: 1; }
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.35rem);
  margin-bottom: 22px;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  color: var(--ink-body);
  margin: 0 0 34px;
}

/* ================================================================= header == */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 0 46px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
/* The mark is very slightly wider than tall — size on height, let width follow,
   or the stone squashes. */
.brand-mark { width: auto; height: 52px; flex: none; }
.brand-name { font-size: 1.65rem; font-weight: 650; letter-spacing: -.01em; }

.site-nav { display: flex; gap: 46px; }
.site-nav a {
  text-decoration: none;
  color: var(--ink-body);
  font-size: 1.06rem;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--green); }
/* The page you're on, marked with aria-current — same treatment as hover, so
   the nav has one visual language for "this one". */
.site-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--green); }

/* ================================================================ buttons == */

.cta-row { display: flex; flex-wrap: wrap; gap: 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background-color .12s ease;
  /* The suggestion pages use <button> for these, so inherit the page's type
     rather than the browser's control font. */
  font-family: inherit;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { transition: transform .12s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--green); color: #fbfaf4; }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
/* A quieter size, for pairs of secondary links that shouldn't shout as loudly
   as a page's main call to action. */
.btn-sm { padding: 11px 20px; font-size: .95rem; gap: 10px; }

/* ============================================================== showcase === */

/* The hero band ends flush against this row; a little air keeps the cards from
   looking stuck to the bottom of the photograph. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.62fr);
  gap: 26px;
  align-items: stretch;
  padding: 22px 0 26px;
}

.featured {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: var(--featured);
  border-radius: var(--r-xl);
  padding: 30px;
}
/* The Sock Studio app icon. It already carries its own rounded corners and
   cream ground, so it reads as an icon tile against the sage panel.
   Fixed width, matched by .ethos-logo, so the two panels' icons and text line up
   vertically at every viewport — fr columns in panels of different widths never
   would. */
.featured-art {
  display: block;
  width: 116px;
  height: auto;
}
.pill {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.featured h2 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin-bottom: 14px; }
.featured p { margin: 0 0 22px; font-size: 1.02rem; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .98rem;
  color: var(--ink-body);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.more:hover { color: var(--ink); }
.more svg { transition: transform .12s ease; }
.more:hover svg { transform: translateX(3px); }

.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.app-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* PLACEHOLDER — app icons; each tile holds one line drawing. */
.tile {
  width: 92px; height: 92px;
  border-radius: 20px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.tile svg { width: 52px; height: 52px; }
.tile.rose   { background: var(--tile-rose); }
.tile.sage   { background: var(--tile-sage); }
.tile.butter { background: var(--tile-butter); }

.app-card h3 { font-size: 1.32rem; margin-bottom: 10px; }
.app-card p { margin: 0 0 20px; font-size: .95rem; line-height: 1.5; }
.app-card .more { margin-top: auto; align-self: flex-start; font-size: .95rem; }
.app-card.rose   .more { color: var(--link-rose); }
.app-card.sage   .more { color: var(--link-sage); }
.app-card.butter .more { color: var(--link-amber); }

/* Beside the featured app: two invitations for ideas, not two products. They're
   outlined rather than filled so they can't be mistaken for shipped apps — the
   same dashed language the Apps page uses for a stage with nothing in it yet. */
.invite-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.invite {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.invite h3 { font-size: 1.3rem; margin-bottom: 10px; }
.invite p { margin: 0 0 22px; font-size: .95rem; line-height: 1.5; }
/* margin-top:auto pins the button to the bottom, so both cards' buttons line up
   however the copy above them wraps. */
.invite .btn { margin-top: auto; padding: 13px 24px; font-size: .98rem; }

/* ================================================================== ethos == */

.ethos {
  display: grid;
  grid-template-columns: 116px minmax(0, 1.25fr) minmax(0, 1.4fr);
  column-gap: 22px;
  row-gap: 20px;
  align-items: center;
  background: var(--ethos);
  border-radius: var(--r-xl);
  padding: 22px 30px;
  margin-bottom: 40px;
}
.ethos-art { display: block; height: auto; }
.ethos-logo { width: 116px; }
.ethos h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); margin-bottom: 12px; }
.ethos p { margin: 0; font-size: 1.02rem; line-height: 1.55; }

/* The three concepts, side by side on the right of the band. Deliberately
   card-less so the strip stays as quiet as the rest of the section. */
.build-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.build-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
/* PLACEHOLDER — concept icons. */
.build-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex: none;
}
.build-icon svg { width: 22px; height: 22px; }
.build-icon.sage   { background: var(--tile-sage); }
.build-icon.rose   { background: var(--tile-rose); }
.build-icon.butter { background: var(--tile-butter); }
.build-item h3 { font-size: .98rem; margin-bottom: 3px; }
.build-item p { font-size: .78rem; line-height: 1.4; color: var(--muted); }

/* ================================================================= footer == */

.site-footer { padding: 10px 0 34px; }

/* One centred row: the legal line, the two links, and the address written out.
   The wordmark, the mailing-list form and the other social links were all
   dropped by request. */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  font-size: .9rem;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; }


/* ========================================================= interior pages == */
/* Support and Privacy. No hero band: these are reading pages, so they get one
   centred column on plain paper and nothing else competing with the text. */

.page { max-width: 780px; margin: 0 auto; padding: 4px 0 72px; }

.crumb { font-size: .9rem; color: var(--muted); margin: 0 0 20px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

.page-title { font-size: clamp(2.2rem, 4vw, 3.1rem); margin-bottom: 18px; }
.page-sub { font-size: 1.12rem; margin: 0 0 10px; }
.updated { font-size: .9rem; color: var(--muted); margin: 0 0 32px; }

.callout {
  background: var(--featured);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 14px;
}
.callout p { margin: 0; font-size: 1.02rem; }
.callout strong { color: var(--ink); }

.prose h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* The FAQ is a plain disclosure list — the card treatment belongs to the app
   tiles on the home page, and repeating it here would out-shout the prose. */
.faq { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 17px 38px 17px 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
/* Chevron, rotated down when the answer is open. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { margin: 0 0 17px; }

/* ============================================================== apps page == */
/* The catalogue, grouped by stage. Wider than .page because it holds cards
   rather than prose, but narrower than the home page's full spread. */

.page-wide { max-width: 1100px; margin: 0 auto; padding: 4px 0 72px; }

.app-group { margin-bottom: 46px; }
/* The intro paragraph needs air under it before the first stage heading. */
.page-wide .page-sub { margin-bottom: 40px; }
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.group-head h2 { font-size: 1.45rem; }
.group-count { font-size: .85rem; color: var(--muted); }
.group-note { margin: 0 0 20px; font-size: .98rem; }

/* Two across at full width, one on narrow screens. Three would make each card
   too tight for an icon beside four lines of copy — and with one app in a
   group, a third of the row reads as a mistake rather than a card. */
/* min(420px, 100%) rather than a bare 420px: below that width the track would
   keep its minimum and push the page into a horizontal scroll. */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 22px; }

/* One app. The icon sits beside the copy rather than above it, so a group of
   one doesn't read as a lonely tile in a wide row. */
.app-entry {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 22px;
  transition: transform .14s ease, box-shadow .14s ease;
}
.app-entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.app-entry-art { display: block; width: 84px; height: auto; }
.app-entry h3 { font-size: 1.25rem; margin-bottom: 6px; }
.app-meta { margin: 0 0 10px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.app-entry p { margin: 0 0 16px; font-size: .95rem; line-height: 1.5; }

/* An empty stage still gets a box, so the three groups read as a shape the
   catalogue grows into rather than as sections that are missing. */
.group-empty {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-xl);
  padding: 30px 26px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}
.group-empty strong { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.group-empty p { margin: 0; }

@media (max-width: 560px) {
  .app-entry { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================== suggestion pages == */
/* Suggest an app / suggest a feature. The form composes an email in the
   reader's own mail client — nothing is posted anywhere, so there is no action
   on the <form> and no submit event; the two buttons do the work. */

.suggest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; margin-bottom: 4px; }
.field .optional { color: var(--muted); font-weight: 400; }
.field .hint { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
/* Feedback from the compose buttons. Always in the flow, so the layout doesn't
   jump when a message appears. */
.form-status { min-height: 1.4em; margin: 14px 0 0; font-size: .88rem; color: var(--ink-body); }

.side-note { background: var(--ethos); border-radius: var(--r-lg); padding: 22px 24px; }
.side-note h3 { font-size: 1.05rem; margin-bottom: 10px; }
.side-note p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.side-note ul { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.5; }
.side-note li { margin-bottom: 7px; }
.side-note li:last-child, .side-note p:last-child { margin-bottom: 0; }
/* A closing note after the list needs its own air — the list carries no bottom
   margin, so the two would otherwise run together. */
.side-note ul + p { margin-top: 14px; }

/* The sidebar is context, not instructions — below this it goes under the form
   rather than squeezing both into ribbons. */
@media (max-width: 1020px) {
  .suggest-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ============================================================ ideas board == */
/* Suggestions that arrived by email and were added to data/ideas.json by hand.
   Cards are smaller than the app entries on purpose: an idea is lighter than a
   shipped app, and the two shouldn't carry the same weight. */

.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 22px; }
.idea-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.idea-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.idea-card p { margin: 0 0 16px; font-size: .95rem; line-height: 1.5; }
/* margin-top:auto keeps the meta row on the bottom edge however long the
   summary runs, so a row of cards lines up. */
.idea-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
}
/* Each status carries its own three colours — fill, ink, and a solid dot for
   the filter chip. One class sets all three, so a badge and the chip that
   filters for it can never drift apart. Five distinct hues: amber, sage, clay,
   solid green for finished, grey for shelved. */
.st-thinking { --st-fill: var(--tile-butter); --st-ink: #8a6220;          --st-dot: #d9a53f; }
.st-queued   { --st-fill: var(--tile-sage);   --st-ink: var(--link-sage); --st-dot: #7d9463; }
.st-building { --st-fill: var(--tile-rose);   --st-ink: var(--link-rose); --st-dot: #c4634a; }
.st-built    { --st-fill: var(--green);       --st-ink: #fbfaf4;          --st-dot: var(--green); }
.st-not-now  { --st-fill: var(--line-soft);   --st-ink: var(--muted);     --st-dot: #a8ab9e; }

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--st-fill, var(--line-soft));
  color: var(--st-ink, var(--ink-body));
}

/* Filters. One button per group, sitting on the heading line, opening a menu
   that goes categories first and options second. A row of controls grew a new
   member every time the data did; this stays one button wide. */
.filter-set { margin-left: auto; }
.filter-menu { position: relative; }

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.filter-toggle:hover { border-color: var(--green); }
.filter-toggle.on { border-color: var(--green); }
.filter-toggle .badge {
  background: var(--green);
  color: #fbfaf4;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .74rem;
  font-weight: 700;
}
/* The chevron points down on the button and right on a category row; one glyph,
   rotated, so they can't fall out of step. */
.filter-toggle .chev { transform: rotate(90deg); color: var(--muted); }

.filter-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 264px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: 6px;
}
.filter-head {
  margin: 6px 12px 8px;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: .94rem;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.filter-row:hover:not(:disabled) { background: var(--bg); }
.filter-row:disabled { opacity: .4; cursor: default; }
.filter-row .val { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .88rem; }
.filter-row .n { margin-left: auto; color: var(--muted); font-size: .85em; }
.filter-row .chev { color: var(--muted); }
.filter-row[aria-checked="true"] { font-weight: 650; }
.filter-back { color: var(--ink-body); }
.filter-clear { color: var(--link-rose); }
.filter-sep { height: 1px; background: var(--line-soft); margin: 6px 6px; }
/* Tiny colour swatch, so a status reads the same here as it does on a badge. */
.filter-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--st-dot); flex: none; }

/* Belt and braces: several rows above are display:flex, which would otherwise
   beat the hidden attribute. */
[hidden] { display: none !important; }

@media (max-width: 560px) {
  /* The button drops under the heading rather than squeezing it. */
  .filter-set { margin-left: 0; width: 100%; }
  .filter-pop { left: 0; right: auto; min-width: 0; width: 100%; }
}

/* =============================================================== app page == */
/* An individual app: Sock Studio and whatever follows it. Built from the same
   parts as the rest of the site — .wrap, .site-header, .btn, .site-footer — so
   an app page reads as this studio's, not as a separate site. */

/* One column, capped: the copy would otherwise run the full width of the page
   and read as a ribbon. The two links sit under the availability line. */
.app-hero { max-width: 760px; padding: 4px 0 52px; }
/* The platform badge rides beside the name rather than above it, centred on it.
   Baseline alignment reads as "below" here: the pill is short, the title is
   3.5rem, so sharing a baseline drops the pill to the foot of the letters. */
.app-title { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
/* Both need the extra class to beat `.app-hero h1`, which sets a bottom margin
   further down the sheet. Left in place, that margin makes the h1's flex box
   taller than its text and centring drops the pill half a margin too low. */
.app-hero .app-title h1 { margin-bottom: 0; }
.app-hero .app-title .pill { margin-bottom: 0; }
.app-hero .cta-row { margin-top: 22px; }
.app-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); margin-bottom: 18px; }
/* The tagline and the availability note are one thought in two registers, so
   they sit close together rather than a full paragraph apart. */
.app-hero .tagline { font-size: clamp(1.05rem, 1.4vw, 1.24rem); margin: 0 0 8px; }
.avail { font-size: .9rem; color: var(--muted); margin: 0; }


/* A tinted ground holding pale cards, rather than a white card holding plain
   text — the panel is the backdrop here, and the features are the objects on
   it. Carried over from the first design, which had this the right way round.
   One tint for all of them: the sage/neutral split made the first panel look
   like a different kind of thing from the two beneath it. */
.panel {
  background: var(--panel-soft);
  border-radius: var(--r-lg);
  padding: 30px;
  margin-bottom: 26px;
}
.panel-intro { font-size: 1.02rem; margin: 0 0 24px; max-width: 54em; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.feature-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list li {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.feature-list h3 { font-size: .95rem; font-weight: 700; margin-bottom: 5px; }
.feature-list p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }

/* Screenshots, at the foot of the page. A scroll-snap track rather than a grid:
   there will be more of these than fit a row, and a phone shot is happier being
   swiped than shrunk. The arrows are an addition for mouse users — the track
   scrolls by touch, trackpad and keyboard without them. */
.carousel { margin-top: 42px; }
.carousel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.carousel-head h2 { font-size: 1.3rem; }
.carousel-nav { display: flex; gap: 8px; margin-left: auto; }
.carousel-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, opacity .12s ease;
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover:not(:disabled) { border-color: var(--green); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  /* Room for the focus ring and the cards' shadows, which a clipped overflow
     would otherwise shave off. */
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.carousel-track:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: var(--r-md); }
/* Grow to share the row when there is space, but never shrink below 210 — that
   floor is what makes the track overflow, and overflow is what makes it scroll
   on a narrow screen. */
.carousel-track figure { margin: 0; flex: 1 0 210px; scroll-snap-align: start; }
.carousel-track img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  display: block;
}
.carousel-track figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); text-align: center; }

/* Two panels side by side. Named for the app page, not for the ideas board's
   .idea-grid — they are different things and the near-identical name was a trap. */
.app-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.app-split .panel { margin-bottom: 0; }

.panel-title { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 22px; }
.panel-title h2 { font-size: 1.3rem; margin-bottom: 4px; }
.panel-title p { margin: 0; font-size: .95rem; }
.panel-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--green-pale); display: grid; place-items: center; }
.panel-icon svg { width: 22px; height: 22px; }

@media (max-width: 1020px) {
  .feature-list.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app-hero { padding-bottom: 34px; }
  .feature-list.cols-3, .feature-list.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 26px 22px; }
}

/* ============================================================ responsive === */

/* The mockup is 1450px wide and the ethos band and footer both assume that much
   room. Below roughly 1340 they crush: the concept columns fall to ~110px and
   their descriptions run six lines, and the footer squeezes the wordmark onto
   two. Both get a row of their own well before that. */
@media (max-width: 1250px) {
  /* Columns get too narrow for icon-beside-name — 52px of a ~150px column was
     going to the icon. Icon above the name instead; the three stay side by side
     on the right, as asked. */
  .build-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .build-list { padding-left: 20px; gap: 16px; }
}

/* Floor for keeping the concepts beside the copy. Below this the ethos heading
   can no longer hold one line and the columns turn to ribbons, so the three move
   to a full-width row of their own — still side by side, just underneath. */
@media (max-width: 1020px) {
  .ethos { grid-template-columns: 116px minmax(0, 1fr); }
  .build-list {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
}

@media (max-width: 1100px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .wrap { padding: 0 24px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
  /* Too narrow to lay type over the photograph and keep it readable, so the
     photo becomes a banner and the header + copy sit below it on plain paper. */
  .hero-band { padding-top: 240px; }
  .hero-photo {
    width: 100%;
    height: 240px;
    bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .hero-photo::after { height: 60px; }
  .app-cards, .invite-cards { grid-template-columns: minmax(0, 1fr); }
  .featured { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .featured-art { max-width: 220px; }
  .ethos { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 28px 24px; }
  .ethos .ethos-logo { width: 96px; }
  .build-list { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
  .footer-bottom { flex-wrap: wrap; gap: 20px; }
  .site-header { padding-bottom: 30px; }
  .site-nav { gap: 24px; }
  .brand-name { font-size: 1.3rem; }
}

@media (max-width: 560px) {
  /* Brand + nav no longer fit on one row — still true with two items: at 375
     the pair needs about 332px and the header has 327. */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0 28px;
  }
  .brand-mark { height: 42px; }
  .brand-name { font-size: 1.25rem; }
  .site-nav { gap: 26px; }
  .site-nav a { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}