/* Construction Check In — the website's one stylesheet.
   Written by hand, phone first. No build step, nothing loaded from elsewhere.
   Colours are the app's (mobile/src/theme/index.ts): navy and orange on slate neutrals. */

:root {
  --navy: #1f3a5f;
  --navy-deep: #172c49;
  --orange: #ff8c42;
  --orange-soft: #ffa468;
  --ink: #0f172a; /* headings */
  --body: #334155; /* running text: 10:1 on white */
  --soft: #475569; /* secondary text: 7.5:1 on white */
  --canvas: #f8fafc;
  --surface: #ffffff;
  --line: #e2e8f0;
  --on-navy: #e6ebf2; /* text on navy: 9.6:1 */
  --on-orange: #0f1e33; /* text on orange: 7.9:1 (white on this orange is 2.3:1) */
  --bezel: #0b1220;
  --wrap: 72rem;
  --gutter: 1.25rem;
  --sheet: 1.75rem; /* the rounded top of a light section rising over navy, as in the app */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--body);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word; /* an email address or a web address breaks before it runs off a narrow screen */
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p,
ul,
ol,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.09em;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* One focus ring everywhere: dark on light bands, white on navy ones. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

.on-navy :focus-visible {
  outline-color: #fff;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.skip:focus {
  top: 0.75rem;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.875rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: var(--orange);
  color: var(--on-orange);
}

.btn-primary:hover {
  background: var(--orange-soft);
}

.btn-small {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
}

/* ---------- Top bar ---------- */

.top {
  background: var(--navy);
  color: #fff;
}

.top .wrap {
  display: flex;
  flex-wrap: wrap; /* with very large text the actions drop under the logo and nothing runs off the side */
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  flex: none;
  border-radius: 0.5rem;
}

.brand img {
  width: auto;
  height: 2.75rem;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.lang {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* The smallest phones: a tighter bar, so the logo, the language and the button stay on one line. */
@media (max-width: 23.99rem) {
  .top .wrap {
    column-gap: 0.5rem;
  }

  .top .brand img {
    height: 2.25rem;
  }

  .top .lang {
    padding-inline: 0.5rem;
  }

  .top .btn-small {
    padding-inline: 0.75rem;
  }
}

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

.hero {
  overflow: hidden;
  background: var(--navy);
  color: var(--on-navy);
}

.hero .wrap {
  padding-top: 1.25rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.125rem;
  background: var(--orange);
}

.on-navy .eyebrow {
  color: var(--on-navy);
}

.hero h1 {
  margin-top: 0.875rem;
  color: #fff;
  font-size: clamp(2.25rem, 11.2vw, 4.75rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
}

.hero h1 span {
  display: block;
}

.hero .sub {
  max-width: 33rem;
  margin-top: 1.125rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* The way to get it. site.js draws what belongs here from config.js. */
.cta {
  margin-top: 1.5rem;
}

.cta .btn {
  width: 100%;
}

.cta-note {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.cta-note + .cta-note {
  margin-top: 0.25rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.badges a {
  display: inline-flex;
  border-radius: 0.625rem;
}

.badge-apple {
  width: auto;
  height: 3.25rem;
  margin: 0.8125rem; /* Apple asks for clear space of a quarter of the badge's height */
}

.badge-google {
  width: auto;
  height: 4.875rem; /* Google's file carries its own clear space */
}

.cta .badges + .btn {
  margin-top: 0.75rem;
}

/* Two phones: yours in front, your crew's behind. Their feet go under the next section. */
.duo {
  position: relative;
  height: 21.5rem;
  margin-top: 2.25rem;
}

.duo-front,
.duo-back {
  position: absolute;
}

.duo-front {
  top: 0;
  left: 0;
  z-index: 2;
  width: 58%;
  max-width: 17rem;
}

.duo-back {
  top: 2.5rem;
  right: 0;
  z-index: 1;
  width: 51%;
  max-width: 15rem;
}

/* ---------- A phone: the capture, only scaled, inside a plain dark bezel ---------- */

.phone {
  padding: 2.6%;
  border-radius: 15.2% / 7.1%;
  background: var(--bezel);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1.5rem 3rem -1.5rem rgba(15, 23, 42, 0.55);
}

.phone img {
  width: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: 13.4% / 6.2%;
  background: var(--canvas);
}

/* The camera island belongs to the phone, like the bezel. Some captures include it and some
   do not (it depends on the simulator), so the frame draws it for all of them, in the same place. */
.phone {
  position: relative;
}

.phone::after {
  content: '';
  position: absolute;
  top: 2.75%;
  left: 34%;
  width: 32%;
  height: 4.15%;
  border-radius: 999px;
  background: #000;
}

/* ---------- The three chapters ---------- */

.chapter {
  padding-block: 3.5rem 2.5rem;
  background: var(--surface);
}

.chapter-alt {
  background: var(--canvas);
}

.sheet {
  border-radius: var(--sheet) var(--sheet) 0 0;
}

.chapter h2,
.band h2,
.plain h2 {
  margin-top: 0.75rem;
  font-size: clamp(2.125rem, 9vw, 3.5rem);
  letter-spacing: -0.035em;
}

.lede {
  max-width: 35rem;
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.row + .row,
.lede + .row {
  margin-top: 3.5rem;
}

.row h3 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.row h3 + p {
  max-width: 35rem;
  margin-top: 0.625rem;
}

.facts {
  max-width: 35rem;
  margin-top: 1.5rem;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.facts li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.45;
}

.facts li::before {
  content: '';
  position: absolute;
  top: 1.4em;
  left: 0;
  width: 0.75rem;
  height: 0.1875rem;
  border-radius: 1px;
  background: var(--orange);
}

/* Screens side by side. On a phone the row slides sideways and snaps; it never moves the page. */
.strip {
  display: flex;
  gap: 1rem;
  margin: 2rem calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 1rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}

.strip > li {
  flex: 0 0 min(72vw, 17.5rem);
  scroll-snap-align: start;
}

@media (hover: none) {
  .strip {
    scrollbar-width: none;
  }

  .strip::-webkit-scrollbar {
    display: none;
  }
}

.who {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

.who-crew {
  background: var(--navy);
  color: #fff;
}

.who-you {
  background: var(--orange);
  color: var(--on-orange);
}

.shot figcaption {
  margin-top: 0.875rem;
  padding-right: 0.5rem;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ---------- Navy bands: getting started, and the last call ---------- */

.band {
  overflow: hidden;
  background: var(--navy);
  color: var(--on-navy);
}

.band .wrap {
  padding-top: 3.5rem;
}

.band h2 {
  color: #fff;
}

.steps {
  max-width: 35rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  min-height: 2.75rem;
  padding-left: 3.75rem;
  counter-increment: step;
}

.steps li + li {
  margin-top: 1.75rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-orange);
  font-size: 1.25rem;
  font-weight: 800;
}

.steps h3 {
  padding-top: 0.5rem;
  color: #fff;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.steps p {
  margin-top: 0.375rem;
}

.after-steps {
  margin-top: 2rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
}

/* One phone whose lower half goes under the next section. */
.peek {
  width: min(74vw, 18rem);
  height: 23rem;
  margin: 2.5rem auto 0;
}

.band-last .wrap {
  padding-bottom: 3.5rem;
}

.band-last h2 {
  max-width: 44rem;
}

/* ---------- Light sections after the chapters ---------- */

.plain {
  padding-block: 3.5rem;
  background: var(--surface);
}

.plain-alt {
  background: var(--canvas);
}

.points {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.points li {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}

.points h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.points p {
  margin-top: 0.25rem;
}

/* Plans. Hidden in the page until every price in config.js is filled in. */
.plans {
  display: grid;
  gap: 0.875rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.plan {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
}

.plan-size {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.plan-price {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-terms {
  margin-top: 0.5rem;
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.plan-contact {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plans-note {
  margin-top: 1.25rem;
  color: var(--soft);
  font-size: 0.9375rem;
}

/* Questions */
.faq {
  max-width: 46rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 1.125rem 2.75rem 1.125rem 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.375rem;
  width: 1rem;
  height: 0.1875rem;
  margin-top: -0.09375rem;
  border-radius: 1px;
  background: var(--navy);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: none;
}

.faq details p {
  max-width: 40rem;
  padding: 0 0 1.25rem;
}

/* ---------- Footer ---------- */

.foot {
  background: var(--navy-deep);
  color: var(--on-navy);
  font-size: 0.9375rem;
}

.foot .wrap {
  padding-block: 2.5rem 2.5rem;
}

.foot img {
  width: auto;
  height: 3rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #fff;
  font-weight: 700;
}

.foot p {
  max-width: 44rem;
  margin-top: 0.75rem;
}

.foot .legal-lang {
  margin-top: 0.25rem;
}

.foot .company {
  margin-top: 1.5rem;
  color: #fff;
  font-weight: 700;
}

.foot .marks {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- The bar that keeps the action in reach on a phone ---------- */

.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--navy);
  transform: translateY(110%);
  visibility: hidden;
}

.dock.is-up {
  transform: none;
  visibility: visible;
}

.dock .btn {
  width: 100%;
  min-height: 3.25rem;
}

.dock .cta-note {
  margin-top: 0.375rem;
  color: var(--on-navy);
  font-size: 0.8125rem;
  text-align: center;
}

body.has-dock .foot .wrap {
  padding-bottom: 8rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .dock {
    transition:
      transform 0.25s ease,
      visibility 0.25s;
  }

  .btn-primary {
    transition: background-color 0.15s ease;
  }
}

/* A ribbon for the owner's preview of things that are still hidden (site.js, from disk only). */
.preview-ribbon {
  padding: 0.5rem var(--gutter);
  background: #fde68a;
  color: #451a03;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Wider than a phone ---------- */

@media (min-width: 40rem) {
  :root {
    --gutter: 2rem;
  }

  .cta .btn {
    width: auto;
    min-width: 17rem;
  }

  .duo {
    max-width: 30rem;
  }

  .points {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }

  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 48rem) {
  .dock {
    display: none;
  }

  body.has-dock .foot .wrap {
    padding-bottom: 2.5rem;
  }
}

/* ---------- Laptop and up: text beside the screens ---------- */

@media (min-width: 64rem) {
  :root {
    --gutter: 2.5rem;
    --sheet: 2.5rem;
  }

  body {
    font-size: 1.125rem;
  }

  .top {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .brand img {
    height: 3rem;
  }

  .hero .wrap {
    display: grid;
    /* The words never get narrower than the headline's longest line: with enlarged text the phones give way. */
    grid-template-columns: minmax(min-content, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    padding-top: 3rem;
  }

  .hero h1 {
    font-size: clamp(3.5rem, 5vw, 4.5rem);
  }

  .hero h1 span {
    white-space: nowrap;
  }

  .hero .sub {
    margin-top: 1.5rem;
    font-size: 1.3125rem;
  }

  .cta {
    margin-top: 2rem;
  }

  .hero-copy {
    padding-block: 2rem 5rem;
  }

  .duo {
    align-self: end;
    width: 100%;
    max-width: 34rem;
    height: 31rem;
    margin: 0 0 0 auto;
  }

  .duo-front {
    width: 19rem;
    max-width: 57%;
  }

  .duo-back {
    top: 3.5rem;
    width: 16.5rem;
    max-width: 50%;
  }

  .chapter {
    padding-block: 6rem 5rem;
  }

  .row,
  .setup {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }

  .row + .row {
    margin-top: 6rem;
  }

  .lede + .row {
    margin-top: 2rem;
  }

  .row-text {
    padding-top: 2.5rem;
  }

  .row h3 {
    font-size: 1.875rem;
  }

  .lede {
    font-size: 1.25rem;
  }

  .strip {
    justify-content: flex-end;
    gap: 2rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .strip > li {
    flex: 0 1 17.5rem;
  }

  .band .wrap {
    padding-top: 6rem;
  }

  .setup .peek {
    align-self: end;
    width: 18rem;
    height: 31rem;
    margin: 0 4rem 0 auto;
  }

  .setup-text {
    padding-bottom: 6rem;
  }

  .band-last .wrap {
    padding-bottom: 6rem;
  }

  .plain {
    padding-block: 6rem;
  }

  .crew {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }

  .crew .points {
    grid-template-columns: 1fr;
  }

  .crew .strip {
    padding-top: 2.5rem;
  }

  .plans {
    grid-template-columns: repeat(4, 1fr);
  }

  .faq summary {
    font-size: 1.25rem;
  }
}

/* ---------- Long text: privacy, terms, deleting an account ---------- */

.doc-top {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.doc-top .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  max-width: 52rem;
  padding-block: 0.75rem;
}

.doc-top .lang,
.doc-top .back {
  color: var(--navy);
}

.doc-top .back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.doc {
  background: var(--surface);
}

.doc .wrap {
  max-width: 52rem;
  padding-block: 2.5rem 4rem;
}

.doc-note {
  margin-bottom: 2rem;
  padding: 0.875rem 1rem;
  border-left: 0.25rem solid var(--orange);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--canvas);
  font-size: 0.9375rem;
}

.doc h1 {
  font-size: clamp(2.125rem, 8vw, 3rem);
  letter-spacing: -0.035em;
}

.doc h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.doc h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.doc p,
.doc ul,
.doc ol {
  margin-top: 1rem;
}

.doc p,
.doc li {
  line-height: 1.65;
}

.doc ul,
.doc ol {
  padding-left: 1.375rem;
}

.doc li + li {
  margin-top: 0.5rem;
}

.doc strong {
  color: var(--ink);
}

.doc a {
  color: var(--navy);
  font-weight: 600;
}

.doc .table {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.doc table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doc th,
.doc td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--canvas);
  color: var(--ink);
  font-weight: 700;
}

.doc tr:last-child td {
  border-bottom: 0;
}

.doc .toc {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--canvas);
}

.doc .toc h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc .toc ol {
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
  columns: 16rem 2;
  column-gap: 2rem;
}

.doc .toc li {
  margin: 0;
  break-inside: avoid;
}

.doc .toc a {
  display: inline-block;
  padding: 0.3125rem 0;
  font-size: 0.9375rem;
}

.doc .steps-plain {
  padding-left: 1.5rem;
}

@media print {
  .top,
  .doc-top,
  .foot,
  .dock,
  .toc {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .doc .wrap {
    max-width: none;
    padding: 0;
  }
}