/* ==========================================================================
   Responsive — the prototype was desktop-only; these are the added breakpoints.
   Desktop (≥1381px) renders exactly as designed; everything below reflows.
   ========================================================================== */

/* The magnetic cursor only exists where there's a real pointer. */
@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-dot { display: block; }
  /* Hide the OS cursor over the page body but keep it on text inputs. */
  .has-custom-cursor,
  .has-custom-cursor a,
  .has-custom-cursor button { cursor: none; }
  .has-custom-cursor input,
  .has-custom-cursor textarea,
  .has-custom-cursor .stage3d__canvas { cursor: auto; }
  .has-custom-cursor .stage3d__canvas { cursor: grab; }
  .has-custom-cursor .stage3d__canvas.is-dragging { cursor: grabbing; }
}

/* --------------------------------------------------------------------------
   ≤1380 — architecture drops its right rail below the stage
   -------------------------------------------------------------------------- */
@media (max-width: 1380px) {
  .arch__grid { grid-template-columns: 272px minmax(0, 1fr); }
  /* The narrower rail can't hold name and zone on one line; the zone is
     repeated as a chip in the detail card, so drop it here. */
  .layerbtn__zone { display: none; }
  .archdetail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .archdetail__card { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ≤1240 — hero and split sections stop competing for width
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  :root { --gutter: 44px; --sec-y: 104px; }

  .hero { padding-top: 172px; }
  .hero__inner { grid-template-columns: 1fr; gap: 54px; }
  .hero__cardwrap { max-width: 520px; }
  .hero__rings { display: none; }

  .split,
  .split--flip { grid-template-columns: 1fr; gap: 54px; }
  /* Keep the map above its copy so the illustration still leads. */
  .split--flip .mapwrap { order: -1; }

  .tryit__grid { grid-template-columns: 1fr; }
  .dash__grid  { grid-template-columns: 1fr; }
  .flowpanel   { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   ≤1080 — desktop nav becomes the drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .navtoggle { display: flex; }
  .nav-cta .btn--cyan-outline { display: none; }

  .stagetabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .stagetab__name { white-space: normal; }

  .track__steps--6 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤1000 — architecture goes single column; hub unwinds to a list
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .arch__grid { grid-template-columns: minmax(0, 1fr); }
  .archdetail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layerrail  { order: 2; }
  .stage3d    { order: 1; height: clamp(420px, 56vh, 620px); min-height: 420px; }
  .archdetail { order: 3; }

  /* Connector curves are meaningless once the grid collapses. */
  .hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }
  .hub__svg { display: none; }
  .hubcore {
    grid-column: 1 / -1;
    grid-row: auto;
    order: -1;
    padding: 34px;
  }
  .spoke--a, .spoke--b, .spoke--c, .spoke--d,
  .spoke--e, .spoke--f, .spoke--g, .spoke--h {
    grid-column: auto;
    grid-row: auto;
  }

  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-3     { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .statband { grid-template-columns: 1fr; gap: 32px; }
  .statband__item {
    border-inline-end: 0;
    padding-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
  }
  .statband__item:last-child { border-bottom: 0; padding-bottom: 0; }

  .builder__sticky { position: static; }
}

/* --------------------------------------------------------------------------
   ≤880 — two-column card grids become one
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  :root { --gutter: 30px; --sec-y: 88px; }
  html { scroll-padding-top: 110px; }

  .section, .flow { padding-inline: var(--gutter); }
  .section--tight, .flow, .arch { padding-block: var(--sec-y); }

  .grid-2, .grid-3, .grid-cards,
  .minigrid, .fieldgrid, .kpis,
  .deploy__grid { grid-template-columns: 1fr; }
  .grid-3 > *:last-child:nth-child(odd) { grid-column: auto; }

  .archdetail { grid-template-columns: 1fr; }

  .optgrid { grid-template-columns: 1fr; }
  .track__steps--4, .track__steps--6 { grid-template-columns: repeat(2, 1fr); }

  .hero { padding: 150px var(--gutter) 80px; min-height: 0; }
  .hero__lede { font-size: 20px; }
  .stats { gap: 28px; }
  .scrollcue { display: none; }

  .dissolve { height: 420px; }
  .mapwrap  { min-height: 440px; }
  .mapwrap i:nth-of-type(1) { width: 320px; height: 320px; }
  .mapwrap i:nth-of-type(2) { width: 220px; height: 220px; }

  .stagetabs { grid-template-columns: repeat(2, 1fr); }

  .quote { padding: 38px 32px; gap: 24px; }
  .quote__text { font-size: 22px; }
  .quote__body { min-width: 0; }

  .numcard    { padding: 34px 28px; }
  .statband   { padding: 34px 28px; }
  .deploycard { padding: 32px 28px; }
  .dashcard   { padding: 28px 24px; }
  .track      { padding: 28px 24px; }
  .stepcard   { padding: 24px 22px; }
  .trypanel   { padding: 28px 24px; }
  .receipt    { padding: 32px 24px; }
  .flowpanel__main { padding: 26px 22px; }
  .does, .sees { padding: 24px 22px; }

  .barrow { flex-wrap: wrap; gap: 10px; }
  .barrow__label { width: auto; flex: 1 0 auto; font-size: 15px; }
  .barrow__val   { order: 3; }
  .bartrack      { flex: 1 1 100%; order: 4; }

  .modal { padding: 0; }
  .modal__sheet {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   ≤620 — phone
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --gutter: 20px; --sec-y: 72px; }

  .utility { padding-inline: var(--gutter); gap: 14px; }
  .utility__status { display: none; }
  .utility__links { width: 100%; justify-content: space-between; gap: 12px; }
  .utility__links a { font-size: 11.5px; }

  .mainbar { padding-inline: var(--gutter); gap: 14px; }
  .brand__logo { height: 40px; }
  .is-shrunk .brand__logo { height: 34px; }
  .nav-cta .btn--primary { padding: 10px 18px; font-size: 13.5px; }

  .footer { padding-inline: var(--gutter); }
  .footer__cols { gap: 36px; }

  .hero__title { font-size: clamp(40px, 12vw, 58px); }
  .hero__lede  { font-size: 18px; }
  .hero__actions .btn { width: 100%; padding-inline: 24px; }
  .stat__num { font-size: 34px; }

  .h2 { font-size: clamp(28px, 8vw, 38px); }
  .h2--sm { font-size: clamp(26px, 7.5vw, 34px); }
  .lede { font-size: 17px; }

  .casecard { padding: 26px 22px; }
  .casecard__key { font-size: 26px; }

  .keyseal__key { font-size: 26px; }
  .identity__avatar, .keyseal__badge { width: 92px; height: 92px; }
  .receipt__key { font-size: 28px; }

  .stagetabs { grid-template-columns: 1fr; }
  .stagetab { flex-direction: row; align-items: center; gap: 12px; padding: 13px 16px; }
  .flowpanel__title { font-size: 24px; }
  .casestrip { gap: 18px 24px; padding: 18px 20px; }
  .casestrip__v { font-size: 17px; }

  .stage3d { height: 360px; min-height: 360px; }
  .stage3d__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stage3d__hint { display: none; }

  .track__steps--4, .track__steps--6 { grid-template-columns: 1fr; }
  .track__dur { font-size: 22px; }

  .faq__q { padding: 20px 22px; font-size: 17px; }
  .faq__a-inner { padding: 0 22px 22px; font-size: 16px; }

  .sent { padding: 44px 24px; }
  .sent__title { font-size: 26px; }
  .sent__ref { font-size: 22px; }

  .cta { padding-block: 96px; }
  .cta__logo { width: 170px; }
  .cta__lede { font-size: 18px; }
  .cta__actions .btn { width: 100%; }

  .builder__side { min-width: 0; }
  .srow { flex-direction: column; gap: 3px; }
  .srow__k { width: auto; }
}

/* --------------------------------------------------------------------------
   Short viewports — the hero's 100vh floor is counter-productive on laptops
   in landscape with the two-tier header in play.
   -------------------------------------------------------------------------- */
@media (max-height: 760px) and (min-width: 881px) {
  .hero { min-height: 0; padding-block: 170px 80px; }
  .scrollcue { display: none; }
}

/* --------------------------------------------------------------------------
   Print — flatten to a readable document
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .drawer, .modal, .cursor, .cursor-dot,
  .scrollcue, .marquee, .stage3d, .hub__svg { display: none !important; }

  body { background: #fff; color: #000; }
  .section, .flow, .arch, .cta { padding: 24px 0; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .flowpanel { display: flex !important; page-break-inside: avoid; }
}