/* ============================================================
   mobile.css — Siteworks landing, mobile-first rethink
   Loaded LAST so it owns the cascade at small widths.
   Strategy: the desktop CSS is authored desktop-base + max-width
   queries; this layer re-lays-out every section for phones, with
   genuine mobile patterns (slim nav, stacked hero, swipe rails,
   full-screen chat) rather than shrink-to-fit.
   Primary breakpoint 760px; refinements at 560 / 400.
   `!important` is used only where the markup carries inline styles.
   ============================================================ */

/* responsive copy swaps: full wording on desktop, short on phones
   (the ≤760 blocks flip these). Base = show full, hide short. */
.lbl-short, .lead-short, .faq-viewall { display: none; }

/* =====================================================================
   1 · GLOBAL RHYTHM, TYPE SCALE, TOUCH TARGETS  (≤760)
   ===================================================================== */
@media (max-width: 760px) {
  /* tighter, consistent vertical rhythm */
  .section { padding: 68px 0; }
  .wrap { padding: 0 20px; }

  /* fluid headline + lead scale — big but never cramped */
  .h-section { font-size: clamp(25px, 7.4vw, 32px); line-height: 1.12; margin-top: 12px; }
  .p-lead { font-size: 15.5px; line-height: 1.58; margin-top: 16px; }
  .eyebrow { font-size: 11.5px; }

  /* shared bottom-CTA headings (showcase / testimonials use .sw-foot-h,
     how/ts/sw use .sw-cta-h) */
  .sw-foot-h { font-size: clamp(22px, 6.6vw, 27px); }
  .sw-cta-h { font-size: clamp(21px, 6.2vw, 26px); }

  /* full-width, comfortably-tall buttons in any CTA row */
  .sw-foot-actions, .how-cta-actions, .ts-cta-actions, .process-cta-row { width: 100%; }
  .sw-foot-actions .btn,
  .how-cta-actions .btn,
  .ts-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .btn { min-height: 48px; }
  .btn-sm { min-height: 40px; }
}

/* =====================================================================
   2 · NAV — slim sticky bar: logo + primary CTA only
   (markup is inline-styled, so overrides need !important)
   ===================================================================== */
@media (max-width: 860px) {
  /* drop the link list entirely → slim bar */
  .nav-links { display: none !important; }
  nav .wrap { height: 60px !important; padding: 0 16px !important; }
  /* keep the primary CTA tappable + compact */
  .nav-primary-cta { padding: 10px 16px !important; font-size: 13px !important; }
}
@media (max-width: 400px) {
  /* on the smallest phones the byline crowds the CTA — drop it */
  .nav-byline { display: none !important; }
}

/* =====================================================================
   3 · HERO — single column, art behind, legible stack
   ===================================================================== */
@media (max-width: 760px) {
  .hh-hero { padding-top: 60px !important; }
  /* reserve room at the bottom of the text column for the art band below.
     #top.hh-hero beats the existing `#top .wrap` padding rule (same <header>). */
  #top.hh-hero .wrap { padding-top: 30px !important; padding-bottom: 310px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }

  .hero-h1 { font-size: clamp(31px, 9vw, 40px) !important; line-height: 1.06 !important; margin-top: 16px !important; }
  .hero-sub { font-size: 16px !important; margin-top: 18px !important; max-width: 100% !important; }

  /* CTAs: stack full-width, primary first */
  .hero-cta-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-top: 26px !important; }
  .hero-cta-row .btn { width: 100%; justify-content: center; min-height: 50px; }

  /* microcopy under the CTAs: drop the leading icon, keep just the line */
  .hero-note { margin-top: 20px !important; gap: 0 !important; }
  .hero-note i { display: none !important; }

  /* Clutch + Trustpilot badges share one row, shrunk to fit side by side */
  .hero-ratings { margin-top: 22px; display: flex; flex-wrap: nowrap !important; gap: 8px; justify-content: center; }
  .hero-ratings .rating-badge { flex: 0 0 auto; justify-content: center; padding: 7px 11px; gap: 7px; }
  .hero-ratings .rating-brand { height: 12px !important; }
  .hero-ratings .rating-div { height: 12px; }
  .hero-ratings .rating-stars { font-size: 11.5px; letter-spacing: 0.3px; }
  .hero-ratings .rating-score { font-size: 11.5px; }

  /* ── mobile art band ─────────────────────────────────────────────────
     On desktop the streak is a steep, near-vertical diagonal sitting behind
     the copy. On a phone that fights the headline, so instead we lay the
     whole composed streak down ~90° into its OWN horizontal band beneath the
     text. The PNG glow + the SVG flowing highlight are both children of
     .hh-layers, so rotating that one element keeps them perfectly aligned —
     a near-vertical streak becomes a near-horizontal one that sweeps across
     the band with no visible start or end. */
  .hh-stage {
    top: auto !important; bottom: 0; left: 0; right: 0;
    height: 290px; overflow: hidden;
    /* feather only the top + bottom into the black hero; the sides run to the
       edges so the violet end touches the left and the orange end the right. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 84%, transparent 100%);
  }
  /* explicit black gradient overlay: top + bottom of the band fade to pure black
     (0% → 100% black) so the streak dissolves cleanly at both edges. */
  .hh-stage::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    /* a single linear gradient PERPENDICULAR to the streak: clear (0% black) over
       the streak band, ramping to pitch black the further out you go on either
       side — so everything above/below the streak line goes black. Plus the
       bottom-left corner mask for the art-box corner. */
    background: linear-gradient(165deg, #000 0%, #000 30%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 56%, #000 70%, #000 100%),
               radial-gradient(210px 170px at left bottom, #000 0%, #000 34%, rgba(0,0,0,0) 72%);
  }
  /* match the image's native 2.33:1 aspect so cover/slice never crop the arc.
     scale(1.0) rotate(29deg), centred: shows the FULL gentle curve edge-to-edge —
     violet end touching the left, white-hot orange end touching the right — the
     way the brand hero reference frames it. */
  .hh-layers {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    width: 233vw !important; height: 100vw !important;
    transform: translate(-50%, calc(-50% - 130px)) scale(1.344) rotate(39deg) !important;
    transform-origin: center !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    opacity: calc(0.97 * var(--glow-mult, 1)) !important;
  }
  .hh-hero { background: linear-gradient(180deg, #000 0%, #000 86%, var(--bg-base) 100%); }
}

/* =====================================================================
   4 · TRUST STRIP — copy + 2×2 metrics, hide the tall scrolling wall
   ===================================================================== */
@media (max-width: 760px) {
  .tools-band .proof-banner { grid-template-columns: 1fr !important; gap: 22px !important; }
  .proof-banner__text { font-size: 16px; max-width: none; }
  /* three stats across one row; the 5-star one is already in the hero, so drop it */
  .bn-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 12px !important; margin-top: 20px !important; }
  .bn-metric { flex: none !important; }
  .bn-metric:nth-child(4) { display: none !important; }
  .bn-metric__num { font-size: 23px !important; }
  .bn-metric__suffix { font-size: 13px !important; }
  /* swap to the shorter labels so each stays within two lines */
  .bn-metric__label { font-size: 11px; max-width: none; margin-top: 6px; }
  .bn-metric__label .lbl-full { display: none; }
  .bn-metric__label .lbl-short { display: inline; }
  /* the 3-column infinite logo wall is heavy + sideways on a phone — drop it */
  .proof-cols { display: none !important; }
}

/* =====================================================================
   5 · WORK / CONVERT / MANAGED — stack grids, keep cards roomy
   ===================================================================== */
@media (max-width: 760px) {
  /* Work: the cursor-blur cards → single column */
  .work-grid-4 { grid-template-columns: 1fr !important; }
  /* Convert ("solution"): keep the animation at the desktop aspect (not square) */
  .rv-stage { aspect-ratio: 1120 / 642 !important; }
  .rv-frame { margin: 34px auto 56px !important; }
  /* shorten the section lead */
  .convert-head .p-lead .lead-full { display: none; }
  .convert-head .p-lead .lead-short { display: inline; }
  /* the 6 feature points become a compact 2×3 icon grid (icon + title) */
  .cv-cards { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .cv-feature { gap: 11px; }
  .cv-ico { width: 44px !important; height: 44px !important; border-radius: 13px !important; }
  .cv-ico i { font-size: 21px !important; }
  .cv-feature__title { font-size: 15.5px; }
  .cv-feature__desc { display: none !important; }
  .convert-head .h-section { font-size: clamp(25px, 7.4vw, 32px); }
  /* Managed "before we meet": stack the concept peek */
  .control-grid, .peek-bento { grid-template-columns: 1fr !important; }
  .control-streaks { opacity: 0.32 !important; }
}

/* =====================================================================
   6 · SHOWCASE — header + 3 selectable mobile layouts
   Default = stack. Tweaks switch the body class:
     .mob-sw-swipe   → horizontal swipe rail
     .mob-sw-compact → 2-up mini grid
   ===================================================================== */
@media (max-width: 760px) {
  .showcase-sec { padding-top: 60px; padding-bottom: 64px; }
  .sw-head { grid-template-columns: 1fr !important; gap: 22px !important; }
  .sw-head-aside { grid-template-columns: 1fr 1fr !important; gap: 22px 18px !important; }
  .sw-stat__num { font-size: 30px; }
  .sw-band { margin-top: 30px; }

  /* the focus grid stacks edge-to-edge by default */
  .sw-focus { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sw-card--focus, .sw-fc--ez { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .sw-card--focus .sw-shot { height: 232px !important; }
  .sw-fc--ez .sw-shot { min-height: 232px !important; }
  .sw-foot-cta { margin-top: 40px; }

  /* the hover "Lens" never fires on touch → show the About accordion instead
     (already in markup) and make its summary a clear tappable row */
  .sw-about-sum { padding: 13px 2px; }

  /* ---- variation: SWIPE rail ---- */
  body.mob-sw-swipe .sw-band .wrap { padding: 0; }
  body.mob-sw-swipe .sw-focus {
    display: flex !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 4px 20px 14px;
  }
  body.mob-sw-swipe .sw-focus::-webkit-scrollbar { display: none; }
  body.mob-sw-swipe .sw-card--focus,
  body.mob-sw-swipe .sw-fc--ez {
    flex: 0 0 86% !important; scroll-snap-align: center; min-width: 0;
  }
  body.mob-sw-swipe .sw-card--focus .sw-shot { height: 210px !important; }

  /* ---- variation: COMPACT 2-up ---- */
  body.mob-sw-compact .sw-focus { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  body.mob-sw-compact .sw-card--focus,
  body.mob-sw-compact .sw-fc--ez { grid-column: auto !important; padding: 8px 8px 6px; }
  body.mob-sw-compact .sw-card--focus .sw-shot { height: 128px !important; }
  body.mob-sw-compact .sw-fc--ez .sw-shot { min-height: 128px !important; }
  body.mob-sw-compact .sw-about { display: none; }
  body.mob-sw-compact .sw-name { font-size: 13px; }
  body.mob-sw-compact .sw-cat { font-size: 9.5px; padding: 3px 8px; }
  body.mob-sw-compact .sw-meta { margin-top: 10px; gap: 6px; }
}

/* =====================================================================
   7 · WORKERS ("What we build") — tab switcher already in markup ≤720
   wb-grid fallback + CTA stack
   ===================================================================== */
@media (max-width: 760px) {
  .wb-grid { grid-template-columns: 1fr !important; }
  .wb-cta { flex-direction: column !important; align-items: flex-start !important; padding: 24px 22px; }
  .wb-cta .btn { width: 100%; justify-content: center; }
  .worker-tab-card .wb-title { font-size: 20px; }
}

/* =====================================================================
   8 · PROCESS — accordion already in markup ≤720; tidy the CTA row
   ===================================================================== */
@media (max-width: 760px) {
  #how .proc-layout { grid-template-columns: 1fr !important; }
  .proc-accordion { margin-top: 28px; }
  .how-cta { padding: 30px 20px; }
}

/* =====================================================================
   9 · TESTIMONIALS — JS carousel already shows ~1 card; add native
   swipe affordance + tighten controls
   ===================================================================== */
@media (max-width: 760px) {
  .ts-head { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ts-badges { justify-content: flex-start; gap: 8px; }
  .ts-wall { margin-top: 32px; }
  .tsx-viewport {
    /* soften the right-edge mask so the single card isn't clipped on phones */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 94%, transparent 100%);
  }
  .tsx-card { padding: 20px; }
  .ts-quote { font-size: 15.5px; }
  .tsx-controls { gap: 16px; margin-top: 22px; }
  .tsx-arrow { width: 44px; height: 44px; }
}

/* =====================================================================
   10 · PRICING — value props, estimate builder, 3 payment layouts
   Default = stack (year first). Tweaks switch the body class:
     .mob-pr-swipe   → swipe between Monthly / Year
     .mob-pr-compact → condensed cards (total only)
   ===================================================================== */
@media (max-width: 760px) {
  .pr-vp-grid { grid-template-columns: 1fr 1fr !important; gap: 18px 16px; margin-top: 30px; }
  .pr-vp-item .wc-label { font-size: 13.5px; }

  .pe-module { padding: 18px 16px !important; border-radius: 18px; }

  /* ── sticky build → payment flow ──────────────────────────────────────
     Each step pins its own header just beneath the 60px fixed nav while you
     scroll through that step, then hands off to the next. #review drops its
     overflow:hidden so the sticky context is the page, not the section. */
  #review { overflow: visible; }
  .pe-flowstep { display: block; }
  .pe-flowstep--build .pe-head,
  .pe-flowstep--pay .pe-pay-title {
    position: sticky; top: 60px; z-index: 20;
    margin-left: -16px; margin-right: -16px;
    padding: 12px 16px 11px;
    background: rgba(18,16,23,0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .pe-flowstep--build .pe-head { gap: 8px 14px; align-items: center; margin-top: -2px; }
  .pe-flowstep--build .pe-sub { display: none; }       /* keep the pinned build bar slim */
  .pe-flowstep--build .pe-title { font-size: 19px; }
  .pe-flowstep--pay .pe-pay-title { margin-top: 18px; margin-bottom: 0; }
  .pe-head { gap: 14px; }
  .pe-title { font-size: 23px; }
  .pe-sub { font-size: 14.5px; }
  .pe-stat-pill { font-size: 12.5px; padding: 8px 13px; }
  .pe-selector { grid-template-columns: 1fr !important; gap: 18px !important; }
  .pe-types { grid-template-columns: 1fr !important; }
  .pe-card-t { font-size: 15px; }
  .pe-card-d { font-size: 14px; }
  /* steppers: thumb-sized */
  .pe-step-btn { width: 44px; height: 42px; }
  .pe-step-val { min-width: 48px; }

  .pe-pay-title { font-size: 21px; margin-top: 30px; }
  .pay-cards { grid-template-columns: 1fr !important; gap: 16px; }
  .pay-card--year { order: -1; }            /* best value first */
  .pay-card--monthly, .pay-card--year .pay-card-inner { padding: 20px; }
  .pay-price { font-size: 40px; }
  .pay-card-title { font-size: 21px; }

  /* ---- variation: SWIPE between the two payment cards ---- */
  body.mob-pr-swipe .pay-cards {
    display: flex !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 22px -16px 0; padding: 4px 16px 12px;
  }
  body.mob-pr-swipe .pay-cards::-webkit-scrollbar { display: none; }
  body.mob-pr-swipe .pay-card { flex: 0 0 88%; scroll-snap-align: center; }
  body.mob-pr-swipe .pay-card--year { order: 0; }

  /* ---- variation: COMPACT (scannable, total-forward) ---- */
  body.mob-pr-compact .pay-rows { margin-top: 16px; margin-bottom: 16px; }
  body.mob-pr-compact .pay-row:not(.pay-row--total) { display: none; }
  body.mob-pr-compact .pay-row--total { border-top: none; padding-top: 0; }
  body.mob-pr-compact .pay-desc { display: none; }

  .pe-fineprint { font-size: 11.5px; }
}

/* =====================================================================
   11 · SOL CHAT (in-page Beacon) — stack context over chat
   ===================================================================== */
@media (max-width: 760px) {
  #cta .pr-request-head .h-section { font-size: clamp(24px, 7vw, 30px) !important; }
  .pr-chat { margin-top: 36px; }
  .chat-shell { grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto !important; border-radius: 16px; }
  .chat-context { padding: 18px 18px 16px !important; }
  /* lean on the chat: drop the context heading, subtext, and estimate breakdown */
  .chat-context .ctx-title,
  .chat-context .ctx-sub,
  .chat-context .ctx-estimate { display: none !important; }
  /* "How the chat works" steps run horizontally: 1 · 2 · 3 across */
  .ctx-eyebrow--steps { margin-top: 0 !important; align-self: center; }
  .ctx-steps { flex-direction: row !important; gap: 10px !important; margin-top: 14px !important; }
  .ctx-steps li { flex: 1 1 0; min-width: 0; flex-direction: column !important; align-items: center; text-align: center; gap: 8px !important; font-size: 12.5px; line-height: 1.25; }
  /* drop the "Exploring" status pill on phones */
  .chat-head-ctl .pay-badge,
  .bcf-head .pay-badge { display: none !important; }
  .chat-head { padding: 18px 18px; }
  .chat-title { font-size: 20px; }
  .chat-thread { padding: 20px; max-height: 64vh; }
  .chat-bubble p, .chat-msg--you .chat-you-bubble { font-size: 15px; }
  .chat-input { margin: 0 14px 14px; }
}

/* =====================================================================
   12 · FOUNDER / FAQ / FOOTER — stack columns, comfortable reading
   ===================================================================== */
@media (max-width: 760px) {
  .cred-layout { grid-template-columns: 1fr !important; gap: 30px !important; }
  .cred-left { max-width: 100% !important; }

  .faq-layout { grid-template-columns: 1fr !important; gap: 26px !important; }
  .faq-intro { position: static !important; max-width: 100% !important; }

  /* show the first 5 questions, then a "View all" toggle. Every item stays in
     the DOM (just visually gated) so search + answer engines still crawl them. */
  .faq-list .faq-x { display: none; }
  .faq-list.faq-all .faq-x { display: block; }
  .faq-viewall {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 16px; min-height: 50px; padding: 13px 18px;
    border-radius: 12px; border: 1px solid var(--border-default);
    background: rgba(255,255,255,0.03); color: var(--fg1); cursor: pointer;
    font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  }
  .faq-viewall:hover { border-color: rgba(255,255,255,0.22); }
  .faq-viewall i { font-size: 18px; color: var(--magenta-300); }

  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px; }
  .footer-grid > :first-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   13 · BEACON — keep launcher; on phones tap-to-fullscreen.
   The compact panel is suppressed on mobile (JS routes to fullscreen),
   but harden the CSS so a stray compact panel still behaves.
   ===================================================================== */
@media (max-width: 560px) {
  .bcl { right: 16px; bottom: 16px; }
  .bcl-orb { width: 56px; height: 56px; }
  /* if the compact panel ever shows on a phone, make it a sheet */
  .bcl-panel { width: calc(100vw - 24px); max-width: none; }
  .bcl-thread { max-height: min(52vh, 420px); }
}

/* =====================================================================
   14 · MOTION — keep entrances, calm the heavy ambient loops on phones
   so scrolling stays smooth and battery-friendly. Entrances (reveal /
   card-mat / hero word-waves) are untouched.
   ===================================================================== */
@media (max-width: 760px) {
  /* slow the infinite arc + bloom breathing (less compositing churn) */
  .hh-layers { animation-duration: 12s !important; }
  .hh-bloom { animation-duration: 20s !important; }
  /* showcase parallax is JS-driven off scroll; neutralize the per-card drift
     so touch scrolling doesn't fight repaints */
  .sw-shot { transform: none !important; }
  .sw-card:hover .sw-shot { transform: none !important; }
}