/* ============================================================
   PATCH LAYER — loaded LAST on every page (after any embedded
   <style>), so these rules win ties against page-local CSS.
   This is the single source of truth for responsive repairs.
   predeploy.py auto-injects + version-stamps this link on all
   pages; never remove it. (Jul 22 structural pass)
   ============================================================ */

/* meta segments: desktop keeps whole phrases; phones wrap as prose */
.seg{white-space:nowrap}
.mline{display:block}
@media (max-width:600px){
  .seg{white-space:normal;overflow-wrap:break-word}
}

/* no sideways scroll, ever */
html,body{overflow-x:clip}

/* header: one line, proportionate CTA, on every phone.
   !important punches through embedded per-page harmony blocks. */
.nav .btn{white-space:nowrap}
@media (max-width:640px){
  .nav{gap:10px;padding:12px 0}
  .logo{font-size:16px!important;white-space:nowrap}
  .nav .btn{font-size:12.5px!important;padding:8px 12px!important}
}
@media (max-width:430px){
  .nav{gap:8px}
  .logo{font-size:15px!important}
  .nav .btn{font-size:12px!important;padding:8px 11px!important}
}
@media (max-width:360px){
  .logo{font-size:14px!important}
  .nav .btn{font-size:11.5px!important;padding:7px 10px!important}
}

/* rigid inline grids collapse gracefully without per-page queries */
@media (max-width:760px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:560px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1.3fr"]{grid-template-columns:1fr!important}
  th,td{padding:9px 10px}
}

/* data tables scroll sideways instead of crushing */
@media (max-width:700px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* touch targets */
@media (max-width:640px){
  main .btn,.sticky-cta .btn{min-height:44px}
}

/* header order: CTA before hamburger; hamburger sits at the far right */
@media (max-width:768px){
  .nav{justify-content:flex-start}
  .logo{margin-right:auto}
  .nav .btn{order:2}
  .nav .ham{order:3}
}


/* ============ MOTION LAYER (Jul 22) — subtle, fast, reduced-motion aware ============ */
@media (prefers-reduced-motion: no-preference){

  /* Scroll reveal. The hiding rule is gated on html.js-rv, which the inline
     head script sets and then REMOVES if the reveal engine never ran. Before
     19 Oct 2026 this was a bare .rv{opacity:0} revealed only by fx.js, so any
     failure to load fx.js left every section on every page invisible forever.
     The old comment claimed no-JS users saw everything instantly; they saw a
     blank page. :where() keeps specificity at (0,1,0) so .rv-in still wins. */
  :where(html.js-rv) .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  .rv-in{opacity:1;transform:none}
  /* fx.js tags revealed elements with the class `in`, not `rv-in`. The matching
     rule lived only in site.css, which index.html does not load, so the homepage
     hid every section and never unhid it. Fixed 10 Oct 2026. */
  .rv.in{opacity:1;transform:none}

  /* buttons: gentle lift, press feedback */
  .btn,main a[style*="border-radius:10px"],main a[style*="border-radius:99px"],main button{
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
  .btn:hover,main a[style*="border-radius:10px"]:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(35,35,63,.16)}
  .btn:active,main button:active{transform:translateY(0) scale(.98)}

  /* cards: quiet lift on hover */
  .icard,.ncard,.fcard,.obj,.wstep,.calbox,
  main a[style*="border-radius:14px"],main div[style*="border-radius:14px"],main div[style*="border-radius:16px"]{
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .icard:hover,.ncard:hover,.fcard:hover,
  main a[style*="border-radius:14px"]:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(35,35,63,.10)}

  /* nav links: soft color ease */
  .nav-links a{transition:color .15s ease}

  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none}
}