/* Every feature in Bookeao Pro, after the pattern of Apple's iOS page. Loaded after /waitlist/app.css,
   whose tokens, type, navigation, footer, phone frame (.device, .scr) and feature cards it reuses. */

/* No photo under the bar here, so it sits in the flow instead of overlapping a hero. */
.nav { margin-bottom: 0; }

/* A phone at any size: the frame is drawn at 330 × 700 and scaled, keeping its proportions. */
.dev { --s: .8; position: relative; width: calc(330px * var(--s)); height: calc(700px * var(--s)); flex: none; }
.dev > .device { position: absolute; top: 0; left: 0; transform: scale(var(--s)); transform-origin: top left; box-shadow: var(--sh2); }

/* Hero: the headline, then a lineup of phones on different screens that rises into place as the page
   scrolls. The lineup runs the full width of the window and is cut off at its edges, never scrolled. */
.f-hero { padding-block: clamp(40px, 6vw, 80px) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.f-eyebrow { margin: 0; font-size: .8824rem; font-weight: 600; color: var(--acc); letter-spacing: .01em; }
.f-hero h1 { margin: 0; font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: .96; letter-spacing: -0.055em; max-width: 12ch; text-wrap: balance; }
.f-lede { margin: 0; font-size: clamp(1.0588rem, 2vw, 1.35rem); color: var(--ink2); max-width: 32em; line-height: 1.45; }
.f-hero .fwd { margin-top: 6px; }
.lineup { width: 100vw; margin: 0 calc(50% - 50vw); padding-block: clamp(24px, 4vw, 40px) 40px; overflow: clip; }
/* The row is what moves; the band around it stays the width of the window, so its edges never show. */
.ln-row { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 28px); }
.lineup .hero-dev { --s: .92; }
.lineup .ln-i { --s: .74; }
.lineup .ln-o { --s: .6; }
@media (max-width: 560px) { .lineup .hero-dev { --s: .7; } .lineup .ln-i { --s: .56; } .lineup .ln-o { --s: .46; } }

/* Highlights: a sideways gallery that snaps card by card; buttons for those without a touchpad. */
.hl-s { padding-block: clamp(72px, 10vw, 140px) 0; }
.hl-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.hl-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); }
.hl-ctl { display: flex; gap: 8px; }
.hl-btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--sunken); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.hl-btn svg { width: 20px; height: 20px; }
.hl-btn:disabled { opacity: .35; cursor: default; }
.hl-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hl-track { list-style: none; margin: 28px 0 0; padding: 4px var(--gut) 24px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.hl-card { flex: none; width: min(84vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 0;
  background: var(--surface); border-radius: 28px; box-shadow: var(--sh1); overflow: hidden; }
.hl-card h3 { margin: 0; font-size: 1.4118rem; letter-spacing: -0.03em; line-height: 1.15; }
.hl-card p { margin: 0; color: var(--ink2); font-size: .9412rem; line-height: 1.45; min-height: 4.35em; }
/* The phone sits low in the card and runs off its bottom edge, as product shots do. */
.hl-dev { --s: .7; margin: 20px auto 0; height: calc(560px * var(--s)); }

/* The category bar stays below the navigation bar while scrolling; on phones it scrolls sideways.
   In the flow it is clear. Once it sticks (app.js sets .stuck), one frosted band runs from the top of
   the screen to just under the chips, behind the floating navigation bar too, so content never shows
   in a strip between the two bars and the band has a single soft edge. The glass lives on ::before,
   not the bar, because a backdrop filter on the bar would stop its children from blurring the page. */
.f-bar { --bar-top: 88px; position: sticky; top: var(--bar-top); z-index: 20; margin-top: clamp(56px, 8vw, 104px); padding-block: 8px; }
.f-bar::before { content: ""; position: absolute; inset: calc(-1 * var(--bar-top)) 0 0; z-index: -1; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--ground) 94%, transparent); box-shadow: 0 1px 0 var(--edge), 0 8px 24px rgba(17, 19, 23, .06); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .f-bar::before { -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } }
.f-bar.stuck::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .f-bar::before { transition: opacity .2s; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .f-bar::before { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.f-bar .wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.f-bar .wrap::-webkit-scrollbar { display: none; }
.f-bar a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: .8824rem; font-weight: 600; box-shadow: var(--sh1); white-space: nowrap; }
.f-bar a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .f-bar a:hover { background: var(--fill); } }

/* A category: headline and features on one side, its phone held in view on the other. */
.f-group { padding-block: clamp(56px, 8vw, 112px) 0; scroll-margin-top: 150px; }
.f-show { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dev" "list"; gap: 28px; align-items: start; }
.f-head { grid-area: head; } .f-dev { grid-area: dev; } .f-list { grid-area: list; }
@media (min-width: 960px) { .f-show { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head dev" "list dev"; gap: 28px 64px; } }
.f-group h2 { margin: 0; font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1; }
.f-sub { margin: 14px 0 0; font-size: clamp(1.0588rem, 2vw, 1.35rem); color: var(--ink2); max-width: 26em; line-height: 1.4; }
.f-count { margin: 10px 0 0; color: var(--ink3); font-size: .8824rem; font-weight: 600; }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.f-dev { display: flex; justify-content: center; }
.f-dev .dev { --s: .72; }
@media (min-width: 960px) { .f-dev { position: sticky; top: 160px; } .f-dev .dev { --s: .78; } }
@media (max-width: 959px) { .f-dev .dev { --s: .6; } }
/* .f-grid, .f-card and .f-ic come from /waitlist/app.css, shared with the waitlist's tiles. */

/* After launch: the same cards, quieter, each labelled in words so it never rests on colour. */
.f-later .f-card { background: transparent; box-shadow: none; border: 1.5px dashed var(--sep); }
.f-later .f-ic { background: var(--fill); color: var(--ink2); }
.f-tag { position: absolute; top: 22px; right: 20px; font-size: .7059rem; font-weight: 600; color: var(--ink2); border: 1px solid var(--sep);
  border-radius: 999px; padding: 3px 10px; }

.f-end { margin-top: clamp(72px, 10vw, 140px); background: var(--surface); }
.f-end .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.f-end h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); }
.f-end .fwd { margin-top: 8px; }
@media (max-width: 560px) { .f-end .fwd { width: 100%; } }

/* The "Today" screen: every stretch of the day is a row, open time dashed with what fits. */
.s-day .dsum { font-size: 12.5px; color: var(--ink2); padding: 0 4px; }
.s-day .drows { display: flex; flex-direction: column; gap: 6px; }
.s-day .drow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; background: var(--surface); }
.s-day .dt { width: 58px; flex: none; font-size: 11.5px; color: var(--ink3); }
.s-day .drow.gap { background: transparent; border: 1.5px dashed var(--dash); }
.s-day .drow.gap b { color: var(--acc); }
.s-day .drow.shut { background: transparent; border: 1.5px solid var(--edge); color: var(--ink3); }
.s-day .dshare { flex: none; font-size: 11px; font-weight: 600; color: var(--acc); }
.s-day .amt { font-weight: 600; }

/* Motion. Sections rise in once as they enter the view, and the hero lineup grows into place with the
   scroll where the browser supports scroll-driven animation. Off entirely under Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  html.reveal [data-reveal].in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .ln-row { animation: f-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    /* Movement only, never a fade: the phones' screens stay fully legible at every point of the scroll. */
    @keyframes f-rise { from { transform: translateY(64px) scale(.9); } to { transform: none; } }
  }
}