/* ==========================================================================
   NoLie Labs. product.css
   THE PRODUCT PAGE TEMPLATE. Shared by /wifi/ and /pcs/ and by every product
   that comes after. Nothing in here is specific to one product: the copy, the
   screen inside the device and the hero action all live in the page's HTML.

   Section order (the template; keep it):
     .product-hero     eyebrow, h1 that states the problem, subline, the ONE
                       cyan action (.btn, or an .early-access form), a quiet
                       .caption beneath, and the .product-visual beside it
     .product-visual   <figure> holding .device > .screen (+ a caption)
     .how-it-works     .rows.rows--split, three numbered steps, no icons
     .tells-you        .rows of big quoted statements (.statement)
     .wont-do          .rows.rows--split, three limits
     .pricing          two .price-card columns, then a loud line
     .product-close    one .statement and the section's one action

   The device
     .device is an inline-size container; .screen sizes everything in --u,
     one unit = one dp of the app's 360dp screen, so the mockup scales with
     the device width and stays proportionally identical to the real app.
     Swap a product's screen by replacing the .screen element (or putting an
     <img> inside .device instead). Nothing else needs to change.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero: text on the left, device on the right from 1024px. Stacked below.
   -------------------------------------------------------------------------- */

.product-hero__inner {
  display: grid;
  gap: 56px;
}

.product-hero__text {
  max-width: 640px;
}

.product-hero__sub {
  max-width: 30em;
  margin-top: 28px;
}

.product-hero__action {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 40px;
}

.product-hero__action .early-access {
  width: 100%;
  max-width: 560px;
}

@media (min-width: 720px) {
  .product-hero__inner {
    gap: 72px;
  }
  .product-hero__sub {
    margin-top: 36px;
  }
  .product-hero__action {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .product-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: center;
  }
  .product-visual {
    justify-self: end;
  }
}


/* --------------------------------------------------------------------------
   Visual: the device and its caption.
   -------------------------------------------------------------------------- */

.product-visual {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  width: 100%;
  margin: 0;
}

/* Rings behind the device, as on the app's home screen. */
.product-visual .rings {
  inset: -10% 0 auto 0;
  height: 100%;
}

.product-visual .device,
.product-visual__caption {
  position: relative;
  z-index: 1;
}

.product-visual__caption {
  max-width: 340px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Device. A phone frame. The screen inside scales with the frame.
   -------------------------------------------------------------------------- */

.device {
  container-type: inline-size;
  width: min(340px, 100%);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--outline);
  border-radius: 40px;
}

.screen {
  /* 1u = 1dp of the app's 360dp-wide screen. Fallback for browsers without
     container units assumes the full 340px width. */
  --u: .935px;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
  padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  color: var(--text);
}

@supports (width: 1cqw) {
  .screen {
    --u: .275cqw;
  }
}

.screen__status {
  margin-bottom: calc(30 * var(--u));
  font-weight: 600;
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
}

.screen__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(22 * var(--u));
}

.screen__checked {
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
  color: var(--text-muted);
}

.screen__link {
  font-weight: 600;
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--text-body);
}

.screen__headline {
  margin-bottom: calc(18 * var(--u));
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: -.035em;
  color: var(--text);
}

.screen__headline .muted {
  display: block;
}

.screen__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.screen__row {
  display: grid;
  grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr) auto;
  column-gap: calc(12 * var(--u));
  align-items: start;
  padding-block: calc(15 * var(--u));
  border-bottom: 1px solid var(--rule);
}

.screen__rank {
  padding-top: calc(4 * var(--u));
  font-weight: 600;
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  color: var(--text-muted);
}

.screen__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.screen__room {
  font-weight: 700;
  font-size: calc(21 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -.02em;
  color: var(--text);
}

.screen__verdict {
  margin-top: calc(3 * var(--u));
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: calc(19.5 * var(--u));
  color: var(--text-body);
}

.screen .pill {
  gap: calc(8 * var(--u));
  padding-top: calc(3 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
}

.screen .pill::before {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: calc(2 * var(--u));
}

.screen__spacer {
  flex: 1 1 auto;
  min-height: calc(14 * var(--u));
}

/* The button inside the picture. Not a .btn: it is imagery, not an action. */
.screen__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(60 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: -.01em;
}

.screen__action {
  margin-top: calc(10 * var(--u));
  padding-block: calc(10 * var(--u));
  text-align: center;
  font-weight: 600;
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--text-body);
}

/* The app's home screen (used on /download/ to show what installs). */
.screen--home {
  position: relative;
}

.screen--home .rings {
  inset: 10% -30% auto -30%;
  height: 58%;
}

.screen__brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screen__brand-name {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
}

.screen__brand-name::before {
  content: "";
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: var(--accent);
  border-radius: calc(2 * var(--u));
  transform: rotate(45deg);
}

.screen__brand-label {
  font-size: calc(11 * var(--u));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.screen__home-title {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-weight: 700;
  font-size: calc(46 * var(--u));
  line-height: calc(46 * var(--u));
  letter-spacing: -.04em;
  color: var(--text);
}

.screen__home-lede {
  position: relative;
  z-index: 1;
  margin-top: calc(18 * var(--u));
  margin-bottom: calc(26 * var(--u));
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  color: var(--text-body);
}

.screen__home-note {
  margin-top: calc(14 * var(--u));
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--text-muted);
}

/* An empty screen, for a product that has nothing to show yet. */
.screen__empty {
  margin-block: auto;
  padding-bottom: calc(40 * var(--u));
}

.screen__empty-title {
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: -.035em;
  color: var(--text);
}

.screen__empty-line {
  margin-top: calc(14 * var(--u));
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   What it actually tells you: the app's own sentences, set large.
   -------------------------------------------------------------------------- */

.tells-you .row {
  padding-block: 32px;
}

.tells-you .row__title {
  max-width: 22em;
  font-size: clamp(24px, 19.5px + 1.25vw, 36px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

@media (min-width: 720px) {
  .tells-you .row {
    padding-block: 44px;
  }
}


/* --------------------------------------------------------------------------
   Pricing: two cards, then the loud line.
   -------------------------------------------------------------------------- */

.pricing__grid {
  display: grid;
  gap: 16px;
}

.price-card {
  display: flex;
  flex-direction: column;
}

.price-card .toplabel {
  margin-bottom: 14px;
}

.price-card__title {
  font-weight: 700;
  font-size: clamp(34px, 28.2px + 1.55vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
}

.price-card__body {
  max-width: 30em;
  margin-top: 20px;
}

.price-card__items {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.price-card__item {
  padding-block: 16px;
  border-top: 1px solid var(--rule);
  font-weight: 500;
  font-size: clamp(15px, 14.6px + .11vw, 16px);
  line-height: 1.5;
  color: var(--text-body);
}

.price-card__item:last-child {
  padding-bottom: 0;
}

.price-card__item strong {
  font-weight: 700;
  color: var(--text);
}

.pricing__loud {
  margin-top: 64px;
}

.pricing__loud-title {
  font-weight: 700;
  font-size: clamp(40px, 26.7px + 3.55vw, 72px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--text);
}

.pricing__support {
  max-width: 34em;
  margin-top: 20px;
}

.pricing__quiet {
  margin-top: 24px;
}

@media (min-width: 720px) {
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .pricing__loud {
    margin-top: 96px;
  }
}


/* --------------------------------------------------------------------------
   Close: one line and the one action.
   -------------------------------------------------------------------------- */

.product-close__inner {
  display: grid;
  gap: 32px;
}

.product-close .statement {
  max-width: 16em;
  font-size: clamp(28px, 22.2px + 1.55vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.product-close__action {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.product-close__action .early-access {
  width: 100%;
  max-width: 560px;
}

@media (min-width: 720px) {
  .product-close__inner {
    gap: 40px;
  }
}