/* =========================================================
   BasicLaw Website V1.3.3 — Mobile Home R2
   Scope: mobile home hero and mobile action dock only.
   Desktop visual system remains unchanged except the removed
   secondary hero CTA in index.php.
   ========================================================= */
@media(max-width:680px){
  /* Hard width boundary: prevent any hero child or decorative layer
     from creating document-level horizontal scrolling. */
  html,body.home-page,body.home-page main{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }
  .home-page .hero{
    min-height:0;
    padding-top:112px;
    padding-bottom:38px;
    overflow:hidden;
  }
  .home-page .hero .container{
    width:calc(100% - 24px);
    max-width:100%;
  }
  .home-page .hero-grid{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
    gap:25px;
  }
  .home-page .hero-copy,
  .home-page .hero-copy>* ,
  .home-page .hero-panel,
  .home-page .home-entry-matrix,
  .home-page .matrix-steps,
  .home-page .path-step,
  .home-page .path-step>div{
    min-width:0;
    max-width:100%;
  }

  /* Mobile hero: higher-end motion hierarchy without adding content. */
  .home-page .hero-copy{
    position:relative;
    padding-top:1px;
    isolation:isolate;
    animation:homeCopyIn .76s cubic-bezier(.2,.72,.2,1) both;
  }
  .home-page .hero-copy:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:220px;
    height:220px;
    right:-126px;
    top:46px;
    border:1px solid rgba(128,201,233,.13);
    border-radius:50%;
    box-shadow:
      0 0 0 34px rgba(91,174,214,.042),
      0 0 0 72px rgba(91,174,214,.025);
    animation:homeOrbitMobile 12s ease-in-out infinite;
    pointer-events:none;
  }
  .home-page .hero .eyebrow{
    display:block;
    width:100%;
    max-width:100%;
    font-size:9px;
    line-height:1.45;
    letter-spacing:.145em;
    white-space:normal;
    animation:homeItemIn .65s .08s both;
  }
  .home-page .hero h1{
    width:100%;
    max-width:100%;
    margin:12px 0 14px;
    font-size:clamp(32px,9.15vw,38px);
    line-height:1.055;
    letter-spacing:-.052em;
    overflow-wrap:break-word;
    animation:homeItemIn .68s .14s both;
  }
  .home-page .hero h1 span,
  .home-page .hero h1 em{
    color:transparent;
    background:linear-gradient(105deg,#d0ae6a 5%,#f1d699 42%,#b9823d 68%,#e7ca8c 92%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    animation:homeGoldFlow 5.8s ease-in-out infinite;
  }
  .home-page .hero-lead{
    width:100%;
    max-width:34em;
    margin:0;
    font-size:12.5px;
    line-height:1.72;
    letter-spacing:.005em;
    overflow-wrap:anywhere;
    animation:homeItemIn .68s .20s both;
  }

  /* A single, deliberate hero action on every viewport. */
  .home-page .hero-actions{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    margin-top:19px;
    animation:homeItemIn .68s .27s both;
  }
  .home-page .hero-actions .btn{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:55px;
    padding:0 17px;
    border-radius:18px;
    font-size:13px;
    line-height:1.25;
    letter-spacing:.01em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 13px 30px rgba(4,22,37,.18);
  }
  .home-page .hero-actions .btn:after{
    content:"↗";
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
    margin-left:8px;
    border-radius:8px;
    background:rgba(255,255,255,.17);
    font-size:11px;
    font-weight:900;
    transition:transform .25s ease,background .25s ease;
  }
  .home-page .hero-actions .btn:active:after{transform:translate(2px,-2px)}

  /* Proof chips remain horizontally browsable, but their scroller no
     longer grows outside the viewport. */
  .home-page .proof-row{
    display:flex;
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    gap:7px;
    margin:16px 0 0;
    padding:0 0 4px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%);
    animation:homeItemIn .68s .33s both;
  }
  .home-page .proof-row::-webkit-scrollbar{display:none}
  .home-page .proof-chip{
    flex:0 0 auto;
    min-height:34px;
    padding:8px 10px;
    border-radius:999px;
    font-size:9px;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .home-page .proof-chip:before{width:5px;height:5px}

  /* Matrix is strictly bounded to the same width as the navigation. */
  .home-page .home-entry-matrix{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-top:1px;
    padding:19px;
    border-radius:23px;
    overflow:hidden;
    box-sizing:border-box;
    animation:homeMatrixIn .78s .30s cubic-bezier(.2,.72,.2,1) both;
  }
  .home-page .home-entry-matrix:after{opacity:.55}
  .home-page .matrix-scan{
    display:block;
    left:7%;
    right:7%;
    opacity:.26;
    animation-duration:7.4s;
  }
  .home-page .matrix-orbit{display:none}
  .home-page .panel-topline{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:100%;
    margin-bottom:14px;
  }
  .home-page .panel-topline>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
    letter-spacing:.14em;
  }
  .home-page .panel-live{
    max-width:104px;
    padding:5px 7px;
    font-size:7px;
    white-space:nowrap;
  }
  .home-page .home-entry-matrix h2{
    max-width:100%;
    margin-bottom:8px;
    font-size:23px;
    line-height:1.32;
    overflow-wrap:anywhere;
  }
  .home-page .home-entry-matrix>p{
    max-width:100%;
    margin-bottom:15px;
    font-size:11px;
    line-height:1.72;
    overflow-wrap:anywhere;
  }
  .home-page .matrix-steps{width:100%}
  .home-page .matrix-progress{left:17px;top:22px;bottom:22px}
  .home-page .home-entry-matrix .path-step{
    width:100%;
    grid-template-columns:36px minmax(0,1fr);
    gap:10px;
    padding:12px 3px;
    opacity:1;
    transform:none;
  }
  .home-page .home-entry-matrix .path-step:hover,
  .home-page .home-entry-matrix .path-step:focus-visible,
  .home-page .home-entry-matrix .path-step.is-active{transform:none}
  .home-page .home-entry-matrix .path-step b{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:10px;
  }
  .home-page .home-entry-matrix .path-step strong{
    max-width:100%;
    font-size:12px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .home-page .home-entry-matrix .path-step span{
    max-width:100%;
    font-size:9.5px;
    line-height:1.62;
    overflow-wrap:anywhere;
  }
  .home-page .panel-footer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    width:100%;
    max-width:100%;
    font-size:8px;
  }
  .home-page .panel-footer span{min-width:0}
  .home-page .panel-footer span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .home-page .panel-footer span:last-child{white-space:nowrap}
  .home-page .home-route-section{margin-top:0}

  /* Two equal system actions in the bottom dock. */
  .home-page .mobile-action-bar{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    max-width:calc(100% - 16px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:6px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:22px;
    background:rgba(242,248,251,.89);
    box-shadow:0 18px 48px rgba(4,31,50,.20),inset 0 1px 0 rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    backdrop-filter:blur(24px) saturate(145%);
  }
  .home-page .mobile-action-bar a{
    width:100%;
    min-width:0;
    min-height:54px;
    overflow:hidden;
    border-radius:17px;
  }
  .home-page .mobile-action-secondary.compliance-mobile{
    display:grid;
    grid-template-columns:29px minmax(0,1fr);
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid rgba(93,159,196,.20);
    background:linear-gradient(145deg,#082c48,#146286);
    box-shadow:0 9px 20px rgba(5,48,73,.20),inset 0 1px 0 rgba(255,255,255,.10);
  }
  .home-page .mobile-action-secondary.compliance-mobile:before{
    content:"";
    display:block;
    width:29px;
    height:29px;
    border-radius:10px;
    background-color:rgba(255,255,255,.10);
    background-position:center;
    background-repeat:no-repeat;
    background-size:17px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.4 2.7 8.2 7 10 4.3-1.8 7-5.6 7-10V6l-7-3Z'/%3E%3Cpath d='m9.5 12 1.7 1.7 3.6-4'/%3E%3C/svg%3E");
  }
  .home-page .mobile-action-secondary.compliance-mobile small{display:none}
  .home-page .mobile-action-secondary.compliance-mobile strong{
    min-width:0;
    margin:0;
    color:#fff;
    font-size:11px;
    line-height:1.22;
    text-align:left;
  }
  .home-page .mobile-action-primary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 10px;
    background:linear-gradient(135deg,#b78943 0%,#d9bc7b 55%,#c69852 100%);
    color:#102d43;
    font-size:11px;
    line-height:1.2;
    letter-spacing:0;
    text-align:center;
    box-shadow:0 10px 25px rgba(155,112,48,.24),inset 0 1px 0 rgba(255,255,255,.42);
  }
  .home-page .mobile-action-primary:before{
    content:"";
    flex:0 0 auto;
    width:20px;
    height:20px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:19px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102d43' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v5h5M10 12h5M10 16h5'/%3E%3C/svg%3E");
  }
}

@media(max-width:380px){
  .home-page .hero h1{font-size:31px}
  .home-page .hero-actions .btn{font-size:12px}
  .home-page .mobile-action-secondary.compliance-mobile strong,
  .home-page .mobile-action-primary{font-size:10px}
  .home-page .mobile-action-secondary.compliance-mobile{grid-template-columns:27px minmax(0,1fr);padding-left:7px;padding-right:7px}
  .home-page .mobile-action-secondary.compliance-mobile:before{width:27px;height:27px}
}

@media(prefers-reduced-motion:reduce){
  .home-page .hero-copy,
  .home-page .hero .eyebrow,
  .home-page .hero h1,
  .home-page .hero-lead,
  .home-page .hero-actions,
  .home-page .proof-row,
  .home-page .home-entry-matrix,
  .home-page .hero-copy:after,
  .home-page .hero h1 span,
  .home-page .hero h1 em{
    animation:none!important;
  }
}

@keyframes homeCopyIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes homeItemIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes homeMatrixIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes homeOrbitMobile{
  0%,100%{transform:scale(.94) rotate(0deg);opacity:.55}
  50%{transform:scale(1.04) rotate(5deg);opacity:1}
}
@keyframes homeGoldFlow{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}