/* Bookeao Pro waitlist, editorial direction: the site is not the app. A full-width photo under a glass
   navigation bar, very large type on the ground, the working day drawn as a timeline, a scrolling feature story
   with the phone held in place, and pricing as a rate card on the page's one dark field. Values from packages/design. Glass is for
   the navigation bar only, never content. */
@font-face { font-family: "Geist"; src: url("/assets/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
:root {
  --ground: #f4f5f7; --surface: #ffffff; --sunken: #e8ebef; --edge: #e3e6eb;
  --ink: #111317; --ink2: #4a505b; --ink3: #585f6a; --sep: #7a818c;
  --acc: #44607a; --acc-soft: #e6eaed; --dash: #8c9ead;
  --primary: #111317; --on-primary: #ffffff;
  --ok: #1d6443; --ok-fill: #e3f1e8; --warn: #7a5000; --warn-fill: #f8ecd2; --bad: #a8231a;
  --band: #111317; --on-band: #f4f5f7; --on-band2: #aab0b8; --band-rule: rgba(255, 255, 255, .16);
  --mk-a: #b0bcc7; --mk-b: #6d8397; --mk-o: #44607a; --mk-ink: #111317; --mk-tag: #44607a;
  --sh1: 0 1px 2px rgba(17,19,23,.04), 0 4px 16px rgba(17,19,23,.05);
  --sh2: 0 4px 8px rgba(17,19,23,.08), 0 24px 64px rgba(17,19,23,.16);
  --glass: rgba(247, 248, 250, .88); --glass-edge: rgba(255, 255, 255, .9); --glass-hi: rgba(255, 255, 255, .95);
  --pressed: #ffffff; --on-pressed: #111317; --fill: #e8ebef; --bar: #dfe3e8;
  --font: "Geist", -apple-system, "SF Pro Display", system-ui, Roboto, sans-serif;
  --gut: clamp(16px, 5vw, 80px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fill: rgba(118, 118, 128, .24); --bar: #4d535c;
    --pressed: #f4f5f7; --on-pressed: #0b0c0e;
    --glass: rgba(23, 25, 28, .86); --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .12);
    --ground: #0b0c0e; --surface: #17191c; --sunken: #060708; --edge: #2a2d31;
    --ink: #f4f5f7; --ink2: #aab0b8; --ink3: #979ea8; --sep: #747b86;
    --acc: #9bb0c4; --acc-soft: #1f2a35; --dash: #6d8397;
    --primary: #f4f5f7; --on-primary: #0b0c0e;
    --ok: #7fb896; --ok-fill: #12291d; --warn: #f2c572; --warn-fill: #33270e; --bad: #f59a90;
    --band: #23272d; --on-band: #f4f5f7; --on-band2: #aab0b8; --band-rule: rgba(255, 255, 255, .12);
    --mk-a: #2c3c4c; --mk-b: #6d8397; --mk-o: #ffffff; --mk-ink: #f4f5f7; --mk-tag: #6d8397;
    --sh1: inset 0 1px 0 rgba(255,255,255,.04); --sh2: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fill: rgba(118, 118, 128, .24); --bar: #4d535c;
    --pressed: #f4f5f7; --on-pressed: #0b0c0e;
    --glass: rgba(23, 25, 28, .86); --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .12);
  --ground: #0b0c0e; --surface: #17191c; --sunken: #060708; --edge: #2a2d31;
  --ink: #f4f5f7; --ink2: #aab0b8; --ink3: #979ea8; --sep: #747b86;
  --acc: #9bb0c4; --acc-soft: #1f2a35; --dash: #6d8397;
  --primary: #f4f5f7; --on-primary: #0b0c0e;
  --ok: #7fb896; --ok-fill: #12291d; --warn: #f2c572; --warn-fill: #33270e; --bad: #f59a90;
  --band: #23272d; --on-band: #f4f5f7; --on-band2: #aab0b8; --band-rule: rgba(255, 255, 255, .12);
  --mk-a: #2c3c4c; --mk-b: #6d8397; --mk-o: #ffffff; --mk-ink: #f4f5f7; --mk-tag: #6d8397;
  --sh1: inset 0 1px 0 rgba(255,255,255,.04); --sh2: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.5); color-scheme: dark;
}
/* Increase Contrast: the tested values from packages/design contrastPalettes, in both themes. */
@media (prefers-contrast: more) {
  :root { --ink: #000000; --ink2: #2c313a; --ink3: #363c46; --sep: #555c67; --edge: #b9bec6; --acc: #2f4a62; --dash: #2f4a62; --primary: #000000; --ok: #0e442b; --warn: #523600; --bad: #7d140d; --band: #000000; --on-band: #ffffff; --on-band2: #d3d7dd; --band-rule: rgba(255, 255, 255, .4); }
  :root[data-theme="dark"] { --ground: #000000; --surface: #101113; --sunken: #000000; --ink: #ffffff; --ink2: #d3d7dd; --ink3: #c3c8cf; --sep: #9aa1ab; --edge: #4a4f56; --acc: #c2d1df; --dash: #a3b7ca; --primary: #ffffff; --on-primary: #000000; --ok: #a6e6bf; --warn: #ffd98f; --bad: #ffb8b0; --band: #1a1d21; --on-band: #ffffff; --on-band2: #d3d7dd; --band-rule: rgba(255, 255, 255, .4); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ground: #000000; --surface: #101113; --sunken: #000000; --ink: #ffffff; --ink2: #d3d7dd; --ink3: #c3c8cf; --sep: #9aa1ab; --edge: #4a4f56; --acc: #c2d1df; --dash: #a3b7ca; --primary: #ffffff; --on-primary: #000000; --ok: #a6e6bf; --warn: #ffd98f; --bad: #ffb8b0; --band: #1a1d21; --on-band: #ffffff; --on-band2: #d3d7dd; --band-rule: rgba(255, 255, 255, .4); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 106.25%; scroll-padding-top: 96px; }
/* iOS: follow the Larger Text setting (1rem = the system body size, 17px by default). */
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: none !important; }
  :active { transform: none !important; }
  .scr { transform: none !important; transition: opacity .2s linear, visibility .2s !important; }
  .dots i { transition: none !important; }
}
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5;
  letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--acc); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.nav:not(.over-page) :focus-visible, .price-s :focus-visible { outline-color: #ffffff; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
section { padding-block: clamp(64px, 9vw, 120px); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.sec-p { color: var(--ink2); font-size: 1.0588rem; line-height: 1.55; max-width: 34em; }
/* Asymmetric two-column head: the heading held left, the text against it on the right. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 46rem; }
.price-s .split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
@media (max-width: 960px) { .price-s .split { grid-template-columns: minmax(0, 1fr); } }

/* Navigation: the one glass surface. Photo glass (dark, white ink) in both themes, floating over the photo and,
   once you scroll, over the page. Solid with Reduce Transparency or Increase Contrast. */
.nav { position: sticky; top: 12px; z-index: 30; margin: 12px clamp(8px, 2vw, 24px) -80px; min-height: 68px; padding: 8px 10px 8px 22px;
  display: flex; align-items: center; gap: 28px; border-radius: 999px; color: #ffffff;
  background: rgba(17, 19, 23, .6); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .18);
  transition: background-color .25s, color .25s, border-color .25s; }
.nav:not(.over-page) { --mk-a: #2c3c4c; --mk-b: #6d8397; --mk-o: #ffffff; --mk-ink: #f4f5f7; --mk-tag: #b0bcc7; }
/* Past the photo the bar takes the navigation material of the page's theme: light glass with ink, or dark glass. */
.nav.over-page { color: var(--ink); background: var(--glass); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(17, 19, 23, .06), 0 10px 30px rgba(17, 19, 23, .12); }
.nav.over-page .links a { color: var(--ink); }
.nav.over-page .preview { color: var(--ink2); border-color: var(--sep); }
.nav.over-page .lang { background: var(--sunken); }
.nav.over-page .lang button { color: var(--ink2); }
.nav.over-page .lang button[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); box-shadow: 0 1px 2px rgba(17, 19, 23, .14); }
.nav.over-page .navcta { background: var(--primary); color: var(--on-primary); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .nav { background: #111317; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav.over-page { background: var(--surface); border-color: var(--edge); }
  .scr .safari, .scr .tabs { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scr .notif, .scr .nmenu { background: #f4f5f7; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scr .lk-btns span, .scr .dock { background: #2a2d31; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav .home { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 12px; }
.nav .logo { height: 34px; width: auto; display: block; }
.nav .links { flex: 1; display: flex; gap: 28px; }
.nav .links a { color: #ffffff; text-decoration: none; font-size: .8824rem; font-weight: 500; padding-block: 12px; }
.nav .links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.navr { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.preview { font-size: .7059rem; font-weight: 500; color: rgba(255, 255, 255, .85); border: 1px dashed rgba(255, 255, 255, .5); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.lang { display: flex; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px; }
.lang button { min-width: 44px; min-height: 44px; border: 0; background: none; border-radius: 999px; font-size: .7647rem; font-weight: 600; color: rgba(255, 255, 255, .85); cursor: pointer; }
.lang button[aria-pressed="true"] { background: #ffffff; color: #111317; }
.navcta .short { display: none; }
@media (max-width: 420px) { .navcta .long { display: none; } .navcta .short { display: inline; } }
.navcta { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; background: #ffffff; color: #111317; text-decoration: none; font-size: .8824rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 1000px) { .nav .links { display: none; } }
/* The menu: the bar's links on wide screens; a Menu button and a panel below 1001px. */
.nav .links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #ffffff; place-items: center; cursor: pointer; flex: none; }
.menu-btn svg { width: 20px; height: 20px; }
.nav.over-page .menu-btn { background: var(--sunken); color: var(--ink); }
.menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1000px) { .menu-btn { display: grid; } }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; padding: 8px; border-radius: 24px;
  background: var(--surface); color: var(--ink); box-shadow: var(--sh2); }
.nav-menu a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-menu a[aria-current="page"] { background: var(--sunken); }
@media (hover: hover) { .nav-menu a:hover { background: var(--fill); } }
.nav-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (min-width: 1001px) { .nav-menu { display: none; } }
@media (max-width: 640px) { .preview { display: none; } .nav { min-height: 60px; padding-left: 16px; gap: 10px; } .nav .logo { height: 26px; } .navcta { padding: 0 14px; font-size: .8235rem; } }
/* The smallest phones (under 380 points): the bar keeps the logo, the language switch and the menu at full
   44-point size and drops its Join button; every page carries its own join button in the content. */
@media (max-width: 379px) { .nav .navcta { display: none; } }
@media (max-width: 380px) { .lang button { min-width: 40px; } .navcta { padding: 0 12px; } }

/* The photo: full width, under the bar. A CC0 stand-in until a real professional's photo, used with a signed release,
   replaces it. The work (brush on the nail) sits low and right of centre, so that is where the crop holds.
   The top scrim keeps the glass bar legible; no text sits on the photo, so the bottom only settles into the page. */
.photo { position: relative; height: clamp(220px, 34vh, 360px); background-color: #23272d; overflow: hidden; }
.photo picture { display: block; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 80%; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 10, .45) 0%, rgba(7, 8, 10, 0) 30%, rgba(7, 8, 10, 0) 70%, rgba(7, 8, 10, .25) 100%); }

/* Intro: the headline on the ground, the promise and the action against it. */
.intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px 64px; align-items: end; padding-block: clamp(36px, 5vw, 72px); }
@media (max-width: 960px) { .intro { grid-template-columns: minmax(0, 1fr); } }
.launch { font-size: .9412rem; color: var(--ink3); }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .94; letter-spacing: -0.04em; font-weight: 700; }
.side { display: flex; flex-direction: column; gap: 28px; padding-bottom: 6px; }
.lede { font-size: 1.1765rem; line-height: 1.5; color: var(--ink2); }
.cta { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.fwd { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 8px 8px 24px;
  background: var(--primary); color: var(--on-primary); border: 0; border-radius: 20px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .15s cubic-bezier(.2, 0, 0, 1); }
.fwd:active { transform: scale(.97); }
.fwd .arr { width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--on-primary) 16%, transparent); display: grid; place-items: center; }
.textlink { font-weight: 600; text-underline-offset: 5px; padding-block: 12px; }
@media (max-width: 560px) { .cta .fwd { width: 100%; } }

/* The day, as a line. Appointments in ink, a sellable gap dashed in Adoquín with what fits, time that cannot be
   sold in a quiet outline. On a phone it turns into the app's own day view, one row per stretch. */
.day-s { background: var(--surface); }
.dayfig { margin: clamp(40px, 6vw, 72px) 0 0; display: flex; flex-direction: column; gap: 20px; }
.dayhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.dayhead figcaption { font-weight: 700; font-size: 1.0588rem; }
.tradepick { display: flex; gap: 8px; flex-wrap: wrap; }
.tradepick button { min-height: 44px; border: 1px solid var(--edge); background: var(--surface); border-radius: 999px; padding: 0 14px; font-size: .8235rem; font-weight: 500; color: var(--ink2); cursor: pointer; }
.tradepick button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.timeline { display: flex; gap: 4px; min-height: 156px; }
.blk { min-width: 0; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.d30 { flex: 30 1 0; } .d45 { flex: 45 1 0; } .d60 { flex: 60 1 0; }
.blk .tm { font-size: .7059rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blk .what { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blk .what b { font-size: .8824rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.blk .what small { font-size: .7647rem; line-height: 1.3; overflow-wrap: anywhere; }
.blk .end { font-size: .8824rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.blk.appt { background: var(--fill); color: var(--ink); }
.blk.appt .tm, .blk.appt small { color: var(--ink2); }
.blk.gap { border: 1.5px dashed var(--acc); background: var(--acc-soft); }
.blk.gap .tm, .blk.gap b { color: var(--acc); }
.blk.gap small { color: var(--ink2); }
.blk.gap .end { align-self: flex-start; font-size: .7647rem; font-weight: 600; color: var(--acc); }
.blk.shut { border: 1px solid var(--edge); color: var(--ink3); }
.blk.shut .what b { font-weight: 500; }
.daysum { display: flex; gap: 4px 32px; flex-wrap: wrap; font-size: 1.0588rem; color: var(--ink2); }
.daysum .open { color: var(--acc); font-weight: 600; }
@media (max-width: 900px) {
  .timeline { flex-direction: column; min-height: 0; gap: 8px; }
  .blk { flex: none; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 56px; padding: 10px 12px; }
}

/* What you get on day one: the phone stays in place while each feature scrolls past and its screen fades in.
   On a phone each feature carries its own screen. Screens are illustrations (aria-hidden) built from the
   app's real patterns; the text beside them carries the content. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.story { margin-top: clamp(16px, 2vw, 32px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(40px, 6vw, 96px); }
.stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; padding-top: 64px; display: flex; align-items: center; justify-content: center; }
.rig { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dots { display: flex; gap: 8px; }
.dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--sep); opacity: .45; transition: width .25s cubic-bezier(.2, 0, 0, 1), opacity .25s; }
.dots i.on { width: 22px; opacity: 1; background: var(--ink); }
.steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0 0 20vh; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.step h3 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.08; letter-spacing: -0.04em; font-weight: 700; max-width: 14em; transition: color .25s; }
.step p { color: var(--ink2); font-size: 1.0588rem; line-height: 1.55; max-width: 28em; transition: color .25s; }
.step .proof { font-size: .9412rem; font-weight: 600; color: var(--ink); }
@media (min-width: 901px) {
  .js-story .step:not(.is-active) h3, .js-story .step:not(.is-active) p { color: var(--ink3); }
  /* The card marks fade; the Stripe line stays text, dimmed like the rest, so it keeps AA contrast. */
  .js-story .step:not(.is-active) .marks { opacity: .5; }
  .js-story .step:not(.is-active) .by b { color: var(--ink3); }
  .slot { display: none; }
}
@media (min-width: 901px) and (max-height: 900px) { .rig { transform: scale(.86); } }
@media (min-width: 901px) and (max-height: 780px) { .rig { transform: scale(.74); } }
@media (min-width: 901px) and (max-height: 660px) { .rig { transform: scale(.62); } }
@media (max-width: 900px) {
  .story { display: block; }
  .stage { display: none; }
  .steps { padding-bottom: 0; }
  .step { min-height: 0; padding-block: 32px; }
  .slot { margin-top: 24px; display: flex; justify-content: center; }
  .slot .device { transform: scale(.8); transform-origin: top center; margin-bottom: -140px; }
  .slot .scr { opacity: 1; visibility: visible; transform: none; }
}


/* The phone: thin bezel, Dynamic Island, side buttons, home indicator. */
.device { position: relative; flex: none; width: 330px; height: 700px; padding: 9px; border-radius: 60px; background: #18191c;
  box-shadow: inset 0 0 0 1.5px #3d3f44, inset 0 0 0 3.5px #0e0f11, 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(17, 19, 23, .08), 0 30px 70px rgba(17, 19, 23, .22); }
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2e33; }
.device::before { left: -3px; top: 132px; height: 60px; box-shadow: 0 76px 0 #2c2e33; }
.device::after { right: -3px; top: 168px; height: 92px; }
.island { position: absolute; z-index: 6; top: 20px; left: 50%; width: 98px; height: 29px; margin-left: -49px; border-radius: 999px; background: #000000; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 51px; overflow: hidden; background: var(--ground); }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.28; letter-spacing: -0.012em; color: var(--ink); font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .25s cubic-bezier(.2, 0, 0, 1), transform .25s cubic-bezier(.2, 0, 0, 1), visibility .25s; }
.scr.on { opacity: 1; visibility: visible; transform: none; z-index: 1; }
.scr b { font-weight: 600; }
.scr small { display: block; font-size: 11.5px; color: var(--ink3); }
.scr svg { fill: currentColor; }
.scr .grow { flex: 1; min-width: 0; }
.scr .sb { height: 50px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 14px; }
.scr .sb b { font-weight: 600; letter-spacing: -0.02em; }
.scr .sbi { display: flex; align-items: center; gap: 5px; }
.scr .sbi small { color: inherit; font-size: 12px; font-weight: 600; }
.scr .i-sig { width: 17px; height: 11px; } .scr .i-sig.off { opacity: .35; } .scr .i-wifi { width: 15px; height: 11px; } .scr .i-bat { width: 25px; height: 12px; }
.scr .hi { position: absolute; z-index: 4; bottom: 8px; left: 50%; width: 118px; height: 5px; margin-left: -59px; border-radius: 999px; background: var(--ink); }
.scr .body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 0; min-height: 0; }
.scr .sec { font-size: 12.5px; font-weight: 600; color: var(--ink2); padding: 6px 4px 0; }
.scr .sec.up { font-size: 12px; color: var(--ink3); }
.scr .glist { display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; overflow: hidden; }
.scr .li { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 7px 12px; }
.scr .li + .scr .li::before { content: ""; position: absolute; top: 0; left: 12px; right: 0; height: 1px; background: var(--edge); }
.scr .li .amt { font-weight: 600; }
.scr .lead { width: 22px; height: 17px; flex: none; color: var(--ink2); }
.scr .lead.ath { width: 22px; height: auto; display: grid; place-items: center; font-size: 8px; font-weight: 800; letter-spacing: 0; border-radius: 4px; padding: 3px 0; background: var(--ink); color: var(--surface); }
.scr .i-check { width: 15px; height: 15px; flex: none; color: var(--acc); }
.scr .i-chevr { width: 7px; height: 12px; flex: none; color: var(--sep); }
.scr .av { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; color: #ffffff; }
.scr .av.a1 { background: #9c5a38; } .scr .av.a2 { background: #5a7356; } .scr .av.a3 { background: #765270; } .scr .av.a5 { background: #3f6b65; }
.scr .btn { display: grid; place-items: center; min-height: 48px; border-radius: 16px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 15px; }
.scr .btn2 { display: grid; place-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--ink); font-weight: 600; font-size: 12.5px; }
.scr .card { background: var(--surface); border-radius: 18px; padding: 14px; }
.scr .lt { font-size: 28px; line-height: 1.1; font-weight: 700 !important; letter-spacing: -0.035em; padding: 4px 2px 2px; }

/* 1 · the booking page, in Safari, on the Tipográfico theme */
.s-web { background: var(--ground); }
.scr .pg-head { margin: 2px 12px 0; padding: 18px 16px 16px; border-radius: 22px; background: #efe8da; color: #1b160f; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.scr .pg-head small { color: #6a6152; font-size: 12px; }
.scr .mono { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid #1b160f; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 10px; }
.scr .pg-name { font-size: 25px; line-height: 1.05; font-weight: 700 !important; letter-spacing: -0.04em; }
.s-web .scr .li.sel { box-shadow: inset 0 0 0 2px var(--acc); border-radius: 14px; }
.s-web .scr .li.sel + .scr .li::before { display: none; }
.scr .times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scr .times span { display: grid; place-items: center; min-height: 38px; border-radius: 12px; background: var(--surface); font-weight: 600; font-size: 12.5px; }
.scr .times span.on { background: var(--acc); color: var(--surface); }
.s-web .scr .btn { margin-top: 4px; }
.scr .note { text-align: center; font-size: 11.5px; color: var(--ink3); }
.scr .safari { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 24px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 24px rgba(17, 19, 23, .14); font-size: 13px; color: var(--ink); }
.scr .safari span { flex: 1; text-align: center; font-weight: 500; }
.scr .i-rl { width: 15px; height: 15px; color: var(--ink2); }
.scr .aa { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink2); }
.scr .aa small { display: inline; font-size: 11px; color: inherit; }

/* 2 · the reminder, answered from the lock screen */
.s-lock { color: #ffffff; background: #1d2834; background-image: radial-gradient(120% 70% at 20% 0%, #3b5269 0%, rgba(59, 82, 105, 0) 60%), radial-gradient(90% 60% at 100% 100%, #2c3c4c 0%, rgba(44, 60, 76, 0) 70%); }
.s-lock .scr .hi { background: #ffffff; }
.scr .lk-clock { text-align: center; margin-top: 10px; }
.scr .lk-clock small { color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 600; }
.scr .lk-clock b { display: block; font-size: 88px; line-height: .95; font-weight: 700; letter-spacing: -0.05em; }
.scr .notif { margin: 34px 10px 0; padding: 12px 14px 12px 12px; border-radius: 24px; display: flex; align-items: flex-start; gap: 10px; color: #111317;
  background: rgba(244, 245, 247, .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.scr .notif img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.scr .notif small { color: #4a505b; flex: none; }
.scr .nt { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.scr .nmenu { margin: 8px 10px 0 auto; width: 62%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; color: #111317;
  background: rgba(244, 245, 247, .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.scr .nmenu span { padding: 11px 14px; }
.scr .nmenu span + span { border-top: 1px solid rgba(17, 19, 23, .1); }
.scr .nmenu .danger { color: #a8231a; }
.scr .lk-btns { position: absolute; left: 44px; right: 44px; bottom: 44px; display: flex; justify-content: space-between; }
.scr .lk-btns span { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: rgba(17, 19, 23, .32); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.scr .lk-btns svg { width: 20px; height: 20px; fill: none; color: #ffffff; }

/* 3–5 · inside Bookeao Pro */
.scr .navbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 14px 6px; font-size: 15px; }
.scr .back { color: var(--acc); }
.scr .grabber { flex: none; align-self: center; width: 36px; height: 5px; border-radius: 999px; background: var(--sep); opacity: .5; margin: 0 0 8px; }
.scr .back svg { width: 10px; height: 17px; fill: none; }
.scr .who { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.scr .big { text-align: center; padding: 14px 0 8px; }
.scr .big b { display: block; font-size: 46px; line-height: 1.05; font-weight: 700; letter-spacing: -0.05em; }
.scr .dock-btn { position: absolute; left: 14px; right: 14px; bottom: 30px; }
.scr .search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--fill); color: var(--ink3); }
.scr .search svg { width: 14px; height: 14px; fill: none; }
.scr .stat { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 14px; padding: 12px 14px; }
.scr .stat b { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; color: var(--acc); }
.scr .week { display: flex; flex-direction: column; gap: 2px; }
.scr .money { font-size: 36px; line-height: 1.1; font-weight: 700 !important; letter-spacing: -0.05em; }
.scr .upline { color: var(--ok); font-weight: 600; font-size: 12px; }
.scr .bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; margin-top: 12px; }
.scr .bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--bar); }
.scr .bars i.top { background: var(--ink); }
.scr .bars .b1 { height: 70%; } .scr .bars .b2 { height: 24%; } .scr .bars .b3 { height: 58%; } .scr .bars .b4 { height: 80%; } .scr .bars .b5 { height: 100%; } .scr .bars .b6 { height: 88%; }
.scr .ins { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-weight: 600; }
.scr .tabs { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 22px; height: 58px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 24px rgba(17, 19, 23, .14); }
.scr .tabs > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; font-size: 10px; font-weight: 500; color: var(--ink2); }
.scr .tabs > span.on { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); font-weight: 700; }
.scr .tabs svg { width: 20px; height: 18px; fill: none; }
.s-app .scr .body { padding-bottom: 90px; }

/* 6 · the widget, on the Home Screen, with no signal */
.s-home { color: #ffffff; background: #24313f; background-image: radial-gradient(110% 60% at 80% 0%, #44607a 0%, rgba(68, 96, 122, 0) 60%), radial-gradient(100% 70% at 0% 100%, #1f2a35 0%, rgba(31, 42, 53, 0) 70%); }
.s-home .scr .hi { background: #ffffff; }
.scr .widget { margin: 10px 18px 0; padding: 14px 16px; border-radius: 24px; display: flex; flex-direction: column; gap: 1px; background: var(--surface); color: var(--ink); }
.scr .widget small { color: var(--ink3); margin-top: 8px; }
.scr .wh { display: flex; align-items: center; gap: 8px; }
.scr .wh img { width: 22px; height: 22px; border-radius: 6px; }
.scr .wt { font-size: 26px; font-weight: 700 !important; letter-spacing: -0.04em; }
.scr .wgap { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--edge); color: var(--acc); font-weight: 600; font-size: 12px; }
.scr .apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; padding: 26px 26px 0; }
.scr .apps i, .scr .dock i { aspect-ratio: 1; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.scr .apps svg, .scr .dock svg { width: 24px; height: 24px; fill: none; color: #ffffff; }
.scr .apps i.ours { background: none; box-shadow: none; }
.scr .apps i.ours img { width: 100%; height: 100%; border-radius: 15px; display: block; }
.scr .pdots { position: absolute; left: 0; right: 0; bottom: 112px; display: flex; justify-content: center; gap: 7px; }
.scr .pdots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.scr .pdots i.on { background: #ffffff; }
.scr .dock { position: absolute; left: 12px; right: 12px; bottom: 20px; height: 82px; padding: 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: center;
  border-radius: 34px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

.athmark { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--sh1); font-weight: 800; font-size: 1.1765rem; letter-spacing: -0.02em; }
.athmark span { font-weight: 500; }
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.marks li { width: 72px; height: 48px; border-radius: 8px; background: var(--surface); box-shadow: var(--sh1); display: grid; place-items: center; }
.marks svg { width: 40px; height: 40px; fill: var(--ink); }
@media (max-width: 560px) { .marks li { width: 52px; height: 36px; } .marks svg { width: 32px; height: 32px; } }
.by { display: flex; align-items: center; gap: 8px; font-size: .8235rem !important; color: var(--ink3) !important; }
.by svg { width: 18px; height: 18px; fill: var(--ink2); }
.by b { color: var(--ink); font-weight: 600; }

/* Everything: groups as plain columns of text on white, no cards. */
.feat-s { background: var(--surface); }
/* "And there's more": feature cards shared with /features/ (icon, title, one line). */
.f-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.f-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; background: var(--surface); border-radius: 20px; box-shadow: var(--sh1); min-width: 0; }
.f-card h3 { margin: 6px 0 0; font-size: 1.0588rem; letter-spacing: -0.02em; line-height: 1.3; }
.f-card p { margin: 0; color: var(--ink2); font-size: .9412rem; line-height: 1.45; }
.f-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; }
.f-ic svg { width: 22px; height: 22px; }
.feat-s .f-card { background: var(--ground); box-shadow: none; }
.more-all { margin-top: 32px; }
@media (max-width: 560px) { .more-all { width: 100%; } }

/* Pricing: the page's one dark field, set as a rate card. */
.price-s { background: var(--band); color: var(--on-band); }
.price-s .sec-p { color: var(--on-band2); margin-top: 16px; }
.billing { justify-self: end; display: inline-flex; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px; }
@media (max-width: 960px) { .billing { justify-self: start; } }
.billing button { min-height: 44px; border: 0; background: none; border-radius: 999px; padding: 0 16px; font-size: .8824rem; font-weight: 600; color: var(--on-band2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing button[aria-pressed="true"] { background: var(--on-band); color: var(--band); }
.billing .save { font-size: .7059rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(155, 176, 196, .22); color: inherit; }
.billing button:not([aria-pressed="true"]) .save { color: var(--on-band); }
.pricegrid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px clamp(40px, 7vw, 120px); align-items: start; }
@media (max-width: 960px) { .pricegrid { grid-template-columns: minmax(0, 1fr); } }
.offers { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 961px) { .offers { position: sticky; top: 112px; } }
.offer { display: flex; flex-direction: column; gap: 10px; }
.offer .k { font-size: 1rem; font-weight: 600; color: var(--on-band2); }
.offer .v { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.offer .v.big { font-size: clamp(4rem, 9vw, 6rem); line-height: .95; letter-spacing: -0.04em; }
.offer .v small { font-size: .32em; letter-spacing: -0.01em; font-weight: 500; color: var(--on-band2); margin-left: 8px; }
.offer p { color: var(--on-band2); max-width: 26em; }
.offers .fine { font-size: .8235rem; color: var(--on-band2); max-width: 30em; }
.rates { display: flex; flex-direction: column; gap: 48px; }
.rategroup h3 { font-size: 1.2941rem; letter-spacing: -0.03em; font-weight: 600; margin-bottom: 8px; }
.rate { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--band-rule); font-size: 1rem; }
.rate > :last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rate .per { font-weight: 500; color: var(--on-band2); font-size: .8235rem; margin-left: 2px; }
.rategroup .note { margin-top: 14px; font-size: .8824rem; color: var(--on-band2); max-width: 36em; }
.rategroup .note + .rate { margin-top: 4px; }
/* Getting paid: one sub-head per company that moves the money, then what a $40.00 service leaves you with. */
.rategroup h4 { margin-top: 32px; font-size: .8824rem; font-weight: 600; color: var(--on-band2); }
.rategroup h4 + .rate { padding-top: 10px; }
.rate.ex > :first-child small { display: block; margin-top: 4px; font-size: .8235rem; font-weight: 500; color: var(--on-band2); }

/* Who it's for: trade names set large, as one running line per group. */
.trades-s h2 { max-width: 14em; }
.inds { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; gap: 28px; }
.ind { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 4px 32px; align-items: baseline; }
@media (max-width: 760px) { .ind { grid-template-columns: minmax(0, 1fr); } }
.ind h3 { font-size: .9412rem; font-weight: 600; color: var(--ink3); }
.trades { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.35; letter-spacing: -0.025em; font-weight: 500; }
.trades span:not(:last-child)::after { content: ", "; color: var(--ink3); }
.andall { margin-top: 40px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.035em; font-weight: 700; }

/* Sign-up: the ask on the left with the questions under it, the form on the right. */
.join-s { padding-top: 0; }
/* The research invitation: one card between who it's for and the form, so it never competes with joining. */
.help-s { padding-block: 0 clamp(48px, 7vw, 96px); }
.help { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px);
  background: var(--surface); border-radius: 28px; box-shadow: var(--sh1); }
.help-t { display: flex; flex-direction: column; gap: 12px; flex: 1 1 22rem; }
.help h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
.help .fwd { flex: none; }
@media (max-width: 560px) { .help .fwd { width: 100%; } }
.done .done-help { color: var(--acc); font-weight: 600; text-underline-offset: 4px; display: inline-block; padding-block: 12px; }
.join { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "ask form" "faq form"; gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.join .jl { grid-area: ask; } .join .form { grid-area: form; } .join .jq { grid-area: faq; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .join { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ask" "form" "faq"; } }
.jl { display: flex; flex-direction: column; gap: 16px; }
.jl h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.faqh { font-size: 1.0588rem; font-weight: 700; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--surface); border-radius: 20px; box-shadow: var(--sh1); }
.faq summary { list-style: none; cursor: pointer; min-height: 60px; padding: 16px 56px 16px 24px; font-weight: 600; font-size: 1rem; position: relative; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.4118rem; font-weight: 400; color: var(--ink3); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 24px; color: var(--ink2); max-width: 62ch; }
.form { background: var(--surface); border-radius: 28px; box-shadow: var(--sh2); padding: 32px clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.fstack { display: flex; flex-direction: column; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld .lbl, .fld > label, .fld > span, .fld legend { font-size: .8235rem; font-weight: 600; color: var(--ink2); padding: 0; }
.fld input, .fld select { min-height: 52px; border: 1.5px solid var(--sep); background: var(--surface); border-radius: 12px; padding: 0 16px; font-size: 1rem; width: 100%; }
.fld input:focus, .fld select:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.fld input::placeholder { color: var(--ink3); opacity: 1; }
.fld input[aria-invalid="true"] { border-color: var(--bad); }
.fld .err { font-size: .8235rem; color: var(--bad); font-weight: 500; }
fieldset.fld { border: 0; margin: 0; padding: 0; min-width: 0; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .opts { grid-template-columns: minmax(0, 1fr); } }
.opts.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.opts-2 label > span { min-height: 52px; }
/* Four choices sit two by two, so none is squeezed; one column on phones, like the three. */
.opts.opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .opts.opts-4 { grid-template-columns: minmax(0, 1fr); } }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opts label > span { display: flex; flex-direction: column; justify-content: center; min-height: 64px; border: 1.5px solid var(--sep); border-radius: 12px; padding: 8px 16px; font-weight: 600; font-size: .8824rem; line-height: 1.25; }
.opts label > span small { font-weight: 400; color: var(--ink3); font-size: .7647rem; }
.opts input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opts input:checked + span::after { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; position: absolute; top: 16px; right: 16px; transform: rotate(-45deg); }
.opts input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .two { grid-template-columns: minmax(0, 1fr); } }
.form .fwd { width: 100%; }
.form .priv { font-size: .7647rem; color: var(--ink3); }
.form .priv a { color: var(--ink2); text-underline-offset: 2px; }
/* Consent: a real checkbox covering its whole label (44 points), drawn as a box beside the words. It starts
   unticked, and the form won't send without it. */
.fld.consent { gap: 6px; }
.fld.consent > label.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .9412rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.consent .check input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.consent .check .box { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--sep); border-radius: 7px; background: var(--surface); display: grid; place-items: center; }
.consent .check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.consent .check input:checked + .box::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: translateY(-1px) rotate(-45deg); }
.consent .check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent .check input[aria-invalid="true"] + .box { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.consent .cdet { margin: 0 0 0 36px; font-size: .7647rem; color: var(--ink2); line-height: 1.45; }
.consent .err { margin-left: 36px; }
.pnote { font-size: .7647rem; border: 1px dashed var(--sep); border-radius: 12px; padding: 8px 12px; color: var(--ink2); }
.done { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.done .ok { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-fill); color: var(--ok); display: grid; place-items: center; }
.done .ok svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done h3 { font-size: 1.5294rem; letter-spacing: -0.03em; }
.done p { color: var(--ink2); }
.done .again { min-height: 44px; border: 0; background: none; padding: 0; color: var(--acc); font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Searchable fields (ARIA combobox). */
.combo { position: relative; }
.combo input { padding-right: 40px !important; }
.cchev { position: absolute; right: 16px; top: 18px; pointer-events: none; display: flex; }
.combo svg.chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.combo.open svg.chev { transform: rotate(180deg); }
.clist { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; background: var(--surface);
  border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--sh2); max-height: 288px; overflow-y: auto; overscroll-behavior: contain; }
.clist li { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 1rem; }
.clist li.active { background: var(--sunken); }
.clist li[aria-selected="true"] { font-weight: 600; }
.clist li[aria-selected="true"]::after { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.clist li mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
.clist li.none { color: var(--ink3); cursor: default; }
.clist li.grp { min-height: 32px; padding: 8px 12px 4px; font-size: .7647rem; font-weight: 600; color: var(--ink3); cursor: default; }
.clist li.grp:hover { background: none; }

/* Logo colours: the mark reads its tones from the field it sits on. */
.mk-a { fill: var(--mk-a); } .mk-b { fill: var(--mk-b); } .mk-o { fill: var(--mk-o); } .mk-ink { fill: var(--mk-ink); } .mk-tag { fill: var(--mk-tag); }

/* Footer, after apple.com, on every page: the footnotes, where you are, the site directory, then the
   small print with the site map and the appearance switch. Small type, but never below the tested
   secondary ink, and every link is a 44-point target on touch screens. */
.site-foot { border-top: 1px solid var(--edge); color: var(--ink2); font-size: .7647rem; line-height: 1.5; padding-block: 28px 40px; }
.site-foot a { color: inherit; }
.site-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.site-foot .notes { padding-block: 0 20px; border-bottom: 1px solid var(--edge); }
.footnotes { margin: 0 0 14px; padding-left: 1.75em; display: grid; gap: 10px; max-width: 70em; }
.footnotes li { padding-left: 4px; scroll-margin-top: 120px; font-variant-numeric: tabular-nums; }
.footnotes li:target { color: var(--ink); }
.fn-back { margin-left: 6px; padding-inline: 4px; text-decoration: none; color: var(--acc); }
.fn-legal { margin: 0; max-width: 70em; }
.crumbs ol { list-style: none; margin: 0; padding: 14px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--ink); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; font-weight: 600; }
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 20px 16px; padding-block: 10px 24px; }
.dir h2 { margin: 0 0 4px; font-size: .7647rem; line-height: 1.5; letter-spacing: 0; font-weight: 600; color: var(--ink); }
.dir ul { list-style: none; margin: 0; padding: 0; }
.dir a { display: flex; align-items: center; min-height: 30px; text-decoration: none; }
.foot-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--edge); }
.foot-bar .logo { height: 28px; width: auto; }
/* Privacy Policy, Terms of Use, Legal and the site map, as on apple.com, between the logo and the switch. */
.legal-links { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 8px; color: var(--ink); text-decoration: none; }
.legal-links a + a { border-left: 1px solid var(--edge); }
.legal-links a[aria-current="page"] { font-weight: 600; }
@media (hover: hover) { .legal-links a:hover, .dir a:hover, .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (pointer: coarse) { .dir a, .crumbs a, .legal-links a { min-height: 44px; } }
/* A footnote marker: a small raised number that never pushes its line apart. */
sup.fn { font-size: .62em; line-height: 0; vertical-align: super; font-variant-numeric: tabular-nums; }
sup.fn a { color: inherit; text-decoration: none; padding: 0 1px 0 2px; }
sup.fn a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 3px; }
@media (hover: hover) { sup.fn a:hover { text-decoration: underline; } }
.seg { display: flex; background: var(--sunken); border-radius: 999px; padding: 2px; }
.seg button { min-height: 44px; min-width: 44px; border: 0; background: none; border-radius: 999px; padding: 0 10px; font-size: .7647rem; font-weight: 600; color: var(--ink2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); box-shadow: 0 1px 2px rgba(17, 19, 23, .14); }
.seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.seg svg path[d^="M16.5"] { fill: currentColor; stroke: none; }
.seg svg .fill { fill: currentColor; stroke: none; }
@media (max-width: 640px) { .seg .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Press and hover feedback: everything tappable responds. */
.tradepick button, .billing button, .seg button, .lang button, .faq details, .laterbox > summary, .morebtn, .done .again, .navcta { transition: transform .15s cubic-bezier(.2, 0, 0, 1), background-color .15s; }
.tradepick button:active, .billing button:active, .seg button:active, .lang button:active, .laterbox > summary:active, .navcta:active { transform: scale(.97); }
@media (hover: hover) {
  .tradepick button:not([aria-pressed="true"]):hover { background: var(--sunken); }
  /* The whole rounded card answers the pointer, never a square block inside it. */
  .faq details:has(> summary:hover) { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
  .faq summary:hover::after { color: var(--ink); }
  .laterbox > summary:hover { background: var(--sunken); }
  .seg button:not([aria-pressed="true"]):hover { color: var(--ink); }
  .billing button:not([aria-pressed="true"]):hover { color: var(--on-band); }
  .nav:not(.over-page) .lang button:not([aria-pressed="true"]):hover { color: #ffffff; }
  .nav.over-page .lang button:not([aria-pressed="true"]):hover { color: var(--ink); }
}

/* Live copies (scripts/build-site.mjs sets data-live): the preview labels go, the form sends. */
html[data-live] [data-preview], html[data-live] .nav .preview { display: none; }
.form .send-err { font-size: .8235rem; color: var(--bad); font-weight: 500; margin: 0; }
.form .fwd[aria-disabled="true"] { opacity: .6; cursor: progress; }