/*
  The homepage's own parts in the second look (Allen, 2026-11-02, from the Round 2 canvas: "it looks
  great"; docs/website-design.md section 0), laid out again for the visitor the ads send, who is on
  an Android phone (branch home-conversion, 2026-11-10; docs/plans/2026-11-10-home-conversion.md).
  The hero keeps the Blocked tab with the app's moments around it. Every part after it is a heading
  beside its content, as the questions are, and one column on a narrow window: steps, the ways
  around it, what is never blocked, the tools and setup, with no small pictures. The challenge panel
  is the page's second loud place. The homepage loads site.css first; everything shared is there.
*/

/* The homepage's parts run their own width, so its page wrapper carries none. */
body.home > .container { max-width: none; padding: 0; }
.home .hero, .home .part, .home .site-footer { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }

/* ---- The hero: the words over the Blocked tab, with the moments it makes around it ---- */
.hero { max-width: var(--wide); margin: 0 auto; padding: 64px var(--gutter) 0; text-align: center; }
.hero h1 {
  margin: 24px auto 0; max-width: 11em;
  font-size: clamp(46px, 6.6vw, 92px); line-height: 1; letter-spacing: -0.018em;
}
.hero .sub { margin: 24px auto 0; max-width: 30em; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--muted); }
.hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }
.hero .note { margin-top: 16px; font-size: 15px; color: var(--faint); text-wrap: balance; }

.stage { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px 28px; text-align: left; }
.stage-col { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 22px; }
.stage-col.left { padding-top: 120px; align-items: flex-end; }
.stage-col.right { padding-top: 190px; align-items: flex-start; }
.stage-phone { flex: 0 1 330px; max-width: 330px; }
.stage-col.left .moment.faded { margin-right: 40px; }
.stage-col.right .moment.faded { margin-left: 40px; }

/* ---- A part: its heading on the left, its content on the right, on the questions' columns ---- */
.part.split, .home .part.qa-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 64px; align-items: start;
}
.split-head h2, .home .qa-side h2 { font-size: clamp(32px, 3.3vw, 40px); line-height: 1.08; }
/* A heading of two sentences sets each on its own line. */
.split-head h2 .ln { display: block; }
.split-head p { margin-top: 16px; max-width: 24em; font-size: 19px; line-height: 1.5; color: var(--muted); }
.split-head .tag { margin: 0 0 18px; max-width: none; font-size: 15px; line-height: 1.6; color: #4A4A4A; }
.split-note { margin-top: 24px; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--faint); }
.split-note + .split-note { margin-top: 8px; }

/* Steps: how it works, and setup. The numeral's ring is the setup article's (site.css, .step-num). */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.steps h3 { margin-top: 5px; font-size: 23px; line-height: 1.2; }
.steps p { margin-top: 6px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* The ways around it: the cards as they were (site.css, .door), two across. */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doors .door { padding: 22px 24px; border-radius: 22px; }
.doors .door-a { margin-top: 6px; font-size: 20px; }

/* What is never blocked: one soft band across the page, its heading inside it, the ticks beside
   it and the home screen at its foot on a wide window. */
.kept {
  background: var(--surface); border-radius: 36px; overflow: hidden; padding: 48px 48px 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 220px; gap: 28px 40px; align-items: start;
}
.kept .split-head, .kept-body { padding-bottom: 48px; }
.kept-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.kept-list li {
  display: inline-flex; align-items: center; gap: 8px; background: var(--white); border-radius: 999px;
  padding: 9px 16px 9px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 16px; font-weight: 600; line-height: 1.3;
}
.kept-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kept-more { margin-top: 22px; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--muted); }
.kept-phone { align-self: end; margin-right: -12px; max-height: 320px; overflow: hidden; }

/* The other tools: each beside its icon, in the tool's own color, as in the app. */
.tools { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; }
.tools li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; align-items: start; }
.tools .ico { width: 44px; height: 44px; border-radius: 13px; }
.tools h3 { margin-top: 2px; font-size: 21px; line-height: 1.25; }
.tools p { margin-top: 6px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* ---- The challenge (id="pricing": /pricing redirects here; sticky.js stands the buy bar down here) ---- */
.challenge-panel {
  background: var(--ink); color: var(--white); border-radius: 36px; text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
}
.challenge-panel .tag { background: rgba(255, 255, 255, 0.12); color: #E6E6E2; }
.challenge-panel h2 { margin: 24px auto 0; max-width: 11em; font-size: clamp(40px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.018em; }
.challenge-panel .lede { margin: 20px auto 0; max-width: 30em; font-size: 20px; color: #D6D6D2; }
.challenge-panel .actions { margin-top: 32px; }
.challenge-panel .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.challenge-panel .btn:hover { background: #E6E6E2; border-color: #E6E6E2; color: var(--ink); }
.challenge-panel .fine { margin: 20px auto 0; max-width: 32em; font-size: 15px; color: #A9A9A4; }

@media (max-width: 1160px) {
  /* The three columns need 1066px. Under that: the top of the Blocked tab, fading out, with the
     wait's moment over its foot. */
  .stage { margin-top: 40px; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; }
  .stage .hide-sm, .stage-col.right { display: none; }
  .stage-phone {
    order: 1; flex: none; width: 300px; max-height: 470px; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent);
  }
  .stage-col.left { order: 2; flex: none; max-width: 100%; margin-top: -84px; padding-top: 0; align-items: center; position: relative; }
}

@media (max-width: 1000px) {
  .kept { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .kept-phone { display: none; }
}

@media (max-width: 860px) {
  .part.split, .home .part.qa-split, .kept { grid-template-columns: minmax(0, 1fr); }
  .split-head p { max-width: 32em; }
  .kept { padding: 36px 36px 0; }
  .kept .split-head { padding-bottom: 0; }
  .kept-body { padding-bottom: 36px; }
}

@media (max-width: 640px) {
  .home .part { padding-top: 72px; }
  .hero { padding-top: 36px; }
  .hero h1 { margin-top: 20px; }
  .hero .sub { margin-top: 20px; }
  .hero .actions { margin-top: 28px; }
  /* A phone leaves out "See how it works": it jumps past the picture. */
  .hero .actions .quiet-link { display: none; }
  .stage { margin-top: 36px; }
  /* A phone's note is its first sentence. What setup takes is the install page's to say, where a
     phone can send itself the link. */
  .hero .note span + span { display: none; }

  .split-head p { font-size: 18px; }
  .steps { gap: 24px; }
  .steps li { gap: 0 16px; }
  .steps h3 { font-size: 21px; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .doors .door { padding: 16px 20px; border-radius: 20px; }
  .doors .door-q { font-size: 14.5px; }
  .doors .door-a { margin-top: 4px; font-size: 19px; }
  .kept { padding: 28px 22px 0; border-radius: 28px; gap: 22px; }
  .kept-body { padding-bottom: 28px; }
  .kept-list { gap: 8px; }
  .kept-list li { padding: 8px 14px 8px 10px; font-size: 15px; }
  .tools { gap: 24px; }
  .challenge-panel { border-radius: 28px; padding: 44px 22px; }
  .challenge-panel .lede { font-size: 18px; }
  .home .site-footer { padding-bottom: 120px; }
}