/* The home page's own sections, on top of pages.css: the hero and its
   archive card, the screenshot stages, the feature cards (drawings built from
   the app's own artifacts, each one click from the real window), light and
   dark, the privacy points and the closer. */

/* ---------- Hero ---------- */
.hero { padding: 0 0 34px; --hero-top: 64px; }
/* The top bar sits inside the hero on this page; the copy starts --hero-top below it. */
.hero-grid { padding-top: var(--hero-top); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-grid > * { min-width: 0; }
.status {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 500; font-size: .88rem; color: var(--muted);
  margin-bottom: 22px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}
/* 700 is the top of Plex Sans's weight axis. */
h1.head {
  font-size: clamp(2.1rem, 7.4vw, 3.85rem);
  line-height: 1.03; letter-spacing: -.032em; font-weight: 700;
  margin: 0 0 20px; max-width: 15ch;
  overflow-wrap: break-word;
}
h1.head .keep { color: var(--accent); display: block; }
/* Chinese, Japanese and Korean: ch counts a Latin digit, so 15ch fits eight Han
   characters and the headline broke inside a word. An em measure, and breaks
   only at spaces and punctuation. Polish hyphenates "Outlooka" otherwise. */
h1.head:lang(zh), h1.head:lang(ja), h1.head:lang(ko) { max-width: 11em; word-break: keep-all; overflow-wrap: normal; }
h1.head:lang(pl) { hyphens: manual; }
h2 { font-weight: 700; font-size: 1.4rem; letter-spacing: -.018em; margin: 6px 0 0; }
.lede { font-size: clamp(1.06rem, 1.9vw, 1.22rem); color: var(--muted); margin: 0 0 30px; max-width: 46ch; }
.dl-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* ---------- Download picks: one card per store ----------
   Both ship as equals in the HTML, the Mac card already primary. The script at
   the end of the page promotes Windows on a PC (.is-primary) and quiets the Mac
   (.is-secondary); with no JS the page stands as written. The Windows card
   holds the official Microsoft Store badge, the button visual, stacked over its
   caption so the two cards share one compact height in the hero's column. */
.dl-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.dl-pick {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.dl-pick:hover { transform: translateY(-2px); border-color: var(--accent); }
.dl-pick-icon { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; }
.dl-pick-icon svg { width: 26px; height: 26px; fill: currentColor; }
.dl-pick-text { display: flex; flex-direction: column; min-width: 0; }
.dl-pick-main { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; line-height: 1.25; }
.dl-pick-sub { font-size: .76rem; color: var(--muted); margin-top: 3px; }
.dl-pick.is-primary { background: var(--accent); border-color: transparent; color: #fff; }
.dl-pick.is-primary .dl-pick-sub { color: rgba(255,255,255,.82); }
.dl-pick.is-secondary { background: transparent; box-shadow: none; }
/* Not out yet (the Mac card until the Mac App Store has it): a box, not a button. */
.dl-pick.is-soon { cursor: default; }
.dl-pick.is-soon:hover { transform: none; border-color: var(--hairline-strong); }
.dl-pick.dl-store { flex-direction: column; justify-content: center; gap: 5px; padding: 12px 16px; }
.dl-pick.dl-store img { display: block; height: 40px; width: auto; }
.dl-pick.dl-store .dl-pick-sub { margin-top: 0; }
.dl-pick.dl-store.is-primary { background: var(--surface); color: var(--text); border-color: var(--accent); }
.dl-pick.dl-store.is-primary .dl-pick-sub { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dl-pick { transition: none; } .dl-pick:hover { transform: none; } }
.dl-fine { color: var(--muted); font-size: .85rem; margin-top: 12px; max-width: 46ch; }
.dl-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dl-fine a:hover { color: var(--accent-ink); }
@media (min-width: 900px) {
  header.bar { padding: 16px 0; }
  .hero { --hero-top: 38px; }
  .hero-grid { align-items: start; }
  .status { margin-bottom: 16px; }
  h1.head { margin-bottom: 16px; }
  .lede { margin-bottom: 20px; }
  .dl-buttons, .dl-picks { margin-top: 14px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero { --hero-top: 26px; }
  h1.head { font-size: 3.35rem; }
}
/* Shorter windows still: the button and the line under it stay above the
   fold, with air beneath, instead of the button sitting on the window's edge. */
@media (min-width: 900px) and (max-height: 700px) {
  header.bar { padding: 12px 0; }
  .hero { --hero-top: 20px; }
  .status { margin-bottom: 10px; }
  h1.head { font-size: 3rem; margin-bottom: 12px; }
  .lede { font-size: 1.1rem; line-height: 1.5; margin-bottom: 14px; }
  .dl-buttons, .dl-picks { margin-top: 10px; }
  .dl-fine { margin-top: 10px; }
}

/* ---------- Signature: an archive, opened ----------
   A drawing, not a capture, built from the app's own parts: the archive in
   the sidebar with its folders and counts, the message rows under it, and
   the search that found them. It isn't claiming to be the window, so it can
   be simpler than one. */
.archive {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
  width: 100%; max-width: 420px;
  margin-left: auto;
}
.archive-top {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 4px 13px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
}
.archive-top img { width: 30px; height: 30px; }
.archive-top .who { font-weight: 700; font-size: .95rem; line-height: 1.15; }
.archive-top .sub { font-size: .76rem; color: var(--muted); }
.archive-top .ro {
  margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.archive-top .ro::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.folders { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.folders li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 8px;
  font-size: .86rem; color: var(--text);
}
.folders li.sub { padding-left: 30px; }
.folders li.on { background: var(--accent); color: #fff; }
.folders li .n { margin-left: auto; font-size: .78rem; color: var(--muted); }
.folders li.on .n { color: rgba(255,255,255,.86); }
.folders li.unread { font-weight: 700; }
.folders li.unread .n { color: var(--accent-ink); font-weight: 700; }
.folders li .f { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; opacity: .8; }
.mail-rows { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 9px; border-radius: 9px; }
.mrow.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mrow .from { font-weight: 600; font-size: .84rem; }
.mrow .when { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.mrow .when svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mrow .subj { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .subj mark { background: none; color: var(--accent-ink); font-weight: 700; }
.mrow .att {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: var(--surface);
  font-size: .72rem; font-weight: 600; color: var(--text);
}
.mrow .att svg { width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.found {
  margin-top: 10px; padding: 7px 10px;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--surface-2);
  font-size: .82rem;
}
.found svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; }
.found .q { font-weight: 600; }
.found .r { margin-left: auto; font-size: .74rem; color: var(--muted); }

/* ---------- Screenshot stages ----------
   The real window sits on a lit panel with a contact shadow beneath it, under
   a drawn macOS title bar: the chrome the capture would have had on a Mac
   instead of in the preview harness. */
.gallery-sec { padding-top: 18px; padding-bottom: 10px; }
.gallery-head { margin-bottom: 26px; max-width: 58ch; }
.gallery-head p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
.ask-head { margin-top: 46px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 22px; }
.shot { margin: 0; min-width: 0; }
.shot.lead { grid-column: 1 / -1; }
.stage {
  border-radius: 24px;
  padding: clamp(20px, 3.2vw, 48px);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--peri) 30%, var(--surface)), var(--surface));
  border: 1px solid var(--hairline);
}
.stage .shot-frame {
  box-shadow:
    0 1px 2px rgba(19,39,67,.10),
    0 16px 26px -10px rgba(19,39,67,.30),
    0 52px 80px -40px rgba(19,39,67,.55);
}
.shot-frame {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.framed .shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 30px;
  background: linear-gradient(180deg, #EDEDF0, #E3E3E7);
  border-bottom: 1px solid #D0D0D5;
}
.framed .shot-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.framed .shot-bar i:nth-child(1) { background: #FF5F57; }
.framed .shot-bar i:nth-child(2) { background: #FEBC2E; }
.framed .shot-bar i:nth-child(3) { background: #28C840; }
.framed .shot-bar span { margin: 0 auto; padding-right: 40px; font-size: .72rem; font-weight: 600; color: #61616B; letter-spacing: -.01em; }
.framed.is-dark .shot-bar { background: linear-gradient(180deg, #3A3A3D, #2E2E31); border-bottom-color: #1F1F22; }
.framed.is-dark .shot-bar span { color: #A8A8AE; }
.shot-frame:hover, .shot-frame:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.shot-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.shot figcaption { margin-top: 12px; }
.shot figcaption b { display: block; font-weight: 700; font-size: .98rem; color: var(--text); }
.shot .meta { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }
.shot .say { margin: 6px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.55; max-width: 62ch; }
/* Ask gets a warmer stage and a "receipts" badge, so the most different
   feature doesn't read as a second copy of the block above it. */
.ask-lead .stage {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(252, 211, 77, .22), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, #FEF3C7 55%, var(--surface)), var(--surface));
}
.ask-lead .meta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 4px 10px;
  font-weight: 600; font-size: .78rem;
  color: #B45309; background: #FEF3C7;
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  .ask-lead .stage {
    background:
      radial-gradient(120% 90% at 50% -20%, rgba(217,119,6,.18), transparent 62%),
      linear-gradient(180deg, rgba(69,26,3,.35), var(--surface));
  }
  .ask-lead .meta { color: #F59E0B; background: rgba(69,26,3,.6); }
}
.peek {
  position: absolute; right: 9px; bottom: 9px;
  font-size: .7rem; font-weight: 600;
  color: #fff; background: rgba(19, 39, 67, .82);
  padding: 5px 9px; border-radius: 999px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.shot-frame:hover .peek, .shot-frame:focus-visible .peek,
.fcard-link:hover .peek, .fcard-link:focus-visible .peek { opacity: 1; transform: none; }

/* ---------- Feature cards ----------
   Drawings, with no window chrome: on this page a title bar means "this is
   the app", and these are illustrations built from its parts, set in real
   type at real size. The real screenshot is one click behind each. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 22px; margin-top: 34px; }
.feat { margin: 0; min-width: 0; }
.feat-lead { grid-column: span 2; }
.feat figcaption { margin-top: 22px; }
.feat figcaption b { display: block; font-weight: 700; font-size: .98rem; }
.feat .say { margin: 6px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.55; max-width: 62ch; }
.feat .say code { font-family: var(--mono); font-size: .82em; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 5px; padding: .04em .32em; }
.fcard-link { position: relative; display: block; text-decoration: none; color: inherit; cursor: zoom-in; }
.fcard {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  height: 232px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.fcard-link:hover .fcard, .fcard-link:focus-visible .fcard { transform: translateY(-3px); box-shadow: var(--shadow); }
.fcard-link .peek { right: 10px; bottom: 10px; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-dev { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.fc-btn { background: var(--accent); color: #fff; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.fc-sub { font-size: .8rem; color: var(--muted); margin-top: -2px; }
.fc-foot { margin-top: auto; font-size: .76rem; color: var(--muted); }

/* search: the field, then hits with the match marked, as the list shows them */
.fc-field {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--accent);
  border-radius: 9px; padding: 7px 10px; font-size: .86rem;
}
.fc-field svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; }
.fc-field .scope { margin-left: auto; font-size: .74rem; color: var(--muted); }
.hit { border-bottom: 1px solid var(--hairline); padding: 6px 2px; }
.hit .h1 { display: block; font-size: .82rem; font-weight: 600; }
.hit .h2 { display: block; font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit mark { background: none; color: var(--accent-ink); font-weight: 700; }

/* formats: the chips from the welcome screen */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent-ink); font-weight: 700; font-size: .8rem;
}
.chip.on { background: var(--accent); color: #fff; }
.apps { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.apps span { font-size: .8rem; color: var(--muted); }
.apps b { color: var(--text); font-weight: 600; }

/* conversation: the fold above an email, opened */
.convo { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.convo .ch { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .78rem; font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.convo .ch svg { width: 10px; height: 10px; fill: currentColor; }
.cmsg { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 4px 10px; font-size: .76rem; line-height: 1.4; border-bottom: 1px solid var(--hairline); }
.cmsg:last-child { border-bottom: 0; }
.cmsg.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cmsg .cw { font-weight: 600; }
.cmsg .cd { color: var(--muted); }
.cmsg .cf { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* export: the dialog's choices */
.fc-menu { border: 1px solid var(--hairline-strong); border-radius: 9px; padding: 5px 0; box-shadow: var(--shadow-soft); }
.mi { padding: 5px 12px; font-size: .82rem; display: flex; align-items: center; gap: 8px; }
.mi::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); flex-shrink: 0; }
.mi.hot { color: var(--accent-ink); font-weight: 600; }
.mi.hot::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }

/* calendar: the event's date block and attendees */
.ev { display: flex; gap: 12px; align-items: flex-start; }
.ev .dblock { flex-shrink: 0; width: 46px; border: 1px solid var(--hairline-strong); border-radius: 8px; overflow: hidden; text-align: center; }
.ev .dblock .m { background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; padding: 2px 0; }
.ev .dblock .d { font-size: 1.1rem; font-weight: 700; line-height: 1.2; padding-top: 2px; }
.ev .dblock .w { font-size: .62rem; color: var(--muted); padding-bottom: 3px; }
.ev .et { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.ev .ew { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.att-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.att-list li { font-size: .78rem; display: flex; gap: 6px; align-items: center; }
.att-list .ok { color: #16a34a; font-weight: 700; }
.att-list .maybe { color: #d97706; font-weight: 700; }
.att-list .no { color: #dc2626; font-weight: 700; }

/* private: the notice above an email */
.notice {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 8px;
  background: #FFFBEB; color: #B45309; font-size: .78rem;
}
.notice b { font-weight: 600; }
.notice .act { margin-left: auto; color: var(--accent-ink); font-weight: 600; }
@media (prefers-color-scheme: dark) { .notice { background: rgba(69,26,3,.38); color: #F59E0B; } }
.hdr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .78rem; }
.hdr .k { color: var(--muted); }
.hdr .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border: 1px solid var(--hairline-strong); border-radius: 8px; font-size: .76rem; font-weight: 600; }
.pdf-chip svg { width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 1.8; }

/* ---------- Light and dark ---------- */
.themes-sec { padding-top: 40px; padding-bottom: 10px; }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* ---------- Pricing ---------- */
.pricing-sec { padding-top: 56px; padding-bottom: 8px; }
.pricing-sec .gallery-head { margin-bottom: 22px; }

/* ---------- Private by design ---------- */
.private-sec, .formats-sec { padding-top: 52px; padding-bottom: 8px; }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 22px; }
.point {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: var(--shadow-soft); padding: 18px 20px 16px;
}
.point h3 { margin: 0 0 6px; font-size: 1rem; letter-spacing: -.01em; }
.point p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.point h3 a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- Closer ---------- */
.closer-sec { padding-top: 56px; padding-bottom: 8px; }
.closer {
  border-radius: 24px;
  padding: clamp(26px, 4vw, 52px);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--peri) 30%, var(--surface)), var(--surface));
  border: 1px solid var(--hairline);
}
.closer h2 { font-size: 1.75rem; letter-spacing: -.022em; margin: 0 0 10px; }
.closer p { margin: 0; color: var(--muted); max-width: 62ch; }
.closer .dl-buttons { justify-content: center; margin-top: 22px; }
.closer .fine { margin: 12px 0 0; font-size: .84rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .archive { margin: 0 auto; }
  h1.head { max-width: 18ch; }
  h1.head:lang(zh), h1.head:lang(ja), h1.head:lang(ko) { max-width: 13em; }
}
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; gap: 28px; }
  .feat-lead { grid-column: span 1; }
}
@media (max-width: 520px) {
  .hero { padding-bottom: 26px; --hero-top: 44px; }
  .status { align-items: flex-start; }
  .status .dot { margin-top: 3px; flex-shrink: 0; }
  .dl-buttons { flex-direction: column; align-items: stretch; }
  .dl-buttons .btn { justify-content: center; }
  .closer .btn { width: 100%; }
  .dl-picks { grid-template-columns: 1fr; }
  .dl-pick.dl-store { flex-direction: row; gap: 14px; }
  /* Two screenshots side by side would be thumbnails; they stack. */
  .themes { grid-template-columns: 1fr; gap: 22px; }
  /* The closer runs edge to edge on a phone, a band like the hero. */
  .closer { border-radius: 0; border-left: 0; border-right: 0; margin: 0 -24px; padding: 30px 24px 32px; }
}
@media (max-width: 360px) {
  h1.head { font-size: 1.9rem; }
}