/* US Website Offer: website-design-usa.html and website-usa-thanks.html
   Light, calm and premium for established US business owners. Brand navy and
   violet as accents on white and warm paper. Outfit for everything; Cormorant
   Garamond italic only for single accent words in headlines.
   Mobile first. Shape rule: controls (buttons, inputs, chips) 10px, cards and
   frames 16px. One accent: violet. */

:root {
  --navy: #17122e;
  --navy-2: #221c4e;
  --violet: #6c2bf2;
  --violet-deep: #5820c9;
  --violet-tint: #f3eefe;
  --violet-soft: #b79bff;
  --ink: #17122e;
  --text: #2c2842;
  --muted: #5d5970;
  --paper: #ffffff;
  --paper-warm: #f6f3ec;
  --line: rgba(23, 18, 46, 0.12);
  --line-strong: #cfcadb;
  --line-d: rgba(255, 255, 255, 0.16);
  --bad: #b42318;
  --r-ctl: 10px;
  --r: 16px;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --nav-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--paper); color: var(--text); font-family: var(--sans); font-weight: 400; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3 { color: var(--ink); font-weight: 500; }
:focus-visible { outline: 3px solid rgba(108, 43, 242, 0.55); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.us-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* the launch price and market states (see the comment at the top of the page) */
html:not(.us-ended) [data-after] { display: none !important; }
html.us-ended [data-launch] { display: none !important; }
.mk { display: none; }
html:not([data-market]) .mk--us,
html[data-market="la"] .mk--la,
html[data-market="ny"] .mk--ny,
html[data-market="fl"] .mk--fl,
html[data-market="tx"] .mk--tx { display: inline; }

/* accent word: Cormorant italic in violet; line-height above 1.1 keeps descenders clear */
.acc { font-family: var(--accent); font-style: italic; font-weight: 500; font-size: 1.14em; letter-spacing: 0; color: var(--violet); }

/* ---------- buttons ---------- */
.us-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.8rem 1.35rem; border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.us-btn:active { transform: translateY(1px); }
.us-btn svg { width: 18px; height: 18px; flex: none; }
.us-btn--dark { background: var(--navy); color: #fff; }
.us-btn--dark:hover { background: var(--violet-deep); }
.us-btn--violet { background: var(--violet); color: #fff; }
.us-btn--violet:hover { background: var(--violet-deep); }
.us-btn--line { border-color: rgba(23, 18, 46, 0.28); color: var(--ink); background: transparent; }
.us-btn--line:hover { background: rgba(23, 18, 46, 0.05); border-color: var(--ink); }
.us-btn--line-light { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.us-btn--line-light:hover { background: rgba(255, 255, 255, 0.08); }
.us-btn--light { background: #fff; color: var(--ink); }
.us-btn--light:hover { background: var(--violet-tint); }
.us-btn--sm { min-height: 2.5rem; padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.us-btn--lg { min-height: 3.35rem; padding: 0.95rem 1.6rem; font-size: 1.05rem; }
.us-btn--block { width: 100%; }
.us-btn[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- header ---------- */
.us-top { position: sticky; top: 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: clamp(1rem, 4vw, 2.5rem); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.us-top__logo img { width: 89px; height: 36px; }

/* ---------- 1. hero ---------- */
.us-hero { background: var(--paper-warm); padding-block: 1.75rem 3rem; }
.us-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "proof" "form" "body"; gap: 1.5rem; }
.us-hero__head { grid-area: head; }
.us-hproof { grid-area: proof; }
.us-form { grid-area: form; }
.us-hero__body { grid-area: body; }
.us-hero__place { font-size: 0.95rem; font-weight: 500; color: var(--violet-deep); }
.us-hero h1 { margin-top: 0.5rem; font-size: clamp(2.05rem, 1.35rem + 3vw, 3.3rem); line-height: 1.12; letter-spacing: -0.022em; max-width: 19ch; text-wrap: balance; }
.us-hero__sub { font-size: 1.05rem; color: var(--muted); max-width: 46ch; }

/* links in the place line, the headline and the launch end line: the words
   look as they did, with a light underline on the words that invite a tap */
.us-hlink { color: inherit; text-decoration: none; cursor: pointer; }
.us-hlink__u { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(108, 43, 242, 0.3); text-underline-offset: 0.14em; text-decoration-skip-ink: auto; }
.us-hlink:hover .us-hlink__u { text-decoration-color: var(--violet); }
.us-hero__place .us-hlink:hover, .us-prices__end .us-hlink:hover { text-decoration: underline; text-underline-offset: 3px; }
h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus, figure[tabindex="-1"]:focus, section[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }

/* proof before price: named US client, three phone shots, two facts that open */
.us-hproof__row { display: flex; align-items: center; gap: 0.85rem; }
.us-hproof__shots { display: flex; gap: 0.4rem; flex: none; }
.us-thumb { display: block; width: 50px; height: 86px; border: 3px solid var(--navy); border-radius: 11px; overflow: hidden; background: var(--navy); box-shadow: 0 10px 20px -12px rgba(23, 18, 46, 0.55); transition: transform 0.15s ease; }
.us-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.us-thumb:hover { transform: translateY(-2px); }
.us-hproof__txt { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.35; }
.us-hproof__k { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-deep); }
.us-hproof__name { display: block; width: fit-content; padding-block: 0.12rem; font-size: 1.12rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(108, 43, 242, 0.45); text-underline-offset: 3px; }
.us-hproof__count { display: block; width: fit-content; padding-block: 0.12rem; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(23, 18, 46, 0.25); text-underline-offset: 3px; }
.us-hproof__name:hover, .us-hproof__count:hover { color: var(--violet-deep); text-decoration-color: currentColor; }
.us-hproof__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }
.us-hproof__chips .us-more-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0.3rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; font-size: 0.88rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.us-hproof__chips .us-more-btn:hover { border-color: #8f88a8; }
.us-hproof__chips .us-more-btn[aria-expanded="true"] { border-color: var(--violet); background: var(--violet-tint); }
/* "+" that turns into a close mark when the explanation is open */
.us-more-btn::after { content: "+"; display: inline-block; font-size: 1.15em; font-weight: 400; line-height: 1; color: var(--violet); transition: transform 0.2s ease; }
.us-more-btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.us-more { margin-top: 0.6rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.us-more a { font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.us-more--dark { margin-top: 0; margin-bottom: 1.4rem; border-color: var(--line-d); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.86); }
.us-more--dark a { color: #fff; }

.us-prices { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.us-prices__row { display: flex; flex-direction: column; gap: 0.1rem 1rem; width: 100%; padding-block: 0.7rem; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.us-prices__name { font-weight: 500; color: var(--ink); }
/* a price row picks its package and goes to the form: an arrow says so */
.us-prices__name::after { content: "\203A"; margin-left: 0.4rem; font-weight: 600; color: var(--violet); }
.us-prices__row:hover .us-prices__name { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.us-prices__amt { font-weight: 600; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.us-lp { font-size: 0.85rem; font-weight: 500; color: var(--violet-deep); }
/* the price from November 1: a plain small line under the launch price */
.us-then { display: block; font-size: 0.82rem; font-weight: 400; color: var(--muted); line-height: 1.35; }
.us-prices__amt .us-then { margin-top: 0.1rem; }
.us-prices__end { margin-top: 0.7rem; font-size: 0.92rem; font-weight: 500; color: var(--violet-deep); }

.us-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.5rem; }
.us-actions > :first-child { grid-column: 1 / -1; }

/* the address beside every "Email us", with a Copy address button */
.us-mailcopy { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.us-mailcopy__addr { color: var(--ink); font-weight: 500; }
.us-copy { display: inline-flex; align-items: center; min-height: 2rem; margin-left: 0.15rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-size: 0.84rem; font-weight: 500; color: var(--violet-deep); white-space: nowrap; vertical-align: middle; }
.us-copy:hover { border-color: var(--violet); background: var(--violet-tint); }
.us-copy__ok { font-size: 0.84rem; font-weight: 600; color: var(--violet-deep); }
.us-mailcopy--card { align-self: center; margin-top: 0.2rem; text-align: center; }
.us-mailcopy--dark { margin-top: 1.3rem; color: rgba(255, 255, 255, 0.72); }
.us-mailcopy--dark .us-mailcopy__addr, .us-mailcopy--dark .us-copy__ok { color: #fff; }
.us-mailcopy--dark .us-copy { background: transparent; border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.us-mailcopy--dark .us-copy:hover { background: rgba(255, 255, 255, 0.08); }

/* the call to action row that ends a section */
.us-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 2rem; }

/* floating WhatsApp button, bottom right (this page has no bottom sticky bar) */
.wa-float { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #128c3e; color: #fff; box-shadow: 0 12px 28px -8px rgba(12, 9, 26, 0.45); transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s; }
.wa-float:hover { transform: scale(1.06); background: #0f7a36; }
.wa-float svg { width: 28px; height: 28px; }
@media (max-width: 759px) {
  .wa-float.is-form-on { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.85); }
}

/* ---------- the quote form ---------- */
.us-form { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem; box-shadow: 0 30px 60px -36px rgba(23, 18, 46, 0.4); }
.us-form__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.us-form__h { font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.us-form__prog { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.us-bar { height: 4px; margin-top: 0.75rem; border-radius: 4px; background: #ece8f4; overflow: hidden; }
.us-bar span { display: block; height: 100%; background: var(--violet); transform-origin: left center; transform: scaleX(var(--p, 0.3334)); transition: transform 0.3s ease; }
/* spam trap: display:none (with the hidden attribute), never off-screen, because
   browser autofill fills off-screen inputs but never display:none ones */
.us-pot { display: none !important; }

.us-step__t { margin-top: 1.1rem; font-size: 1.05rem; font-weight: 600; }
/* second heading inside step 1: where the quote goes */
.us-step__s { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.us-step__s + .us-row2 > .us-field { margin-top: 0.65rem; }
.us-save { margin-top: 0.9rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.us-step__t:focus { outline: none; }
.us-field { margin-top: 0.95rem; }
.us-step__t + .us-field { margin-top: 0.65rem; }
fieldset { border: 0; min-width: 0; }
.us-q { display: block; padding: 0; margin-bottom: 0.4rem; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.us-opt { font-weight: 400; color: var(--muted); }

/* radios: the input stays in the page for keyboards and screen readers */
.us-pkg, .us-chip { position: relative; display: block; }
.us-pkg input, .us-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.us-pkgs { display: grid; gap: 0.5rem; }
.us-pkg__face { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 0.75rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.us-pkg__face::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #aaa4bd; background: #fff; }
.us-pkg__face b { font-weight: 500; color: var(--ink); line-height: 1.3; }
.us-pkg__price { grid-column: 2; font-weight: 600; color: var(--ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.us-pkg__price--q { font-weight: 500; color: var(--muted); }
/* one line of what is included, shown under the package once it is picked */
.us-pkg__inc { display: none; grid-column: 2 / -1; margin-top: 0.35rem; font-size: 0.86rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
.us-pkg input:checked + .us-pkg__face .us-pkg__inc { display: block; }
.us-pkg:hover .us-pkg__face { border-color: #8f88a8; }
.us-pkg input:checked + .us-pkg__face { border-color: var(--violet); background: #faf7ff; box-shadow: inset 0 0 0 1px var(--violet); }
.us-pkg input:checked + .us-pkg__face::before { border-color: var(--violet); background: var(--violet); box-shadow: inset 0 0 0 3px #fff; }
.us-pkg input:focus-visible + .us-pkg__face, .us-chip input:focus-visible + span { outline: 3px solid rgba(108, 43, 242, 0.55); outline-offset: 2px; }

.us-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.us-chip span { display: inline-block; padding: 0.55rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: #fff; font-size: 0.93rem; line-height: 1.3; color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.us-chip:hover span { border-color: #8f88a8; }
.us-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.us-chips--two span { min-width: 7rem; text-align: center; }

.us-form input[type="text"], .us-form input[type="email"], .us-form input[type="tel"], .us-form select, .us-form textarea,
.us-wab input, .us-wab select { display: block; width: 100%; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 0.7rem 0.8rem; }
.us-form textarea { resize: vertical; min-height: 5.2rem; }
.us-form input::placeholder, .us-form textarea::placeholder, .us-wab input::placeholder { color: #737085; }
.us-form input:focus, .us-form select:focus, .us-form textarea:focus, .us-wab input:focus, .us-wab select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108, 43, 242, 0.2); }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.us-field.is-bad .us-chip span, .us-field.is-bad .us-pkg__face { border-color: var(--bad); }
.intl-phone { display: flex; gap: 0.4rem; }
.intl-phone select { flex: none; width: 6.6rem; padding-right: 0.3rem; }
.intl-phone input { flex: 1; min-width: 0; }
.us-row2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0.9rem; }
.us-err { margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.35; color: var(--bad); }
.us-err:empty { display: none; }
.us-alert { margin-top: 0.8rem; font-size: 0.92rem; font-weight: 500; color: var(--violet-deep); }
.us-alert:empty { display: none; }
.us-form__nav { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; }
.us-form__next { flex: 1; }
.us-back { padding: 0.75rem 0.9rem; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.us-back:hover { color: var(--ink); }
.us-form__fine { margin-top: 0.7rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }

/* ---------- 2. proof strip ---------- */
.us-strip { background: var(--navy); color: #fff; }
.us-strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; padding-block: 1.6rem; }
.us-strip b { display: block; font-size: 1.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.us-strip span { display: block; margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.74); }
/* every fact is a link (jumps) or a button (opens an explanation) */
.us-fact { display: block; width: 100%; padding: 0; color: #fff; text-align: left; text-decoration: none; cursor: pointer; }
.us-fact b::after { display: inline-block; margin-left: 0.4rem; font-size: 0.9em; color: var(--violet-soft); transition: transform 0.2s ease; }
.us-fact--go b::after { content: "\203A"; }
.us-fact.us-more-btn::after { content: none; }
.us-fact.us-more-btn b::after { content: "+"; }
.us-fact.us-more-btn[aria-expanded="true"] b::after { transform: rotate(45deg); }
.us-fact:hover span { color: #fff; }
.us-strip :focus-visible, .us-card--custom :focus-visible, .us-ind__cell--c :focus-visible { outline-color: rgba(255, 255, 255, 0.85); }

/* ---------- shared section type ---------- */
.us-sec { padding-block: clamp(3.5rem, 8vw, 6rem); }
.us-h2, .us-problem h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); line-height: 1.14; letter-spacing: -0.018em; max-width: 24ch; text-wrap: balance; }
.us-lede { margin-top: 0.8rem; max-width: 62ch; color: var(--muted); font-size: 1.03rem; }

/* check marks drawn with borders, no icon files */
.us-ticks li, .us-incl li, .us-ind__cell li { position: relative; padding-left: 1.55rem; }
.us-ticks li::before, .us-incl li::before, .us-ind__cell li::before { content: ""; position: absolute; left: 0.3rem; top: 0.32em; width: 0.42rem; height: 0.78rem; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg); }

/* ---------- 3. problem ---------- */
.us-problem__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.us-problem__copy > p { margin-top: 1rem; max-width: 58ch; color: var(--muted); font-size: 1.03rem; }
.us-ticks { margin-top: 1.4rem; }
.us-ticks li { margin-top: 0.6rem; color: var(--ink); }
.us-devices { position: relative; }
.us-laptop { margin: 0 14% 0 3%; }
.us-laptop__screen { border: 9px solid var(--navy); border-bottom-width: 13px; border-radius: 14px 14px 4px 4px; background: var(--navy); overflow: hidden; }
.us-laptop__screen img { width: 100%; height: auto; aspect-ratio: 880 / 550; }
.us-laptop::after { content: ""; display: block; height: 0.8rem; margin: 0 -3%; border-radius: 0 0 14px 14px; background: linear-gradient(#e7e3ef, #cdc7da); }
.us-phone { position: absolute; right: 0; bottom: 2.6rem; width: 25%; border: 5px solid var(--navy); border-radius: 20px; overflow: hidden; background: var(--navy); box-shadow: 0 24px 40px -20px rgba(23, 18, 46, 0.55); }
.us-phone img { width: 100%; height: auto; aspect-ratio: 300 / 600; }
.us-devices figcaption { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
/* [data-tap]: the pictures open the caption link (js/website-usa.js) */
[data-tap] .us-laptop, [data-tap] .us-phone, [data-tap] .us-browser, [data-tap] picture { cursor: pointer; }
[data-tap] .us-laptop__screen img, [data-tap] .us-browser img, [data-tap] .us-phone img { transition: opacity 0.15s ease; }
[data-tap] .us-laptop:hover img, [data-tap] .us-browser:hover img, [data-tap] .us-phone:hover img { opacity: 0.92; }
.us-shot figcaption .us-shot__zoom { display: inline-block; margin-top: 0.3rem; font-size: 0.88rem; font-weight: 500; }
.us-devices figcaption a, .us-shot figcaption a, .us-soft a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(108, 43, 242, 0.5); text-underline-offset: 3px; }

/* ---------- 4. packages ---------- */
.us-packs { background: var(--paper-warm); }
.us-packs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.us-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.us-card--feature { border-color: rgba(108, 43, 242, 0.55); box-shadow: 0 30px 60px -40px rgba(88, 32, 201, 0.45); }
.us-card h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.us-card__price { display: block; margin-top: 0.5rem; padding: 0; color: var(--ink); text-align: left; cursor: pointer; }
.us-card__price:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(108, 43, 242, 0.4); text-underline-offset: 0.12em; }
/* a tapped price: picked in the form, with one line of what is included */
.us-card__note { margin-top: 0.55rem; padding: 0.5rem 0.7rem; border-radius: var(--r-ctl); background: var(--violet-tint); font-size: 0.9rem; line-height: 1.45; color: var(--violet-deep); }
.us-card--custom .us-card__note { background: rgba(255, 255, 255, 0.1); color: #fff; }
.us-card__price b { font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.us-card__price .us-then { font-size: 0.92rem; }
.us-card__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin-top: 0.3rem; font-size: 0.9rem; font-weight: 500; color: var(--violet-deep); }
.us-incl { margin-block: 1.25rem 1.5rem; font-size: 0.95rem; }
.us-incl li { margin-top: 0.5rem; }
.us-card .us-btn--block { margin-top: auto; }
.us-textlink { align-self: center; margin-top: 0.6rem; padding: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.us-card--custom { background: var(--navy); border-color: var(--navy); color: rgba(255, 255, 255, 0.8); }
.us-card--custom h3, .us-card--custom .us-card__price { color: #fff; }
.us-card--custom .us-card__price b { font-size: 1.6rem; }
.us-card__text { margin-block: 0.8rem 1.3rem; max-width: 62ch; }
.us-card--custom .us-btn { align-self: flex-start; }

/* ---------- 5. industries (bento) ---------- */
.us-ind__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.us-ind__cell { position: relative; display: flex; flex-direction: column; border-radius: var(--r); padding: 1.5rem; }
/* the whole card is this link (stretched over it with ::before) */
.us-ind__go { align-self: flex-start; margin-top: auto; padding-top: 1.1rem; font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-decoration-color: rgba(108, 43, 242, 0.4); text-underline-offset: 3px; }
.us-ind__go::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); cursor: pointer; }
.us-ind__go::after { content: "\203A"; margin-left: 0.35rem; }
.us-ind__go:focus-visible { outline: none; }
.us-ind__go:focus-visible::before { outline: 3px solid rgba(108, 43, 242, 0.55); outline-offset: 2px; }
.us-ind__cell:hover .us-ind__go { text-decoration-color: currentColor; }
.us-ind__cell--c .us-ind__go { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.us-ind__cell--c .us-ind__go:focus-visible::before { outline-color: rgba(255, 255, 255, 0.85); }
.us-ind__cell h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.us-ind__who { margin-top: 0.2rem; font-size: 0.9rem; color: var(--muted); }
.us-ind__cell ul { margin-top: 1rem; }
.us-ind__cell li { margin-top: 0.5rem; color: var(--ink); }
.us-ind__cell--a { background: var(--violet-tint); }
.us-ind__cell--b { background: var(--paper-warm); }
.us-ind__cell--c { background: var(--navy); }
.us-ind__cell--c h3, .us-ind__cell--c li { color: #fff; }
.us-ind__cell--c .us-ind__who { color: rgba(255, 255, 255, 0.72); }
.us-ind__cell--c li::before { border-color: var(--violet-soft); }
.us-ind__cell--d { background: linear-gradient(140deg, var(--paper-warm) 0%, var(--violet-tint) 100%); }

/* ---------- 6. how it works ---------- */
.us-how { background: var(--paper-warm); }
.us-how__list { margin-top: 2rem; counter-reset: none; }
.us-how__list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.us-how__pay { grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; height: 2rem; padding-inline: 0.5rem; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--violet-deep); }
.us-how__list li:nth-child(2) .us-how__pay, .us-how__list li:nth-child(4) .us-how__pay, .us-how__list li:nth-child(5) .us-how__pay { background: var(--violet); border-color: var(--violet); color: #fff; }
.us-how__list h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.us-how__list p { margin-top: 0.2rem; font-size: 0.94rem; color: var(--muted); }

/* ---------- 7. proof ---------- */
.us-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.us-browser { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -30px rgba(23, 18, 46, 0.4); }
.us-browser::before { content: ""; display: block; height: 1.25rem; background: #efecf5; border-bottom: 1px solid var(--line); }
.us-browser img { width: 100%; height: auto; aspect-ratio: 880 / 550; object-fit: cover; object-position: top; }
.us-shot figcaption { margin-top: 0.7rem; font-size: 0.95rem; }
.us-shot figcaption b { color: var(--ink); font-weight: 600; }
.us-shot figcaption span { display: block; margin-top: 0.1rem; font-size: 0.88rem; color: var(--muted); }
.us-shot--ads img { width: 100%; height: auto; aspect-ratio: 1210 / 408; border: 1px solid var(--line); border-radius: 12px; }
.us-soft { background: var(--paper-warm); border-radius: var(--r); padding: 1.5rem; }
.us-soft h3 { font-size: 1.05rem; font-weight: 600; }
.us-soft p { margin-top: 0.3rem; font-size: 0.94rem; color: var(--muted); }
.us-soft div + div { margin-top: 1rem; }
.us-soft .us-soft__more { margin-top: 1.2rem; }
.us-clients { margin-top: 2rem; }
.us-client { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; background: var(--violet-tint); border-radius: var(--r); padding: 1.5rem; }
.us-client + .us-client { margin-top: 1rem; }
.us-client__h { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-deep); }
.us-client__name { margin-top: 0.4rem; font-size: 1.45rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.us-client__name a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(108, 43, 242, 0.5); text-underline-offset: 4px; }
.us-client__copy > p:not(.us-client__name) { margin-top: 0.7rem; max-width: 56ch; color: var(--muted); }
.us-client__copy .us-client__built { color: var(--text); }
.us-client__built b { color: var(--ink); font-weight: 600; }
.us-client__shots .us-phone { bottom: 0.2rem; }
.us-clients + .us-proof__grid { margin-top: 1.75rem; }

/* ---------- 8. compare: stacked cards on phones, a table from 900px ---------- */
.us-cmp { background: var(--paper-warm); }
.us-cmp__wrap { margin-top: 2rem; }
.us-cmp__t, .us-cmp__t tbody, .us-cmp__t tr, .us-cmp__t th, .us-cmp__t td { display: block; }
.us-cmp__t { width: 100%; border-collapse: separate; border-spacing: 0; }
.us-cmp__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.us-cmp__t tbody tr { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; }
.us-cmp__t tbody tr + tr { margin-top: 0.8rem; }
.us-cmp__t th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.us-cmp__t td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; padding-block: 0.45rem; border-top: 1px solid var(--line); font-size: 0.92rem; }
.us-cmp__t td::before { content: attr(data-label); font-size: 0.82rem; color: var(--muted); }
.us-cmp__t td.us-cmp__us { margin-top: 0.3rem; padding: 0.55rem 0.6rem; border: 0; border-radius: 8px; background: var(--violet-tint); color: var(--ink); font-weight: 500; }
.us-cmp__t td.us-cmp__us::before { color: var(--violet-deep); font-weight: 600; }

/* ---------- 9. sale deadline ---------- */
.us-sale { background: var(--navy); color: rgba(255, 255, 255, 0.78); padding-block: 3rem; }
.us-sale__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.us-sale h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; }
.us-sale p { margin-top: 0.4rem; }
.us-count { display: flex; gap: 0.5rem; }
.us-count span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0.65rem 0.4rem; border: 1px solid var(--line-d); border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.us-count b { font-size: 1.85rem; font-weight: 500; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.us-count i { font-style: normal; font-size: 0.74rem; color: rgba(255, 255, 255, 0.72); }
.us-sale .us-btn { justify-self: start; }

/* ---------- 10. FAQ ---------- */
.us-faq__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.us-faq details { border-bottom: 1px solid var(--line); }
.us-faq details:first-child { border-top: 1px solid var(--line); }
.us-faq summary { position: relative; padding: 1.05rem 2.2rem 1.05rem 0; font-size: 1.05rem; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; }
.us-faq summary::-webkit-details-marker { display: none; }
.us-faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.8rem; font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: var(--violet); transition: transform 0.2s ease; }
.us-faq details[open] summary::after { transform: rotate(45deg); }
.us-faq details p { padding-bottom: 1.2rem; max-width: 64ch; color: var(--muted); }

/* ---------- 11. final CTA ---------- */
.us-final { background: radial-gradient(80% 120% at 50% 0%, #2c1d63 0%, var(--navy) 62%); color: rgba(255, 255, 255, 0.8); padding-block: clamp(3.5rem, 8vw, 5.5rem); text-align: center; }
.us-final h2 { margin-inline: auto; max-width: 24ch; color: #fff; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.018em; text-wrap: balance; }
.us-final__in > p { margin-top: 0.7rem; }
.us-actions--center { max-width: 34rem; margin-inline: auto; }
.us-final__mail { margin-top: 1.3rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); overflow-wrap: anywhere; }

.us-foot { background: #100c22; color: rgba(255, 255, 255, 0.7); font-size: 0.86rem; padding-block: 1.4rem; }
.us-foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.us-foot a { margin-right: 1rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- WhatsApp number box ---------- */
.us-wab { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
.us-wab__scrim { position: absolute; inset: 0; background: rgba(12, 9, 26, 0.62); }
.us-wab__box { position: relative; width: 100%; max-width: 26rem; background: #fff; border-radius: var(--r); padding: 1.5rem; box-shadow: 0 30px 80px rgba(12, 9, 26, 0.4); }
.us-wab__x { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.5rem; height: 2.5rem; border-radius: var(--r-ctl); font-size: 1.6rem; line-height: 1; color: var(--muted); }
.us-wab__x:hover { background: var(--paper-warm); color: var(--ink); }
.us-wab__t { font-size: 1.2rem; font-weight: 600; line-height: 1.25; padding-right: 2.6rem; }
.us-wab__lede { margin-top: 0.4rem; font-size: 0.93rem; line-height: 1.45; color: var(--muted); }
.us-wab .us-field { margin-top: 1rem; }
.us-wab .us-btn--block { margin-top: 1rem; }
.us-wab__skip { display: block; margin: 0.7rem auto 0; padding: 0.35rem; font-size: 0.92rem; font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.us-wab__fine { margin-top: 0.3rem; text-align: center; font-size: 0.82rem; color: var(--muted); }

/* ---------- thank-you page ---------- */
.us--ty { background: var(--paper-warm); }
.us-ty { padding-block: 2.5rem 4rem; }
.us-ty__in { max-width: 48rem; }
.us-ty h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.us-ty__lede { margin-top: 0.8rem; max-width: 60ch; color: var(--muted); font-size: 1.05rem; }
.us-ty__btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 1.5rem; }
.us-ty__mail { margin-top: 1rem; font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; }
.us-ty__mail b { color: var(--ink); font-weight: 600; }
.us-ty__fallback { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.us-ty__fallback .us-ty__mail { margin-top: 0; color: var(--text); }
.us-ty__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.7rem; }
.us-ty__card { margin-top: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.us-ty__card h2 { font-size: 1.1rem; font-weight: 600; }
.us-ty__first { margin-top: 0.6rem; color: var(--ink); }
.us-ty__list { margin-top: 0.8rem; }
.us-ty__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.05rem; padding-block: 0.5rem; border-top: 1px solid var(--line); }
.us-ty__row dt { font-size: 0.85rem; color: var(--muted); }
.us-ty__row dd { color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.us-ty__steps { margin-top: 0.7rem; padding-left: 1.3rem; list-style: decimal; }
.us-ty__steps li { margin-top: 0.4rem; padding-left: 0.2rem; }
.us-ty__more { margin-top: 1rem; }
.us-ty__more a { font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.us-ty__add { margin-top: 1.1rem; font-size: 0.92rem; color: var(--muted); }
.us-ty__link { padding-block: 0.2rem; font: inherit; font-weight: 500; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.us-ty__link:hover { color: var(--ink); }

/* ================== wider screens ================== */
@media (min-width: 480px) {
  .us-prices__row { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
  .us-prices__amt { text-align: right; }
  .us-pkg__face { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .us-pkg__face::before { grid-row: auto; }
  .us-pkg__price { grid-column: auto; text-align: right; white-space: nowrap; }
  .us-ty__row { grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; }
}

@media (min-width: 560px) {
  .us-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-actions { display: flex; flex-wrap: wrap; }
  .us-actions--center { justify-content: center; max-width: none; }
  .us-ty__btns { display: flex; flex-wrap: wrap; }
  .us-wab { align-items: center; }
  .us-cta { display: flex; flex-wrap: wrap; }
}

@media (min-width: 760px) {
  .us-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: 1.9rem; }
  .us-strip li + li { border-left: 1px solid var(--line-d); padding-left: 1.5rem; }
  .us-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-how__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  .us-how__list li { display: block; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
  .us-how__pay { margin-bottom: 0.8rem; }
  .us-sale__in { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .us-sale .us-btn { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .us-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .us-card { padding: 2rem; }
  .us-card--custom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto; align-items: center; gap: 2rem; }
  .us-card--custom .us-card__text { margin: 0; }
  .us-card--custom .us-btn { align-self: center; }

  .us-client { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; padding: 2.25rem 2.5rem; }
  .us-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .us-soft { align-self: start; }

  .us-cmp__t { display: table; }
  .us-cmp__t thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .us-cmp__t tbody { display: table-row-group; }
  .us-cmp__t tr, .us-cmp__t tbody tr { display: table-row; background: none; border: 0; padding: 0; }
  .us-cmp__t th, .us-cmp__t td { display: table-cell; padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .us-cmp__t td { border-top: 0; }
  .us-cmp__t td::before { content: none; }
  .us-cmp__t thead th { font-size: 0.92rem; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .us-cmp__t th[scope="row"] { width: 17%; margin: 0; }
  .us-cmp__t td { color: var(--muted); }
  .us-cmp__t .us-cmp__us, .us-cmp__t td.us-cmp__us { background: var(--violet-tint); color: var(--ink); font-weight: 500; border-radius: 0; margin: 0; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(108, 43, 242, 0.18); }
  .us-cmp__t thead th.us-cmp__us { background: var(--navy); color: #fff; border-radius: 12px 12px 0 0; border-bottom-color: var(--navy); }

  .us-faq__in { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 3rem; }
  .us-problem__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3.5rem; }
}

@media (min-width: 1024px) {
  .us-hero { padding-block: 2.75rem 4rem; }
  .us-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "head form" "proof form" "body form"; grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 1.25rem; align-items: start; }
  .us-hero__head { padding-top: 1rem; }
  .us-form { padding: 1.6rem 1.75rem; }
  .us-ind__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
  .us-ind__cell { padding: 2rem; }
  .us-ind__cell--a, .us-ind__cell--d { grid-column: span 7; }
  .us-ind__cell--b, .us-ind__cell--c { grid-column: span 5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}