html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: #FAF8F5; -webkit-font-smoothing: antialiased; }
a { color: #111010; text-decoration: none; }
a:hover { color: #574FD6; }
img { display: block; }
/* A .frame fills its parent, so the PARENT must be a containing block —
   always give it `position: relative` explicitly. Do not lean on the
   parent's `filter` to do it: filter is specified to create a containing
   block for absolutely positioned descendants, but iPad Safari/Chrome did
   not apply it (2026-08-14), so three frames escaped all the way to the
   initial containing block and stacked over the hero at the top of the
   page. This :has() rule is a safety net for engines that support it —
   it is NOT the fix, because an engine old enough to have the original
   bug may not support :has() either. */
.frame { position: absolute; inset: 0; overflow: hidden; }
.frame .ph { width: 100%; height: 100%; object-fit: cover; }
:has(> .frame) { position: relative; }
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn-dark:hover { background: #574FD6 !important; color: #FAF8F5 !important; }
.btn-outline:hover { border-color: #574FD6 !important; color: #574FD6 !important; }
/* Mobile navigation. The header bar needs ~703px for logo + links + CTA,
   so below that the links run off the right edge. Collapse them into a
   panel behind a toggle. The nav's display/gap/margin and the CTA's
   padding/font-size are inline, hence the !important overrides. */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  header > div {
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Keeps the trial CTA in the bar at 320px instead of burying it in the panel.
     margin-left:auto moves here because the element that carries it on desktop
     is the <nav>, which is display:none below this breakpoint — an out-of-flow
     element's auto margin pushes nothing, so the CTA and toggle packed against
     the logo and left a gap at the right edge. */
  header > div > a.btn {
    font-size: 10px !important;
    padding: 9px 11px !important;
    margin-left: auto !important;
  }
  header nav { display: none !important; }
  header.nav-open nav {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    gap: 0 !important;
    padding-bottom: 6px;
    background: #FAF8F5;
    border-bottom: 1px solid #111010;
  }
  header.nav-open nav a {
    padding: 14px 16px;
    border-top: 1px solid #DDD7CE;
  }
  .nav-toggle {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0 6px;
    background: none;
    border: 1px solid #111010;
    border-radius: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1px;
    background: #111010;
    transition: transform .2s ease, opacity .2s ease;
  }
  header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

/* The FAQ heading sits in a tiled panel that stretches to the answer list's
   height, so left-aligned it hangs off the top corner.

   Centring the whole block was not enough once the contact line moved in
   beneath the heading: it put "Questions?" 32px ABOVE the panel's centre
   (measured). A three-row grid with equal 1fr gutters centres the heading
   itself and hangs the contact note below it.

   Spacing comes from row-gap rather than a margin on the paragraph — that
   <p> carries an inline margin:0, which beats any stylesheet rule. The gap
   sits either side of the heading row, so the heading stays centred. */
.faq-aside {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  row-gap: 16px;
  justify-items: center;
  text-align: center;
}
.faq-aside h2 { grid-row: 2; }
.faq-aside p { grid-row: 3; align-self: start; }

/* Below ~570px the three partner logos need 443px + 64px of gaps but the
   column is only ~334px, so one wraps to its own line. Rather than shrink
   them by a fixed amount, give each a percentage of the row proportional
   to its NATURAL width (109 / 155 / 179 of 443) — they then scale together
   with the container, always land on one line, and keep the relative sizes
   the optical alignment above depends on. 4% gaps, so 92% is shared out. */
@media (max-width: 570px) {
  .logo-row {
    flex-wrap: nowrap !important;
    gap: 0 4% !important;
  }
  /* Every width needs !important: these <img> carry an inline width:auto,
     which beats any stylesheet rule. Without it only the height override
     lands and each logo renders at its intrinsic SVG size — measured at
     981px wide before this was caught. */
  .logo-row img { height: auto !important; }
  .logo-row img[alt="Awtomic"]       { width: 22.6% !important; }
  .logo-row img[alt="Eventbrite"]    { width: 32.2% !important; transform: translateY(2px) !important; }
  .logo-row img[alt="Expedia Group"] { width: 37.2% !important; }
}

/* About portrait. Below the wrap breakpoint the founder column no longer
   fills its row, so it left a hard vertical cutoff against the page cream.
   Give the band the portrait's own black and dissolve the right edge into
   it — the photo is shot on black, so the seam disappears. */
@media (max-width: 820px) {
  /* flex/border/min-width are inline on the element, so these need !important */
  #about > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
    background: #111010;
  }
  #about > div:first-child > div {
    /* Full-bleed on a square source: without this the band stays 380px and
       the portrait crops to a letterbox slice as the viewport widens. */
    min-height: max(380px, min(78vw, 560px)) !important;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  }
}
@keyframes riseIn { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.075); } to { transform: scale(1); } }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s cubic-bezier(.22,.68,.16,1), transform .75s cubic-bezier(.22,.68,.16,1);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="scale"] { transform: scale(.985) translateY(22px); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .par { transform: none !important; }
  * { animation: none !important; }
}