/* The public site: the landing page at / and the pairing guide at
   /guide/pairing. Loaded on
   top of style.css, which supplies the colour tokens, the type stack and
   the button - this file is only what those pages need and the console
   does not.

   The top bar itself is not here: it is one partial shared with the
   console, so its rules live in style.css where both pages load them.

   The landing page is a single pane: a header, one hero, a footer. It
   keeps the console's palette, radius and shadow, because the two are one
   product and the sign-in link crosses between them. */

.m-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- Sections --------------------------------------------------------- */

.m-band { border-bottom: 1px solid var(--border); }
/* The landing page is one pane, so its band takes the height the header
   and footer leave and centres the hero in it. Without this the content
   sits under the header with the footer stranded below it. */
.m-band.fill { flex: 1; display: grid; align-items: center; border-bottom: 0; }
.m-wrap { max-width: 1080px; margin: 0 auto; padding: 72px 32px; }

.m-band h2 {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 10px;
}
.m-band p { font-size: 15.5px; line-height: 1.65; max-width: 68ch; }
.m-band p + p { margin-top: 12px; }

/* ---- Hero ------------------------------------------------------------- */

/* A fixed column, centred in the pane. Without the width the wrap is a
   grid item that shrinks to its content, so the block's position would
   drift with whatever the longest line happened to be. */
.m-hero { max-width: 760px; width: 100%; padding: 72px 32px; }
.m-hero h1 {
  font-size: clamp(34px, 5.2vw, 52px); line-height: 1.08;
  letter-spacing: -.035em; margin: 0 0 18px; max-width: 22ch;
}
.m-hero .m-sub { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.m-hero .m-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 30px; }
.m-hero .btn { padding: 0 20px; min-height: 44px; font-size: 15px; display: inline-flex; align-items: center; }
.m-mark {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 26px;
  background: linear-gradient(135deg, var(--accent), #8a5bff);
  display: grid; place-items: center; color: #fff;
}

.m-foot {
  margin-top: auto; padding: 26px 32px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; text-align: center;
}

/* ---- Guide ------------------------------------------------------------ */

/* The pairing guide is read on the device being paired, so it is one narrow
   column with big tap targets and no sideways scroll. The bands are the
   landing page's, tightened: a guide is a run of short sections, not one
   pane. */

.m-guide { max-width: 720px; padding: 44px 32px; }
.m-guide h1 {
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1.12;
  letter-spacing: -.03em; margin: 0 0 18px;
}
.m-guide h2 {
  font-size: 21px; letter-spacing: -.02em; margin: 0 0 12px;
}
.m-guide .m-lead { font-size: 17px; line-height: 1.6; color: var(--text); }
.m-guide .g-sub { color: var(--muted); margin-bottom: 16px; }
.m-guide .g-note {
  color: var(--muted); font-size: 14px; line-height: 1.6;
  border-left: 3px solid var(--border-strong); padding-left: 14px;
  margin-top: 16px;
}

.g-list { margin: 0; padding-left: 20px; }
.g-list li { font-size: 15.5px; line-height: 1.65; margin-top: 10px; }

/* The steps. Numbers hang outside the text so a step that wraps stays in
   one block, which is what makes a list of nine of them followable on a
   phone. */
.g-steps { margin: 0; padding-left: 24px; }
.g-steps li { font-size: 15.5px; line-height: 1.65; margin-top: 14px; }
.g-steps li:first-child { margin-top: 0; }
.g-steps strong { font-weight: 600; }

/* One version of iOS, or one thing that went wrong, per row. Closed by
   default so the page opens as a short list rather than every version at
   once. */
.g-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 10px;
}
.g-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; min-height: 52px; cursor: pointer;
  font-size: 16px; font-weight: 600; list-style: none;
}
.g-item > summary::-webkit-details-marker { display: none; }
.g-item > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .15s;
}
.g-item[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.g-item[open] > summary { border-bottom: 1px solid var(--border); }
.g-item > summary:hover { color: var(--accent); }
.g-body { padding: 16px 18px 20px; }
.g-body > p { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.g-body > p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .m-wrap { padding: 54px 22px; }
  .m-hero { padding: 56px 22px; }
  .m-guide { padding: 34px 20px; }
  .g-steps { padding-left: 20px; }
}