:root{--gap:16px;--radius:32px;--pad:26px}
@media(min-width:768px){:root{--gap:28px;--radius:40px;--pad:44px}}
@media(min-width:1200px){:root{--gap:40px;--radius:48px;--pad:64px}}
body{margin:0;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Onest,system-ui,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#11111A;text-decoration:none}a:hover{opacity:.7}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}
@keyframes bpulse{0%,100%{opacity:.35}50%{opacity:1}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
.card:hover .shot{transform:translateX(-50%) translateY(-14px)}
.rail::-webkit-scrollbar{display:none}
@media(max-width:767px){
  [data-hbr]{display:none}
  [data-prow]{flex-direction:column!important;align-items:flex-start!important;gap:32px!important}
  [data-quote]{height:190px!important}
  [data-navrow]{justify-content:center!important}
  [data-subform]{padding-left:18px!important}
  [data-subform] input{font-size:16px!important}
}
@media(min-width:768px) and (max-width:1199px){
  [data-prow]{gap:44px!important}
}
.card:hover .lm{text-decoration:underline;text-underline-offset:3px}

/* hover states, lifted from the mockup's style-hover attributes */
[data-hx="hx1"]:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.8)}
[data-hx="hx2"]:hover{transform:translateY(-2px);opacity:.9}
[data-hx="hx3"]:hover{opacity:.62}
[data-hx="hx4"]:hover{background:#E3E3E8}
[data-hx="hx5"]:hover{opacity:.85}
[data-hx="hx6"]:hover{color:#11111A}

/* the mockup drew its rails' scrollbars away; ours also must not steal the
   vertical swipe — overflow-y computes to auto from overflow-x otherwise */
.rail { overflow-y: hidden; overscroll-behavior-x: contain; }
[data-live] { font-variant-numeric: tabular-nums; }
[data-soon-page] { user-select: none; }

@media (max-width: 767px) {
  /* Stacked, the row becomes a column, and a column flex line sizes its children
     to their content — the screenshot rail is 1200px wide, so the whole page
     started scrolling sideways. Pin them to the line instead. */
  [data-prow] > * { width: 100%; min-width: 0 !important; }

  /* A review card is content-box, so its 24px padding was added on top of the
     declared min(84vw,420px): a 378px box on a 393px phone, running off the
     screen with the next card pushed out of sight entirely. Measured as a whole
     box instead, and sized to leave the next one showing: 16px of gap and 44px
     of the card behind it. */
  /* 10vh of a tall phone is 85px, and two of them meet between every pair of
     sections: 258px of white between one app and the next, a third of the
     screen. The desktop rhythm is the mockup's and stays as drawn. */
  [data-band] { padding-top: clamp(24px, 4vh, 64px) !important; padding-bottom: clamp(24px, 4vh, 64px) !important; }
  [data-band="reviews"] { padding-top: clamp(28px, 4.5vh, 72px) !important; }

  [data-rail="reviews"] > * {
    box-sizing: border-box;
    /* !important because the mockup sets the width inline; the 420 cap is the
       mockup's own, kept so wide tablets do not get a stretched card */
    width: min(420px, calc(100vw - var(--pad) - 60px)) !important;
  }
}

/* A phone on its side. The page is built for a tall screen, and two things go
   wrong on a short one: the floors under the section padding stack up into a
   screenful of white, and the hero's own rhythm is too generous for 375px of
   height. The vh-based sizing the mockup already uses is kept — only the floors
   written for a tall screen are lifted. */
@media (orientation: landscape) and (max-height: 560px) {
  [data-band] { padding-top: 7vh !important; padding-bottom: 7vh !important; }
  [data-band="reviews"] { padding-top: 8vh !important; padding-bottom: 6vh !important; }
}

/* Subscribe waits for an address. The button is styled inline by the mockup, so
   these have to shout over it. */
[data-subform] button[type=submit] {
  transition: background .25s ease, color .25s ease, opacity .25s ease !important;
}
[data-subform] button[type=submit]:disabled {
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.4) !important;
  cursor: default !important;
}
[data-hx="hx5"]:disabled:hover { opacity: 1 }

/* Domain suggestions, opened once the address reaches its @. Parked on <body>:
   the subscribe card is a squircle with overflow hidden, which cut the list off
   at its edge. Absolute, in document coordinates, so it rides the page instead
   of lagging behind it on an iOS momentum scroll. Position from the script. */
[data-domains] {
  position: absolute; z-index: 90;
  min-width: 232px; padding: 6px;
  /* the script caps the height to the room it has; without this the padding and
     border would be added on top of that cap and sit over the field */
  box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  background: #1C1C22; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
[data-domains].is-open { opacity: 1; transform: none; pointer-events: auto }
[data-domains] button {
  display: block; width: 100%; padding: 9px 14px; border: 0; border-radius: 12px;
  background: none; color: rgba(255,255,255,.86); font: inherit; font-size: 16px;
  letter-spacing: -.01em; text-align: left; cursor: pointer; white-space: nowrap;
}
[data-domains] button:hover, [data-domains] button[aria-selected=true] {
  background: rgba(255,255,255,.1); color: #fff;
}
[data-domains] b { font-weight: 400; color: rgba(255,255,255,.42) }