/* collinmallery.com: "High Desert" design. Fonts are self-hosted (no third-party requests). */
@font-face { font-family: "Anton"; src: url("/_cm/fonts/anton.woff2?v=d0fa07ff63") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/_cm/fonts/instrument-sans.woff2?v=2ee17598a9") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/_cm/fonts/jetbrains-mono.woff2?v=83c005d49d") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --sand-50: #fbf7f0; --sand-100: #f3ece0; --sand-200: #efe6d7; --sand-300: #e8dfd0;
  --sand-400: #e6d8c3; --sand-450: #ecdfcc; --sand-600: #cbbfad;
  --ink-900: #1f1a16; --ink-800: #2c2621; --ink-600: #5a5047; --ink-500: #7a6f63;
  --ink-400: #a39888; --ink-300: #b8ad9f; --ink-200: #e4dccf;
  --rust-600: #c2461f; --rust-400: #e0835f;
  --sage-600: #5f6e53; --sage-400: #a9b89a;
  --line: rgba(31, 26, 22, .15); --line-dark: rgba(243, 236, 224, .18);
  --display: "Anton", "Oswald", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: 64px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
/* Scrollbars in the palette: a slim ink thumb on sand. Firefox and Chrome use
   scrollbar-color; Safari (no scrollbar-color) gets the ::-webkit-scrollbar version, rust while dragging. */
html { scrollbar-color: var(--ink-400) var(--sand-100); scrollbar-width: thin; }
* { scrollbar-color: var(--ink-300) transparent; scrollbar-width: thin; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--sand-100); }
  ::-webkit-scrollbar-thumb { background: var(--ink-400); border: 3px solid var(--sand-100); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-600); }
  ::-webkit-scrollbar-thumb:active { background: var(--rust-600); }
  ::-webkit-scrollbar-corner { background: var(--sand-100); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--sand-100); color: var(--ink-900); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--ink-900); }
a:hover { color: var(--rust-600); }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 10; padding: 8px 14px; background: var(--ink-900); color: var(--sand-50); border-radius: 999px; }
:focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }

/* ---- shared pieces ---- */
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 400 22px var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.wordmark__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rust-600); flex: none; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-600); }
.eyebrow--rust { color: var(--rust-400); }
.label { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.meta { font: 400 12px var(--mono); color: var(--ink-500); }
.meta--center { text-align: center; }
.proof { margin: -12px 0 0; font: 600 14px var(--body); color: var(--sage-600); }
.sticky-cta { display: none; }
/* Discovery calls */
.h2 { font: 400 88px/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
/* A heading whose phone version is one word (the pricing "Pricing"): the real text stays in the page once and
   phones show the short word from CSS instead (alt text "" so screen readers keep the real one). */
.h2--swap::before { content: none; }
.split__aside { max-width: 340px; font-size: 18px; color: var(--ink-600); }
.stripes { background: repeating-linear-gradient(135deg, var(--sand-400) 0 8px, var(--sand-450) 8px 16px); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rust-600); transition: background .2s; }
.dot--open { background: var(--sage-600); }

.btn { display: inline-flex; justify-content: center; align-items: center; padding: 14px 22px; border: 0; border-radius: 999px; font: 600 15px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s; }
.btn:hover { filter: brightness(.92); }
.btn--small { padding: 10px 18px; }
.btn--ink { background: var(--ink-900); color: var(--sand-100); }
.btn--ink:hover { color: var(--sand-100); }
.btn--rust { background: var(--rust-600); color: var(--sand-50); }
.btn--rust:hover { color: var(--sand-50); }
.btn--light { background: var(--sand-50); color: var(--ink-900); }
.btn--light:hover { color: var(--ink-900); background: var(--sand-200); filter: none; }
.btn--outline { background: transparent; border: 1.5px solid var(--ink-900); color: var(--ink-900); }
.btn--outline:hover { color: var(--ink-900); background: rgba(31, 26, 22, .05); filter: none; }
.btn:disabled { opacity: .6; cursor: default; }

.badge { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.badge--rust { background: var(--rust-600); color: var(--sand-50); }

.switch { position: relative; width: 48px; height: 28px; flex: none; border: 0; padding: 0; border-radius: 999px; background: var(--sand-600); cursor: pointer; transition: background .2s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sand-50); transition: left .18s var(--ease); }
.switch[aria-checked="true"] { background: var(--sage-600); }
.switch[aria-checked="true"] span { left: 23px; }

.seg { display: inline-flex; background: var(--sand-300); border-radius: 999px; padding: 4px; flex: none; }
.seg__btn { border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; font: 600 14px var(--body); cursor: pointer; color: var(--ink-900); }
.seg__btn.is-on { background: var(--ink-900); color: var(--sand-100); }

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); position: relative; }
.nav { display: flex; align-items: center; gap: 32px; font: 500 15px var(--body); }
.nav a:not(.btn) { text-decoration: none; }
.top__menu { display: none; }

.lead { max-width: 600px; font-size: 21px; color: var(--ink-600); text-wrap: pretty; }
.ask { display: flex; align-items: center; gap: 8px; width: 560px; max-width: 100%; padding: 6px 6px 6px 24px; background: var(--sand-50); border: 1.5px solid var(--ink-900); border-radius: 999px; }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 18px var(--body); }
.ask input::placeholder { color: var(--ink-500); opacity: 1; }
.ask.is-demo input::placeholder { color: var(--ink-900); }
.ask .btn { font-size: 16px; }


/* ---- three steps ---- */
.steps { padding: 140px var(--gutter) 120px; }
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink-900); }
.step { padding: 32px 32px 0; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--line); }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; border-right: 0; }
.step__price { font: 400 104px/.9 var(--display); }
.step__price--sage { color: var(--sage-600); }
.step__price--rust { color: var(--rust-600); }
.step h3 { font: 700 24px var(--body); margin-bottom: 14px; }
.step p:not(.step__price) { color: var(--ink-600); }

/* ---- your site, your keys ---- */
.keys { background: var(--ink-900); color: var(--sand-100); padding: 120px var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.keys__copy { display: flex; flex-direction: column; gap: 24px; }
.keys__list li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-dark); color: var(--ink-200); line-height: 1.45; }
.keys__list span { font: 600 12px var(--mono); color: var(--sage-400); }
.mini { background: var(--sand-100); color: var(--ink-900); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.mini__name { min-height: 1.2em; font: 400 20px/1.2 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini__tile { background: var(--sand-50); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mini__open { display: flex; justify-content: space-between; align-items: center; }
.mini__state { font: 700 18px var(--body); }
.mini__count { font: 400 40px/1 var(--display); color: var(--rust-600); }
.mini__announce { gap: 8px; }
.mini__announce input { border: 0; outline: 0; background: transparent; padding: 0; font: 500 16px var(--body); }

/* ---- pricing ---- */
.pricing { padding: 120px var(--gutter); }
.pricing .split { margin-bottom: 48px; }
.plan--featured { background: var(--ink-900); color: var(--sand-100); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__name { font: 400 32px var(--display); text-transform: uppercase; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 20px; }
.plan__was { flex-basis: 100%; font: 400 30px/1 var(--display); color: var(--ink-400); text-decoration-thickness: 2px; text-decoration-color: var(--rust-600); }
.plan__billed { flex-basis: 100%; font: 500 13px var(--mono); color: var(--sage-600); }
.plan--featured .plan__billed { color: var(--sage-400); }
.plan--featured .plan__was { color: var(--ink-300); }
.plan__was-setup { color: var(--ink-400); }
.pricing__spots { font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rust-600); }
.seg__save { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-left: 4px; }
.plan__amount { font: 400 84px/.9 var(--display); }
.plan__per { font: 500 17px var(--body); color: var(--ink-500); }
.plan--featured .plan__per, .plan--featured .plan__alt { color: var(--ink-300); }
.plan__setup { font: 500 16px var(--body); }
.plan__alt { min-height: 18px; font: 400 12px var(--mono); color: var(--ink-500); }
.plan__desc { font-size: 15px; color: var(--ink-600); }
.custom { margin-top: 20px; border: 1.5px solid var(--ink-900); border-radius: 24px; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.custom__copy { display: flex; align-items: baseline; gap: 24px; }
.custom__text { color: var(--ink-600); }
.fineprint { margin-top: 24px; font: 400 13px/1.5 var(--mono); color: var(--ink-500); }
.fineprint a { padding: 14px 0; }

/* ---- questions ---- */
.faq { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 72px; }
.faq__row { border-top: 1.5px solid var(--ink-900); padding: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
.faq__row dt { font: 700 19px/1.3 var(--body); }
.faq__row dd { color: var(--ink-600); }

/* ---- call to action + form ---- */
.cta { background: var(--rust-600); color: var(--sand-50); padding: 110px var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.cta__copy { display: flex; flex-direction: column; gap: 22px; }
.cta__copy p { max-width: 420px; font-size: 19px; }
.cta__title { font: 400 100px/.92 var(--display); text-transform: uppercase; text-wrap: balance; }
.cta__direct { display: flex; flex-direction: column; gap: 0; }
.cta__direct span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; min-height: 44px; }
.cta__direct a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sand-50); font-weight: 600; text-underline-offset: 3px; }
.cta__go { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta__btn { padding: 22px 40px; font-size: 20px; }
.cta__alt { color: var(--sand-50); font-weight: 600; text-underline-offset: 4px; }
.cta__alt:hover { color: var(--sand-200); }
.cta__fine { font: 400 13px var(--mono); color: var(--sand-200); max-width: 340px; }
.hp { position: absolute; left: -9999px; }









.link { background: none; border: 0; padding: 0; font: 500 15px var(--body); color: var(--ink-600); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--rust-600); }

.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 12px var(--gutter); font: 400 12px var(--mono); color: var(--ink-600); }
.foot__links { display: flex; gap: 0 20px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- privacy + terms pages ---- */
.prose { max-width: 680px; padding: 48px var(--gutter) 96px; display: flex; flex-direction: column; gap: 16px; color: var(--ink-600); }
.prose h1 { font: 400 88px/.9 var(--display); text-transform: uppercase; color: var(--ink-900); margin-bottom: 16px; }
.prose h2 { margin-top: 20px; font: 600 21px/1.3 var(--body); color: var(--ink-900); scroll-margin-top: 16px; }
.prose ul { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; }
.prose li::marker { color: var(--rust-600); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.seo .lead { font-size: 19px; color: var(--ink-600); }
.seo__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.seo__faq { border-top: 1px solid var(--line); padding: 14px 0; }
.seo__faq summary { cursor: pointer; font-weight: 600; color: var(--ink-900); }
.seo__faq p { margin-top: 8px; }
.seo__end { margin-top: 32px; padding: 28px; border-radius: 24px; background: var(--sand-50); display: flex; flex-direction: column; gap: 12px; }
.seo__end h2 { margin-top: 0; }
.foot__seo { flex-wrap: wrap; }
.prose__meta { font: 400 13px/1.5 var(--mono); color: var(--ink-500); }

/* ---- in between ---- */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }
  .h2 { font-size: 72px; }
  .cta__title { font-size: 84px; }
  .plan__amount { font-size: 68px; }
}

/* ---- mobile ---- */
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .h2, .prose h1 { font-size: 52px; }
  .top { padding: 18px var(--gutter); }
  .wordmark { font-size: 18px; gap: 8px; }
  .wordmark__dot { width: 10px; height: 10px; }
  .top__menu { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink-900); cursor: pointer; }
  .top__menu span { width: 16px; height: 2px; background: var(--sand-100); transition: transform .18s; }
  .top__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .top__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav { display: none; position: absolute; z-index: 5; top: 72px; left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: var(--sand-50); border-radius: 20px; box-shadow: 0 20px 40px -24px rgba(31, 26, 22, .5); }
  .top--open .nav { display: flex; }
  .nav a:not(.btn) { padding: 14px 12px; font-size: 17px; }
  .nav .btn { margin-top: 6px; padding: 15px; font-size: 16px; }

  .lead { font-size: 17px; }
  .ask { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; background: none; width: auto; }
  .ask input { flex: none; height: 54px; padding: 0 22px; border: 1.5px solid var(--ink-900); border-radius: 999px; background: var(--sand-50); font-size: 17px; }
  .ask .btn { padding: 17px; font-size: 17px; }
  .proof { text-align: center; font-size: 13px; margin-top: -8px; }
  /* Phones: one tap to the form once the hero has scrolled away (hidden again at the form). */
  .sticky-cta:not([hidden]) { display: block; position: fixed; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: 14px; padding: 16px; font-size: 17px; text-align: center; box-shadow: 0 14px 30px -12px rgba(31, 26, 22, .55); }


  .split { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .steps { padding: 64px var(--gutter) 0; }
  .steps__list { display: block; }
  .step { flex-direction: row; align-items: baseline; gap: 16px; padding: 18px 0; border-right: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
  .step__price { font-size: 52px; line-height: 1; width: 96px; flex: none; }
  .step h3 { font-size: 18px; margin-bottom: 4px; }
  .step p:not(.step__price) { font-size: 15px; line-height: 1.45; }

  .keys { margin-top: 56px; padding: 56px var(--gutter); grid-template-columns: 1fr; gap: 36px; }
  .keys__list li { font-size: 15px; }
  .mini { padding: 16px; }
  .mini__count { font-size: 32px; }

  .pricing { padding: 56px var(--gutter) 0; }
  /* Phones: heading, spots, then a full-width Monthly / Annually switch; each package stacked. */
  .pricing .split { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  .pricing .split .stack { gap: 8px; }
  .pricing .split .eyebrow { display: none; }
  .h2--swap .h2__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .h2--swap::before { content: "Pricing"; content: "Pricing" / ""; }
  .pricing__spots { font-size: 12px; letter-spacing: .08em; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 4px; }
  .seg__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 8px; font-size: 15px; }
  .seg__save { margin: 0; font-size: 9px; }
  .plan__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .plan__head .badge { font-size: 10px; padding: 4px 8px; }
  .plan__name { font-size: 26px; }
  .plan__price { margin: 2px 0 0; justify-content: flex-start; align-items: baseline; gap: 0 8px; }
  .plan__was { flex-basis: auto; font-size: 24px; text-align: left; }
  .plan__amount { font-size: 52px; }
  .plan__per { font-size: 15px; }
  .plan__billed { font-size: 11px; text-align: left; margin-top: 4px; }
  .plan__setup { font: 500 14px var(--body); color: var(--ink-600); }
  .plan--featured .plan__setup { color: var(--ink-300); }
  .custom { border-radius: 20px; padding: 22px; flex-direction: column; align-items: stretch; gap: 14px; }
  .custom__copy { flex-direction: column; gap: 6px; }
  .custom__copy .plan__name { font-size: 24px; }
  .custom__text { font-size: 14px; line-height: 1.45; }

  .faq { padding: 56px var(--gutter) 0; grid-template-columns: 1fr; gap: 16px; }
  .faq .h2 br { display: none; }
  .faq__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .faq__row dt { font-size: 17px; }
  .faq__row dd { font-size: 15px; }

  .cta { margin-top: 48px; padding: 56px var(--gutter); grid-template-columns: 1fr; gap: 28px; }
  .cta__title { font-size: 68px; line-height: .88; }
  .cta__copy { gap: 18px; }
  .cta__copy p { font-size: 16px; }
  .foot { padding: 10px var(--gutter); }
}

/* "or $300/year (2 months free)" under the monthly price. */
.plan__yearly { margin-top: 2px; font: 500 13px var(--mono); color: var(--sage-600); }
.plan--featured .plan__yearly { color: var(--sage-400); }

/* ---- The lead flow: /start (details) → /_cm/schedule (choose a time) → the call's page (confirmed) ----
   Motion (design handoff, section I): every animation sits under .cm-anim, so a page without it (the call's
   page on a later visit) shows the finished state, and prefers-reduced-motion jumps to it. */
@keyframes cmRise{from{transform:translateY(108%)}to{transform:none}}
@keyframes cmFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cmDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cmTicket{0%{opacity:0;transform:translateY(56px) scale(.965)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cmThunk{0%,100%{transform:none}35%{transform:translateY(3px) scale(.996)}}
@keyframes cmStamp{0%{opacity:0;transform:rotate(-18deg) scale(1.9)}55%{opacity:1;transform:rotate(-7deg) scale(.93)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes cmPop{0%{opacity:0;transform:scale(.86)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes cmRing{0%{box-shadow:0 0 0 0 rgba(224,131,95,.6)}100%{box-shadow:0 0 0 18px rgba(224,131,95,0)}}
@keyframes cmDot{0%{transform:scale(0)}65%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes cmBar{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes cmSpin{to{transform:rotate(360deg)}}
@keyframes cmShake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.cm-anim *{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}}

.lf-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--sand-100); overflow-x: clip; }
.lf-top { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 44px; border-bottom: 1px solid rgba(31, 26, 22, .14); }
.lf-top .wordmark { font-size: 24px; }
.lf-top .wordmark__dot { width: 10px; height: 10px; }
.lf-top__tag { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .25); color: var(--ink-600); }
.lf { flex: 1; width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 56px; display: flex; flex-direction: column; }
.lf-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; padding: 0 44px env(safe-area-inset-bottom, 0px); border-top: 1px solid rgba(31, 26, 22, .14); font: 400 12px var(--mono); color: var(--ink-500); }
.lf-foot__links { display: flex; gap: 18px; }
.lf-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-500); }
.lf-foot a:hover { color: var(--rust-600); }
.lf-custom-t { display: none; }
[data-kind="custom"] .lf-custom-t { display: inline; }
[data-kind="custom"] .lf-plan { display: none; }

/* Progress: 4 equal segments, full width. */
.lf-prog { width: 100%; }
.lf-prog__m { display: none; }
.lf-prog__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lf-prog__step { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lf-prog__track { position: relative; display: block; height: 6px; border-radius: 999px; background: rgba(31, 26, 22, .12); overflow: hidden; }
.lf-prog__fill { position: absolute; inset: 0; border-radius: 999px; transform-origin: left; }
.is-done .lf-prog__fill { background: var(--ink-900); }
.is-cur .lf-prog__fill, .is-booked .lf-prog__fill { background: var(--rust-600); }
.lf-prog__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lf-prog__mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); background: transparent; color: var(--ink-500); box-shadow: inset 0 0 0 1.5px rgba(31, 26, 22, .3); }
.is-done .lf-prog__mark { background: var(--ink-900); color: var(--sand-50); box-shadow: none; }
.is-cur .lf-prog__mark, .is-booked .lf-prog__mark { background: var(--rust-600); color: var(--sand-50); box-shadow: none; }
.lf-prog__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lf-prog__l { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-500); }
.is-done .lf-prog__l, .is-cur .lf-prog__l { color: var(--ink-900); }
.lf-prog__s { font: 500 12px var(--body); color: var(--ink-500); }
.is-done .lf-prog__s { color: var(--sage-600); }
.is-cur .lf-prog__s { color: var(--rust-600); }
.cm-anim .is-draw .lf-prog__fill { animation: cmDraw .6s cubic-bezier(.6, 0, .2, 1) .1s both; }
.cm-anim .is-booked.is-draw .lf-prog__mark { animation: cmDot .45s ease .55s both; }

/* Headline (rises line by line inside masks), eyebrow, lead, notice. */
.lf-head { display: flex; flex-direction: column; align-items: flex-start; margin-top: 32px; }
.lf-eyebrow { margin-bottom: 10px; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sage-600); }
.lf-eyebrow--ink { color: var(--ink-600); }
.lf-h1 { margin: 0; font: 400 min(96px, 10.4vw)/.86 var(--display); text-transform: uppercase; color: var(--ink-900); overflow-wrap: anywhere; }
.lf-h1 em { font-style: normal; color: var(--rust-600); }
.lf-h1 .lf-line { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 3px; }
.lf-line > span { display: block; }
.lf-h1 .lf-dl { padding-bottom: 10px; }
.lf-br-m { display: none; }
.lf-lead { margin-top: 12px; max-width: 580px; font: 400 18px/1.5 var(--body); color: var(--ink-600); }
.lf-notice { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #e3e7da; color: #3f4a36; font: 500 14px var(--body); }
.lf-head__act { margin-top: 24px; }
.cm-anim .lf-eyebrow { animation: cmFade .4s ease .1s both; }
.cm-anim .lf-confirmed { animation-delay: .7s; }
.cm-anim .lf-line > span { animation: cmRise .65s cubic-bezier(.2, .8, .2, 1) .15s both; }
.cm-anim .lf-d2 > span { animation-delay: .26s; }
.cm-anim .lf-d3 > span { animation-delay: .37s; }
.cm-anim .lf-h1--late .lf-line > span { animation-duration: .7s; animation-delay: .8s; }
.cm-anim .lf-h1--late .lf-d2 > span { animation-delay: .93s; }
.cm-anim .lf-h1--late .lf-d3 > span { animation-delay: 1.06s; }
.cm-anim .lf-lead { animation: cmFade .45s ease .45s both; }
.cm-anim .lf-notice { animation: cmFade .4s ease .5s both; }

/* Buttons */
.lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 999px; font: 600 15px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, filter .15s; }
.lf-btn:hover { filter: brightness(.92); }
.lf-btn:disabled { cursor: default; }
.lf-btn--rust, .lf-btn--rust:hover { background: var(--rust-600); color: var(--sand-50); }
.lf-btn--ink { background: var(--ink-900); color: var(--sand-100); }
.lf-btn--ink:hover { background: var(--rust-600); color: var(--sand-50); filter: none; }
.lf-btn--sand, .lf-btn--sand:hover { background: var(--sand-100); color: var(--ink-900); }
.lf-btn--outline, .lf-btn--outline:hover { padding: 13px 22px; background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.lf-link { background: none; border: 0; padding: 0; font: 500 15px var(--body); color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lf-link:hover { color: var(--rust-600); }

/* Main card + ink side panel */
.lf-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.lf-card { background: var(--sand-50); border-radius: 24px; padding: 24px; box-shadow: 0 30px 60px -36px rgba(31, 26, 22, .45); min-width: 0; }
.lf-side { background: var(--ink-900); color: var(--sand-100); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cm-anim .lf-grid > .lf-card { animation: cmTicket .65s cubic-bezier(.2, .8, .2, 1) .5s both; }
.cm-anim .lf-side { animation: cmTicket .65s cubic-bezier(.2, .8, .2, 1) .62s both; }
.lf-side__k { font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand-600); }
.lf-side__p { font: 400 15px/1.5 var(--body); color: var(--sand-300); }
.lf-side__direct { border-top: 1px solid rgba(243, 236, 224, .16); padding-top: 14px; font: 400 14px/1.5 var(--body); color: var(--sand-300); }
.lf-side__direct a { padding: 12px 0; color: var(--sand-100); font-weight: 600; }
.lf-side__direct a:hover { color: var(--rust-400); }
.lf-sign { display: flex; flex-direction: column; gap: 2px; font: 400 18px var(--display); text-transform: uppercase; color: var(--sand-100); }
.lf-sign span { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--sand-600); }
.lf-how { display: flex; flex-direction: column; gap: 14px; }
.lf-how li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font: 400 14px/1.45 var(--body); color: var(--sand-300); }
.lf-how__n { padding-top: 2px; font: 600 11px var(--mono); color: var(--rust-400); }
.lf-how__t { display: flex; flex-direction: column; gap: 2px; }
.lf-how__tag { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-400); }
.lf-how .is-done { opacity: .7; }
.lf-how .is-done .lf-how__n, .lf-how .is-done .lf-how__tag { color: var(--sage-400); }
.lf-cover { display: flex; flex-direction: column; gap: 12px; }
.lf-cover li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; font: 400 14px/1.45 var(--body); color: var(--sand-300); }
.lf-cover li::before { content: "—"; color: var(--rust-400); }
.lf-side__foot { border-top: 1px solid rgba(243, 236, 224, .16); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lf-side__edit { font: 600 12px var(--body); color: var(--rust-400); text-decoration: none; }
.lf-side__edit:hover { color: var(--sand-50); }
.lf-howm, .lf-pin, .lf-mbar { display: none; }

/* Step 2: the details form */
.lf-form { display: flex; flex-direction: column; gap: 18px; }
.lf-kinds { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lf-form__q { padding: 0; margin-bottom: 10px; font: 600 14px var(--body); }
.lf-kind { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 16px; cursor: pointer; background: var(--sand-100); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .14); transition: box-shadow .15s, background .15s; }
.lf-kind:has(input:checked) { background: var(--sand-50); box-shadow: inset 0 0 0 2px var(--ink-900); }
.lf-kind:has(input:focus-visible) { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.lf-kind__dot { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-900); display: grid; place-items: center; }
.lf-kind__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-900); transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.lf-kind:has(input:checked) .lf-kind__dot::after { transform: scale(1); }
.lf-kind__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf-kind__t { font: 700 15px var(--body); }
.lf-kind__s { font: 400 13px/1.4 var(--body); color: var(--ink-600); }
.lf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.lf-custom { display: none; }
[data-kind="custom"] .lf-custom { display: contents; }
.lf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-field--wide { grid-column: 1 / -1; }
.lf-field__l { display: flex; gap: 8px; align-items: baseline; font: 600 13px var(--body); color: var(--ink-900); }
.lf-opt { font: 400 10px var(--mono); font-style: normal; color: var(--ink-500); }
.lf-field input, .lf-field select, .lf-field textarea { width: 100%; height: 46px; border: 0; outline: 0; border-radius: 12px; background: var(--sand-100); padding: 0 14px; font: 500 16px var(--body); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .12); transition: box-shadow .15s; }
.lf-field select { padding: 0 12px; }
.lf-field textarea { height: auto; min-height: 92px; padding: 12px 14px; font: 500 16px/1.45 var(--body); resize: vertical; }
.lf-field input::placeholder, .lf-field textarea::placeholder { color: #9a8f82; }
.lf-field input:focus-visible, .lf-field select:focus-visible, .lf-field textarea:focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.lf-field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--rust-600); }
.lf-field .is-shake { animation: cmShake .35s ease; }
.lf-err { font: 500 12px var(--body); color: #a83a17; }
.lf-err:empty { display: none; }
.lf-send { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lf-btn--send { height: 54px; font-size: 16px; }
.lf-send__fine { text-align: center; font: 400 11px var(--mono); color: var(--ink-500); }
.lf-status { font: 500 14px var(--body); color: var(--ink-600); }
.lf-status:empty { display: none; }
.lf-status.err { color: var(--rust-600); }

/* Step 3: choose a time */
.lf-picker { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.lf-picker__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf-tz { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-600); }
.lf-weeks { display: flex; gap: 6px; }
.lf-week { padding: 6px 12px; white-space: nowrap; border: 0; border-radius: 999px; font: 600 12px var(--body); cursor: pointer; background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .25); transition: background .15s, color .15s; }
.lf-week[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-100); box-shadow: none; }
.lf-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lf-days--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lf-days > p { grid-column: 1 / -1; }
.lf-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 0; border: 0; border-radius: 14px; cursor: pointer; background: var(--sand-50); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .16); transition: background .15s, color .15s, box-shadow .15s; }
.lf-day:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.lf-day__wd { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.lf-day__n { font: 400 34px/1 var(--display); }
.lf-day__m { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.lf-day[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-100); box-shadow: none; }
.lf-day[aria-pressed="true"] .lf-day__m { color: var(--rust-400); }
.lf-day:disabled { cursor: default; background: transparent; color: #9a8f82; box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .1); }
.lf-day--off { opacity: .55; }
.lf-day--full .lf-day__n { text-decoration: line-through; }
.lf-day--full .lf-day__m { color: #a83a17; }
.lf-times { display: flex; flex-direction: column; gap: 16px; }
.lf-times:empty { display: none; }
.lf-group { display: flex; flex-direction: column; gap: 8px; }
.lf-group__l { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.lf-group__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lf-time { height: 44px; border: 0; border-radius: 12px; font: 600 14px var(--body); font-variant-numeric: tabular-nums; cursor: pointer; background: var(--sand-50); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .16); transition: background .15s, color .15s, transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.lf-time:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.lf-time[aria-pressed="true"] { background: var(--rust-600); color: var(--sand-50); box-shadow: none; transform: scale(1.04); }
.lf-empty { font: 500 14px var(--body); color: var(--ink-600); }
.lf-confirm { margin: 2px -22px 0; min-height: 76px; display: flex; align-items: stretch; }
.lf-confirm__wait { flex: 1; display: flex; align-items: center; padding: 0 22px; font: 400 12px var(--mono); color: var(--ink-500); border-top: 1px dashed rgba(31, 26, 22, .18); }
.lf-confirm__on { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; background: var(--ink-900); color: var(--sand-100); }
.lf-confirm__sel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-confirm__sel strong { font: 700 16px var(--body); }
.lf-confirm__sel span { font: 400 11px var(--mono); color: var(--sand-600); }
.lf-confirm__btn { min-width: 150px; padding: 13px 22px; }
.lf-spin { display: none; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(251, 247, 240, .35); border-top: 2px solid var(--sand-50); }
.is-busy .lf-spin { display: block; }
.cm-anim .lf-confirm__on, .cm-anim .lf-mbar__on { animation: cmBar .35s cubic-bezier(.2, .8, .2, 1) both; }
.cm-anim .lf-spin { animation: cmSpin .7s linear infinite; }

/* Step 4: confirmed */
.lf-ticket-wrap { margin-top: 22px; width: 100%; }
.lf-ticket { position: relative; background: var(--ink-900); color: var(--sand-100); border-radius: 24px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(31, 26, 22, .55); }
.lf-ticket__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.lf-ticket__col { position: relative; display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; min-width: 0; }
.lf-ticket__k { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-600); }
.lf-ticket__col strong { font: 400 32px/1 var(--display); text-transform: uppercase; }
.lf-ticket__s { font: 400 15px var(--body); color: var(--sand-300); }
.lf-ticket__local { font: 400 12px var(--mono); color: var(--rust-400); }
.lf-ticket__rule { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px dashed rgba(243, 236, 224, .28); transform-origin: left; }
.lf-ticket__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lf-stamp { position: absolute; right: -26px; top: -46px; width: 128px; height: 128px; border-radius: 50%; background: var(--ink-900); box-shadow: inset 0 0 0 2.5px var(--rust-400), inset 0 0 0 7px var(--ink-900), inset 0 0 0 8.5px var(--rust-400), 0 12px 24px -10px rgba(31, 26, 22, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--rust-400); transform: rotate(-8deg); pointer-events: none; }
.lf-stamp__in { font: 600 9px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.lf-stamp__b { font: 400 30px/1 var(--display); text-transform: uppercase; }
.lf-stamp__d { font: 600 9px var(--mono); letter-spacing: .14em; }
.cm-anim .lf-ticket-wrap { animation: cmTicket .75s cubic-bezier(.2, .8, .2, 1) 1.25s both; }
.cm-anim .lf-ticket { animation: cmThunk .3s ease 2.42s both; }
.cm-anim .lf-ticket__k { animation: cmFade .35s ease 1.55s both; }
.cm-anim .lf-ticket__col strong { animation: cmFade .45s cubic-bezier(.2, .8, .2, 1) 1.62s both; }
.cm-anim .lf-ticket__s, .cm-anim .lf-ticket__local { animation: cmFade .4s ease 1.62s both; }
.cm-anim .lf-ticket__rule { animation: cmDraw .5s cubic-bezier(.6, 0, .2, 1) 1.75s both; }
.cm-anim .lf-ticket__col:nth-child(2) .lf-ticket__k { animation-delay: 1.65s; }
.cm-anim .lf-ticket__col:nth-child(2) strong, .cm-anim .lf-ticket__col:nth-child(2) .lf-ticket__s { animation-delay: 1.72s; }
.cm-anim .lf-ticket__col:nth-child(2) .lf-ticket__rule { animation-delay: 1.85s; }
.cm-anim .lf-ticket__col:nth-child(3) .lf-ticket__k { animation-delay: 1.75s; }
.cm-anim .lf-ticket__col:nth-child(3) strong, .cm-anim .lf-ticket__col:nth-child(3) .lf-ticket__s { animation-delay: 1.82s; }
.cm-anim .lf-ticket__col:nth-child(3) .lf-ticket__rule { animation-delay: 1.95s; }
.cm-anim .lf-join { animation: cmPop .45s cubic-bezier(.3, 1.4, .5, 1) 2s both, cmRing 1s ease-out 2.7s 2; }
.cm-anim .lf-addcal { animation: cmPop .45s cubic-bezier(.3, 1.4, .5, 1) 2.08s both; }
.cm-anim .lf-stamp { animation: cmStamp .45s cubic-bezier(.5, 0, .3, 1.3) 2.2s both; }
.lf-fine { margin-top: 28px; max-width: 600px; font: 400 15px/1.55 var(--body); color: var(--ink-600); }
.lf-meantime { margin-top: 32px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.lf-meantime__h { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--ink-900); }
.lf-meantime__h em { font-style: normal; color: var(--rust-600); }
.lf-meantime__m { display: none; }
.lf-meantime__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lf-mt { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: var(--sand-50); color: var(--ink-900); text-decoration: none; transition: background .15s; }
a.lf-mt:hover { background: var(--sand-200); color: var(--ink-900); }
.lf-mt__body { display: contents; }
.lf-mt__n { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--sage-600); }
.lf-mt__t { font: 700 17px/1.25 var(--body); }
.lf-mt__s { font: 400 14px/1.45 var(--body); color: var(--ink-600); }
.lf-mt__cta { margin-top: auto; padding-top: 8px; font: 600 14px var(--body); color: var(--rust-600); }
div.lf-mt .lf-mt__cta { color: var(--ink-500); }
.cm-anim .lf-fine { animation: cmFade .5s ease 2.45s both; }
.cm-anim .lf-meantime__h { animation: cmFade .5s ease 2.7s both; }
.cm-anim .lf-mt { animation: cmFade .5s cubic-bezier(.2, .8, .2, 1) 2.85s both; }
.cm-anim .lf-mt:nth-child(2) { animation-delay: 2.95s; }
.lf-files { margin-top: 24px; width: 100%; display: flex; flex-direction: column; gap: 12px; box-shadow: none; scroll-margin-top: 24px; }
.lf-files .lf-notice { margin-top: 0; align-self: flex-start; }
.lf-files__h { font: 600 20px/1.3 var(--body); }
.lf-files__p { font: 400 15px/1.5 var(--body); color: var(--ink-600); }
.lf-files__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lf-files__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lf-files__list form { margin: 0; }
.lf-files__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-files__size { font: 400 12px var(--mono); color: var(--ink-500); }
.lf-drop { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0; }
.lf-drop__zone { flex: 1 1 260px; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1.5px dashed var(--ink-400); border-radius: 16px; cursor: pointer; background: var(--sand-100); }
.lf-drop__zone:hover, .lf-drop__zone:focus-within { border-color: var(--ink-900); }
.lf-drop__zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lf-drop .lf-btn { align-self: center; }
.lf-drop__t { font-weight: 600; }
.lf-drop__s { font-size: 14px; color: var(--ink-600); }
.lf-change { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.lf-change__k { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-600); }
.lf-change__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lf-change__row form { margin: 0; }
.lf-end { margin-top: 36px; width: 100%; padding-top: 24px; border-top: 1px solid rgba(31, 26, 22, .14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.lf-end > span { font: 400 14px var(--body); color: var(--ink-600); }
.cm-anim .lf-files { animation: cmFade .5s ease 3.05s both; }
.cm-anim .lf-change { animation: cmFade .5s ease 3.25s both; }
.cm-anim .lf-end, .cm-anim .lf-pin--done { animation: cmFade .5s ease 3.4s both; }

@media (max-width: 1000px) {
  .lf-stamp { right: -8px; }
}

/* Phones: no site header, a sticky step line, thumb-first pinned buttons. */
@media (max-width: 760px) {
  .lf-top { display: none; }
  .lf { width: auto; margin: 0; padding: 0 16px 28px; }
  .lf-body:has(.lf-pin, .lf-mbar) { padding-bottom: 110px; }
  .lf-foot { padding: 0 16px env(safe-area-inset-bottom, 0px); }
  .lf-prog { position: sticky; top: 0; z-index: 4; margin: 0 -16px; padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 8px; width: auto; background: var(--sand-100); border-bottom: 1px solid rgba(31, 26, 22, .1); }
  .lf-prog__m { display: flex; align-items: center; gap: 10px; min-height: 28px; }
  .lf-prog__back { width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; font: 600 22px/1 var(--body); color: var(--ink-900); text-decoration: none; }
  .lf-prog__n, .lf-prog__name { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-600); }
  .lf-prog__name { margin-left: auto; color: var(--ink-900); }
  .lf-prog__list { gap: 5px; }
  .lf-prog__row { display: none; }
  .lf-prog__track { height: 5px; }
  .lf-head { margin-top: 22px; }
  .lf-eyebrow { font-size: 12px; letter-spacing: .16em; }
  .lf-eyebrow--desk { display: none; }
  .lf-h1 { font-size: min(58px, 15.2vw); }
  .lf-br-d { display: none; }
  .lf-br-m { display: inline; }
  .lf-h1 .lf-line, .lf-h1 .lf-dl { padding-bottom: 2px; }
  .lf-h1 .lf-ml { padding-bottom: 8px; }
  .cm-anim .lf-d2 > span, .cm-anim .lf-d3 > span { animation-delay: .15s; }
  .cm-anim .lf-m2 > span { animation-delay: .25s; }
  .cm-anim .lf-m3 > span { animation-delay: .35s; }
  .cm-anim .lf-h1--late .lf-d2 > span, .cm-anim .lf-h1--late .lf-d3 > span { animation-delay: .8s; }
  .cm-anim .lf-h1--late .lf-m2 > span { animation-delay: .9s; }
  .cm-anim .lf-h1--late .lf-m3 > span { animation-delay: 1s; }
  .lf-lead { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .lf-grid { margin-top: 16px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lf-side { display: none; }

  .lf-form { padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 16px; }
  .cm-anim .lf-grid > .lf-form { animation: none; }
  .lf-form__q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lf-kinds { gap: 8px; }
  .lf-kind { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
  .lf-kind__dot { margin-top: 0; }
  .lf-kind__t { font-size: 14px; line-height: 1.2; }
  .lf-kind__s { font-size: 12px; line-height: 1.35; }
  .lf-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 20px; background: var(--sand-50); }
  .lf-field input, .lf-field select { height: 52px; border-radius: 14px; }
  .lf-field textarea { border-radius: 14px; }
  .lf-send { display: none; }
  .cm-anim .lf-kinds { animation: cmFade .45s ease .5s both; }
  .cm-anim .lf-fields { animation: cmTicket .6s cubic-bezier(.2, .8, .2, 1) .55s both; }
  .lf-howm { display: block; margin-top: 16px; background: var(--ink-900); color: var(--sand-100); border-radius: 18px; overflow: hidden; }
  .cm-anim .lf-howm { animation: cmFade .45s ease .7s both; }
  .lf-howm summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; }
  .lf-howm summary::-webkit-details-marker { display: none; }
  .lf-howm__plus { font: 600 18px var(--body); color: var(--rust-400); transition: transform .2s; }
  .lf-howm[open] .lf-howm__plus { transform: rotate(45deg); }
  .lf-howm .lf-how { padding: 0 16px 16px; gap: 10px; }
  .lf-howm .lf-how__tag { display: none; }
  .lf-pin { display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(243, 236, 224, 0), #f3ece0 30%); }
  .lf-pin__btn { height: 58px; font-size: 17px; }
  .lf-pin .lf-btn--rust { box-shadow: 0 14px 30px -14px rgba(194, 70, 31, .8); }
  .lf-pin__fine { text-align: center; font: 400 10px var(--mono); color: var(--ink-500); }

  .lf-picker { padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; gap: 12px; }
  .cm-anim .lf-grid > .lf-picker { animation: cmTicket .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
  .lf-picker__head { display: block; }
  .lf-tz { display: none; }
  .lf-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: 999px; background: var(--sand-300); }
  .lf-week { height: 40px; padding: 0 4px; font-size: 14px; box-shadow: none; }
  .lf-weeks:has(.lf-week:nth-child(4)) .lf-week { font-size: 13px; }
  .lf-days { gap: 6px; }
  .lf-day { gap: 2px; padding: 9px 0; }
  .lf-day__wd { font-size: 9px; letter-spacing: .1em; }
  .lf-day__n { font-size: 28px; }
  .lf-day__m { font-size: 8px; letter-spacing: .1em; }
  .lf-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-time { height: 48px; border-radius: 14px; font-size: 15px; }
  .lf-confirm, .lf-picker > .lf-status { display: none; }
  .lf-mbar { display: block; position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(243, 236, 224, 0), #f3ece0 30%); }
  .lf-mbar.is-on { padding: 0 10px calc(12px + env(safe-area-inset-bottom, 0px)); background: none; }
  .lf-mbar__wait { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(31, 26, 22, .2); color: var(--ink-500); font: 600 15px var(--body); }
  .lf-mbar__on { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 24px; background: var(--ink-900); color: var(--sand-100); box-shadow: 0 20px 40px -16px rgba(31, 26, 22, .7); }
  .lf-mbar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; }
  .lf-mbar__top strong { font: 400 24px/1 var(--display); text-transform: uppercase; }
  .lf-mbar__top span { flex: none; font: 400 10px var(--mono); text-transform: uppercase; color: var(--sand-600); }
  .lf-mbar .lf-confirm__btn { width: 100%; height: 56px; font-size: 17px; }
  .lf-mbar .lf-status { margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; background: var(--sand-50); text-align: center; box-shadow: 0 10px 24px -14px rgba(31, 26, 22, .5); }

  .lf-ticket-wrap { margin-top: 16px; }
  .lf-ticket { border-radius: 22px; padding: 18px; }
  .lf-ticket__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lf-ticket__col { gap: 4px; padding-bottom: 12px; }
  .lf-ticket__k { font-size: 9px; }
  .lf-ticket__col strong { font-size: 26px; }
  .lf-ticket__s { font-size: 14px; }
  .lf-ticket__acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .lf-ticket__acts .lf-btn { height: 50px; padding: 0 10px; }
  .lf-stamp { right: 14px; top: auto; bottom: 82px; width: 84px; height: 84px; background: none; box-shadow: inset 0 0 0 2px var(--rust-400), inset 0 0 0 5px var(--ink-900), inset 0 0 0 6.5px var(--rust-400); gap: 0; }
  .lf-ticket:not(:has(.lf-ticket__acts)) .lf-stamp { bottom: 18px; }
  .lf-stamp__in { display: none; }
  .lf-stamp__b { font-size: 21px; }
  .lf-stamp__d { font-size: 7px; letter-spacing: .1em; }
  .lf-fine { margin-top: 16px; font-size: 14px; }
  .lf-meantime { margin-top: 16px; gap: 8px; }
  .lf-meantime__h { font-size: 26px; }
  .lf-meantime__d { display: none; }
  .lf-meantime__m { display: inline; }
  .lf-meantime__cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lf-mt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 60px; padding: 12px 14px; border-radius: 16px; }
  .lf-mt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lf-mt__t { font-size: 14px; }
  .lf-mt__s { font-size: 12px; line-height: 1.35; }
  .lf-mt__cta { margin: 0; padding: 0; font-size: 0; }
  a.lf-mt .lf-mt__cta::after { content: "›"; font: 600 18px var(--body); color: var(--rust-600); }
  div.lf-mt .lf-mt__cta { display: none; }
  .lf-files { margin-top: 16px; padding: 18px; border-radius: 20px; }
  .lf-files__list li { grid-template-columns: minmax(0, 1fr) auto; }
  .lf-files__size { display: none; }
  .lf-change { margin-top: 18px; }
  .lf-change__k { display: none; }
  .lf-change__row { justify-content: space-between; gap: 10px; }
  .lf-change__row .lf-btn--outline { height: 46px; padding: 0 18px; font-size: 14px; }
  .lf-change__cancel { padding: 12px 0; font-size: 14px; }
  .lf-end { display: none; }
}

/* ---------- Search pages (lib/seo-pages.ts) ----------
   Desktop: the intro beside the Growth price card, then the article beside a sticky "On this page".
   Card grids stay balanced: 4 cards → 2 × 2, 6 cards → 3 × 2 (2 × 3 on tablets), one column on phones. */
.seo2 { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter) 96px; display: flex; flex-direction: column; gap: 56px; color: var(--ink-600); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font: 400 13px var(--mono); color: var(--ink-500); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-300); }
.crumbs a { color: var(--ink-500); }
.seo2__hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 56px; align-items: start; margin-top: -32px; }
.seo2__intro { display: flex; flex-direction: column; gap: 20px; }
.seo2__h1 { font: 400 clamp(52px, 6.4vw, 92px)/.92 var(--display); text-transform: uppercase; color: var(--ink-900); text-wrap: balance; }
.seo2__lead { font-size: 20px; line-height: 1.55; max-width: 620px; }
.seo2__proof { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
.seo2__proof li { display: flex; align-items: center; gap: 8px; }
.seo2__proof li::before { content: "✓"; color: var(--sage-600); }
.seo2__plan { background: var(--sand-50); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
.seo2__price { font: 400 15px var(--body); color: var(--ink-600); }
.seo2__price span { font: 400 64px/1 var(--display); color: var(--ink-900); margin-right: 4px; }
.seo2__setup { font-size: 14px; color: var(--ink-600); }
.seo2__feats { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 4px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-800); }
.seo2__feats li { display: flex; gap: 10px; }
.seo2__feats li::before { content: "✓"; color: var(--rust-600); font-weight: 700; }
.seo2__planbtn { margin-top: 6px; }
.seo2__fine { font: 400 12px var(--mono); color: var(--ink-500); text-align: center; }
.seo2__summary { font-size: 19px; line-height: 1.6; color: var(--ink-800); padding: 24px 28px; border-left: 4px solid var(--rust-600); background: var(--sand-50); border-radius: 0 16px 16px 0; max-width: 900px; }
.seo2__summary strong { color: var(--ink-900); }
.seo2__needs { display: flex; flex-direction: column; gap: 16px; }
.seo2 h2 { font: 400 clamp(32px, 3.2vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--ink-900); scroll-margin-top: 24px; text-wrap: balance; }
.seo2__needsintro { font-size: 18px; max-width: 760px; }
.seo2__cards { display: grid; gap: 16px; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo2__cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seo2__cards li { background: var(--sand-50); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.seo2__cards h3 { font: 600 19px/1.3 var(--body); color: var(--ink-900); }
.seo2__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; align-items: start; }
.seo2__article { display: flex; flex-direction: column; gap: 40px; max-width: 720px; font-size: 18px; line-height: 1.65; }
.seo2__article section { display: flex; flex-direction: column; gap: 14px; }
.seo2__article h2 { font-size: clamp(28px, 2.6vw, 36px); }
.seo2__article ul { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; }
.seo2__article li::marker { color: var(--rust-600); }
.seo2__article strong { color: var(--ink-900); font-weight: 600; }
.seo2__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.seo2__toc ol { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; border-left: 1px solid var(--line); }
.seo2__toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-600); text-decoration: none; }
.seo2__toc a:hover { color: var(--rust-600); border-left-color: var(--rust-600); }
.seo2__related { display: flex; flex-direction: column; gap: 20px; }
.seo2__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.seo2__links a { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-900); transition: border-color .2s, transform .2s var(--ease); }
.seo2__links a:hover { border-color: var(--rust-600); color: var(--ink-900); transform: translateY(-2px); }
.seo2__links strong { font: 600 17px/1.3 var(--body); }
.seo2__end { margin-top: 0; max-width: none; align-items: flex-start; }
@media (max-width: 1100px) {
  .seo2__cards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo2__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .seo2 { gap: 40px; }
  .seo2__hero, .seo2__body { grid-template-columns: 1fr; gap: 32px; }
  .seo2__plan, .seo2__side { position: static; }
  .seo2__side { order: -1; display: none; }
}
@media (max-width: 760px) {
  .seo2 { padding-bottom: 64px; }
  .seo2__hero { margin-top: -16px; }
  .seo2__lead { font-size: 18px; }
  .seo2__cards, .seo2__cards--6, .seo2__links { grid-template-columns: 1fr; }
  .seo2__summary { padding: 20px; font-size: 17px; }
  .seo2__article { font-size: 17px; gap: 32px; }
}
/* Example site on a search page: copy beside a laptop-sized shot with a phone shot over its corner. */
.seo2__example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: center; padding: 40px; border-radius: 28px; background: var(--ink-900); color: var(--sand-200); }
.seo2__example h2 { color: var(--sand-50); }
.seo2__example .eyebrow { color: var(--rust-400); }
.seo2__excopy { display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.seo2__example .btn--ink { background: var(--sand-50); color: var(--ink-900); }
.seo2__shots { position: relative; display: block; padding: 0 0 8% 0; }
.seo2__shot { display: block; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); background: var(--sand-100); }
.seo2__shot--desk { width: 88%; height: auto; }
.seo2__shot--phone { position: absolute; right: 0; bottom: 0; width: 24%; height: auto; border-radius: 18px; border: 4px solid var(--ink-800); }
@media (max-width: 1000px) { .seo2__example { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }
@media (max-width: 760px) { .seo2__example { padding: 22px; border-radius: 22px; } .seo2__shot--phone { width: 30%; } }


/* ---------- Example sites gallery: 3 × 2, 2 × 3 on tablets, one column on phones ---------- */
.work { padding: 140px var(--gutter) 0; }
.hero2 + .work { padding-top: 24px; }
/* The three steps as a slim strip right under the hero: big price, small label, one line of copy. */
.steps--strip { padding: 16px var(--gutter) 32px; }
.steps--strip + .work { padding-top: 72px; }
.steps--strip .steps__list { border-top: 1px solid var(--ink-900); border-bottom: 1px solid var(--ink-900); }
.steps--strip .step { flex-direction: row; align-items: flex-start; gap: 20px; padding: 38px 34px 46px; }
.steps--strip .step:first-child { padding-left: 0; }
.steps--strip .step:last-child { padding-right: 0; }
.steps--strip .step__price { font-size: 92px; line-height: .85; flex: none; }
.step__label { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin: 3px 0 12px; }
.steps--strip .step p:not(.step__price):not(.step__label) { font-size: 17px; line-height: 1.5; }
.steps--strip .step strong { color: var(--ink-900); font-weight: 700; }
@media (max-width: 760px) {
  .steps--strip { padding: 32px var(--gutter) 8px; }
  .steps--strip .step { padding: 18px 0; gap: 14px; }
  .steps--strip .step__price { font-size: 48px; width: 84px; }
  .step__label { margin-bottom: 6px; }
}
@media (min-width: 761px) { .work .split { flex-direction: row-reverse; } .work .split .h2 { text-align: right; } }
.work__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.work__card { display: flex; flex-direction: column; gap: 16px; height: 100%; text-decoration: none; color: var(--ink-900); }
.work__card:hover { color: var(--ink-900); }
.work__shots { position: relative; display: block; padding: 0 0 10% 0; }
.work__desk { width: 92%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(31, 26, 22, .35); transition: transform .35s var(--ease); }
.work__phone { position: absolute; right: 0; bottom: 0; width: 26%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 14px; border: 4px solid var(--ink-900); box-shadow: 0 18px 30px -12px rgba(31, 26, 22, .45); transition: transform .35s var(--ease); }
.work__card:hover .work__desk { transform: translateY(-4px); }
.work__card:hover .work__phone { transform: translateY(-8px) rotate(2deg); }
.work__meta { display: flex; flex-direction: column; gap: 4px; }
.work__meta strong { font: 400 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.work__go { font-size: 15px; font-weight: 600; color: var(--rust-600); }
@media (prefers-reduced-motion: reduce) { .work__desk, .work__phone { transition: none; } .work__card:hover .work__desk, .work__card:hover .work__phone { transform: none; } }
@media (max-width: 1100px) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .work { padding-top: 72px; } .work__grid { grid-template-columns: 1fr; gap: 36px; } .work .split { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; } }


/* ---------- Plans: three cards, every feature ✓ or ✕, the popular one raised (the reference Collin picked) ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding: 22px 0; }
.plan { --bar: var(--ink-900); --bar-ink: var(--sand-50); background: var(--sand-50); border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.plan--featured { --bar: var(--rust-600); background: var(--ink-900); color: var(--sand-100); margin: -22px 0; box-shadow: 0 30px 60px -28px rgba(31, 26, 22, .55); position: relative; z-index: 1; }
.plan__top { display: flex; flex-direction: column; gap: 12px; padding: 34px 32px 22px; border-bottom: 1px solid var(--line); }
.plan--featured .plan__top { border-color: var(--line-dark); padding-top: 44px; }
.plan__checks { display: flex; flex-direction: column; gap: 11px; padding: 22px 32px 30px; flex: 1; font-size: 15px; line-height: 1.35; }
.plan__checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.plan__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; margin-top: -1px; }
.is-yes .plan__mark { background: rgba(95, 110, 83, .16); color: var(--sage-600); }
.is-no { color: var(--ink-400); }
.is-no .plan__mark { background: rgba(194, 70, 31, .1); color: var(--rust-600); }
.plan--featured .plan__checks { color: var(--sand-200); }
.plan--featured .is-yes .plan__mark { background: rgba(169, 184, 154, .2); color: var(--sage-400); }
.plan--featured .is-no { color: var(--ink-400); }
.plan--featured .is-no .plan__mark { background: rgba(224, 131, 95, .14); color: var(--rust-400); }
/* The button: a bar along the bottom with a scalloped top edge. */
.plan__bar { position: relative; display: block; padding: 20px 16px 22px; background: var(--bar); color: var(--bar-ink); text-align: center; font: 400 19px var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: filter .2s; }
.plan__bar::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: radial-gradient(circle at 10px 0, transparent 9.5px, var(--bar) 10px) repeat-x; background-size: 20px 10px; }
.plan__bar:hover { color: var(--bar-ink); filter: brightness(1.12); }
.plan--featured .plan__bar { padding: 24px 16px 26px; font-size: 21px; }
@media (max-width: 1180px) { .plan__top { padding: 28px 24px 20px; } .plan__checks { padding: 20px 24px 26px; font-size: 14px; } }
/* ---------- Phones: the cards 2 × 2 (Custom is the fourth), each listing what that plan adds ---------- */
.plan__adds, .plan--custom { display: none; }
@media (max-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; }
  .plan, .plan--featured { margin: 0; border-radius: 18px; box-shadow: none; }
  .plan--custom { display: flex; background: transparent; border: 1.5px solid var(--ink-900); }
  .custom { display: none; }
  .plan__top, .plan--featured .plan__top { padding: 16px 14px 12px; gap: 6px; border-bottom: 0; }
  .plan__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .plan__head .badge { order: -1; font-size: 8.5px; padding: 3px 7px; letter-spacing: .06em; }
  .plan__name { font-size: 22px; }
  .plan__price { flex-wrap: wrap; gap: 0 4px; margin: 0; }
  .plan__was { flex-basis: 100%; font-size: 16px; }
  .plan__amount { font-size: 38px; }
  .plan__per { font-size: 11px; }
  .plan__billed { font-size: 9px; margin-top: 2px; }
  .plan__setup { font-size: 11.5px; line-height: 1.35; }
  .plan__was-setup { display: none; }
  .plan__desc { display: none; }
  .plan--custom .plan__desc { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-600); }
  .plan__checks { display: none; }
  .plan__adds { display: flex; flex-direction: column; gap: 6px; padding: 4px 14px 16px; flex: 1; font-size: 12px; line-height: 1.3; }
  .plan__adds li { position: relative; padding-left: 15px; }
  .plan__adds li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--sage-600); }
  .plan__adds li.is-base { padding-left: 0; font-weight: 600; }
  .plan__adds li.is-base::before { content: none; }
  .plan__adds li.is-base::after { content: ", plus:"; }
  .plan--featured .plan__adds { color: var(--sand-200); }
  .plan--featured .plan__adds li::before { color: var(--sage-400); }
  .plan__bar, .plan--featured .plan__bar { margin-top: auto; padding: 14px 8px 15px; font-size: 14px; letter-spacing: .05em; }
  .plan__bar::before { top: -6px; height: 7px; background-size: 14px 7px; background-image: radial-gradient(circle at 7px 0, transparent 6.5px, var(--bar) 7px); }
}
.plan--featured .plan__desc { color: var(--ink-300); }

/* Phones: the whole plans section fits on one screen (tighter type and padding, no "Billed monthly"
   line since the switch above says it), and Custom is a card like the others. */
@media (max-width: 760px) {
  .pricing { padding-top: 48px; padding-bottom: 40px; }
  .pricing .split { gap: 12px; margin-bottom: 14px; }
  .pricing .h2 { font-size: 44px; }
  .seg__btn { padding: 8px; }
  .plans { gap: 8px; }
  .plan__top, .plan--featured .plan__top { padding: 12px 12px 8px; gap: 4px; }
  .plan__head { gap: 4px; }
  .plan__name { font-size: 19px; }
  .plan__price { align-items: baseline; }
  .plan__was { flex-basis: auto; font-size: 14px; }
  .plan__amount { font-size: 32px; }
  .plan__billed { display: none; }
  .plan__setup { font-size: 11px; }
  .plan__adds { gap: 3px; padding: 2px 12px 12px; font-size: 11.5px; line-height: 1.25; }
  .plan__adds li { padding-left: 13px; }
  .plan__adds li.is-base::after { content: ", plus:"; }
  .plan__bar, .plan--featured .plan__bar { padding: 11px 6px 12px; font-size: 13px; }
  .plan--custom { background: var(--sand-50); border: 0; }
  .plan--custom .plan__amount { font-size: 28px; }
}

/* Desktop: the plans section reads in about one screen (tighter heading and price block, each card's
   ✓/✕ list in two columns on wide screens, slimmer bars). */
@media (min-width: 761px) {
  .pricing { padding-top: 80px; padding-bottom: 72px; }
  .pricing .split { margin-bottom: 28px; }
  .pricing .h2 { font-size: 64px; }
  .plans { gap: 18px; padding: 16px 0; }
  .plan--featured { margin: -16px 0; }
  .plan__top { gap: 6px; padding: 24px 26px 16px; }
  .plan--featured .plan__top { padding-top: 30px; }
  .plan__name { font-size: 28px; }
  .plan__price { margin-top: 6px; gap: 0 8px; }
  .plan__was { flex-basis: auto; font-size: 24px; }
  .plan__amount { font-size: 60px; }
  .plan__per { font-size: 15px; }
  .plan__billed { font-size: 12px; }
  .plan__setup { font-size: 14px; }
  .plan__desc { font-size: 14px; line-height: 1.4; }
  .plan__checks { gap: 7px; padding: 16px 26px 22px; font-size: 13.5px; }
  .plan__checks li { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
  .plan__mark { width: 18px; height: 18px; font-size: 10px; }
  .plan__bar { padding: 15px 14px 16px; font-size: 17px; }
  .plan--featured .plan__bar { padding: 17px 14px 18px; font-size: 18px; }
  .custom { margin-top: 18px; padding: 18px 28px; }
  .fineprint { margin-top: 16px; }
}
@media (min-width: 1100px) {
  /* Reads down the first column, then the second, so the ✓ items stay together. */
  .plan__checks { display: block; columns: 2; column-gap: 16px; }
  .plan__checks li { break-inside: avoid; margin-bottom: 8px; }
}

/* ---------- Landing hero (design handoff "landing hero", Oct 2026): copy + form beside a laptop and phone
   showing example sites (desktop); centered copy over three fanned phones (phones ≤760px). ---------- */

/* ---- layout ---- */
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; padding: 40px var(--gutter) 72px; }
.hero2__copy { display: flex; flex-direction: column; gap: 26px; }
.hero2 .eyebrow { color: var(--sage-600); }
.hero2__title { font: 400 132px/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.hero2__title span { display: block; color: var(--rust-600); }
.hero2 .lead { max-width: 520px; font-size: 20px; }
.hero2 .ask { width: 540px; }
.hero2__art { display: flex; flex-direction: column; gap: 44px; padding-top: 40px; }
/* Ties the hero's devices to the example-sites gallery right below. */
.hero2__more { align-self: flex-start; font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink-500); text-decoration: none; }
.hero2__more-text { font-weight: 400; }
.hero2__more-go { color: var(--rust-600); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.hero2__more:hover .hero2__more-go { color: var(--ink-900); }
.hero2__more--fan { display: none; }

/* ---- device pair (desktop) ---- */
.devices { position: relative; display: flex; align-items: flex-end; padding-left: 2%; }
.devices__phone { flex: 0 0 15%; margin-right: -11%; margin-bottom: -6px; position: relative; z-index: 3; }
.devices__laptop { flex: 0 0 90%; min-width: 0; }
.devices::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 26px; border-radius: 50%; background: rgba(31, 26, 22, .18); filter: blur(16px); z-index: -1; }

/* ---- laptop (all sizes in cqw so it scales with its box) ---- */
.laptop { width: 100%; container-type: inline-size; }
.laptop__lid { width: 84cqw; margin: 0 auto; background: #0c0c0d; border: .35cqw solid #b9bcc1; border-bottom: 0; border-radius: 2.8cqw 2.8cqw 0 0; padding: 1.4cqw 1.4cqw 1.9cqw; position: relative; }
.laptop__lid::before { content: ""; position: absolute; left: 50%; top: .45cqw; margin-left: -.3cqw; width: .6cqw; height: .6cqw; border-radius: 50%; background: #2b2d31; } /* camera */
.laptop__screen { aspect-ratio: 16 / 10; border-radius: .5cqw; overflow: hidden; background: var(--sand-50); }
.laptop__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop__deck { width: 100cqw; height: 4.2cqw; position: relative; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #9fa2a7 0, #c9cbcf 22%, #dcdee1 60%, #e6e7ea 100%); }
.laptop__deck::before { content: ""; position: absolute; left: 0; right: 0; top: .9cqw; height: 2cqw; clip-path: polygon(10.8% 0, 89.2% 0, 93% 100%, 7% 100%); background: #111113; } /* keyboard — sides parallel to deck edges */
.laptop__base { width: 100cqw; height: 2.6cqw; position: relative; background: linear-gradient(180deg, #f4f5f6 0, #dadcdf 25%, #bcbfc3 70%, #9a9da2 100%); border-radius: 0 0 2.6cqw 2.6cqw / 0 0 2cqw 2cqw; box-shadow: 0 2.6cqw 4cqw -1.2cqw rgba(31, 27, 22, .4); }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -8.5cqw; width: 17cqw; height: 1cqw; border-radius: 0 0 1.4cqw 1.4cqw; background: linear-gradient(180deg, #b3b6bb, #d3d5d8); } /* thumb notch */

/* ---- phone ---- */
.iphone { width: 100%; aspect-ratio: 9 / 20.5; container-type: inline-size; }
.iphone__body { height: 100%; background: #141210; border-radius: 14cqw; padding: 3cqw; box-shadow: 0 0 0 .9cqw #c9cbd0, 0 0 0 1.2cqw #9a9da3, 0 6cqw 14cqw rgba(31, 27, 22, .28), inset 0 0 0 .5cqw #2a2a2c; }
.iphone__screen { position: relative; height: 100%; border-radius: 11cqw; overflow: hidden; display: flex; flex-direction: column; background: var(--bar, var(--sand-50)); }
.iphone__screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; margin-left: -14cqw; width: 28cqw; height: 7.5cqw; border-radius: 4cqw; background: #000; z-index: 3; } /* dynamic island */
.iphone__status { height: 12cqw; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1cqw 9cqw 0; font: 600 3.6cqw var(--body); color: var(--bar-fg, var(--ink-900)); }
.iphone__screen img { flex: none; width: 100%; height: auto; }
.iphone__home { flex: 1; min-height: 5cqw; display: flex; align-items: center; justify-content: center; background: var(--bot, var(--sand-50)); }
.iphone__home::after { content: ""; width: 34cqw; height: 1.2cqw; border-radius: 1cqw; background: var(--bot-fg, var(--sand-100)); }


/* ---- mobile ---- */
.fan { display: none; }
@media (max-width: 760px) {
  .hero2 { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 22px 0; text-align: center; justify-items: center; }
  .hero2__copy { align-items: center; gap: 16px; }
  .hero2 .eyebrow { font-size: 12px; letter-spacing: .12em; }
  .hero2__title { font-size: 64px; line-height: .9; }
  .hero2 .lead { max-width: 330px; font-size: 16px; }
  .hero2 .ask { flex-direction: column; gap: 8px; width: 100%; max-width: 360px; padding: 0; border: 0; background: none; }
  .hero2 .ask input { height: 52px; padding: 0 20px; border: 1.5px solid var(--ink-900); border-radius: 999px; background: var(--sand-50); text-align: center; font-size: 17px; }
  .hero2 .ask .btn { height: 52px; }
  .hero2 .meta { font-size: 11px; }
  .hero2__art { display: none; }
  .hero2__more--fan { display: inline-block; justify-self: center; margin: -28px 0 8px; font-size: 13px; }
  /* Full screen width (out past the hero's 22px padding): the outer phones are clipped at the screen's sides, never at the bottom. */
  .fan { display: flex; justify-content: center; align-items: flex-start; gap: 10px; justify-self: stretch; margin: 30px -22px 0; padding-bottom: 64px; overflow-x: clip; overflow-y: visible; position: relative; min-width: 0; }
  .fan .iphone { width: 170px; flex: none; }
  .fan .iphone:nth-child(1) { transform: translateY(36px) rotate(-6deg); }
  .fan .iphone:nth-child(2) { position: relative; z-index: 2; }
  .fan .iphone:nth-child(3) { transform: translateY(36px) rotate(6deg); }
}
@media (max-width: 1180px) and (min-width: 761px) { .hero2__title { font-size: 104px; } }
/* Wider than the 1440px design: the hero keeps filling the screen and everything scales with it (1440px sizes ÷ 14.4 = vw). */
@media (min-width: 1441px) {
  .hero2 { gap: 3.33vw; padding: 2.78vw var(--gutter) 5vw; }
  .hero2__copy { gap: 1.8vw; }
  .hero2 .eyebrow { font-size: .83vw; }
  .hero2__title { font-size: 9.17vw; }
  .hero2 .lead { max-width: 36vw; font-size: 1.39vw; }
  .hero2 .ask { width: 37.5vw; padding: .42vw .42vw .42vw 1.67vw; }
  .hero2 .ask input { font-size: 1.25vw; }
  .hero2 .ask .btn { font-size: 1.11vw; padding: .97vw 1.53vw; }
  .hero2 .meta, .hero2__more { font-size: .83vw; }
  .hero2 .proof { font-size: .97vw; }
  .hero2__art { gap: 3vw; padding-top: 2.78vw; }
}
/* Wide screens: the laptop fills the right column from the eyebrow down (the copy gets a little less room). */
@media (min-width: 1181px) {
  .hero2 { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 2.5vw; }
  .hero2__art { padding-top: 0; gap: 1.6vw; margin-top: 3.6vw; }
  .devices { padding-left: 0; }
  .devices__phone { flex: 0 0 14%; margin-right: -10%; }
  .devices__laptop { flex: 0 0 96%; }
  /* Headline sized so the "Build my free preview" box ends level with the "Two of eight" line under the laptop
     (measured 1280–2560px); "Then decide." stays on one line. */
  .hero2__title { font-size: calc(84.5px + (100vw - 1280px) * .138); }
  .hero2__title span { white-space: nowrap; }
  /* The preview count on top stays on one line; the laptop starts below it, so it can run past the copy column. */
  .hero2 .eyebrow { white-space: nowrap; }
}
.hero2 .eyebrow .nb { white-space: nowrap; }
@media (min-width: 1441px) { .hero2__title { font-size: calc(106.6px + (100vw - 1440px) * .0865); } }

/* Each phone's status bar and home strip in that site's own colors (inline styles are blocked by the CSP). */
.iphone--junipernailstudio { --bar: #fff3f7; --bar-fg: #1f1b16; --bot: #1e0b17; --bot-fg: #f3ece0; }
.iphone--ironpinebarber { --bar: #141210; --bar-fg: #f3ece0; --bot: #141210; }
.iphone--mesahairstudio { --bar: #f2f0ec; --bar-fg: #1f1b16; --bot: #0b0b0b; }
.iphone--ninthgearauto { --bar: #111214; --bar-fg: #f3ece0; --bot: #111214; }
.iphone--lanternmothtattoo { --bar: #0e0c0b; --bar-fg: #f3ece0; --bot: #0e0c0b; }
.iphone--sagebrushsuds { --bar: #ffc53d; --bar-fg: #1f1b16; --bot: #fff7e6; }
/* The meta line is shorter on phones. */
.hero2__meta-short { display: none; }
.hero2 .proof { margin-top: -10px; }
@media (max-width: 760px) {
  .hero2__meta-long { display: none; }
  .hero2__meta-short { display: inline; }
  .hero2 .proof { margin-top: 0; }
}