/* Brae home page. One sharp, fixed hills background under everything; the Dynamic Island and the words sit on top. */
:root {
  --navy: #0c1329; --ink: #0f1733; --ink-2: #26325e; --accent: #1e2c8f;
  --settle: cubic-bezier(.2,.8,.2,1);
  --settle: linear(0, .125, .343, .544, .699, .807, .879, .925, .955, .973, .984, .99, .994, .997, .998, .999, 1);
  --pill: cubic-bezier(.3,1.25,.5,1);
  --pill: linear(0, .133, .391, .642, .832, .951, 1.013, 1.036, 1.037, 1.029, 1.019, 1.01, 1.004, 1.001, .999, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* The page colour is the sky at the top of the picture: it is what shows if the page is pulled past its top. */
html { -webkit-text-size-adjust: 100%; scroll-snap-type: y proximity; background-color: #659cfa; }
/* Exact, one-section-at-a-time snapping where every panel fits the window. */
@media (min-width: 1024px) and (min-height: 760px) { html { scroll-snap-type: y mandatory; } .panel { scroll-snap-stop: always; } }
/* Touch screens: every swipe settles on a section, one at a time, never halfway between two. A section taller than
   the screen (small iPhones with the toolbar showing) also snaps at its end, so all of it stays reachable. */
@media (pointer: coarse) { html { scroll-snap-type: y mandatory; } .panel { scroll-snap-stop: always; } }
.snap-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; scroll-snap-align: end; pointer-events: none; }
body { margin: 0; color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, .words { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; text-wrap: balance; }
p, dd { text-wrap: pretty; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd { font: 600 .84em/1 -apple-system, BlinkMacSystemFont, sans-serif; padding: .2em .45em; border-radius: 6px; white-space: nowrap;
  background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(15,23,51,.18); }
:focus-visible { outline: 3px solid #1b2a8a; outline-offset: 3px; border-radius: 10px; }
.foot a:focus-visible, .skip:focus-visible { outline-color: #fff; }
main :is(a, button, [tabindex]) { scroll-margin-top: 84px; scroll-margin-bottom: 24px; }

/* The background: the hills image, untouched, fixed for the whole page. Large-viewport height so phones don't rescale it. */
/* No background colour on this fixed layer, on purpose: Safari 26 paints the colour of a fixed element touching the
   screen's edge as a solid band behind its bars. With only the picture here, the bars stay clear glass over the hills. */
.bg { position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: -1; background: url(/img/hills-2560.webp) center bottom / cover no-repeat; }
/* iOS Safari fills the strips behind its status bar and toolbar with one solid colour each, read from a fixed,
   full-width element touching that edge (theme-color is ignored since Safari 26). These two carry the picture's own
   edge colours, sky above and hills below, so each strip reads as the picture continuing. Their colour is clipped to
   an empty content box: Safari reads it, the page paints nothing. (Measured in iOS Safari 27: a 1px strip or opacity: 0 is ignored.) */
/* They sit above the picture layer: Safari reads the topmost fixed element at each edge, and the picture (an image, no colour) would hide them. */
.edge { position: fixed; left: 0; right: 0; height: 0; padding-top: 12px; background-clip: content-box; z-index: 1; pointer-events: none; }
.edge-top { top: 0; background-color: #6ea0fa; }
.edge-bottom { bottom: 0; background-color: #2037a0; }
/* A phone shows the middle of the picture, whose edges are a touch deeper. */
@media (max-width: 820px) { .edge-top { background-color: #659cfa; } .edge-bottom { background-color: #1b3699; } }
/* iPhone: Safari's toolbar is one flat colour, while the hills along its edge run from deep blue to periwinkle, so any
   flat colour alone shows a seam. A long, eased fade pinned to the bottom of the visible screen (so it ends exactly where
   the toolbar begins, whatever its layout or state) softens the hills into the hills' own mid-blue, and the bar
   continues that blue. The shadow fills below the picture with the same blue, so nothing lighter can flash through
   while the toolbar slides. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) {
    .edge-bottom { background-color: #3a54c8; }
    .bg { box-shadow: 0 50vh 0 #3a54c8; }
    .bottom-fade { position: fixed; z-index: -1; left: 0; right: 0; bottom: 0; height: 36vh; pointer-events: none;
      background: linear-gradient(to bottom, rgba(58,84,200,0) 0%, rgba(58,84,200,.04) 16%, rgba(58,84,200,.12) 30%,
        rgba(58,84,200,.25) 43%, rgba(58,84,200,.42) 56%, rgba(58,84,200,.61) 68%, rgba(58,84,200,.79) 79%,
        rgba(58,84,200,.92) 89%, #3a54c8 100%); }
    /* The top edge, the same idea in the sky's colour: text glides out of sight under the floating top bar. */
    .top-fade { position: fixed; z-index: 45; top: 0; left: 0; right: 0; height: 92px; pointer-events: none;
      background: linear-gradient(to bottom, #659cfa 0%, rgba(101,156,250,.82) 42%, rgba(101,156,250,0) 100%); }
  }
}

/* Sharp on every screen, without handing a phone a picture bigger than it can show. */
@media (min-resolution: 2dppx) { .bg { background-image: url(/img/hills-3840.webp); } }
@media (min-resolution: 2dppx) and (min-width: 1800px) { .bg { background-image: url(/img/hills-5120.webp); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  border: 1px solid transparent; font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none;
  transition: transform .2s var(--settle), background-color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 10px 26px rgba(12,19,41,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-dark:hover { background: #18224a; }
.btn-light { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 8px 22px rgba(30,45,120,.16); }
.btn-light:hover { background: #fff; }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 14px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Small print sits on a soft chip, so it reads wherever the hills rise at any window shape. */
.fine { display: inline-block; font-size: 14px; color: var(--ink); margin: 16px 0 0; padding: 6px 14px; border-radius: 14px; background: rgba(238,242,255,.9); }

/* Top bar: just the island and Download. */
.topbar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  max-width: 1240px; margin: 0 auto; padding: 14px 32px; transition: opacity .6s ease, transform .7s var(--settle); }
.brand { transition: opacity .4s ease; }
.topbar.is-quiet .brand { opacity: 0; pointer-events: none; }
html.intro-lock { overflow: hidden; }
.js .topbar { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.js .topbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.brand { display: block; line-height: 0; border-radius: 999px; }
.brand svg { width: 112px; height: auto; filter: drop-shadow(0 6px 14px rgba(12,19,41,.25)); }

/* Panels: each fills the screen and the scroll lands on it exactly. */
.panel { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; }

/* Hero and intro */
.hero { display: flex; justify-content: center; overflow: hidden; }
.intro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.welcome { width: min(720px, 88vw); height: auto; overflow: visible; transform: translateY(-2vh); transition: opacity .6s ease, transform .8s var(--settle), filter .6s ease; }
.welcome.is-gone { opacity: 0; transform: translateY(calc(-2vh - 10px)); filter: blur(3px); }
.no-js .welcome { display: none; }
.ink path { stroke: var(--navy); }
.brae path { stroke: #fff; }
.js .ink path { stroke-dasharray: var(--len) calc(var(--len) + 20); stroke-dashoffset: calc(var(--len) + 10); }
.js .ink.is-done path { stroke-dashoffset: 0; }
.skip { position: fixed; z-index: 3; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; background: rgba(12,19,41,.5); border: 0; border-radius: 999px;
  padding: 10px 16px; min-height: 36px; cursor: pointer; transition: opacity .4s; }
.skip:hover { background: rgba(12,19,41,.7); }
.no-js .skip, .intro-over .skip { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }

.hero-stack { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(92px, 15vh, 150px) 20px 40px; max-width: 900px; }
.island { width: clamp(240px, min(30vw, 34vh), 400px); height: auto; overflow: visible; margin-bottom: clamp(22px, 4vh, 40px);
  filter: drop-shadow(0 18px 30px rgba(12,19,41,.28)); transform-origin: 50% 50%; }
.island.is-gliding { transition: transform 1.15s var(--settle); }
.island .pill { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .8s var(--pill), clip-path .65s var(--settle), opacity .2s ease; }
.js .hero .island:not(.is-open) .pill { clip-path: inset(38% 41% round 999px); transform: scale(.72); opacity: 0; }
.js .hero .island.is-open .pill { clip-path: inset(0 0 round 999px); transform: none; opacity: 1; }
.js .hero .island:not(.is-open) .brae { opacity: 0; }
.js .hero .island.is-open .brae { opacity: 1; transition: opacity .2s ease .2s; }
h1 { font-size: clamp(34px, min(4.8vw, 6.6vh), 60px); line-height: 1.05; letter-spacing: -.018em; font-weight: 650; margin: 0 auto 16px; max-width: 14em; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--ink-2); max-width: 32em; margin: 0 auto 28px; }
.js .reveal > * { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform 1s var(--settle); }
.js .is-revealed .reveal > * { opacity: 1; transform: none; }
.is-revealed .reveal > :nth-child(2) { transition-delay: .1s; }
.is-revealed .reveal > :nth-child(3) { transition-delay: .2s; }
.is-revealed .reveal > :nth-child(4) { transition-delay: .3s; }

/* Fast-forward when the visitor skips: everything settles quickly together. */
.is-ff .welcome, .is-ff .island, .is-ff .island .pill, .is-ff .reveal > *, .is-ff ~ .topbar, .topbar.is-ff { transition-duration: .45s !important; transition-delay: 0s !important; }

/* Manifesto: big words that light up in reading order. */
.manifesto { display: flex; align-items: flex-start; justify-content: flex-start; max-width: 1240px; margin: 0 auto; padding: clamp(96px, 18vh, 200px) 32px 40px; }
.words { max-width: 980px; margin: 0; font-size: clamp(28px, min(4.4vw, 6.4vh), 56px); line-height: 1.14; letter-spacing: -.018em; font-weight: 650; color: var(--ink); }
.js .words .w { display: inline-block; opacity: .16; transform: translateY(.14em); transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.3s var(--settle); }
.js .words.is-lit .w { opacity: 1; transform: none; }
.words .w.brand-word { color: #fff; background: var(--navy); padding: 0 .2em .06em; border-radius: .32em; }

/* Features: text and the notch on a Mac screen, swapping sides each time. */
.feature { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 80px); align-items: start;
  max-width: 1240px; margin: 0 auto; padding: clamp(116px, 19vh, 190px) 32px 48px; }
.feature.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.feature.flip .feature-text { order: 2; }
.feature-text { padding-top: clamp(8px, 3vh, 36px); }
.eyebrow { font-size: 16px; font-weight: 600; color: var(--accent); margin: 0 0 10px; }
.feature h2 { font-size: clamp(32px, min(3.8vw, 6vh), 52px); line-height: 1.05; letter-spacing: -.016em; font-weight: 650; margin: 0 0 16px; }
.feature-text > p:not(.eyebrow) { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 26em; }
/* A clear glass screen outline: the one real background shows through, and the notch hangs from its top edge. */
.device { position: relative; border-radius: 18px; aspect-ratio: 16 / 10; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), 0 40px 90px -40px rgba(12,19,41,.35); }
/* The demo: a still (always there, and all you see with Reduce Motion) with the real recording over it once it plays.
   Both are the same 16:10 canvas as the screen, the notch hanging from its top edge. No filters: video frames stay cheap to draw. */
.device { overflow: hidden; }
.device .still, .device video { position: absolute; inset: 0; width: 100%; height: auto; display: block; }
.device video { opacity: 0; transition: opacity .35s ease; }
.device.is-playing video { opacity: 1; }
.device.is-playing .still { opacity: 0; transition: opacity .35s ease .1s; }
.js .feature .feature-text, .js .feature .device { opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity .8s ease, transform 1s var(--settle), filter .8s ease; }
.js .feature .device { transition-delay: .12s; }
.js .feature.is-in .feature-text, .js .feature.is-in .device { opacity: 1; transform: none; filter: none; }
.feature dl { margin: 0; display: grid; gap: 20px; max-width: 30em; }
.feature dt { font-weight: 650; font-size: 19px; letter-spacing: -.01em; margin-bottom: 3px; }
.feature dd { margin: 0; color: var(--ink-2); font-size: 17px; }
#trust h2 { margin-bottom: 24px; }

/* Finale */
.finale { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(110px, 17vh, 180px) 24px 0; }
.finale-inner { max-width: 780px; }
.island.small { width: clamp(200px, 22vw, 280px); margin: 0 auto 26px; }
.finale h2 { font-size: clamp(34px, min(4.6vw, 6.4vh), 58px); line-height: 1.05; letter-spacing: -.018em; font-weight: 650; margin: 0 0 16px; }
.foot { margin-top: auto; width: 100%; padding: 24px 20px max(26px, env(safe-area-inset-bottom)); color: #e7ebff; font-size: 13px; text-align: center; }
.foot p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .legal { margin-top: 8px; color: #dbe1ff; font-size: 12px; }

/* A quiet message, e.g. "Link copied". */
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 20px); margin: 0; padding: 12px 18px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--settle); max-width: calc(100% - 32px); text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Phones and small windows: one column, words first (they sit on the sky), the screen below; gentler snapping. */
@media (max-width: 820px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; padding: 96px 20px 40px; }
  .feature.flip .feature-text { order: 0; }
  .feature-text { padding-top: 0; }
  .topbar { padding: 12px 16px; }
  .brand svg { width: 96px; }
  .island { width: min(64vw, 280px); }
  .hero-stack { padding-top: 80px; }
  .feature { align-content: start; }
  .island.small { display: none; }
  .finale { padding-top: 88px; }
  .fine { color: var(--ink); }
  .fine a { color: inherit; }
}
@media (max-width: 480px) {
  .cta { flex-direction: column; max-width: 340px; margin: 0 auto; }
  .cta .btn { width: 100%; }
  .hero-stack { padding-top: 96px; }
}

/* Reduce Motion: everything in place, nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .welcome, .island, .island .pill, .reveal > *, .topbar, .feature-text, .device, .words .w, .btn, .toast { transition: none !important; }
  .js .feature .feature-text, .js .feature .device { filter: none; }
}
@media (prefers-contrast: more) {
  .btn-light { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
  .lede, .fine, .feature-text > p:not(.eyebrow), .feature dd { color: var(--ink); }
}

/* Trust: the longest text block; keep it on the sky, above the hills. */
#trust { padding-top: clamp(100px, 15vh, 160px); }
#trust .feature-text { padding-top: 0; }
#trust h2 { margin-bottom: 18px; }
#trust dl { gap: 14px; }
#trust dd { font-size: 16px; }

/* Wide, short windows: the hills rise, so feature content starts higher. */
@media (min-width: 821px) and (max-height: 760px) { .feature { padding-top: clamp(84px, 14vh, 116px); } }
@media (max-width: 820px) { .device { aspect-ratio: 3 / 2; } }
/* Comfortable tap targets on touch screens. */
@media (pointer: coarse) { .btn-small, .skip { min-height: 44px; } }

/* One clear action (the trial); buying right away is a quiet second path beside it. */
.buy-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  padding: 12px 6px; align-self: center; }
.buy-link:hover { text-decoration-thickness: 2px; }
.feature-text code { font: 600 .9em/1 ui-monospace, "SF Mono", Menlo, monospace; }
@media (prefers-reduced-motion: reduce) { .device video { display: none; } }

/* Shortcut keys drawn as line icons (never emoji), sized to the text around them. */
.keys { display: inline-flex; align-items: center; gap: .14em; vertical-align: -.08em; }
.key { width: .92em; height: .92em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.key-l { line-height: 1; }

/* Phones: every section's heading lands in the same place under the top bar (the trust, manifesto and finale
   sections had their own, taller padding). */
@media (max-width: 820px) { #trust, .manifesto, .finale { padding-top: 96px; } }
/* Phones: the last section fills the whole screen, so its heading lands where every other one does, and the room under
   the footer keeps the links clear of Safari's toolbar when it slides back up. */
@media (max-width: 820px) { .finale { min-height: 100lvh; padding-bottom: 76px; } }