/* getscootch.com's front page. The clips and pictures of the app sit on the desk mat (the app's
   arrangement grid), each clip in a screen. Shared pieces (keycaps, logo, header, footer) are in
   styles.css. */

.home main { display: grid; gap: clamp(72px, 10vw, 128px); padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 10vw, 120px); }
.home h2 { margin: 0 0 14px; font: 600 clamp(28px, 22px + 1.4vw, 40px)/1.12 var(--display); letter-spacing: -.005em; }
.home h3 { margin: 0 0 6px; font: 600 19px/1.25 var(--display); }
.home figure { margin: 0; }

/* ---------- the desk mat, and a screen on it ---------- */
.stage {
  --grid: color-mix(in srgb, var(--mat-line) 45%, transparent);
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 36px);
  border-radius: var(--r-mat);
  background-color: var(--mat);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
}
.stage img { display: block; width: 100%; max-width: 454px; height: auto; }
/* The arrangement is a picture of the app's own mat: it needs no second one around it. */
.stage.bare { padding: 0; background: none; }
.stage.bare img { max-width: 100%; }
.screen {
  position: relative; width: 100%;
  padding: clamp(6px, 1vw, 10px);
  border-radius: 16px;
  background: var(--bezel);
  box-shadow: 0 4px 0 var(--mat-line);
}
.clip { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #0B0F22; }
/* Play and pause, added by home.js: a keycap under the screen's corner. */
.clip-toggle { justify-self: end; margin-top: 14px; min-height: 34px; padding: 0 14px; font-size: 14px; }

/* ---------- the opening: the first front page's demo, in its dark room ---------- */
/* The demo's styles (styles.css, under "the minimal page") key off classes edge.js puts on the
   body; its colours, which /edge put on the whole page, are kept to this band. */
.room {
  --t-soft: #A7AECB; --t-line: #33406E;
  --ink: #EEF1FA; --card: #1B2240; --paper: #141A33; --mat-line: #33406E; --focus: #FFC83D; --coral: #FF7378; --mint: #3CC9A6;
  color-scheme: dark;
  position: relative; overflow-x: clip; color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, #1B2352 0%, #0F1430 62%), #0F1430;
}
/* The room warms to the monitor's teal once it's on. */
.room::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s .45s ease;
  background: radial-gradient(60% 55% at 62% 45%, rgba(47, 156, 134, .22), rgba(47, 156, 134, 0) 70%);
}
.crossed .room::before { opacity: 1; }
.crossed.desk-off .room::before { opacity: 0; transition-delay: 0s; } /* the desktop on standby */
.room .teaser { padding-bottom: clamp(48px, 8vh, 88px); }
/* What Scootch is, under the demo: the page's heading, what it saves you, and the download. */
.room-intro { max-width: 46rem; margin: clamp(28px, 5vh, 48px) auto 0; }
.room-intro h1 {
  margin: 0; font: 600 clamp(30px, 20px + 2vw, 46px)/1.08 var(--display); letter-spacing: -.01em; text-wrap: balance;
}
.room-intro > p { margin: 12px 0 0; font-size: clamp(17px, 15px + .4vw, 19px); line-height: 1.5; color: var(--t-soft); text-wrap: balance; }
/* Room between the logo and the demo, so the desktop's monitor doesn't crowd the logo; and on
   desktops the flat scene keeps less at its foot, so the hint stays with it. */
.room .scene { margin-top: clamp(16px, 4vh, 40px); }
@media (min-width: 761px) { .room .scene.css { padding-bottom: 1cqw; } }
@media (min-width: 761px) { .room-intro { text-align: center; } }
/* The hint starts empty and changes as it plays: room for a line (two on phones, where it can take
   two), so the heading under it stays put. */
.room .teaser-hint { min-height: 1lh; }
@media (max-width: 760px) { .room .teaser-hint { min-height: 2lh; } }
.room-download { min-height: 40px; padding: 0 16px; font-size: 15px; }
.room-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
/* Desktops centre the words under the two computers (styles.css), and the download with them. */
@media (min-width: 761px) { .room-cta { justify-content: center; } }
.room-cta p, .h-end p { margin: 0; color: var(--t-soft, var(--ink-soft)); }
.home .key.primary { min-height: 52px; padding: 0 24px; font-size: 18px; }

/* ---------- setup, and the features: words on one side, the mat on the other ---------- */
.h-setup, .h-feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.h-setup.flip, .h-feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.h-setup.flip > .h-text, .h-feature.flip > .h-text { order: 2; }
.h-text p { margin: 0 0 12px; max-width: 32em; color: var(--ink-soft); }
.h-text p:last-child { margin-bottom: 0; }
.h-small { font-size: 16px; }

.h-steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.h-steps li { counter-increment: step; position: relative; min-height: 38px; padding: 4px 0 0 52px; }
.h-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 36px; height: 38px;
  font: 600 18px/1 var(--display);
  border-radius: 9px; background: var(--card);
  box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 3px 0 var(--mat-line);
}

/* ---------- first impressions: each one a note in a window, like the demo's screens (taken off
   the page for now; the section was <section class="h-said"> after the real crossing clip) ---------- */
.h-said-intro { margin: 0; color: var(--ink-soft); }
.h-said ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.h-said li { display: grid; gap: 12px; }
.h-said blockquote {
  margin: 0; overflow: hidden; border-radius: 14px; background: var(--card);
  box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 4px 0 var(--mat-line);
}
.h-said blockquote::before { /* the window's title bar */
  content: ""; display: block; height: 28px;
  background:
    radial-gradient(circle at 18px 14px, var(--coral) 4px, transparent 4.5px),
    radial-gradient(circle at 32px 14px, var(--sticky) 4px, transparent 4.5px),
    radial-gradient(circle at 46px 14px, var(--mint) 4px, transparent 4.5px),
    color-mix(in srgb, var(--mat) 55%, var(--card));
}
.h-said blockquote p { margin: 0; padding: 18px 22px 22px; font: 600 clamp(19px, 17px + .4vw, 22px)/1.3 var(--display); text-wrap: pretty; }
.h-who { margin: 0 0 0 4px; font-size: 16px; }
.h-who span { color: var(--ink-soft); }
@media (min-width: 761px) { .h-said li:nth-child(2) { margin-top: 32px; } }

/* ---------- shortcuts ---------- */
.h-keys { text-align: center; }
.h-keys > p { margin: 0 auto 36px; max-width: 34em; color: var(--ink-soft); }
.h-keypair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px clamp(20px, 5vw, 56px); }
.h-keyset { display: grid; grid-template-columns: auto auto; gap: 10px; justify-items: center; }
.h-keyset small { grid-column: 1 / -1; margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.h-cap {
  display: grid; place-items: center; min-width: 72px; height: 72px; padding: 0 16px;
  font: 600 30px/1 var(--display);
  border-radius: 14px; background: var(--card);
  box-shadow: 0 0 0 1.5px var(--mat-line) inset, 0 5px 0 var(--mat-line);
}
.h-cap.wide { font-size: 24px; }
/* The edge between the two computers, lit as the shortcut goes across. */
.h-edge {
  width: 5px; height: 92px; border-radius: 3px; background: var(--ink);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sticky) 30%, transparent), 0 0 28px 10px color-mix(in srgb, var(--sticky) 45%, transparent);
}

/* ---------- the rest ---------- */
.h-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.h-grid li { padding: 20px 20px 22px; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1.5px var(--mat-line) inset; }
.h-grid li::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--sticky); }
.h-grid p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ---------- privacy: the one dark panel ---------- */
.h-private {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-mat);
  background: #1E2547; color: #EEF1FA;
}
.h-private ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 4vw, 48px); }
.h-private li { color: #C3C9E2; padding-left: 30px; position: relative; }
.h-private li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 3px solid #3CC9A6; border-bottom: 3px solid #3CC9A6; transform: rotate(-45deg);
}
.h-private strong { display: block; color: #EEF1FA; font: 600 19px/1.3 var(--display); margin-bottom: 2px; }
.h-private a { color: #EEF1FA; }
.h-private :focus-visible { outline-color: #FFC83D; }
@media (prefers-color-scheme: dark) { .h-private { background: var(--card); box-shadow: 0 0 0 1.5px var(--mat-line) inset; } }

/* ---------- questions ---------- */
.h-faq { max-width: 760px; }
.h-faq details { border-top: 1.5px solid var(--mat-line); }
.h-faq details:last-of-type { border-bottom: 1.5px solid var(--mat-line); }
.h-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font: 600 19px/1.3 var(--display);
}
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: "+"; flex: none; font: 500 26px/1 var(--display); color: var(--ink-soft); }
.h-faq details[open] summary::after { content: "–"; }
.h-faq details p { margin: -4px 0 20px; max-width: 40em; color: var(--ink-soft); }

/* ---------- the end ---------- */
.h-end { display: grid; justify-items: center; gap: 14px; text-align: center; }
.h-end h2 { margin: 0; }
.h-end .key { margin-top: 10px; }
.h-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .h-setup, .h-feature, .h-setup.flip, .h-feature.flip { grid-template-columns: minmax(0, 1fr); }
  .h-setup.flip > .h-text, .h-feature.flip > .h-text { order: 0; }
  .h-private ul, .h-said ul { grid-template-columns: minmax(0, 1fr); }
  .h-edge { width: 92px; height: 5px; }
  .h-keypair { flex-direction: column; }
}
@media (max-width: 520px) {
  .h-grid { grid-template-columns: minmax(0, 1fr); }
  .h-cap { min-width: 60px; height: 60px; font-size: 26px; }
}

/* ---------- BuildHop's badge, at the end of the footer ---------- */
.foot-badge { display: block; line-height: 0; }
.foot-badge img { max-width: 100%; height: auto; }