/* ============================================================================
   mobile.css — One Zyme marketing site mobile optimization
   Loaded on every page AFTER the page's own styles so these rules win.
   Desktop rendering is untouched: every rule lives inside a media query
   except the hamburger button styling (which is hidden >=900px).
   Breakpoints:
     900px — nav no longer fits horizontally -> hamburger menu
     640px — full phone layout (type, grids, gutters, bespoke visuals)
   ============================================================================ */

/* ─── A. Hamburger nav button (all widths; hidden >=900px) ────────────────── */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0 10px;
  margin-left:auto;
  background:transparent;
  border:1px solid var(--oz-on-dark-line-2);
  border-radius:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:var(--oz-on-dark-1);
  border-radius:2px;
  transition:transform .25s var(--oz-ease), opacity .2s var(--oz-ease);
}
/* Animate to an X when the header is open */
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (min-width:901px){
  .nav-toggle{display:none !important;}
}

/* ─── B. <=900px — collapse the top nav into a hamburger menu ─────────────── */
@media (max-width:900px){
  .nav-toggle{display:flex;}

  /* Header can grow to fit the open menu; keep the logo row on top. */
  .header-inner{
    flex-wrap:wrap;
    height:auto;
    min-height:76px;
    row-gap:0;
    align-items:center;
  }

  /* Hide the desktop nav + CTA rows by default (closed menu). */
  .nav,
  .header-cta{display:none;}

  /* When open, reveal a full-width vertical menu below the logo row. */
  header.nav-open{height:auto;}
  header.nav-open .header-inner{
    max-height:calc(100vh - 12px);
    overflow-y:auto;
  }
  header.nav-open .nav,
  header.nav-open .header-cta{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    flex-basis:100%;
  }
  header.nav-open .nav{
    gap:2px;
    padding:16px 0 8px;
    border-top:1px solid var(--oz-on-dark-line);
    margin-top:14px;
  }

  /* Top-level nav links become full-width tappable rows. */
  header.nav-open .nav > a,
  header.nav-open .nav-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 4px;
    font-size:16px;
    font-weight:500;
    color:var(--oz-on-dark-1);
    border-bottom:1px solid var(--oz-on-dark-line);
  }
  header.nav-open .nav-item{width:100%;}

  /* "Platform Solutions" panel expands INLINE (static, single column)
     instead of on hover — so it works on touch. */
  header.nav-open .nav-panel{
    position:static;
    display:block;
    min-width:0;
    width:100%;
    background:transparent;
    border:0;
    border-radius:0;
    padding:8px 0 4px;
    box-shadow:none;
    z-index:auto;
  }
  header.nav-open .nav-panel::before{content:none;}
  header.nav-open .nav-panel-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  header.nav-open .nav-panel-col a{font-size:14.5px;padding:10px 12px;}
  header.nav-open .nav-panel-foot{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* The header CTAs stack at the bottom of the open menu. */
  header.nav-open .header-cta{
    gap:10px;
    padding:16px 0 20px;
    border-top:1px solid var(--oz-on-dark-line);
    margin-top:8px;
  }
  header.nav-open .header-cta .sep{display:none;}
  header.nav-open .header-cta > a{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:13px 18px;
  }
  header.nav-open .header-cta .btn{min-height:46px;}
}

/* ─── C. <=640px — phone layout ───────────────────────────────────────────── */
@media (max-width:640px){
  /* Kill horizontal scroll from off-canvas decorative elements. */
  html,body{overflow-x:hidden;}

  /* Tighter gutters and section rhythm. */
  .container{padding:0 20px;}
  section.block,
  .bigquote{padding:64px 0 !important;}

  /* Type clamps applied to bare headings so they override every
     section-scoped heading site-wide. */
  h1{font-size:clamp(30px,8.2vw,44px) !important;}
  h2{font-size:clamp(26px,6.8vw,38px) !important;}
  h3{font-size:clamp(20px,5vw,26px) !important;}
  blockquote{font-size:clamp(22px,5.6vw,30px) !important;}

  /* Wide body copy down to a comfortable phone size. */
  .hero p.sub,
  .section-head p,
  .legacy-head p,
  .engine-head p,
  .confs-head p,
  .bench-head p,
  .closer p{font-size:16px !important;}

  /* All multi-column grids collapse to a single column ... */
  [class*="grid"]{grid-template-columns:1fr !important;}
  /* Let the 1fr tracks shrink to the container: without min-width:0 a grid
     item with wide/overflowing content (e.g. the hero radar scene) forces the
     track — and every sibling column — past the viewport, clipping copy. */
  [class*="grid"] > *{min-width:0;}
  /* ... EXCEPT the TPP matrix, an intentional horizontal-scroll table
     inside .tpp-scroll{overflow-x:auto}. Do not flatten it. */
  .tpp-grid{grid-template-columns:230px repeat(4,minmax(150px,1fr)) !important;}

  /* Tap targets. */
  .btn{min-height:46px;}
  footer a{display:inline-block;padding:6px 0;}

  /* CTA / credential rows wrap instead of overflowing. */
  .hero-ctas,
  .closer-ctas,
  .hero-cred{flex-wrap:wrap;}
}

/* ─── D. <=1180px — stacked hero scene ────────────────────────────────────────
   index.html:642 already stacks .hero-grid to one column at <=1180px — that is
   the site's own definition of "too narrow for two columns", so this block
   matches it rather than inventing a second breakpoint. What it does NOT do is
   resize the scene for a stacked layout: the radar stays 440px tall in a
   full-width row and the four chips keep their authored offsets, which are a
   percentage of a now much wider .motif-wrap. The result is a sprawling hero
   with the chips flung into the viewport's corners and the overhanging one
   (right:-12%) sheared off by .hero{overflow:hidden}.

   So: compact the scene and pin the chips to the corners of the wrap. Sizes
   are fluid rather than fixed so this reads correctly at both ends of the
   range — a 390px phone and a 1180px laptop are both "stacked" but want very
   different artwork. See D2 for 1181-1415px, which stays two-column.
   ------------------------------------------------------------------------- */
@media (max-width:1180px){
  /* Stacking itself comes from the authored guard; just let the tracks shrink. */
  .hero-grid > *{min-width:0;}

  /* Hero headline: the rotating word is white-space:nowrap so the desktop
     layout never jumps mid-swap. On a narrow screen the long phrases in the
     rotation ("competitive intelligence.", "search and evaluation.") are far
     wider than the viewport and run off the right edge. Let them wrap.
     The extra line is only *reserved* below 640px — see section F — because
     that is where the h1 clamp gets small enough for a phrase to actually
     wrap; reserving it here would leave a dead line on tablets. */
  .hero h1 .swap-line em{white-space:normal;}

  /* Compact the radar scene. Sizes are fluid so one rule suits the whole
     stacked range: the clamp floors reproduce the phone values exactly
     (250/290/300 at <=640px) and grow to a laptop-appropriate size by 1180px.

     The wrap is also width-capped. The chips are pinned to its corners, so
     across a full-width stacked row they would sit ~1000px apart with the
     radar marooned between them; capping keeps the scene reading as one
     cluster, and is a no-op on a phone where the container is already
     narrower. It must be width:min(100%,560px) rather than max-width — auto
     margins on a grid item switch it from stretch to content-sized, which
     collapses the wrap onto the radar and squeezes the chips with it. */
  .motif-wrap{height:clamp(300px,34vw,380px) !important;width:min(100%,560px);margin-left:auto;margin-right:auto;}
  .motif-svg{width:clamp(250px,30vw,340px) !important;height:clamp(250px,30vw,340px) !important;}
  .orbit-outer{width:clamp(290px,34vw,390px) !important;height:clamp(290px,34vw,390px) !important;}
  .radar{width:clamp(250px,30vw,340px) !important;height:clamp(250px,30vw,340px) !important;}
  /* Fixed width, not shrink-to-fit: the chip contents are swapped on a timer
     by the hero JS, and a shrink-to-fit box re-measures on every swap — which
     lets a longer rotation spill over the chip edge mid-transition.
     box-sizing must be border-box here: the chips are content-box by default,
     so a bare width:46% renders 46% + 22px padding + 2px border. That pushes
     the left and right chip in each row into a 20px overlap, and the left
     chip's opaque backdrop then paints over the right chip's first
     characters — which reads as clipped text, not as an overlap. */
  /* .motif-svg carries z-index:2 and the chips only z-index:auto. On desktop
     the chips sit outside the 540px SVG box so it never showed; once they are
     pulled into the corners of a 300px wrap they land over the SVG and the
     target circles paint on top of the chip text. Lift the chips above it. */
  /* min(46%, 260px): 46% keeps two chips side by side on a phone (161px at
     390px wide), the 260px ceiling stops them ballooning to ~475px each once
     the stacked wrap is laptop-width. */
  .signal-chip{box-sizing:border-box;font-size:10.5px;padding:8px 11px;width:min(46%,260px);max-width:46% !important;z-index:3;}
  .signal-chip .v{font-size:11px;}
  .signal-chip .tag{font-size:9px;}
  .signal-chip--a{top:0 !important;right:0 !important;left:auto !important;bottom:auto !important;}
  .signal-chip--d{top:0 !important;left:0 !important;right:auto !important;bottom:auto !important;}
  .signal-chip--b{bottom:0 !important;left:0 !important;top:auto !important;right:auto !important;}
  .signal-chip--c{bottom:0 !important;right:0 !important;top:auto !important;left:auto !important;}
}

/* ─── D2. 1181-1415px — keep the two-column hero's chips on screen ────────────
   Above 1180px the hero is two columns (the authored guard no longer applies)
   but the right-hand column does not reach the artwork's drawn width until
   about 1440px. In between, the chips — positioned as a percentage of
   .motif-wrap and deliberately overhanging it (right:-12%) — are pushed past
   the viewport and .hero{overflow:hidden} slices them mid-word.

   Measured worst case: 35px cut at 1280px, 27px at 1366px, still 2px at
   1416px, clean by 1425px. Both 1280 and 1366 are extremely common laptop
   widths, so this affects a large share of desktop visitors on the first
   thing they see. Pulling the overhang back to the edge of the wrap keeps the
   authored composition — the chips still ring the radar — with nothing
   running off screen.

   The upper bound is 1439px rather than the ~1420px where the cut actually
   disappears: that last stretch is only a couple of pixels of overhang, and
   pinning the boundary to a hairline measurement invites it drifting back
   with a font or metric change. From 1440px up the artwork has comfortably
   more room than it was drawn for and is left exactly as authored.
   ------------------------------------------------------------------------- */
@media (min-width:1181px) and (max-width:1439px){
  .signal-chip--a{right:0;}
  .signal-chip--b{right:0;}
  .signal-chip--d{left:0;}
}

/* ─── E. <=680px — Models & Data radial diagram ───────────────────────────────
   The ten labels are absolutely positioned around a circle (left:89.4%,
   translate(-100%) etc. via inline styles), so they sit outside the ring and
   need roughly 160px of clear space on each side. index.html already steps the
   ring down to max-width:440px at <=1080px; below ~660px even that no longer
   leaves room and the labels land half off the viewport — no amount of further
   shrinking fixes it. Under 680px the orbit is retired and the same ten layers
   render as a legible two-column list beneath the core motif.
   ------------------------------------------------------------------------- */
@media (max-width:680px){
  .radial{max-width:100% !important;aspect-ratio:auto;margin-top:28px;}
  .radial-ring,
  .radial-spokes,
  .radial-sweep{display:none;}
  .radial-stage{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .radial-core{
    position:relative;
    left:auto;top:auto;
    width:72px;height:72px;
    transform:none;
    margin:0 auto 22px;
    grid-column:1 / -1;
  }
  /* Inline left/top/transform on .radial-label-pos must be overridden.
     display:flex (rather than height:100% on the pill) is what makes the rows
     size correctly: a percentage height inside an auto-sized grid row is a
     cyclic dependency, so the track was measured at ~57px while the pill
     rendered 79-95px and every row overlapped the one below it by ~16px.
     As a flex container the item reports the pill's real height to the track,
     and stretch alignment still squares up both columns in a row. */
  .radial-label-pos{position:static !important;transform:none !important;display:flex;}
  .radial-label{
    flex:1;
    padding:11px 13px;
    /* A pill radius reads as a lozenge once rows wrap to 2-3 lines. */
    border-radius:14px;
    white-space:normal;
    align-items:flex-start;
  }
  .radial-label .glowdot{border-radius:14px;}
  /* The authored glow pulse peaks at transform:scale(1.05). On the orbit each
     label floats in open space, but in a two-column grid a 5% scale-up is ~7px
     per side against an 8px gutter, so the highlighted pill collides with its
     neighbour. Swap in the same colour pulse minus the scale. */
  .radial-label{animation-name:oz-radial-label-glow-flat;}
  /* Labels 07-10 are authored row-reverse (and .n order:2) so they read
     outward-left on the orbit. In a list they all read left-to-right:
     number, dot, then title. */
  .radial-label.left{flex-direction:row;transform-origin:center;}
  .radial-label.left .n{order:-1;}
  .radial-label.left .t{order:1;}
  .radial-label .t{font-size:12px;max-width:none;line-height:1.3;}
  .radial-label .n{display:block;flex-shrink:0;}
  .radial-label .dot{margin-top:5px;}
}

/* ─── F. <=640px — remaining homepage bespoke visuals ─────────────────────── */
@media (max-width:640px){
  /* Reserve the second headline line here, where the h1 clamp is small
     enough that the long rotating phrases genuinely wrap, so the copy below
     doesn't jump every 2.5s as the word swaps. */
  .hero h1 .swap-line{min-height:2.15em;}

  /* Legacy comparison table — kept 2-column, tightened hard. */
  .compare-head{grid-template-columns:1fr 1fr !important;}
  .compare-row{grid-template-columns:1fr 1fr !important;}
  .compare-head > *,
  .compare-row > *{padding:14px 12px !important;}
  /* Both cells reserve a 48px text indent for the → / dash markers, which
     are pinned at left:24px. With the tightened padding above, the markers
     would sit on top of the copy — pull both in together. */
  .compare-row .cell.legacy-cell,
  .compare-row .cell.oz-cell{padding-left:28px !important;}
  .compare-row .cell.legacy-cell::after{left:10px;}
  .compare-row .cell.oz-cell::before{left:9px;top:15px;}
  .compare-row,
  .compare-head{font-size:13px;}

  /* Security checklist — drop the 2-column dividers once stacked. */
  .sec-item{padding:20px 4px;border-right:0 !important;}

  /* Engine cards */
  .ecard-viz{min-height:340px !important;}
  .eflow{padding:16px;gap:10px;}
  .ecore{min-width:0 !important;}
  .erank{min-width:0 !important;}
  .ealert{max-width:220px !important;}

  /* Benchmark bars.
     .plot and .plot-labels are repeat(5,1fr) grids whose min-content width
     (5 x 38px logo + 4 x 14px gap + padding) exceeds the phone viewport,
     pushing .chart ~27px past the right edge. Shrink the logo, the gap and
     the vendor names so five columns fit. */
  .bench-prompt{font-size:13px;padding:14px 16px;}
  /* overflow:hidden contains the lead bar's glow (0 -12px 40px cyan). The
     tighter side padding below puts that bar ~14px from the card edge, so on
     a phone the 40px blur spilled past the rounded border and washed a blue
     streak across the section background. */
  .chart{padding:22px 14px 18px !important;overflow:hidden;}
  /* Title + unit no longer fit side by side once the card is phone-width. */
  .chart-cap{flex-direction:column;align-items:flex-start;margin-bottom:20px;gap:4px;}
  .chart-cap h3{font-size:19px;}
  .plot,
  .plot-labels{gap:6px !important;}
  .plot{height:240px;}
  .plot .val{font-size:12px;}
  .plot .col.lead .val{font-size:13px;}
  .lbl{gap:6px;padding-top:10px;}
  .lbl .logo{width:30px;height:30px;border-radius:8px;}
  .lbl .logo .oz1z{font-size:16px;}
  .lbl .nm{font-size:9.5px;line-height:1.2;overflow-wrap:anywhere;}
  .plot-labels{font-size:11px;}

  /* Conference scene. The sweeping cards are min-width:148px + 26px side
     padding — 200px of a ~350px lane — so they read as slabs rather than
     drifting cards and their labels collide with the lane edge. Scale them
     to the canvas. */
  .confs-viz{height:440px !important;}
  .confs-card{min-width:0 !important;min-height:40px !important;padding:10px 14px !important;}
  .confs-card .ctext{font-size:12px;}
}

/* ─── G. Keyframes referenced by the mobile overrides above ───────────────────
   Mirrors index.html's radial-label-glow, minus the transform:scale(1.05) —
   see the note in section E. Declared at top level (a keyframe name is global)
   and only opted into inside the <=680px block.
   ------------------------------------------------------------------------- */
@keyframes oz-radial-label-glow-flat{
  0%{border-color:var(--oz-cyan);background:rgba(6,182,212,0.10);}
  7%{border-color:var(--oz-cyan-ring);}
  16%{border-color:var(--oz-on-dark-line-2);background:rgba(10,22,40,0.72);}
  100%{border-color:var(--oz-on-dark-line-2);background:rgba(10,22,40,0.72);}
}