/* ============================================================
   ploca — phone pass.

   The redesign is authored in inline styles against the design-canvas
   runtime, which cannot carry a media query. Everything that has to
   change below 700px lives here instead, keyed on the `p-` classes
   added to the markup. `!important` is not decoration: an inline style
   attribute outranks a class rule, so a plain declaration would lose.

   Breakpoint is 700px, the same one `isPhone` uses in each page's
   Component, so CSS and logic flip together.
   ============================================================ */


/* ---- Hamburger. Present at every width, shown only on phones. ---- */

.p-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: none;
  width: 40px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--pb-pill-border);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.p-burger i {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: var(--prussian);
}

.p-burger i:nth-child(2) { width: 72%; }


/* ---- The menu the hamburger opens. Never rendered on desktop. ---- */

.p-menu {
  pointer-events: auto;
  padding: 4px 16px 16px;
  border-bottom: 1px solid var(--pb-divider);
  background: var(--cool-white);
  box-shadow: 0 12px 26px rgba(0, 20, 40, 0.10);
}

.p-menu-link {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--pb-divider-app);
  font-size: var(--size-body);
  color: var(--text-heading);
  text-decoration: none;
}

.p-menu-link:last-of-type { border-bottom: 0; }

.p-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--prussian);
  color: var(--cool-white);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}


/* ---- Get ploca. A phone visitor cannot open a DMG where they stand,
        so the download CTAs ask for an email and /api/subscribe mails
        the link. Desktop never sees this. ---- */

.p-get-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 20, 36, 0.42);
}

.p-get-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 22px 20px 20px;
  border: 1px solid var(--pb-card-border);
  border-radius: 20px;
  background: var(--cool-white);
  box-shadow: 0 10px 40px rgba(0, 20, 40, 0.22);
}

.p-get-sheet h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.4rem;
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}

.p-get-sheet p {
  margin: 0 0 16px;
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: var(--text-body);
}

.p-get-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.p-get-field {
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--pb-pill-border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--text-heading);
}

.p-get-field::placeholder { color: var(--pb-label); }

.p-get-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--prussian);
  color: var(--cool-white);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.p-get-msg {
  margin: 10px 0 0 !important;
  min-height: 1.3em;
  font-size: var(--size-caption) !important;
  color: var(--prussian) !important;
}

.p-get-fine {
  margin: 10px 0 0 !important;
  font-size: var(--size-fineprint) !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
}


/* ============================================================
   Phone only.
   ============================================================ */

@media (max-width: 700px) {

  /* The nav is fixed, so an anchor jump has to clear it. */
  html { scroll-padding-top: 64px; }

  /* The redesign does not set border-box anywhere, so the `width: 100%` rules
     below would each resolve to 100% PLUS the element's own horizontal padding
     and hang off the right edge: the nav by 32px, the hero buttons by 60px,
     the Get ploca sheet by 40px. Kept inside the media query, not global and
     not even at every width, because `.p-nav` and `.p-hero-ctas` also exist on
     desktop and that layout was authored against content-box. */
  .p-nav,
  .p-menu,
  .p-menu-cta,
  .p-hero-ctas,
  .p-hero-ctas > a,
  .p-hero-ctas > button,
  .p-get-scrim,
  .p-get-sheet,
  .p-get-field,
  .p-get-send { box-sizing: border-box; }

  /* Display sizes shipped with desktop floors: --size-hero's 2.6rem
     never shrank below 41.6px, which cost the hero five lines on a
     360px screen. Floors are lowered, the desktop ramp is untouched. */
  :root {
    --size-hero: 2rem;
    --size-wordmark-hero: 1.85rem;
    --size-h2: 1.55rem;
    --size-h2-band: 1.6rem;
    --size-quote: 1.35rem;
    --size-lede: 1.02rem;
  }

  /* ---- Nav: one row that cannot wrap ----
     The floating pill wrapped to three rows (~170px) below 430px and,
     being fixed, sat over the page for the whole scroll. Links and the
     CTA move into the hamburger; what is left is a full-width bar. */
  .p-header {
    top: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .p-nav {
    width: 100%;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 9px 16px !important;
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .p-navlinks,
  .p-navcta { display: none !important; }

  .p-burger { display: flex !important; }

  /* ---- Hero ---- */
  .p-hero { padding-top: 5.5rem !important; }

  .p-hero-ctas {
    flex-direction: column !important;
    width: 100%;
  }

  .p-hero-ctas > a,
  .p-hero-ctas > button {
    width: 100%;
    justify-content: center;
  }

  /* ---- Demo ----
     The play poster holds about 200px of content, which does not fit a 16:9
     box that is ~184px tall at this width, so it was being cut off. Give the
     stage a real minimum and let the video letterbox inside it rather than
     crop: `cover` at this height would take roughly a tenth off each side of
     a screen recording, which is where the text is. */
  .p-demo-stage {
    aspect-ratio: auto !important;
    min-height: 244px;
  }

  .p-demo-stage video { object-fit: contain !important; }

  /* ---- Privacy rows ----
     CheckRow hard-codes a `240px 1fr` key/value split, which left the value
     column ~96px at 360px: one word per line. Stacking it fixed the wrapping
     but still read as a table that had lost its columns, so each claim
     becomes a card instead, the same treatment the comparison rows get at
     this width: the claim on top, its sentence underneath. ---- */
  .p-checkrow {
    grid-template-columns: 1fr !important;
    gap: 0.3rem !important;
    margin-bottom: 10px;
    padding: 13px 15px !important;
    border: 1px solid var(--pb-card-border) !important;
    border-radius: 14px !important;
    background: var(--white-50) !important;
  }

  .p-checkrow > :first-child {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    gap: 0.5rem !important;
  }

  /* Aligned under the claim, not under the check. */
  .p-checkrow > :last-child { padding-left: 26px; }

  /* "structural, not / promised." was leaving one word on its own line. */
  #privacy h2 { text-wrap: balance; }

  /* ---- Comparison ----
     A 620px table inside an overflow-x scroller is a sideways drag on a
     phone. Each row becomes a card, and the column headers move onto the
     cells as `data-col` labels, so the tint that carried the meaning on
     desktop is not needed. ---- */
  .p-cmp-wrap {
    overflow-x: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .p-cmp {
    display: block !important;
    min-width: 0 !important;
  }

  .p-cmp thead { display: none !important; }

  .p-cmp tbody,
  .p-cmp tr { display: block !important; }

  .p-cmp tr {
    margin-bottom: 10px;
    padding: 13px 15px;
    border: 1px solid var(--pb-card-border);
    border-radius: 14px;
    background: var(--white-50);
  }

  .p-cmp th[scope="row"] {
    display: block !important;
    padding: 0 0 9px !important;
    border-bottom: 0 !important;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--text-heading) !important;
  }

  .p-cmp td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right !important;
  }

  .p-cmp td::before {
    content: attr(data-col);
    flex: none;
    font-size: var(--size-caption);
    color: var(--text-muted);
    text-align: left;
  }

  .p-cmp td:first-of-type::before {
    color: var(--prussian);
    font-weight: var(--weight-medium);
  }

}