/* Fraunces and Inter, served from this site (latin + latin-ext). Source: Google Fonts, SIL Open Font Licence. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #fcfbf8;
  --paper-2: #f5f2ec;
  --ink: #1b1a17;
  --ink-2: #3e3b35;
  --muted: #6b675e;
  --line: #e2ddd2;
  --card: #ffffff;
  --accent: #b5542a;
  --accent-ink: #ffffff;
  --live: #1f6f4a;
  --live-bg: #e1f1e8;
  --soon: #6b675e;
  --soon-bg: #ece8df;
  --max: 70rem;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(27, 26, 23, .04), 0 12px 32px -16px rgba(27, 26, 23, .18);
  /* The hero panel and the project cards share this stronger shadow so both
     read as the same kind of raised surface - a deliberate "floating panel"
     family, not just a card with a shadow. --shadow-hover escalates further
     on card hover only. */
  --shadow-float: 0 2px 4px rgba(27, 26, 23, .05), 0 18px 36px -16px rgba(27, 26, 23, .22);
  --shadow-hover: 0 2px 4px rgba(27, 26, 23, .05), 0 22px 44px -18px rgba(27, 26, 23, .28);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15140f;
    --paper-2: #1b1a14;
    --ink: #f0ece3;
    --ink-2: #d5d0c4;
    --muted: #a8a293;
    --line: #2d2b23;
    --card: #1f1d17;
    --accent: #e08a5e;
    --accent-ink: #15140f;
    --live: #8fd3ad;
    --live-bg: #1c3427;
    --soon: #c3bcad;
    --soon-bg: #2a281f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .6);
    --shadow-float: 0 2px 4px rgba(0, 0, 0, .32), 0 18px 36px -16px rgba(0, 0, 0, .62);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 22px 44px -18px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  /* The corner watermark (body::after) sits partly past the right edge on
     purpose; clip it so wide screens can't scroll sideways to it. */
  overflow-x: clip;
  margin: 0;
  font-family: var(--sans);
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: break-word; /* long web addresses wrap on very narrow screens */
  /* No overflow-x: hidden here: with html already clipping, hidden makes the
     body its own scroll box and the page grows a second scrollbar. */
  -webkit-font-smoothing: antialiased;
}
/* A faint coffee-ring watermark, mostly cropped off the page's own bottom
   corner - anchored to the page edge (not the centred content column) so
   it reads as the page bleeding off, not a logo floating in whitespace.
   z-index: -1 keeps it behind the footer text; hidden on phones, where
   the page is too narrow for it to read as anything but clutter. */
body::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4.5rem;
  bottom: -4.5rem;
  width: 15rem;
  height: 15rem;
  background: url("/assets/idle-ideas-mark.webp") center / contain no-repeat;
  opacity: .09;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  body::after { opacity: .12; }
}
@media (max-width: 48rem) {
  body::after { display: none; }
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .5rem 1rem;
}
.skip:focus { left: 1rem; z-index: 10; }

.site-header,
main,
.site-footer {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.wordmark.small { font-size: 1.1rem; }
.mark { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.brand-mark { display: block; width: 3.5rem; height: 3.5rem; border-radius: 22%; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.wordmark.small .brand-mark { width: 2.75rem; height: 2.75rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }
.site-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
}
.site-nav a:hover { color: var(--ink); }
.social-link { display: inline-flex; align-items: center; }
.social-link svg { width: 1.3rem; height: 1.3rem; }
/* The Menu button and the header's Register button only exist on phones
   (see the 40rem block); on wider screens the links sit in the header. */
/* .site-header prefix so these beat the later .button rule. */
.site-header .nav-toggle, .site-header .header-register { display: none; }

/* Hero */
/* A framed panel, not copy floating on the page background - this is the
   one deliberate nod to the bold, contained hero cards on sites like
   Realmac and Panic, done in our own paper/accent tones rather than
   their dark navy or starfield. The glow is a corner spotlight, not a
   new colour: it's the accent token at low opacity. */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: .5rem;
  padding: 3.5rem 3rem 3.75rem;
  background: linear-gradient(165deg, var(--card), color-mix(in srgb, var(--paper-2) 55%, var(--card)) 65%);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-float);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -14rem -10rem auto auto;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  pointer-events: none;
}
/* Both sit above the corner glow, which is position:absolute with no
   stacking context of its own to hold it behind in-flow content. */
.hero-top, .hero .hero-actions { position: relative; z-index: 1; }
/* space-between puts the ring's right edge on the same line as the nav
   above it and the cards below it. */
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: nowrap;
}
.hero-copy { flex: 1 1 28rem; min-width: 0; max-width: 50rem; }
.hero .hero-media { flex: 0 0 auto; }
/* The coffee-ring mark is sized in rem, so browser zoom and a larger text
   setting grow and shrink it in step with the headline beside it. 16rem is
   about three-quarters of the eyebrow + headline + lede block at the default
   size. aspect-ratio keeps the 760x732 ring round whichever side is set.
   The 32vw cap only bites once zoom has narrowed the layout below about
   50rem: from there the ring holds its physical size instead of squeezing
   the headline into a sliver, so zooming in never makes it smaller. */
.hero .hero-media img { display: block; height: min(16rem, 32vw); width: auto; aspect-ratio: 760 / 732; }
/* In dark mode the dark-brown lettering disappears into the page, so the
   ring sits on a paper-coloured disc, like a stain on a coaster. The
   ellipse is fitted to the ring's inside edge (centre 46.6% 49.9% of the
   image): solid right up to the brown all the way round, and gone before
   the ring's outside edge. */
@media (prefers-color-scheme: dark) {
  .hero .hero-media img {
    background: radial-gradient(ellipse 44.2% 45.6% at 46.6% 49.9%, #ebe3d3 97%, transparent 100%);
  }
}
.hero .hero-actions { margin-top: .25rem; }
/* The ring stays beside the words down to a portrait phone-width layout.
   Browser zoom narrows the layout in CSS pixels, so an earlier stack point
   made the ring shrink as people zoomed in; a zoomed laptop screen is still
   landscape, so it keeps the ring beside the words until the layout is very
   narrow. Stacked, it lines up on the left with the words below it at
   max(8rem, 32vw): 8rem on a phone (a modest size that grows with a larger
   text setting), and never smaller than it was beside the words just before
   it stacked, so zooming in never shrinks it. No screen-height cap: on a
   zoomed landscape screen that made it tiny next to very large words. */
@media (max-width: 56rem) {
  .hero-top { gap: 1.75rem; }
}
@media (max-width: 40rem) and (orientation: portrait), (max-width: 30rem) {
  .hero-top { flex-wrap: wrap; gap: 1.5rem; }
  .hero .hero-media { order: -1; flex-basis: 100%; justify-content: flex-start; }
  .hero .hero-media img { height: max(8rem, 32vw); width: auto; }
}
.eyebrow {
  margin: 0 0 1.1rem;
  text-wrap: balance;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.hero h1 em {
  display: block; /* its own balanced line group, so no word is left alone */
  font-style: italic;
  color: var(--ink-2);
}
.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.button {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}
.button.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -7px color-mix(in srgb, var(--accent) 70%, transparent); }
.button.ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.button.ghost:hover { border-color: var(--muted); }

/* Section heads */
.section-head { margin-bottom: 1.75rem; max-width: 40rem; }
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 .5rem;
}
.section-head p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* Projects */
.projects { padding: 3rem 0 5rem; }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
/* On a wide monitor, three across reads as a proper wall of products
   instead of a long two-up list. The subgrid row-alignment rule below
   already works per-row regardless of column count. */
@media (min-width: 80rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  position: relative;
  /* Same material as the hero panel (a soft card-to-paper gradient plus
     --shadow-float), so the grid reads as more floating panels, not a
     different, flatter kind of box. */
  background: linear-gradient(165deg, var(--card), color-mix(in srgb, var(--paper-2) 45%, var(--card)) 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  box-shadow: var(--shadow-float);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 4px;
  width: 100%;
  background: var(--tint);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card p { margin: 0; }
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.glyph {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint-soft);
  color: var(--tint);
}
@media (prefers-color-scheme: dark) {
  .glyph { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 55%, white); }
}
.glyph svg { width: 1.4rem; height: 1.4rem; }
.card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.15;
}
.who {
  font-size: .85rem;
  font-weight: 600;
  color: var(--tint);
  letter-spacing: .01em;
}
@media (prefers-color-scheme: dark) {
  .who { color: color-mix(in srgb, var(--tint) 55%, white); }
}
/* Who it's for, summary, key points and fine print sit together in one
   block, spaced by its own gap, so the gaps inside it stay even whatever the
   card beside it holds. */
.card-body { display: flex; flex-direction: column; gap: .55rem; }
.card-body > p:not(.who):not(.fine) { color: var(--ink-2); font-size: .98rem; }
.fine { font-size: .85rem; color: var(--muted); }
.card-points { list-style: none; margin: .2rem 0 .1rem; padding: 0; display: grid; gap: .35rem; align-content: start; }
.card-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.card-points li::before {
  content: ""; flex: none; width: .42rem; height: .42rem; margin-top: .58rem;
  border-radius: 50%; background: var(--tint);
}
@media (prefers-color-scheme: dark) { .card-points li::before { background: color-mix(in srgb, var(--tint) 55%, white); } }
.card .card-price {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
/* Two cards side by side share their rows (subgrid), so the names, price
   rules and links line up across the pair even when one card's price wraps
   onto two lines. Each card has the same five parts: top row, name, body,
   price, link. The body is one row, so when one card's lines wrap more than
   its neighbour's the spare room gathers above the price rule instead of
   opening gaps between its lines. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48rem) {
    .cards > .card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: .55rem; }
    .cards > .card .card-body { align-self: start; }
    .cards > .card .card-price { margin-top: 0; }
    .cards > .card .card-link { justify-self: start; align-self: start; }
    .cards > .card .card-actions { align-self: start; }
  }
}

.status {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .32rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status.live { color: var(--live); background: var(--live-bg); }
.status.soon { color: var(--soon); background: var(--soon-bg); }

.card-link {
  margin-top: .5rem;
  align-self: flex-start;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--tint);
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease;
}
@media (prefers-color-scheme: dark) {
  .card-link { color: color-mix(in srgb, var(--tint) 55%, white); }
}
.card-link:hover { border-color: currentColor; }
/* For an app that's nearly ready: "Register your interest" beside "Read
   about…", in the one row a lone card link takes, so the card keeps its
   five rows and still lines up with its neighbours. */
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .5rem; }
.card-actions .card-link { margin-top: 0; }
.card-register { padding: .55rem 1.05rem; font-size: .88rem; }
.card-link.muted { color: var(--muted); cursor: default; }
.card-link.muted:hover { border-color: transparent; }

/* Principles */
.principles {
  padding: 4.5rem 0;
  border-top: 1px solid var(--line);
}
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
}
/* Three principles: all three in a row, or one under another - never two
   and a lonely third. */
@media (min-width: 48rem) {
  .principle-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
.principle-list li { display: flex; flex-direction: column; gap: .4rem; }
.num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .05em;
}
.principle-list h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -.01em;
}
.principle-list p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* About */
/* A small ornamental break before "Why Idle Ideas exists" - the one place
   on the page the coffee-ring mark repeats itself, in miniature, instead of
   a plain rule. Every other section keeps its plain border-top; one accent
   like this reads as a considered moment, doing it everywhere would just be
   noise on top of the footer's own watermark. */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem 0 0;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1 1 auto;
  max-width: 16rem;
  height: 1px;
  background: var(--line);
}
.section-divider img { flex: none; width: 1.9rem; height: 1.9rem; opacity: .6; }

.about {
  padding: 3.5rem 0 5rem;
  display: grid;
  gap: 1rem 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}
.about .section-head { margin: 0; }
.about-body p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.about-body p + p {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
}
.about-body p:first-child { color: var(--ink); }

/* Home: how to get an app, common questions */
.home-band { padding: 4.5rem 0; border-top: 1px solid var(--line); --tint: var(--accent); }
.home-band .steps { margin-bottom: 1.75rem; }
.home-band .note {
  margin: 0;
  max-width: 46rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .95rem;
}
.home-band .note strong { color: var(--ink); }
.home-band.split {
  display: grid;
  gap: 1rem 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}
.home-band.split .section-head { margin: 0; }
.home-band.split .faq { max-width: none; }
/* Below about a small-laptop width the heading column would be too narrow
   for "Common questions", so the questions sit under their heading. */
@media (max-width: 56rem) {
  .home-band.split { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  color: var(--muted);
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.footer-note { margin: .5rem 0 0; }
.site-footer h2 {
  margin: 0 0 .6rem;
  font-family: inherit;
  line-height: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer nav { display: flex; flex-direction: column; gap: .35rem; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.soon-link { opacity: .6; }
.copyright { margin: 2rem 0 0; font-size: .85rem; }

/* 404 page */
.not-found {
  position: relative;
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  /* Not align-items: center - that sizes each child to its own
     shrink-to-fit width instead of the container's, which let the
     button row and the lede overflow a narrow screen instead of
     wrapping. Each child centres itself instead (text-align, margin:
     auto, justify-content), the same way the hero does. */
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
}
.not-found::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 32rem;
  height: 32rem;
  transform: translate(-50%, -50%);
  background: url("/assets/idle-ideas-mark.webp") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .not-found::before { opacity: .1; }
}
.not-found .eyebrow { text-align: center; }
.not-found h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.not-found .lede { max-width: 30rem; margin: 0 auto 2rem; }
.not-found .hero-actions { justify-content: center; }
@media (max-width: 40rem) {
  .not-found { min-height: 46vh; padding: 3rem 1.25rem; }
  .not-found::before { width: 18rem; height: 18rem; }
}

@media (max-width: 48rem) {
  .about { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  /* Phone header: logo, then (on app pages) a Register button, then a Menu
     button; the links drop down under them as a list of 44px-tall rows. With
     scripts off the button is hidden and the links just show. */
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem .5rem; padding: .85rem 0; }
  .site-header.has-nav-toggle .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding: .4rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .site-header .header-register { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; font-size: .92rem; }
  .site-nav { grid-column: 1 / -1; flex-direction: column; gap: 0; margin: .15rem 0 0; border-top: 1px solid var(--line); }
  .has-nav-toggle .site-nav { display: none; }
  .has-nav-toggle.nav-open .site-nav { display: flex; }
  .site-nav a { display: flex; align-items: center; min-height: 2.75rem; padding: .3rem .25rem; margin: 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav .social-link::after { content: "Facebook"; margin-left: .6rem; font-weight: 600; }
  .hero { padding: 2rem 1.5rem 2.25rem; margin-top: 0; border-radius: var(--radius); }
  .hero .lede { font-size: 1.05rem; margin-bottom: 1.6rem; }
  .about-body p:first-child { font-size: 1.2rem; }
  h2 { font-size: 1.75rem; }
  .projects { padding-bottom: 3rem; }
  .principles, .about, .home-band { padding: 2.75rem 0; }
  .card { padding: 1.4rem 1.25rem 1.3rem; }
}


/* ---------- Product pages ---------- */
/* Help sheets: a thumbnail of the first page beside what it covers. */
.sheets { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.sheet { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.sheet img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sheet h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sheet p { margin: .4rem 0 .9rem; color: var(--ink-2); font-size: .95rem; }
.sheet .fine { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 26rem) { .sheet { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; } }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .25rem 0 0;
  font-size: .9rem;
  color: var(--muted);
  text-decoration: none;
}
.crumb:hover { color: var(--ink); }

.product-hero {
  padding: 3.5rem 0 3rem;
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.product-hero .eyebrow { color: var(--tint); }
@media (prefers-color-scheme: dark) { .product-hero .eyebrow { color: color-mix(in srgb, var(--tint) 55%, white); } }
.product-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
/* The italic second half wraps as its own balanced block, so neither half
   leaves a single word stranded on a line. */
.product-hero h1 em { display: block; }
.product-hero .lede { margin-bottom: 1.6rem; }
/* A page can give its buttons their own colour with --tint-button and --tint-button-ink
   (Tools Down: fluoro yellow with black text). Otherwise they use the tint. */
.button.tint { background: var(--tint-button, var(--tint)); color: var(--tint-button-ink, #fff); }
@media (prefers-color-scheme: dark) { .button.tint { background: var(--tint-button, color-mix(in srgb, var(--tint) 70%, white)); color: var(--tint-button-ink, #15140f); } }
.button.tint:hover { filter: brightness(1.08); }
.button.disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: default; }
.button.disabled:hover { transform: none; filter: none; }
.hero-note { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }

.hero-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--tint);
}
.hero-panel h2 {
  font-size: .78rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}
.hero-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hero-panel li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.hero-panel li::before {
  content: "";
  flex: none;
  width: .5rem; height: .5rem;
  margin-top: .5rem;
  border-radius: 50%;
  background: var(--tint);
}

.band { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.band.tinted {
  border-top: 0;
  border-radius: var(--radius);
  background: var(--tint-soft);
  padding: 2.5rem;
  margin: 1rem 0 2.5rem;
}
@media (prefers-color-scheme: dark) { .band.tinted { background: color-mix(in srgb, var(--tint) 16%, var(--card)); } }

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.features li { display: flex; flex-direction: column; gap: .35rem; }
.features .glyph { margin-bottom: .4rem; }
.features h3 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.005em; }
.features p { margin: 0; color: var(--ink-2); font-size: .95rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
/* Steps sit one under another, then two across, then all in one row. The
   counts are placed on purpose so no step is ever left on a row by itself:
   an odd last step on the two-across layout takes the full width, and on
   wide screens (a 12-column grid) four go in a row, three or six go in
   rows of three, and five go three then two. */
@media (min-width: 36rem) and (max-width: 59.99rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .steps li { grid-column: span 3; }
  .steps li:first-child:nth-last-child(2),
  .steps li:first-child:nth-last-child(2) ~ li { grid-column: span 6; }
  .steps li:first-child:nth-last-child(3),
  .steps li:first-child:nth-last-child(3) ~ li,
  .steps li:first-child:nth-last-child(5),
  .steps li:first-child:nth-last-child(5) ~ li,
  .steps li:first-child:nth-last-child(6),
  .steps li:first-child:nth-last-child(6) ~ li { grid-column: span 4; }
  .steps li:first-child:nth-last-child(5) ~ li:nth-child(n+4) { grid-column: span 6; }
}
.steps li { display: flex; flex-direction: column; gap: .35rem; }
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tint);
  letter-spacing: .05em;
}
@media (prefers-color-scheme: dark) { .steps li::before { color: color-mix(in srgb, var(--tint) 55%, white); } }
.steps h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: .95rem; }

.two-col { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.plain li { display: flex; gap: .6rem; color: var(--ink-2); font-size: .98rem; }
.plain li::before { content: "—"; color: var(--muted); flex: none; }
.plain.ticks li::before { content: "✓"; color: var(--live); font-weight: 700; }
.plain.crosses li::before { content: "✕"; color: var(--muted); font-weight: 700; }

.price-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.price {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.price h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 600; color: var(--muted); }
.price .amount { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
/* The small note after an amount ("price to be announced") keeps its own
   line height when it wraps, so it sits snugly under the big words instead
   of on a tall empty line. */
.price .amount:has(small) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; }
.price .amount small { font-family: var(--sans); font-size: .95rem; line-height: 1.4; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.price .amount + .amount { margin-top: .35rem; }
.price p { margin: .6rem 0 0; color: var(--ink-2); font-size: .95rem; }

.install { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.install h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.install ol { margin: 0; padding-left: 1.2rem; color: var(--ink-2); font-size: .95rem; display: grid; gap: .3rem; }

.faq { display: grid; gap: 1rem; max-width: 46rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: .9rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .7rem 0 0; color: var(--ink-2); font-size: .95rem; }

.cta {
  margin: 1rem 0 3rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
@media (prefers-color-scheme: dark) { .cta { background: var(--card); color: var(--ink); border: 1px solid var(--line); } }
.cta h2 { margin: 0 0 .3rem; font-size: 1.7rem; text-wrap: balance; }
.cta p { margin: 0; opacity: .8; }
.cta p a { color: inherit; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }

.disclaimer { font-size: .85rem; color: var(--muted); max-width: 46rem; }

@media (max-width: 52rem) {
  .product-hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .band.tinted { padding: 1.5rem; }
  .cta { padding: 1.75rem; }
}


/* ---------- Brand row, device frames, glance, screens ---------- */
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1.25rem; }
.brand-row img { width: 3rem; height: 3rem; border-radius: 12px; box-shadow: var(--shadow); }
.brand-row .brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--tint); }
@media (prefers-color-scheme: dark) { .brand-row .brand-name { color: color-mix(in srgb, var(--tint) 55%, white); } }

.device { position: relative; margin: 0; }
.device img { display: block; width: 100%; height: auto; }
.device.phone {
  width: min(100%, 17rem);
  margin-inline: auto;
  padding: .55rem;
  border-radius: 2.4rem;
  background: #111;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.device.phone img, .device.phone video { border-radius: 1.9rem; }
/* A small camera dot in the bezel, clear of the screen: the screenshots start
   right at the app's header, so a full-size island would hide its text. */
.device.phone::after {
  content: ""; position: absolute; top: .16rem; left: 50%; transform: translateX(-50%);
  width: .26rem; height: .26rem; border-radius: 999px; background: #2a2a2a;
}
.device.browser {
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.35);
}
.device.browser::before {
  content: ""; display: block; height: 1.6rem;
  background:
    radial-gradient(circle at .8rem 50%, #e5655a 0 .28rem, transparent .34rem),
    radial-gradient(circle at 1.7rem 50%, #e9b64c 0 .28rem, transparent .34rem),
    radial-gradient(circle at 2.6rem 50%, #57c46b 0 .28rem, transparent .34rem),
    var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.hero-media { display: flex; justify-content: center; }
.product-hero.has-phone { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
/* The coffee-ring mark, peeking out from behind each product's hero image -
   the same motif as the footer and the 404 page, so it turns up once near
   the top of every product page too. Tucked behind the device, top-left,
   so most of it hides behind the screenshot; only ever a corner of it
   competes with the actual product image. Scoped to .product-hero, not the
   bare .hero-media, so the home page's own coffee-ring logo doesn't get a
   second one behind it. */
.product-hero .hero-media { position: relative; }
.product-hero .hero-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2.75rem;
  left: -1rem;
  width: 13rem;
  height: 13rem;
  background: url("/assets/idle-ideas-mark.webp") center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .product-hero .hero-media::before { opacity: .22; }
}
@media (max-width: 44rem) {
  .product-hero .hero-media::before { display: none; }
}

.glance { list-style: none; margin: 0 0 1rem; padding: 1.25rem 1.5rem; display: grid; gap: .6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 4px solid var(--tint); }
.glance li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.glance li::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .55rem; border-radius: 50%; background: var(--tint); }

.screens { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); align-items: start; }
.screens figure { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.screens figcaption { text-align: center; font-size: .9rem; color: var(--muted); }
.screens.phones { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.screens.phones .device.phone { width: min(100%, 15rem); }
/* Four phones fit in one row from about 60rem; below that, auto-fit would
   put three in a row and leave the fourth on its own, so use two by two. */
@media (min-width: 36rem) and (max-width: 59.9rem) {
  .screens.phones:has(> figure:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sized and lifted like a real app icon (Panic, App Store listings) rather
   than a small favicon-scale glyph in the corner - the single biggest
   move toward reading as a wall of proper products. */
.card .mark-img {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 14px;
  display: block;
  box-shadow: 0 5px 12px -4px color-mix(in srgb, var(--ink) 45%, transparent);
}

/* A phone mockup is narrow enough to stay beside the words on a portrait
   tablet; it only drops underneath them on a phone-sized screen. */
@media (max-width: 52rem) {
  .product-hero.has-phone { gap: 2rem 1.75rem; align-items: start; }
  .product-hero.has-phone .hero-media { padding-top: .5rem; }
  .device.phone { width: min(100%, 15rem); }
}
@media (max-width: 44rem) {
  .product-hero.has-phone { grid-template-columns: 1fr; }
  .product-hero.has-phone .hero-media { padding-top: 0; }
  .product-hero .device.phone { width: min(100%, 14rem); }
  .product-hero .device.browser { max-width: 36rem; margin-inline: auto; }
}

/* A page title that sits in a section head (the privacy notice). */
.section-head h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.section-head .eyebrow { margin-bottom: .8rem; }


/* ---------- Lightbox + interest form ---------- */
.zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.zoom img { display: block; width: 100%; height: auto; border-radius: inherit; }
.device.phone .zoom img { border-radius: 1.9rem; }
dialog.lightbox, dialog.interest {
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%;
  inset: 0; margin: 0; display: none; place-items: center;
}
dialog.lightbox[open], dialog.interest[open] { display: grid; }
dialog::backdrop { background: rgba(10, 9, 6, .82); backdrop-filter: blur(4px); }
dialog.lightbox img { max-width: min(96vw, 1400px); max-height: 92vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); cursor: zoom-out; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.28); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
@media (max-width: 640px) {
  .lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
  .lightbox-prev { left: .4rem; }
  .lightbox-next { right: .4rem; }
  /* Keep a tall phone screenshot clear of the close button, so it never
     sits on top of a close button that is part of the screenshot. */
  dialog.lightbox img { max-height: calc(100dvh - 8rem); }
}

dialog.interest .interest-form, dialog.interest .interest-done {
  position: relative; width: min(92vw, 30rem); background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
  display: grid; gap: .9rem;
}
dialog.interest .lightbox-close { background: var(--paper-2); color: var(--ink); top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
dialog.interest h2 { margin: 0; font-size: 1.6rem; }
.interest-lede { margin: 0; color: var(--muted); }
dialog.interest label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
dialog.interest label .opt { font-weight: 400; color: var(--muted); }
dialog.interest input { font: inherit; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
dialog.interest input:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.interest-error { margin: 0; color: #a13a2b; font-size: .9rem; }
.interest-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.interest-fine { margin: 0; font-size: .8rem; color: var(--muted); }
.button.tint[disabled] { opacity: .7; cursor: wait; }

dialog.interest [hidden] { display: none !important; }

/* ---------- Product video (silent walkthrough) ---------- */
.device video { display: block; width: 100%; height: auto; background: var(--paper-2); }
.walkthrough { display: grid; gap: 1.5rem; align-items: start; }
.walkthrough .device.browser { max-width: 64rem; margin-inline: auto; width: 100%; }
.walkthrough-note { text-align: center; font-size: .9rem; color: var(--muted); margin: 0; }
.walkthrough-note a { color: var(--tint); }
@media (prefers-color-scheme: dark) { .walkthrough-note a { color: color-mix(in srgb, var(--tint) 55%, white); } }


/* ---------- Tablet frame ---------- */
/* A dark bezel like the phone's, with a small camera dot in the bezel: on
   the short top edge in portrait, on the left edge in landscape. */
.device.tablet {
  width: min(100%, 24rem);
  margin-inline: auto;
  padding: .75rem;
  border-radius: 1.6rem;
  background: #111;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.device.tablet.landscape { width: min(100%, 36rem); }
.device.tablet img, .device.tablet video, .device.tablet .zoom img { border-radius: .85rem; }
.device.tablet::after {
  content: ""; position: absolute; top: .215rem; left: 50%; transform: translateX(-50%);
  width: .32rem; height: .32rem; border-radius: 50%; background: #2c2c2c;
}
.device.tablet.landscape::after { top: 50%; left: .215rem; transform: translateY(-50%); }
/* Tablet screenshots in "A look inside", two across when there's room. */
.screens.tablets { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.screens.tablets .device.tablet { width: min(100%, 22rem); }
.screens.tablets .device.tablet.landscape { width: min(100%, 34rem); }

/* ---------- Devices: desktop, tablet and phone together ---------- */
/* On a phone-width column the three sit in a swipeable row, each at a size
   you can actually see (and tap to enlarge); the next one peeks in from the
   right so it's clear there's more. Once the column is wide enough they
   overlap as one picture: the desktop at the back, the tablet to its right,
   the phone in front on the left. The layout follows the width of the
   .devices block itself (a container query), so it works in the hero or in
   a full-width section alike. Sizes are in cqw (percent of that width) and
   the bezels scale with each device, so the group keeps its shape. */
.devices {
  container: devices / inline-size;
  margin: 0 auto;
  max-width: 62rem;
}
.devices-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* The row reaches into the page gutter so the frames' shadows aren't cut
     off at its edges; the frames themselves still line up with the text. */
  margin-inline: -1.25rem;
  padding: .5rem 1.25rem 2.25rem;
  scroll-padding-inline: 1.25rem;
}
.devices-row > .device { flex: none; margin: 0; scroll-snap-align: center; }
/* On a phone, the phone comes first (site.js follows this order in the lightbox). */
.devices-row > .device.phone { order: -1; }
.devices-row > .device.browser { width: 88%; }
.devices-row > .device.tablet { width: 76%; }
.devices-row > .device.tablet.landscape { width: 88%; }
.devices-row > .device.phone { width: 60%; }
.devices-note { margin: .25rem 0 0; text-align: center; font-size: .9rem; color: var(--muted); text-wrap: balance; }
/* The group's images keep square top corners under the browser bar. */
.devices .device.browser .zoom, .devices .device.browser img { border-radius: 0; }

@container devices (min-width: 40rem) {
  .devices-row {
    /* Medium width (a portrait tablet): bigger tablet and phone. */
    --dw: 72cqw;                    /* desktop width */
    --tw: 31cqw; --tx: 69cqw; --ty: 10cqw;  /* tablet width, left, top */
    --pw: 18.5cqw; --px: 3cqw; --py: 19cqw; /* phone width, left, top */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0 0 1.5rem;
  }
  .devices-row > .device { grid-area: 1 / 1; justify-self: start; align-self: start; order: 0; }
  .devices-row > .device.browser { width: var(--dw); z-index: 1; }
  .devices-row > .device.tablet {
    width: var(--tw); margin: var(--ty) 0 0 var(--tx); z-index: 2;
    padding: calc(var(--tw) * .035); border-radius: calc(var(--tw) * .075);
  }
  .devices-row > .device.tablet img,
  .devices-row > .device.tablet .zoom { border-radius: calc(var(--tw) * .04); }
  .devices-row > .device.tablet::after {
    --dot: calc(var(--tw) * .012 + 2px);
    width: var(--dot); height: var(--dot); top: calc((var(--tw) * .035 - var(--dot)) / 2);
  }
  .devices-row > .device.tablet.landscape { --tw: 40cqw; --tx: 60cqw; --ty: 18cqw; width: var(--tw); }
  .devices-row > .device.tablet.landscape::after { top: 50%; left: calc((var(--tw) * .035 - var(--dot)) / 2); }
  .devices-row > .device.phone {
    width: var(--pw); margin: var(--py) 0 0 var(--px); z-index: 3;
    padding: calc(var(--pw) * .032); border-radius: calc(var(--pw) * .14);
  }
  .devices-row > .device.phone img,
  .devices-row > .device.phone .zoom { border-radius: calc(var(--pw) * .112); }
  .devices-row > .device.phone::after {
    --dot: calc(var(--pw) * .016 + 1px);
    width: var(--dot); height: var(--dot); top: calc((var(--pw) * .032 - var(--dot)) / 2);
  }
}
@container devices (min-width: 56rem) {
  /* Wide (a laptop or desktop): the desktop leads. */
  .devices-row {
    --dw: 76cqw;
    --tw: 27cqw; --tx: 73cqw; --ty: 15cqw;
    --pw: 14.5cqw; --px: 4cqw; --py: 25cqw;
  }
  .devices-row > .device.tablet.landscape { --tw: 36cqw; --tx: 64cqw; --ty: 24cqw; }
}

/* ---------- Narrated tour video ---------- */
/* A 16:9 player with the browser's own controls and captions. The older
   silent walkthrough (.walkthrough) is separate and unchanged. */
.tour { display: grid; gap: 1rem; max-width: 60rem; margin-inline: auto; }
.tour-video {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d0c09;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.35);
}
.tour-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d0c09; }
/* Captions big enough to read on a phone, and not huge on a desktop. */
.tour-video video::cue {
  font-family: var(--sans);
  font-size: clamp(.85rem, 2vw, 1.3rem);
  line-height: 1.35;
  color: #fff;
  background: rgba(0, 0, 0, .78);
}
.tour-note { margin: 0 auto; max-width: 46rem; text-align: center; font-size: .9rem; color: var(--muted); text-wrap: balance; }
.tour-note a { color: var(--tint); }
@media (prefers-color-scheme: dark) { .tour-note a { color: color-mix(in srgb, var(--tint) 55%, white); } }

/* Tools Down: phone row */
/* A phone-only take on the devices group: three phones side by side. In a
   narrow column they sit in a swipeable snap row at a readable size, the next
   one peeking in; once there's room they stand in a row, the middle one
   raised a little. Follows the width of .phone-trio itself. */
.phone-trio { container: phonetrio / inline-size; margin: 0 auto; max-width: 56rem; }
.phone-trio-row {
  display: flex; align-items: flex-start; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
  margin-inline: -1.25rem; padding: .5rem 1.25rem 2.25rem; scroll-padding-inline: 1.25rem;
}
.phone-trio-row > .device.phone { flex: none; width: min(68%, 15rem); margin: 0; scroll-snap-align: center; }
@container phonetrio (min-width: 36rem) {
  .phone-trio-row {
    justify-content: center; gap: clamp(1rem, 5cqw, 3.5rem);
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 2rem 0 1.5rem;
  }
  .phone-trio-row > .device.phone { width: min(29%, 16rem); }
  .phone-trio-row > .device.phone:nth-child(2) { margin-top: -2rem; }
}

/* Shared legal pages (/terms, /privacy): the per-app facts table and a wider column. */
.legal .faq { max-width: 50rem; }
.legal .faq details ul { margin: .7rem 0 0; padding-left: 1.2rem; color: var(--ink-2); font-size: .95rem; display: grid; gap: .4rem; }
.legal h2 { font-size: 1.35rem; margin: 2.25rem 0 .6rem; }
.legal h2 + p { margin: 0 0 1rem; color: var(--muted); max-width: 50rem; }
.legal .note { margin-top: 2rem; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 2rem; }
.legal-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
.legal-table th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { font-weight: 600; white-space: nowrap; }
.legal-table tr { scroll-margin-top: 5rem; }
.legal-table tr:target td { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Featured cards (Mixed Paws, Ground Value): a bold border in the app's own
   colour and a soft halo, so they catch the eye at the top of the grid. */
.card.featured {
  border: 2px solid var(--tint);
  box-shadow: 0 0 0 5px var(--tint-soft), var(--shadow-float);
}
.card.featured::before { height: 7px; }
.card.featured:hover { box-shadow: 0 0 0 5px var(--tint-soft), var(--shadow-hover); }
@media (prefers-color-scheme: dark) {
  .card.featured { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tint) 28%, transparent), var(--shadow-float); }
}

/* ---------- Groups (home page + group pages) ---------- */
.projects.free { padding-bottom: 1.5rem; }
.groups-section { padding-top: 2.5rem; }
.groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.group-card { padding: 0; }
.group-card > a { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.7rem 1.6rem 1.5rem; text-decoration: none; color: inherit; border-radius: inherit; }
.group-card > a:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
.group-marks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .35rem; }
.group-marks img { width: 2.5rem; height: 2.5rem; border-radius: 11px; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink) 45%, transparent); }
.group-card h3 { margin: 0; }
.group-pitch { color: var(--ink-2); font-size: .98rem; }
.group-apps { font-size: .9rem; color: var(--muted); }
.group-more { color: var(--ink-2); }
.group-card .card-link { margin-top: auto; padding-top: .6rem; align-self: flex-start; }
.group-page { padding-top: 1rem; }
.group-page .section-head { max-width: 46rem; margin-bottom: 2.25rem; }
.group-page .section-head p:last-child { margin-top: .25rem; }
.group-note { margin: 1.75rem 0 0; max-width: 46rem; color: var(--muted); font-size: .95rem; }
.other-groups .section-head p a { color: inherit; }

/* ---------- Whole-card links + the hero's Open / Register button ---------- */
/* The app's name is the real link; its ::after stretches over the whole card
   so a tap anywhere opens the app's page. Nothing else in the card is a link. */
.card-cover { color: inherit; text-decoration: none; }
.card-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card-cover:focus-visible) { outline: 3px solid var(--tint); outline-offset: 3px; }
.card .card-price { margin-top: auto; }
.brand-row .hero-open { margin-left: auto; }
@media (max-width: 44rem) {
  .brand-row .hero-open { margin-left: 0; flex-basis: 100%; justify-content: center; }
}

/* ---------- Singleton Tonight: the venue form (singletontonight.html #venues) ---------- */
.venue-grid { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .venue-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.venue-grid h3 { margin-top: 0; }
.venue-form { display: grid; gap: 1rem; max-width: 38rem; }
.venue-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 0; }
.venue-form legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .5rem; }
.venue-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.venue-form .opt { font-weight: 400; color: var(--muted); }
.venue-form input[type="text"], .venue-form input[type="email"], .venue-form input[type="tel"], .venue-form textarea {
  font: inherit; font-size: 1rem; width: 100%; box-sizing: border-box; min-height: 2.9rem;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.venue-form textarea { min-height: 9rem; resize: vertical; line-height: 1.45; }
.venue-form input:focus, .venue-form textarea:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
.venue-kinds { display: flex; flex-wrap: wrap; gap: .5rem; }
.venue-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.venue-kinds label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; cursor: pointer; background: var(--paper); }
.venue-kinds input:checked + label { border-color: var(--tint); background: var(--tint-soft); color: var(--tint); }
.venue-kinds input:focus-visible + label { outline: 2px solid var(--tint); outline-offset: 2px; }
.venue-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.venue-hint { margin: -.5rem 0 0; font-size: .85rem; color: var(--muted); }
.venue-form .venue-tick { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; cursor: pointer; }
.venue-tick input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--tint); }
.venue-tick .opt { display: block; margin-top: .15rem; }
.venue-status { margin: 0; color: #a13a2b; font-weight: 600; }
.venue-fine { margin: 0; font-size: .85rem; color: var(--muted); }
.venue-done { padding: 1.25rem 1.4rem; border-radius: 14px; background: var(--tint-soft); }
.venue-done h3 { margin: 0 0 .4rem; }
.venue-done p { margin: 0; }
.venue-form [hidden], .venue-done[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) { .venue-status { color: #f08f7e; } }
@media (prefers-color-scheme: dark) {
  .venue-kinds input:checked + label { background: color-mix(in srgb, var(--tint) 22%, transparent); color: color-mix(in srgb, var(--tint) 55%, white); border-color: color-mix(in srgb, var(--tint) 55%, white); }
  .venue-done { background: color-mix(in srgb, var(--tint) 22%, transparent); }
}