/* ============================================================================
   Market Right — landing page styles

   THIS IS THE SINGLE SOURCE for the page's styling — the static build emits it
   as site.css rather than keeping its own copy, so editing it here (or in
   Claude Design) is what changes production. It also means the Claude Design
   preview shows the real responsive behaviour: view an artboard at 390px wide
   and you get the phone layout.

   The design is authored entirely in inline style attributes (that's how Claude
   Design emits it), which means every override here needs !important: an inline
   style beats any selector no matter how specific. That is also why the layout
   containers carry class hooks (.pad-sec, .proof-row, .td-grid, …) — a media
   query needs something to aim at. Keep them on their elements; the build has
   no way to put them back.

   Breakpoints
     1100px  the problem tiles lose their captions
      980px  wide multi-column blocks stack
      820px  the nav drops its section links (they move to the footer)
      768px  phone layout
      560px  small phone type scale
   ========================================================================== */

/* ---- base ---------------------------------------------------------------- */

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: #F3F1EC;
  color: #16191A;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #B4472B }
a:hover { color: #16191A }
::selection { background: #B4472B; color: #F3F1EC }

/* nothing may push the page sideways */
img, video { max-width: 100% }

@keyframes targetPing {
  0%   { transform: scale(1);    opacity: .9 }
  75%  { transform: scale(1.9);  opacity: 0 }
  100% { transform: scale(1.9);  opacity: 0 }
}
@keyframes targetBreath {
  0%, 100% { transform: scale(1) }
  50%      { transform: scale(1.12) }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: none }
}

/* Not referenced by the current design, kept because this stylesheet is the
   design source and an element using them may come back. */
@keyframes illoA {
  0%, 42%  { opacity: 1 }
  52%, 90% { opacity: 0 }
  100%     { opacity: 1 }
}
@keyframes illoB {
  0%, 42%  { opacity: 0 }
  52%, 90% { opacity: 1 }
  100%     { opacity: 0 }
}
@keyframes heroCard {
  from { opacity: 0; transform: translateY(16px) scale(.98) }
  to   { opacity: 1; transform: none }
}
@keyframes heroBar {
  from { transform: scaleY(0) }
  to   { transform: scaleY(1) }
}
@keyframes heroFloat {
  from { transform: translateY(0) }
  to   { transform: translateY(-6px) }
}

/* ---- interaction states -------------------------------------------------- */
/* The elements these target keep their style-hover / style-focus attributes,
   which is what drives hover inside Claude Design. The static build strips those
   attributes and swaps in these classes, which carry the same values — so hover
   behaves identically in both places. */

.h-invert, .h-rust, .h-rust-bg, .h-underline {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.h-invert:hover   { background: #16191A !important; color: #F3F1EC !important }
.h-rust:hover     { background: #B4472B !important; color: #F3F1EC !important }
.h-rust-bg:hover  { background: #B4472B !important }
.h-underline:hover{ border-bottom: 1px solid #B4472B !important; color: #B4472B !important }
.h-card:hover     { border-color: #B4472B !important; box-shadow: 0 20px 44px -28px rgba(22,25,26,.3) !important }
.f-field:focus    { outline: none !important; border-color: #16191A !important }

/* Keyboard users get the same affordance the mouse gets. */
.h-invert:focus-visible, .h-rust:focus-visible, .h-rust-bg:focus-visible {
  outline: 2px solid #B4472B; outline-offset: 3px;
}

/* ---- 04 "How to judge me": portrait / disc hover ------------------------- */
/* Hovering the portrait cell pushes the pale disc back and brings the cut-out
   forward. The disc (#judgeC2) carries pointer-events:none so it cannot be the
   hover target itself — #judgeCell is.

   These use `scale`, the standalone property, NOT `transform: scale()`. The
   scroll entrance already owns `transform` on both elements (and script writes
   it inline), so sharing that property meant hover could only be handed over
   after the entrance finished — which made it dead on arrival for anyone who
   hovered on the way in. `scale` composes with `transform` instead of replacing
   it, so hover works immediately and needs no !important and no gate.
   Its easing lives in each element's inline transition list, next to the
   entrance easings, so the design file stays the single source. */
/* grows from its feet, so it reads as stepping forward rather than inflating */
#judgeImg { transform-origin: 50% 100% }

@media (hover: hover) and (pointer: fine) {
  #judgeCell:hover #judgeC2 { scale: .93 }
  #judgeCell:hover #judgeImg { scale: 1.045 }
}

/* ---- footer section links ------------------------------------------------ */
/* Hidden on desktop, where the sticky nav already carries them. They take over
   below 820px, when the nav has to give up its link row. */

.footer-links { display: none; gap: 4px 18px; flex-wrap: wrap; align-items: center }
/* these sit in the footer's dark legal bar, so they take its palette — and get
   vertical padding, because they only ever appear on touch screens */
.footer-links a { color: #8A9094; text-decoration: none; padding: 10px 0 }
.footer-links a:hover { color: #E5B98F }

/* The badge's inline width:132px sits next to padding:14px, so under the
   default content-box the circle is really 160px while its own
   left: calc(50% - 66px) assumes 132 — it lands 14px right of centre at every
   width. border-box makes the declared width the real one. */
.foot-badge { box-sizing: border-box }

/* ========================================================================== */
@media (max-width: 1100px) {
  /* Captions and drop shadows sit outside the tile box and start colliding
     with the centred copy well before the tiles themselves do. */
  .prob-tile div { display: none !important }
}

/* ========================================================================== */
@media (max-width: 980px) {
  /* The 96px number gutter ("03", "05", …) costs more than it earns once the
     text column drops under ~600px. */
  .numgrid { grid-template-columns: 1fr !important; gap: 4px !important }

  /* "Everyone else" vs "Market Right" — the divider becomes a horizontal rule */
  .compare-grid { grid-template-columns: 1fr !important }
  .compare-grid > div { padding: 28px 24px !important }
  .compare-grid > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid #B9B3A4 !important;
  }

  /* Teardown: copy column over the sample-page card */
  .td-grid { grid-template-columns: 1fr !important; gap: 36px !important }
  .td-sample { justify-self: stretch !important; max-width: none !important }

  /* Two ways to start: form over WhatsApp */
  .start-grid { grid-template-columns: 1fr !important; gap: 32px !important }
  .td-wa {
    border-left: none !important;
    border-top: 1px solid #D5D1C6 !important;
    padding-left: 0 !important;
    padding-top: 28px !important;
  }
}

/* ========================================================================== */
@media (max-width: 820px) {
  /* The hero's margin-top:-60px assumes a 60px bar, so the nav must not grow a
     second row — the four section links move to the footer instead. */
  .nav-links { display: none !important }
  .footer-links { display: flex }
  .pad-nav { padding: 0 20px !important }
  /* 44px, the minimum comfortable touch target, inside the 60px bar */
  .nav-right > a { padding: 14px 16px !important }
}

/* ========================================================================== */
@media (max-width: 768px) {

  /* ---- section rhythm: 32px gutters to 20px, tighter vertical ------------ */
  .pad-intro { padding: 26px 20px !important }
  .pad-cred  { padding: 44px 20px 40px !important }
  .pad-sec   { padding: 56px 20px !important }
  .pad-close { padding: 56px 20px 60px !important }
  .pad-price { padding: 56px 20px 60px !important }
  .pad-about { padding: 56px 20px !important }
  /* the wordmark block keeps a tall top pad — the badge overhangs into it */
  .pad-footbig { padding: 96px 20px 44px !important }
  .pad-foot  { padding: 22px 20px !important }

  /* ---- hero: video on top, copy below ----------------------------------- */
  /* min-height:620px is taller than a small phone's viewport, which stops the
     sticky child from pinning and clips the copy behind overflow:hidden. */
  /* The hero's inline margin-top:-60px tucks it under the sticky nav. On desktop
     that is deliberate — the bar floats over the white copy column. On mobile
     #heroMedia is order:-1, so the artwork is the first row and the nav sat on
     top of it. Start the hero below the bar, and pin the grid below it too, so
     the image stays clear of the nav for the whole scrub rather than only at
     scroll 0. Rows are percentages so they follow the shortened height. */
  #top { margin-top: 0 !important }
  #heroGrid {
    top: 60px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 44% 1fr !important;
    height: calc(100vh - 60px) !important;
    min-height: 0 !important;
    align-items: start !important;
  }
  #heroMedia {
    order: -1;
    border-left: none !important;
    border-bottom: 1px solid #D5D1C6;
  }
  /* the copy row is whatever the video leaves over, so centre in it rather than
     leaving a block of dead space under the buttons */
  #heroCopy {
    padding: 30px 20px 36px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #heroCopy h1 { font-size: clamp(32px, 8.4vw, 44px) !important }
  #heroCopy a[href="#teardown"] { padding: 15px 20px !important }

  /* "From AED 2,500/month · month-to-month · max 3 clients" is set nowrap for
     the desktop baseline row; on one column it just has to wrap. */
  [data-screen-label="Hero intro"] [style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* ---- credibility: three stat cards to two ----------------------------- */
  .cred-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important }
  .cred-grid > div { padding: 26px 18px 24px !important }
  .brand-row { font-size: 12px !important; column-gap: 12px !important }

  /* ---- problem: tiles into a strip above the copy ----------------------- */
  /* At full size the left/right tiles land straight on top of the centred
     statement. Shrinking them into a row along the top clears the text column
     and keeps the "which one is active" scaling readable. */
  #probStick { height: 100vh !important }
  /* clears the crown's lower pair (17% + a 74px tile) so the copy nests under
     the arc instead of colliding with it */
  /* A large copy of the active tile fills the space the arc leaves. Phone only —
     desktop's 240px tiles already carry that weight, and a fifth focal element
     there would just be clutter. It sits in the flex flow rather than absolutely,
     so the whole group stays balanced as the copy length changes per step. */
  /* Shifted up with a relative offset, not a negative margin, so it moves into
     the arc's opening without dragging the copy below it along. */
  #probBig { display: block !important; position: relative; top: -100px }
  .prob-stage { padding: 26vh 20px 0 !important }
  /* The three text blocks lift 50px on their own. Doing it here rather than via
     the stage's padding matters: padding feeds the flex centring, so changing it
     would drag the icon along too — `> div` reaches the eyebrow, the copy and the
     scroll hint, and skips the icon because that is an <img>. */
  .prob-stage > div { position: relative; top: -50px }
  .prob-stage > div:last-child { margin-top: 24px !important }
  /* A crown, not a straight row: the inner pair sits high and the outer pair
     drops away, so the copy nests in the opening — the same shape desktop makes
     with its 5%/30% pairing, just shallower to fit a phone's width. The inner
     pair's 8% also keeps it clear of the 60px sticky nav, which would otherwise
     slice the top off the tiles. */
  .prob-tile { width: 68px !important; margin: 0 !important }
  #probT1 { left: 1% !important;  top: 17% !important; bottom: auto !important }
  #probT2 { left: 25% !important; top: 8% !important }
  #probT3 { right: 25% !important; top: 8% !important }
  #probT4 { right: 1% !important; top: 17% !important }

  /* ---- problem close ---------------------------------------------------- */
  [data-screen-label="Problem close"] [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [data-screen-label="Problem close"] [style*="grid-template-columns:1.1fr .9fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ---- why me + pricing ------------------------------------------------- */
  /* the inline 10px padding leaves this CTA at 37px on touch */
  [data-screen-label="Why me + pricing"] a.h-rust { padding: 13px 16px !important }
  [data-screen-label="Why me + pricing"] [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 8px 0 48px !important;
  }

  /* ---- proof: number + thumbnail on one row, story beneath -------------- */
  .proof-row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px 18px !important;
    align-items: center !important;
    padding: 24px 0 !important;
  }
  .proof-row > div { flex: none !important }
  .proof-row > img { flex: none !important; width: 100% !important; height: 88px !important }
  .proof-row > div:last-child { grid-column: 1 / -1 !important }
  .proof-row [style*="font-size:64px"] { font-size: 44px !important }
  [data-screen-label="Proof"] [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* ---- how to judge me: portrait over copy ------------------------------ */
  #judgeGrid { grid-template-columns: 1fr !important }
  /* Side by side, the discs spill harmlessly into the column gutter. Stacked,
     the lower one (z-index:2) drops straight onto the quote below it, so the
     portrait cell has to do its own clipping. */
  #judgeGrid > div:first-child { min-height: 320px !important; overflow: hidden !important }
  #judgeGrid > div:last-child { padding: 44px 20px 56px !important }
  /* the decorative discs are sized for a 600px column, not a 375px one */
  #judgeC1 { left: -60px !important; top: 56px !important; width: 340px !important; height: 340px !important }
  #judgeC2 { left: -110px !important; bottom: -170px !important; width: 320px !important; height: 320px !important }

  /* ---- engagement: without / with, stacked ------------------------------ */
  #engageCards { grid-template-columns: 1fr !important; gap: 18px !important }
  #engageCards > div { padding: 24px 20px 22px !important }

  /* ---- about ------------------------------------------------------------ */
  #aboutGrid { grid-template-columns: 1fr !important; gap: 40px !important }
  #aboutGrid > div:first-child { padding-right: 0 !important }
  #aboutGrid h2, #aboutGrid p { padding-right: 0 !important }
  /* Out of the absolute corner and into the flow, above the heading. The width
     matters: the pill under the avatar is centred by text-align, so a
     full-width box would centre it on the page while the 96px avatar stayed
     left. Shrinking the box to the avatar keeps the two locked together. */
  #aboutPortrait {
    position: static !important;
    margin: 0 0 22px !important;
    width: 96px;
  }
  #aboutGrid > div:last-child { padding: 36px 24px !important; min-height: 0 !important }

  /* ---- faq -------------------------------------------------------------- */
  .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important }

  /* ---- teardown --------------------------------------------------------- */
  .phase-row { flex-direction: column !important }
  .phase-row > div + div {
    border-left: none !important;
    border-top: 1px solid #D5D1C6 !important;
  }
  .td-formcard { padding: 22px 18px !important }
  .start-grid { gap: 26px !important }
  /* below 16px, iOS Safari zooms the whole page when a field takes focus */
  #teardownForm input, #teardownForm select, #teardownForm button {
    font-size: 16px !important;
  }
}

/* svh tracks the visible viewport as mobile browser chrome slides away, which
   vh does not — so the pinned sections stop jumping mid-scroll. Kept separate
   from the block above so browsers without it keep the vh fallback. */
@supports (height: 100svh) {
  @media (max-width: 768px) {
    #heroGrid { height: calc(100svh - 60px) !important }
    #probStick { height: 100svh !important }
  }
}

/* ========================================================================== */
@media (max-width: 560px) {
  .pad-sec, .pad-close, .pad-price, .pad-about {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #heroCopy h1 { font-size: clamp(29px, 8.4vw, 36px) !important }

  /* two stat cards side by side stop fitting their nowrap numerals */
  .cred-grid { grid-template-columns: 1fr !important }
  .brand-row { font-size: 11px !important; letter-spacing: .08em !important }

  /* narrower phone: smaller tiles, and the inner pair pulls in so the four
     still read as an arc rather than a line */
  .prob-tile { width: 66px !important }
  #probT2 { left: 25% !important }
  #probT3 { right: 25% !important }
  .prob-stage { padding: 26vh 16px 0 !important }
  .prob-stage h2 { font-size: 26px !important }
  .prob-stage p { font-size: 15px !important }

  .proof-row [style*="font-size:64px"] { font-size: 38px !important }
  .proof-row > img { height: 76px !important }

  /* the 132px badge is a third of a small phone's width — and it overhangs the
     section above, so its top offset shrinks with it */
  .foot-badge {
    width: 104px !important;
    height: 104px !important;
    top: -44px !important;
    left: calc(50% - 52px) !important;
    font-size: 10px !important;
    padding: 10px !important;
  }
  .pad-footbig { padding: 78px 16px 36px !important }
}

/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { animation: none !important }
}