/* m.css: one masthead, menu, footer and the site-rip craft rules (8 Oct). Linked last on every page. Tokens only. */
.top, .masthead .frame {
  box-sizing: border-box; height: 60px; min-height: 60px; max-width: none; margin: 0;
  padding-block: 0; padding-inline: max(var(--fift-space-40), calc((100% - 1180px) / 2 + var(--fift-space-40)));
}
.masthead .frame { width: 100%; }
.masthead { --e-bar: 60px; }
@media (max-width: 640px) {
  .top, .masthead .frame { padding-inline: var(--fift-space-page-margin); }
}
.top .site-nav a.nav-cta, .masthead .site-nav .btn-s {
  display: inline-flex; align-items: center; min-height: var(--fift-button-height-compact); margin-left: var(--fift-space-8);
  padding: 0 var(--fift-space-16); border-radius: var(--fift-radius-capsule); background: var(--fift-action); box-shadow: none;
  color: var(--fift-action-text); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/1 var(--e-sans); text-decoration: none;
}
.masthead:not(.scrolled) { box-shadow: none; }
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--fift-button-height-compact);
  min-width: var(--fift-button-height-compact); padding: 0 var(--fift-space-12); border-radius: var(--fift-radius-capsule); cursor: pointer;
  color: var(--fift-text); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/1 var(--e-sans);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--fift-focus); outline-offset: 3px; }
.menu[open] summary { background: var(--fift-fill); }
.menu-sheet {
  position: absolute; right: 0; top: calc(100% + var(--fift-space-8)); z-index: 60; display: grid; min-width: 240px; padding: var(--fift-space-8);
  border-radius: var(--fift-corner-sheet); corner-shape: squircle; background: var(--fift-glass); box-shadow: var(--fift-shadow-float);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.top .site-nav .menu-sheet a, .masthead .site-nav .menu-sheet a, .scene-day .masthead .site-nav .menu-sheet a {
  display: flex; align-items: center; min-height: var(--fift-space-row-min); padding: 0 var(--fift-space-16); margin: 0;
  border-radius: var(--fift-corner-16); corner-shape: squircle; color: var(--fift-text); background: none; text-decoration: none;
  font: var(--fift-type-weight-regular) var(--fift-type-size-question)/var(--fift-type-leading-tight) var(--e-serif);
}
.menu-sheet a:hover, .menu-sheet a[aria-current="page"] { background: var(--fift-fill); }
.scene-day .masthead:is(:not(.scrolled), .day-bar) .menu summary { color: var(--fift-ink); }
@media (max-width: 899px) { .menu { display: block; } }
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
footer.foot {
  margin: 0; padding: var(--fift-space-64) max(var(--fift-space-40), calc((100% - 1180px) / 2 + var(--fift-space-40))) var(--fift-space-48);
  border-top: 1px solid var(--fift-hairline); background: none; color: var(--fift-secondary);
  font: var(--fift-type-weight-regular) var(--fift-type-size-body)/var(--fift-type-leading-body) var(--e-sans); text-align: left;
}
footer.foot .f-in { display: grid; grid-template-columns: 1fr auto; gap: var(--fift-space-48); align-items: start; }
footer.foot .foot-lock { display: inline-flex; align-items: baseline; gap: var(--fift-space-8); min-height: 0; color: var(--fift-text); text-decoration: none; }
footer.foot .foot-lock .mark { align-self: center; }
footer.foot .foot-lock span { color: var(--fift-tertiary); font-size: var(--fift-type-size-note); }
footer.foot nav { display: grid; grid-template-columns: repeat(3, minmax(144px, auto)); gap: var(--fift-space-32); margin: 0; }
footer.foot nav div { display: grid; align-content: start; }
footer.foot .f-h { margin: 0 0 var(--fift-space-4); color: var(--fift-tertiary); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/var(--fift-type-leading-tight) var(--e-sans); }
footer.foot nav a { display: flex; align-items: center; min-height: var(--fift-button-height-compact); padding: 0; margin: 0; color: var(--fift-secondary); text-decoration: none; }
footer.foot nav a:hover, footer.foot nav a[aria-current="page"] { color: var(--fift-text); }
footer.foot .f-legal { max-width: var(--fift-type-measure-body); margin: var(--fift-space-48) 0 0; color: var(--fift-tertiary); font-size: var(--fift-type-size-note); line-height: var(--fift-type-leading-body); }
@media (max-width: 767px) {
  footer.foot { padding-inline: var(--fift-space-page-margin); }
  footer.foot .f-in { grid-template-columns: 1fr; gap: var(--fift-space-32); }
  footer.foot nav { grid-template-columns: 1fr 1fr; gap: var(--fift-space-24) var(--fift-space-16); }
}
.m-tabs button, .tg button { min-height: var(--fift-button-height-compact); }
.send { width: var(--fift-button-height-compact); height: var(--fift-button-height-compact); top: 50%; translate: 0 -50%; }
.dl-more { min-width: var(--fift-button-height-compact); }
p.links a, .back a, main.legal p.meta a { display: inline-flex; align-items: center; min-height: var(--fift-button-height-compact); }
.hero .dl-main, .tier .pill, .still .h-cta .pill:not(.ghost) { min-height: var(--fift-button-height); padding-inline: var(--fift-space-24); font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/1 var(--e-sans); }
.pill.ghost { font-weight: var(--fift-type-weight-semibold); }
main.legal p, main.legal li, .qa p, .fold details p, .fold details li { line-height: var(--fift-type-leading-body); }
main.legal p, main.legal li, .fine, .h-fine p, .wi-fine { max-width: var(--fift-type-measure-body); }
.fine, .h-fine p { margin-inline: auto; }
main.legal ul { margin: var(--fift-space-16) 0; }
.wi-fine, .h-fine p, .chief-sec .caption, .tier .soon { font-size: var(--fift-type-size-body); }
.p-shot, .h-win, .buy-card, .buy .wi-hero .buy-card { box-shadow: none; }
.qa { align-items: start; row-gap: var(--fift-space-48); }
.doors { grid-auto-rows: 1fr; }
.doors a { height: 100%; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--fift-focus); outline-offset: 3px; }
b, strong { font-weight: var(--fift-type-weight-semibold); }
.dl-mail { display: block; margin-top: var(--fift-space-8); color: var(--fift-secondary); font-size: var(--fift-type-size-note); }
.dl-steps { position: fixed; z-index: 70; left: 50%; bottom: max(var(--fift-space-16), env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: var(--fift-space-16); width: min(640px, calc(100% - 2 * var(--fift-space-page-margin))); box-sizing: border-box; padding: var(--fift-space-12) var(--fift-space-12) var(--fift-space-12) var(--fift-space-20); border-radius: var(--fift-corner-sheet); corner-shape: squircle; background: var(--fift-glass); box-shadow: var(--fift-shadow-float); color: var(--fift-text); font: var(--fift-type-weight-regular) var(--fift-type-size-body)/var(--fift-type-leading-body) var(--e-sans); }
.dl-steps p { flex: 1; margin: 0; }
.dl-steps a { display: inline-flex; align-items: center; min-height: var(--fift-button-height-compact); color: var(--fift-text); font-weight: var(--fift-type-weight-semibold); white-space: nowrap; }
.dl-steps button { flex: none; width: var(--fift-button-height-compact); height: var(--fift-button-height-compact); border: 0; border-radius: var(--fift-radius-capsule); background: var(--fift-fill); color: var(--fift-text); font: inherit; cursor: pointer; }
.faq summary, .fold summary { min-height: var(--fift-space-row-min); padding-block: var(--fift-space-12); font: var(--fift-type-weight-regular) var(--fift-type-size-question)/var(--fift-type-leading-tight) var(--e-serif); color: var(--fift-text); }
.faq details, .fold details { border-top: 1px solid var(--fift-hairline); }
.facts svg, .chips svg { width: 20px; height: 20px; stroke: var(--fift-secondary); stroke-width: 1.5; }
.masthead.scrolled, .top { background: var(--fift-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.masthead .lockup span, .top .lockup span { color: var(--fift-secondary); }
.menu:not([open]) .menu-sheet { display: none; }
footer.foot .f-id { display: flex; align-items: center; gap: var(--fift-space-8); margin: 0; }
footer.foot .f-studio { display: inline-flex; align-items: center; min-height: var(--fift-button-height-compact); color: var(--fift-tertiary); font-size: var(--fift-type-size-note); text-decoration: none; }
footer.foot .f-x { display: inline-flex; align-items: center; justify-content: center; width: var(--fift-button-height-compact); height: var(--fift-button-height-compact); margin-left: var(--fift-space-4); color: var(--fift-secondary); }
footer.foot .f-studio:hover, footer.foot .f-x:hover { color: var(--fift-text); }
footer.foot .f-x svg { width: 16px; height: 16px; fill: currentColor; }
.founder { margin-top: var(--fift-space-12); color: var(--fift-secondary); }
.founder a { color: inherit; }

/* SITE-RELEASE1: the nav's secondary action (Download), beside the cherry Start free; hidden on a phone, where Start free stands alone */
.top .site-nav a.nav-dl, .masthead .site-nav a.nav-dl { border-radius: var(--fift-radius-capsule); background: var(--fift-fill); color: var(--fift-text); font-weight: var(--fift-type-weight-semibold); }
@media (min-width: 900px) { .top .site-nav a.nav-dl, .masthead .site-nav a.nav-dl { display: inline-flex; align-items: center; min-height: var(--fift-button-height-compact); margin-left: var(--fift-space-8); padding: 0 var(--fift-space-16); } }
@media (max-width: 899px) { .top .site-nav a.nav-dl, .masthead .site-nav a.nav-dl { display: none; } }
.site-nav a.nav-dl .short { display: none; }   /* the secondary nav button shows only on desktop: its long label only (no "Download for MacDownload") */
/* site-qa (Sunny 05:26/05:33 via Raven, P0s). The Menu sheet follows the theme in both moods, opaque enough to read over the
   hero (the day scene's dark-ink nav rule used to win over the sheet's links: ink on the dark glass), and on a phone it hangs
   under the bar, full width. The footer lockup is one baseline row (feather + Crew + by FIFT Studio, as the header), it shares
   its baseline with the column labels, the X sits on it, and the three columns stay one row on a phone. */
.menu-sheet { background: var(--fift-surface); }   /* solid: the bar's own blur keeps the sheet's from reaching the page */
.top .site-nav .menu-sheet a, .masthead .site-nav .menu-sheet a, .scene-day .masthead:is(:not(.scrolled), .day-bar) .site-nav .menu-sheet a:not(.btn-s) { color: var(--fift-text); }
.scene-day .masthead:is(:not(.scrolled), .day-bar) .menu-sheet { background: var(--fift-ivory); }
.scene-day .masthead:is(:not(.scrolled), .day-bar) .site-nav .menu-sheet a:not(.btn-s) { color: var(--fift-ink); }
.scene-day .masthead:is(:not(.scrolled), .day-bar) .menu-sheet a:hover { background: color-mix(in srgb, var(--fift-ink) 8%, transparent); }
@media (max-width: 640px) {
  .menu { position: static; }
  .menu-sheet { position: fixed; left: var(--fift-space-page-margin); right: var(--fift-space-page-margin); top: calc(var(--e-bar) + env(safe-area-inset-top) + var(--fift-space-8)); min-width: 0; max-height: calc(100dvh - var(--e-bar) - var(--fift-space-24)); overflow-y: auto; box-shadow: none; }
}
footer.foot .f-in { align-items: baseline; }
footer.foot .f-id { align-items: baseline; }
footer.foot .f-id .foot-lock { padding-block: 0; }
footer.foot .f-x { align-self: center; margin-left: calc(-1 * var(--fift-space-8)); margin-top: calc(-1 * var(--fift-space-4)); }
@media (max-width: 767px) {
  footer.foot nav { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--fift-space-24) var(--fift-space-12); }
}
/* site-qa: a tablet (768) squeezed the lockup beside the three columns and 'by FIFT Studio' wrapped under Crew (Δ 19.5 px):
   below 1024 the lockup takes its own row; the lockup never wraps */
footer.foot .f-id { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1023px) { footer.foot .f-in { grid-template-columns: 1fr; gap: var(--fift-space-32); } }
/* site-qa (Raven's live sweep 05:37): small text links keep their look but get a 44 px tap area (WCAG 2.5.5 / Apple HIG) */
.bring .b-l, .version-link, .press-brands figcaption a { position: relative; }
.bring .b-l::after, .version-link::after, .press-brands figcaption a::after { content: ""; position: absolute; inset: calc(-1 * var(--fift-space-16)) calc(-1 * var(--fift-space-4)); }
/* site-qa flows (measured, 320-430 + 1440): 44 px tap areas without changing the look; the Crew lockup in the footer,
   the help back links and crumbs, and the legal link rows */
footer.foot .f-id .foot-lock { position: relative; }
footer.foot .f-id .foot-lock::after { content: ""; position: absolute; inset: calc(-1 * var(--fift-space-12)) calc(-1 * var(--fift-space-8)); }
p.links a, .back a, main.legal p.meta a, main.legal > p:first-child > a[href="/help"]:only-child, main.legal .crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fift-button-height-compact); min-width: var(--fift-button-height-compact); }
.version-link::after { inset: calc(-1 * var(--fift-space-16)) calc(-1 * var(--fift-space-12)); }
.help-search label { position: relative; }
.help-search label::after { content: ""; position: absolute; inset: calc(-1 * var(--fift-space-12)) 0; }

/* THE LAUNCH METER (8 Oct, Sunny "Good way"): home + /pricing (the Founder card), /join, /checkout. Words: claims.json lines;
   the count + the bar only from /seats.js (the real count past its threshold), else "First 100 founders" and no bar.
   Cherry = --fift-crew-accent (adapts to dark). Reduced motion: the bar is drawn at its value, no fill-in. */
.launch { box-sizing: border-box; display: grid; gap: var(--fift-space-8); width: 100%; max-width: 400px; margin: var(--fift-space-24) auto; padding: var(--fift-space-24); text-align: left; background: var(--fift-surface-hi); border-radius: var(--fift-corner-26); corner-shape: squircle; }
.m-tag, .tier.hot .badge { font: var(--fift-type-weight-semibold) var(--t-note)/1.4 var(--e-sans); letter-spacing: .08em; text-transform: uppercase; }
.m-tag { justify-self: start; margin: 0 0 var(--fift-space-8); padding: 0; border: 0; border-radius: 0; background: none; color: var(--fift-text); }   /* ui-0315 16:32: "Launch price" is a label, not a pill: the one rule for /join, /checkout and every .m-tag */
.m-amt { display: flex; align-items: baseline; gap: var(--fift-space-8); margin: 0; font-family: var(--e-display); color: var(--fift-text); }
.m-amt b, .m-amt b data { font-weight: 400; font-size: var(--fift-type-web-display); line-height: 1; letter-spacing: -0.022em; font-variant-numeric: lining-nums tabular-nums; }
.m-amt span, .tier.hot .per { font: 400 var(--t-note)/1.3 var(--e-sans); color: var(--fift-secondary); }
.meter { display: grid; gap: var(--fift-space-8); margin-top: var(--fift-space-12); }
.m-bar { display: none; height: 6px; border-radius: var(--fift-radius-capsule); background: var(--fift-fill); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: calc(var(--taken, 0) * 100%); min-width: 6px; border-radius: inherit; background: var(--fift-crew-accent); }
.meter[data-live="1"] .m-bar { display: block; }
.m-row { display: flex; flex-wrap: nowrap; white-space: nowrap; justify-content: space-between; align-items: baseline; gap: var(--fift-space-4) var(--fift-space-12); margin: 0; font: 400 var(--t-note)/1.4 var(--e-sans); color: var(--fift-secondary); font-variant-numeric: tabular-nums; }
.m-row [data-meter-text] { color: var(--fift-text); font-weight: var(--fift-type-weight-semibold); }
.m-end { margin-left: auto; text-align: right; }
@keyframes m-fill { from { width: 0; min-width: 0; } }
@media (prefers-reduced-motion: no-preference) { .meter[data-live="1"] .m-bar i { animation: m-fill var(--fift-motion-duration-draw) var(--fift-ease-smooth) both; } }
/* site-qa (flows 320/375: /checkout and /join scrolled sideways, 378 and 360 px wide): on a narrow phone the launch card
   breathes less, and below 400 px the meter's two facts stack left-aligned (two whole lines, never a lone fragment) */
@media (max-width: 399px) {
  .launch { padding: var(--fift-space-16); }
  .m-row { flex-wrap: wrap; white-space: normal; }
  .m-row > * { white-space: nowrap; }
  .m-end { flex-basis: 100%; margin-left: 0; text-align: left; }
}
/* Sunny 11:05 ("That download for Mac doesn't need to be this big"): Start free stays the one big primary; Download for Mac
   (+ its OS chevron) is the quiet secondary: ~40 px tall, a 14 px label (the nearest type token to the asked 15), an outline in the text's own colour, as wide as its
   words. The tap area stays 44 px (an invisible 2 px band above and below). Day hero: ink on sand; night hero: ivory. */
.dl-row, .pill.ghost, .btn.btn-ghost { position: relative; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.dl-row::after, .pill.ghost::after, .btn.btn-ghost::after { content: ""; position: absolute; inset: -2px 0; }
.hero .dl-row .dl-main, .dl-row .dl-main, .tier .pill.ghost, .still .h-cta .pill.ghost, .pill.ghost, .btn.btn-ghost { min-height: calc(var(--fift-button-height-compact) - 4px); padding-inline: var(--fift-space-16); font-size: var(--fift-type-desktop-body); font-weight: var(--fift-type-weight-semibold); }
.dl-row .dl-main { padding-inline-end: var(--fift-space-8); }
.dl-row .dl-more { min-height: calc(var(--fift-button-height-compact) - 4px); min-width: 36px; }
.tier .pill.ghost { justify-self: center; align-self: center; width: auto; }
.hero .dl-row { color: var(--fift-ivory-night); }
.scene-day .hero .dl-row { color: var(--fift-ink); }
.hero .dl-start { min-height: var(--fift-button-height); padding-inline: var(--fift-space-32); font-size: var(--fift-type-size-body); }
.dl-row .dl-main { padding-inline: var(--fift-space-12) var(--fift-space-4); gap: var(--fift-space-4); }
.dl-row .dl-more { min-width: 32px; width: 32px; padding: 0 var(--fift-space-8) 0 var(--fift-space-4); }
.dl-row .dl-ic { width: 14px; height: 14px; }
/* contrast (check.sh): a bare outline on the day ripples read 4.3:1; the secondary keeps a quiet glass fill under its words */
.hero .dl-row { background: color-mix(in srgb, var(--fift-ink) 55%, transparent); }
.scene-day .hero .dl-row { background: color-mix(in srgb, var(--fift-ivory) 78%, transparent); }
/* C2 (Raven 12:42): the Founder card's Download is the same quiet secondary as the hero's: as wide as its words, centred
   under the full-width Start free (the card's grid stretched it to the primary's width) */
.pc-ctas .pill.ghost, .pc-buy .pill.ghost { justify-self: center; width: auto; min-width: 0; min-height: calc(var(--fift-button-height-compact) - 4px); padding-inline: var(--fift-space-16); }
/* C3 (Raven 13:37): the receipt hugs its rows. The empty capsule above it (the printer slot) is gone; the total, the
   Claude-plan line and the source are always shown (never held at opacity 0 waiting for a staggered print), so a still
   or a quick scroll never meets an empty lower half. Only the two rows fade in and get struck, quickly; reduced motion =
   the finished receipt. */
.pc-slot { display: none; }
.pc-feed { margin-top: 0; }
.pc-anim .pc-feed { clip-path: none; transform: none; }
.pc-anim .pc-r-total, .pc-anim .pc-r-plus, .pc-anim .pc-r-src { opacity: 1; }
.pc-anim.go .pc-r-lines li { transition-delay: calc(var(--i, 0) * var(--fift-motion-duration-number)); }
.pc-anim.go .pc-r-lines li > span { transition-delay: calc((2 + var(--i, 0)) * var(--fift-motion-duration-number)); }
/* C3: after the first 100 = two plans (Studio is its own row below): on a phone they stack, no half-cut swipe row */
@media (max-width: 820px) {
  .track.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fift-space-16); overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .track.duo .tier { flex: none; width: 100%; max-width: 400px; justify-self: center; }
}
/* Deploy D (Sunny's iPhone 13:51: "the black text below disappears"): the notes under the hero's buttons sit on their own
   quiet ground, so they read on any pixel the photo puts under them (light sand, dark sand, bare ground; every sky and
   width). Day/dawn: ink on an ivory glass; dusk/night: ivory on an ink glass. No halo. */
.hero .dl-note { width: fit-content; max-width: 100%; margin-inline: auto; padding: var(--fift-space-4) var(--fift-space-12); border-radius: var(--fift-radius-capsule); background: color-mix(in srgb, var(--fift-ink) 62%, transparent); color: var(--fift-ivory-night); }
.scene-day .hero .dl-note, .scene-day .hero .dl-note.on-ground { background: color-mix(in srgb, var(--fift-ivory) 84%, transparent); color: var(--fift-ink); }
.hero .dl-note::before { content: none; }
.hero .dl-note a { color: inherit; }
/* Deploy D (Sunny 13:49: "not all download for mac buttons work"): on a phone every Download opens ONE small sheet */
.dl-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; padding: var(--fift-space-16); background: color-mix(in srgb, var(--fift-ink) 40%, transparent); }
.dl-sheet-in { position: relative; display: grid; gap: var(--fift-space-12); justify-items: center; width: min(100%, 420px); padding: var(--fift-space-32) var(--fift-space-24) var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--fift-surface-hi); color: var(--fift-text); text-align: center; }
.dl-sheet-in p { margin: 0; }
.dl-sheet-t { font: 400 var(--t-question)/1.3 var(--e-display); }
.dl-sheet-os { font-size: var(--t-note); color: var(--fift-secondary); }
.dl-sheet-x { position: absolute; top: 0; right: 0; width: var(--fift-button-height-compact); height: var(--fift-button-height-compact); border: 0; background: none; color: var(--fift-secondary); font-size: var(--t-question); cursor: pointer; }
/* P0 fix (14:55): the 44 px tap band sat on the .dl-row wrapper, on top of the link, so a click on the hero's Download hit the
   div and nothing happened. The band now belongs to the link and the chevron themselves. */
.dl-row::after { content: none; }
.dl-row .dl-main, .dl-row .dl-more { position: relative; }
.dl-row .dl-main::after, .dl-row .dl-more::after { content: ""; position: absolute; inset: -2px 0; }
/* HERO + PAIR SPEC (Raven 14:42; Sunny 14:43 "The buttons are massive now?" / "Even the type bar is bigger?" / "Why not add the
   50 a month after 7 days inside the box of 7 days"). Start free carries its price as a second line inside the button
   (16 px 600 + 13 px at 80%), ~52 tall. Download / Send the link: 44 tall, 14 px, outline, the SAME width as Start free.
   The same pair everywhere (hero, home close, Founder card, how-it-works, security, 404). The question field: 52 tall, 17 px. */
a:has(> .cta-2) { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--fift-button-height); padding-block: var(--fift-space-4); line-height: 1.15; text-align: center; }
.cta-1 { font: var(--fift-type-weight-semibold) var(--fift-type-desktop-question)/1.15 var(--e-sans); }
.cta-2 { font: 400 var(--t-note)/1.15 var(--e-sans); color: color-mix(in srgb, currentColor 80%, transparent); }
.dl-ctas, .h-cta, .nf .hero-cta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: center; align-items: center; gap: var(--fift-space-12); }
/* Sunny 14:56: side by side on a phone too (two equal columns; see the narrow-phone rule at the end) */
.dl-ctas > *, .h-cta > *, .nf .hero-cta > * { width: 100%; justify-content: center; box-sizing: border-box; }
.dl-row { display: flex; }
.dl-row .dl-main { flex: 1; justify-content: center; }
.hero .dl-row .dl-main, .dl-row .dl-main, .dl-row .dl-more, .tier .pill.ghost, .still .h-cta .pill.ghost, .pill.ghost, .btn.btn-ghost { min-height: var(--fift-button-height-compact); font-size: var(--fift-type-desktop-body); }
.pc-ctas .pill.ghost, .pc-buy .pill.ghost { justify-self: stretch; width: 100%; min-width: 0; min-height: var(--fift-button-height-compact); }
.hero .field input { height: var(--fift-button-height); font-size: var(--fift-type-size-body); }
/* ui-0315 design gate (14:51): a pair is one height; Download / Send the link = 52 like Start free (label stays 14 px).
   The send arrow is a 36 px circle inside the field, inset 8 px, vertically centred; the text never runs under it. */
.dl-row, .hero .dl-row .dl-main, .dl-row .dl-main, .dl-row .dl-more, .pc-ctas .pill.ghost, .pc-buy .pill.ghost, .still .h-cta .pill.ghost, .h-cta .pill.ghost, .nf .hero-cta .btn.btn-ghost { min-height: var(--fift-button-height); }
.hero .field input { padding-right: calc(36px + var(--fift-space-8) * 2); }
.hero .field .send { width: 36px; height: 36px; right: var(--fift-space-8); top: 50%; translate: 0 -50%; background: var(--fift-fill); color: var(--fift-text); }
.hero .field .send:disabled { background: var(--fift-fill); color: var(--fift-tertiary); }
/* Sunny 14:56 ("How can we get the buttons side by side instead of, maybe smaller?") + ui-0315's 375 math: the pair stays side
   by side on every phone, two exactly equal columns, 52 tall. Up to 400 px: Start free's first line 14 px (7 days and its price
   still inside), the Download / Send label 14 px with its icon hidden; nothing wraps. */
.dl-ctas, .h-cta, .nf .hero-cta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(100%, 440px); margin-inline: auto; }
.dl-ctas > *, .h-cta > *, .nf .hero-cta > * { min-width: 0; padding-inline: var(--fift-space-12); }
.cta-1, .cta-2, .dl-row .dl-main span { white-space: nowrap; }
@media (max-width: 400px) {
  .cta-1 { font-size: var(--fift-type-desktop-body); }
  .dl-ctas .dl-ic, .h-cta .pill.ghost svg, .nf .hero-cta .btn-ghost svg { display: none; }
}

/* ONE CHERRY (ui-0315 16:45): every page CTA's primary fill is the nav's --fift-action (ivory label --fift-action-text) */
.dl-start, .pill:not(.ghost), .btn-cherry, .buy .btn-cherry { background: var(--fift-action); color: var(--fift-action-text); }
/* the header lockup never wraps (a fallback font broke it onto 3 lines) */
.top .lockup, .masthead .lockup { flex-shrink: 0; white-space: nowrap; }