/* ==========================================================================
   Adesse — /begin device-chooser page stylesheet (extends styles.css, same
   tokens). The device rules below moved here verbatim from the homepage
   <style> block when the chooser became its own page; keep the two in step if
   either is ever restored to the homepage. Loaded AFTER styles.css, on
   /begin/ only.
   ========================================================================== */

/* ---- Breadcrumb (mirrors buy.css / defense.css .crumb) ---- */
.crumb { font-family: var(--sans); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.crumb a { color: var(--taupe); text-decoration: none; }
.crumb a:hover { color: var(--amber-ink); }

.begin-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem); }
.begin-hero h1 { max-width: 16ch; }
.begin-hero .lede { margin-top: 1.25rem; max-width: 46rem; }

/* Choose how you start: one product, two hardware bases plus the
   customer's own phone. The three cards are deliberately equal in weight,
   with no badge, no anchor price, and no urgency device: the anti-hijack
   promise applies to our own selling. */
.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  /* Three cards need more room than the 72rem measure the rest of the page
     reads at, so the grid alone breaks out of its container, symmetrically
     and only into slack the viewport actually has. Collapses to zero below
     72rem, which is why the single-column rule needs no counterpart. */
  margin-inline: calc(-1 * clamp(0rem, (100vw - 72rem) / 2, 6rem));
}
.device-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
/* No tile behind the phone: the renders are transparent PNGs, so a filled box
   only framed the empty margin around a portrait subject. Sized by HEIGHT, not
   by card width, because width-driven sizing left the phone small in a tall box.
   The two 600x1200 assets are normalised to one device height (the real 1.2%
   10a difference kept), so equal box height means equal phone size. */
.device-shot {
  display: block;
  width: 100%;
  height: clamp(420px, 46vw, 580px);
  object-fit: contain;
}
.device-shot + h3 { margin-top: 1.5rem; }   /* only when a photo precedes it */
/* Card headings and subtitles are each held to one line at every
   three-column width, which is what keeps the three prices level; a
   heading that wraps drops its price a full line below its neighbours.
   The binding case is the narrowest three-column layout, just above the
   1080px breakpoint (22px type, ~239px of room), NOT the widest. Measure
   there before lengthening any of these six strings. */
.device-sub {
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--taupe);
}
.device-price {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* The unit rides with the number. Three prices in a row, one of them
   recurring, must not be scannable as $499 / $749 / $129. */
.device-price-unit {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--taupe);
}
.device-terms { margin-top: 0.35rem; }
.device-condition {
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--taupe);
}
/* The one honest difference between the two, in prose. The spec lists are
   near-identical hardware facts and must not carry the comparison. */
.device-case {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 1rem;
}
.device-specs {
  margin-top: 1.5rem;
  list-style: none;
  font-family: var(--sans);
  font-size: 1rem;
}
.device-specs li {
  padding-block: 0.55rem;
  border-top: 1px solid var(--hairline);
}
/* Five lines carry the decision; the rest waits for whoever asks for it. */
.device-more {
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}
.device-more summary {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.device-more summary::-webkit-details-marker { display: none; }
.device-more summary::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--amber-ink);
}
.device-more[open] summary::before { content: "\2212"; }
.device-more summary:hover { color: var(--amber-ink); }
.device-full {
  margin-top: 0.85rem;
  padding-left: 1.6rem;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--taupe);
}
.device-full li { padding-block: 0.3rem; }
/* Bottom-pinned, so the two buttons stay on one line when an open expander
   lengthens the row. */
.device-cta {
  display: block;
  margin-top: auto;
  text-align: center;
}
.device-close { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* The chosen device follows the reader down to the form (see the script);
   the line stays hidden until a card is actually clicked. */
.waitlist-form .choice-note { flex-basis: 100%; margin: 0; }

/* Three columns need more room than two did; below this the cards go
   single-file rather than leaving one orphan on a second row. Set at
   1080px, not 1000px: narrower than this the cards fall under ~300px and
   the headings run out of room before the layout does. */
@media (max-width: 1080px) {
  .device-grid { grid-template-columns: 1fr; max-width: 34rem; }
}

/* Carried with the waitlist block from the homepage: the flex form stacks
   rather than wrapping a half-width button on a phone. */
@media (max-width: 620px) {
  .waitlist-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }
  .waitlist-form input[type="email"],
  .waitlist-form .btn { width: 100%; }
}