/* Owl landing pages and faux signup flow. Sizes, colors and spacing come from the Q3 Brand Ceiling Test Figma file
   (landing: "Cell 3 - Owl"; signup: "Sign-up friction explorations", Variant B). The design is 1440px wide; the
   media query at the end follows the 390px mobile frames ("Cell 3 (Owl Mail)", "Cell 4 / Cell 5" mobile) up to 1023px,
   and from 1024 to 1439px the desktop layout is scaled down to fit (end of file). The signup steps have no mobile
   frame, so on narrow screens they just stack. System fonts stand in for the design's fonts, which are
   not ours to serve. */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: #1d1d1d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #000;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* Copy and controls that only one layout shows. The mobile frames shorten some copy and add a menu button. */
.mobile-only,
.menu {
  display: none;
}

.btn:focus-visible,
.menu summary:focus-visible {
  outline: 2px solid #3b80c7;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------------------------------
   Landing page
   ------------------------------------------------------------------------------------------------------------------ */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 96px;
  padding: 0 80px;
}

/* Brand lockup: the wordmark, plus the "by" mark in Cells 4 and 5 only. */
.lockup,
.by-mark {
  display: flex;
  gap: 10px;
  align-items: center;
}

.by-mark i {
  width: 1px;
  height: 32px;
  background: #e0e4e9;
}

.by-mark span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 51.125px;
}

.by-mark img {
  width: 51.125px;
  height: auto;
}

.by-mark b {
  height: 16px;
  font-weight: 400;
  color: #5b636a;
  font-size: 14px;
  line-height: 16px;
}

.footer .by-mark i {
  background: #979ea8;
}

/* Figma's "by" here is #141414, which can't be seen on the dark footer; use the tagline grey. */
.footer .by-mark b {
  color: #b0b0b0;
}

.nav .btn {
  margin-left: auto;
  height: 48px;
  padding: 0 25px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.hero {
  height: 855px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #fff 100%) top / 100% 768px no-repeat,
    linear-gradient(144.58deg, #fff 39.286%, #e6e6f5 66.429%, #daeaf4 89.286%) top / 100% 768px no-repeat;
}

.hero .wrap {
  height: 100%;
}

.hero-copy {
  position: absolute;
  top: 275.5px;
  left: 130px;
  width: 653px;
}

.hero h1 {
  font-size: 72px;
  line-height: 75.6px;
  font-weight: 700;
}

.hero-sub {
  margin-top: 19px;
  font-size: 20px;
  line-height: 29px;
}

.hero .btn {
  margin-top: 19px;
  min-height: 52px;
  padding: 14px 20px;
  background: #2c2c2c;
  font-size: 17px;
  line-height: 20px;
}

.hero-note {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 19px;
  color: #5b636a;
  font-size: 17px;
  line-height: 24px;
}

.logos {
  display: flex;
}

.logos span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  background: #fff;
}

.logos span + span {
  margin-left: -7px;
}

.hero-inbox {
  position: absolute;
  top: 175px;
  left: 797px;
  width: 643px;
  height: 628px;
}

.hero-scene {
  position: absolute;
  top: 524px;
  left: 704px;
  width: 257px;
  height: 256px;
}

.proof {
  display: flex;
  align-items: center;
  height: 165px;
  padding: 0 80px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}

.proof-item {
  display: flex;
  flex: 1 0 0;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.proof-item + .proof-item {
  border-left: 1px solid #e6e6e6;
}

.proof-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  background: #fff;
}

.proof-icon + .proof-icon {
  margin-left: -29px;
}

.proof-value {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #141414;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
}

.proof-label {
  margin-top: 4px;
  color: #5e5e5e;
  font-size: 15px;
  line-height: 22px;
}

.stars {
  display: flex;
  gap: 4px;
}

.section-head {
  text-align: center;
}

.section-head h2 {
  font-size: 48px;
  line-height: 53px;
  font-weight: 700;
}

.section-head p {
  margin-top: 12px;
  font-size: 20px;
  line-height: 29px;
}

.features {
  padding: 80px 0 64px;
}

.features .section-head p {
  color: #323232;
}

.feature-list {
  margin-top: 68px;
}

.feature {
  display: flex;
  gap: 65px;
  align-items: center;
  justify-content: center;
}

.feature + .feature {
  margin-top: 101px;
}

.feature-copy {
  width: 480px;
}

.feature-copy h3 {
  font-size: 48px;
  line-height: 50.4px;
  font-weight: 700;
}

.feature-copy p {
  margin-top: 16px;
  font-size: 20px;
  line-height: 29px;
}

.feature-copy .footnote {
  font-size: 14px;
  line-height: 15.4px;
  font-weight: 500;
}

.card {
  position: relative;
  width: 480px;
  height: 384px;
  border-radius: 20px;
  background: #e7e7f0;
  overflow: hidden;
}

.inboxes {
  position: absolute;
  top: 75.5px;
  left: 127.7px;
  width: 224.6px;
  height: 233px;
  padding: 0 18.2px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.inboxes-title {
  height: 32.5px;
  margin: 0 -18.2px 9.8px;
  border-bottom: 0.66px solid #e6e6e6;
  font-size: 12px;
  line-height: 32px;
  font-weight: 500;
  text-align: center;
  color: #000;
}

.inbox-row {
  display: flex;
  gap: 17.2px;
  height: 53.7px;
  padding: 11.5px 13px;
  border: 0.854px solid #d9d9d9;
  border-radius: 5.784px;
}

.inbox-row + .inbox-row {
  margin-top: 7.8px;
}

.inbox-row .mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
}

.bars i {
  display: block;
  width: 114px;
  height: 5.2px;
  margin-top: 3.1px;
  border-radius: 36px;
  background: #d9d9d9;
}

.bars i:first-child {
  width: 62.6px;
  height: 8.4px;
  margin: 0 0 8.4px;
}

.confidence {
  padding: 58.5px 0 58.5px;
}

.confidence .section-head h2 {
  line-height: 53px;
}

.columns {
  display: flex;
  gap: 28px;
  width: 1069px;
  min-height: 224px;
  margin: 56px auto 0;
}

.column {
  flex: 1 0 0;
  text-align: center;
}

.column + .column {
  position: relative;
}

.column + .column::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  border-left: 1px solid #e6e6e6;
}

.column-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #141414;
}

.column h3 {
  color: #2c2c2c;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.column p {
  margin-top: 8px;
  color: #767676;
  font-size: 17px;
  line-height: 26px;
}

.feel {
  display: flex;
  justify-content: center;
  padding: 98px 16px;
}

.feel-box {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  width: 1200px;
  height: 454.8px;
  border-radius: 20px;
  background: #e7e7f0;
}

.feel-box img {
  margin-right: 104px;
}

.feel-box h2 {
  color: #2c2c2c;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
}

.feel-box p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-align: center;
}

.feel-box .btn {
  margin-top: 16px;
  min-height: 52px;
  padding: 14px 20px;
  font-size: 17px;
  line-height: 20px;
}

.feel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq {
  min-height: 1529px;
  padding: 96px 0 132px;
}

.faq .section-head {
  width: 832px;
  margin: 0 auto;
}

.faq .section-head h2 {
  color: #1a1919;
  line-height: 48px;
  letter-spacing: -0.72px;
}

.faq-list {
  width: 832px;
  margin: 48px auto 0;
}

.faq-item {
  border: 1px solid #ededed;
  border-radius: 12px;
  background: #f8f8f8;
}

.faq-item + .faq-item {
  margin-top: 12px;
}

.faq-q {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 20px 24px;
  font-size: 18px;
  line-height: 26.1px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.faq-q span {
  flex: 1 0 0;
}

.faq-q svg {
  flex: none;
  transition: transform 0.15s;
}

details[open] .faq-q svg {
  transform: rotate(180deg);
}

div.faq-item .faq-q {
  cursor: default;
}

.faq-a {
  padding: 0 24px 20px;
  color: #5b636a;
  font-size: 16px;
  line-height: 24px;
}

.footer {
  padding: 31px 144px 34px;
  background: #1d1d1f;
}

.footer-inner {
  display: flex;
  gap: 31px;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  justify-content: space-between;
  min-height: 116px;
}

.footer-brand p {
  margin-top: 4px;
  color: #b0b0b0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.21px;
}

.footer-brand small {
  color: #888;
  font-size: 12px;
  line-height: 18px;
}

.footer-links {
  display: flex;
  gap: 31px;
}

.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #bbb;
  font-size: 13px;
  line-height: 20px;
}

.footer-links li + li {
  margin-top: 4px;
}

.footer-links li:first-child {
  color: #fff;
  font-weight: 700;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #121212;
}

.sticky .wrap {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 0 120px;
}

.sticky strong {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.27px;
}

.sticky span {
  display: block;
  color: #b0b0b0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.21px;
}

.sticky .btn {
  padding: 8px 28px;
  background: #fefefe;
  color: #000;
  font-size: 16px;
  line-height: 35.2px;
}

/* ---------------------------------------------------------------------------------------------------------------------
   Signup flow
   ------------------------------------------------------------------------------------------------------------------ */

.signup {
  display: flex;
  min-height: 100vh;
  color: #121212;
}

.panel {
  position: relative;
  flex: none;
  width: 600px;
  min-height: 100vh;
  padding: 56px 64px;
  background: #1c1c1f;
  color: #fff;
}

.panel h1 {
  position: absolute;
  top: 330px;
  left: 64px;
  width: 480px;
  font-size: 56px;
  line-height: 76px;
  font-weight: 700;
}

.panel p {
  position: absolute;
  top: 500px;
  left: 64px;
  width: 440px;
  color: #b2b2b8;
  font-size: 18px;
  line-height: 24px;
}

.step {
  /* Stretched to the page's full height by the flex row, so the step 8 footnote can sit at its foot. */
  position: relative;
  width: 440px;
  margin: 96px 0 96px 200px;
}

.step-label {
  color: #5c636b;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.progress {
  display: flex;
  gap: 5px;
  margin: 8px 0 44px;
}

.progress i {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: #d9dbe0;
}

.progress i.on {
  background: #121212;
}

.step h2 {
  font-size: 30px;
  line-height: 41px;
  font-weight: 700;
}

.step-sub {
  margin-top: 8px;
  color: #5c636b;
  font-size: 16px;
  line-height: 22px;
}

.fields {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

/* Step 1 stacks name, birthday and phone, 20px apart (Figma 1006:43). */
.fields + .fields {
  margin-top: 20px;
}

.field {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  color: #5c636b;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #d9dbe0;
  border-radius: 10px;
  background: #fff;
  color: #121212;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}

.input::placeholder {
  color: #8a9098;
}

.input:focus {
  border-color: #121212;
  outline: none;
}

select.input {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c636b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
}

.input-row {
  display: flex;
  gap: 12px;
}

.input-row .input {
  min-width: 0;
}

.input-row .country {
  flex: none;
  width: 96px;
}

.hint {
  margin-top: 4px;
  color: #5c636b;
  font-size: 12px;
  line-height: 16px;
}

.step .btn {
  width: 100%;
  height: 48px;
  margin-top: 28px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.review {
  margin-top: 20px;
}

.review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  border-bottom: 1px solid #d9dbe0;
  font-size: 14px;
  line-height: 19px;
}

.review-row span {
  color: #5c636b;
}

.review-row a {
  color: #5c636b;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.done-art {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
}

.step .body {
  margin-top: 8px;
  color: #5c636b;
  font-size: 16px;
  line-height: 22px;
}

.step .body + .body {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------------------------------------------------
   Mobile (Figma "Cell 3 (Owl Mail)" mobile frame, 390px wide). Desktop rules above stay as they are.
   ------------------------------------------------------------------------------------------------------------------ */

@media (max-width: 1023px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: inline;
  }

  /* Header: logo and a menu button that opens the "Create an account" link. */
  .nav {
    position: relative;
    height: 72px;
    padding: 16px;
    background: #fff;
  }

  .nav .lockup a img {
    width: 104px;
    height: 32px;
  }

  .nav .by-mark i {
    height: 26px;
  }

  .nav .by-mark span {
    gap: 0;
  }

  .nav .by-mark b {
    font-size: 12px;
  }

  .nav > .btn {
    display: none;
  }

  .menu {
    display: block;
    margin-left: auto;
  }

  .menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 80px;
    background: #edeef2;
    list-style: none;
    cursor: pointer;
  }

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

  .menu .btn {
    position: absolute;
    top: 64px;
    right: 16px;
    height: 48px;
    padding: 0 25px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }

  /* Hero: centered copy over the left part of the inbox shot, faded to white at the bottom. */
  .hero {
    height: auto;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 82%, #fff 100%),
      linear-gradient(139.548deg, #fff 25.6%, #e6e6f5 48%, #daeaf4 67.2%);
  }

  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 24px;
  }

  .hero .wrap::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    z-index: 1;
    height: 270px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 27.35%, #fff 50.13%);
  }

  .hero-copy {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 333px;
    max-width: 100%;
    text-align: center;
  }

  .hero h1 {
    color: #1d1d1f;
    font-size: 32px;
    line-height: 40px;
  }

  .hero-sub {
    width: 319px;
    max-width: 100%;
    margin-top: 16px;
    font-size: 16px;
    line-height: 22px;
  }

  .hero .btn {
    margin-top: 32px;
  }

  .hero-note {
    flex-direction: column-reverse;
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .hero-inbox {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    align-self: flex-start;
    max-width: none;
    margin: 2px 0 -1px -9px;
  }

  .hero-scene {
    top: auto;
    bottom: 137px;
    left: 3px;
    z-index: 3;
    width: 199px;
    height: 199px;
  }

  /* Proof: three narrow columns that sit on the hero's faded bottom. */
  .proof {
    position: relative;
    z-index: 2;
    height: 161px;
    margin-top: -164px;
    margin-bottom: 3px;
    padding: 28px 8px;
    background: #fff;
  }

  .proof-item {
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 0;
    height: 103px;
    min-width: 0;
    text-align: center;
  }

  .proof-item:first-child {
    order: 2;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
  }

  .proof-item:nth-child(2) {
    order: 1;
  }

  .proof-item:nth-child(3) {
    order: 3;
  }

  .proof-item + .proof-item {
    border-left: 0;
  }

  .proof-item > div {
    flex-basis: 100%;
  }

  .proof-icon {
    width: 30px;
    height: 30px;
    border-width: 0.714px;
  }

  .proof-icon + .proof-icon {
    margin-left: -7px;
  }

  .proof-icon img {
    width: auto;
    height: 16px;
  }

  .proof-icon svg {
    width: 16px;
    height: 16px;
  }

  .proof-value {
    justify-content: center;
    gap: 4px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.15px;
  }

  .stars svg {
    width: 18px;
    height: 18px;
  }

  .stars svg + svg {
    display: none;
  }

  .proof-label {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
  }

  /* Section headings shared by Features, Connect with confidence and FAQ. */
  .section-head {
    padding: 0 16px;
  }

  .section-head h2 {
    color: #1d1d1f;
    font-size: 32px;
    line-height: 40px;
  }

  .section-head p {
    font-size: 16px;
    line-height: 22px;
  }

  /* Features: each card above its copy. */
  .features {
    padding: 60px 16px;
  }

  .features .section-head p {
    margin-top: 16px;
    color: #1d1d1d;
  }

  .feature-list {
    margin-top: 41px;
  }

  .feature {
    flex-direction: column;
    gap: 20px;
  }

  .feature + .feature {
    margin-top: 41px;
  }

  .feature .card {
    order: -1;
    flex: none;
    width: 320px;
    height: 320px;
    margin: 10px 0;
  }

  img.card {
    object-fit: none;
  }

  .inboxes {
    top: 43px;
    left: 47.7px;
  }

  .feature-copy {
    width: 333px;
    max-width: 100%;
    text-align: center;
  }

  .feature-copy h3 {
    color: #1d1d1f;
    font-size: 24px;
    line-height: 26.4px;
  }

  .feature-copy p {
    font-size: 16px;
    line-height: 22px;
  }

  .feature-copy .footnote {
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
  }

  /* Connect with confidence: columns stack, split by hairlines. */
  .confidence {
    padding: 40px 16px;
  }

  .confidence .section-head h2 {
    color: #1d1d1d;
    line-height: 40px;
  }

  .confidence .section-head p {
    color: #1d1d1d;
  }

  .columns {
    flex-direction: column;
    gap: 0;
    width: auto;
    min-height: 0;
    margin-top: 32px;
  }

  .column {
    padding: 28px 16px;
  }

  .column:first-child {
    padding-top: 0;
  }

  .column:last-child {
    padding-bottom: 0;
  }

  .column + .column {
    border-top: 1px solid #e6e6e6;
  }

  .column + .column::before {
    display: none;
  }

  .column-icon {
    margin-bottom: 16px;
  }

  .column h3 {
    color: #1d1d1d;
    font-size: 20px;
    line-height: 28px;
  }

  .column p {
    font-size: 16px;
    line-height: 24px;
  }

  /* Feel */
  .feel {
    padding: 60px 20px;
  }

  .feel-box {
    flex: 1 0 0;
    gap: 24px;
    width: auto;
    height: auto;
    min-height: 462.822px;
    padding: 0 10px;
  }

  .feel-box img {
    margin-right: 24px;
  }

  .feel-box h2 {
    width: 266px;
    max-width: 100%;
    color: #1d1d1f;
    font-size: 32px;
    line-height: 40px;
  }

  .feel-box h2 br {
    display: none;
  }

  .feel-box .btn {
    margin-top: 24px;
  }

  /* FAQ */
  .faq {
    min-height: 0;
    padding: 0;
  }

  .faq .section-head {
    width: 333px;
    max-width: 100%;
    padding: 0;
  }

  .faq .section-head h2 {
    color: #1d1d1f;
    line-height: 40px;
    letter-spacing: 0;
  }

  .faq .section-head p {
    width: 319px;
    max-width: 100%;
    margin: 12px auto 0;
  }

  .faq-list {
    width: auto;
    margin: 48px 14.5px 0;
  }

  /* Footer: brand, then the link columns, then a hairline and the copyright line. */
  .footer {
    padding: 32px 24px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 28px;
  }

  .footer-brand {
    display: contents;
  }

  .footer-links {
    order: 1;
    justify-content: space-between;
    gap: 0;
  }

  .footer-brand small {
    order: 2;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Sticky bar */
  .sticky .wrap {
    gap: 16px;
    height: auto;
    padding: 20px 16px;
  }

  .sticky .wrap > div {
    flex: 1 0 0;
    min-width: 0;
  }

  .sticky strong {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.21px;
  }

  .sticky span {
    display: none;
  }

  .sticky .btn {
    flex: none;
    width: 173.406px;
    padding: 12px 16px;
    border: 1px solid #cdcdcd;
    background: #f5f5f5;
    color: #141414;
    font-size: 14px;
    line-height: 15.4px;
    font-weight: 600;
  }

  /* Signup steps (no mobile frame in Figma): the panel stacks above the step and everything goes full width. */
  .signup {
    flex-direction: column;
  }

  .panel {
    width: auto;
    min-height: 0;
    padding: 24px 20px 32px;
  }

  .panel h1,
  .panel p {
    position: static;
    width: auto;
  }

  .panel h1 {
    margin-top: 24px;
    font-size: 32px;
    line-height: 40px;
  }

  .panel p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 22px;
  }

  .step {
    width: auto;
    margin: 32px 20px 48px;
  }

  .progress i {
    flex: 1 1 0;
    width: auto;
  }

  .input {
    font-size: 16px;
  }
}

/* Review step: what the person typed, filled in by flow.js from this tab's memory. */
.review-row .review-value {
  margin: 0 16px 0 auto;
  overflow: hidden;
  color: #1d1d1f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 1024-1439px (most laptops): the desktop layout is a fixed 1440px design, so scale the whole page to fit instead of
   scrolling sideways. Each band scales to its narrowest width; 1440px and up are unchanged. The signup panel's full-height minimum
   is divided by the same factor so it still reaches the bottom of the window. */
@media (min-width: 1024px) and (max-width: 1099px) {
  body { zoom: 0.711; }
  .signup, .panel { min-height: calc(100vh / 0.711); }
}
@media (min-width: 1100px) and (max-width: 1151px) {
  body { zoom: 0.763; }
  .signup, .panel { min-height: calc(100vh / 0.763); }
}
@media (min-width: 1152px) and (max-width: 1199px) {
  body { zoom: 0.8; }
  .signup, .panel { min-height: calc(100vh / 0.8); }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  body { zoom: 0.833; }
  .signup, .panel { min-height: calc(100vh / 0.833); }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  body { zoom: 0.888; }
  .signup, .panel { min-height: calc(100vh / 0.888); }
}
@media (min-width: 1366px) and (max-width: 1399px) {
  body { zoom: 0.948; }
  .signup, .panel { min-height: calc(100vh / 0.948); }
}
@media (min-width: 1400px) and (max-width: 1439px) {
  body { zoom: 0.972; }
  .signup, .panel { min-height: calc(100vh / 0.972); }
}