/* human.css (v2.5): KHESF restyle layer. Pure CSS, no runtime, no CDN.
   Patterns ported by hand from Magic UI components listed on 21st.dev (MIT):
     Bento Grid  https://21st.dev/@dillionverma/components/bento-grid
     Border Beam https://21st.dev/@dillionverma/components/border-beam
     Blur Fade   https://21st.dev/@dillionverma/components/blur-fade
     Dot Pattern https://21st.dev/@dillionverma/components/dot-pattern
   MIT License, Copyright (c) Magic UI (github.com/magicuidesign/magicui). Full text: COMPONENTS-LICENSES.md */

/* --- Typographic rhythm: one 8px baseline, 1.25 scale, readable measure --- */
:root{--u:8px;--measure:62ch}
.kicker{display:flex;align-items:center;gap:12px;font-variant-numeric:oldstyle-nums;margin-bottom:calc(var(--u)*2)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
h1{line-height:.98;letter-spacing:-.02em;margin-bottom:calc(var(--u)*3)}
h2{line-height:1.02;letter-spacing:-.015em;margin-bottom:calc(var(--u)*2.5)}
.lead,.panel p{max-width:var(--measure);line-height:1.65}
.lead{font-size:clamp(17px,1.6vw,20px);color:#d4dce2}
.lead + .lead{margin-top:calc(var(--u)*1.5)}
.slide h3{font-size:19px;letter-spacing:.01em;line-height:1.25}
.slide p{line-height:1.6}

/* --- Varied section composition (not every panel left-stacked) --- */
@media (min-width:1000px){
 #panel-about,#panel-contact{justify-self:end;text-align:left;padding-left:clamp(0px,4vw,60px);border-left:1px solid var(--line)}
 #panel-home h1{max-width:13ch}
 #panel-features > h2,#panel-plans > h2{max-width:22ch}
}

/* --- Dot Pattern (port): faint dot field behind each open panel, masked to fade out --- */
[role=tabpanel]{position:relative}
[role=tabpanel]::before{content:"";position:absolute;inset:-40px -60px auto -60px;height:340px;z-index:-1;pointer-events:none;
 background-image:radial-gradient(color-mix(in srgb,var(--accent) 38%,transparent) 1px,transparent 1.4px);background-size:16px 16px;
 -webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 20% 30%,#000 0%,transparent 70%);opacity:.35}

/* --- Bento Grid (port): the family-doors slider becomes one tall card + two stacked at desktop; still a scroll-snap slider on phones --- */
@container (min-width:900px){
 .family-doors .sl-track{grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:calc((100cqw - 16px) / 2)}
 .family-doors .slide:first-child{grid-row:span 2}
 .family-doors .slide:first-child h3{font-size:26px}
}
/* Editorial rhythm in feature sliders: alternate slide treatments instead of identical boxes */
.slider:not(.family-doors) .slide:nth-child(3n+2){background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,transparent),var(--glass) 55%)}
.slider:not(.family-doors) .slide:nth-child(3n){border-style:dashed}
.slide .num{font-size:44px;font-style:italic;letter-spacing:-.02em}
.slide:hover{transform:translateY(-2px)}

/* --- Border Beam (port): a light beam travels the border of the active slide and the open pop-out --- */
@property --beam{syntax:'<percentage>';inherits:false;initial-value:0%}
.slide.is-active::before,dialog.door[open]::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid transparent;pointer-events:none;z-index:2;
 background:conic-gradient(from calc(var(--beam) * 3.6deg),transparent 0 82%,var(--accent) 90%,var(--accent2) 95%,transparent 100%) border-box;
 -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
 animation:beam 6s linear infinite}
dialog.door{position:fixed;overflow:auto}
@keyframes beam{to{--beam:100%}}

/* --- Blur Fade (port): Magic UI defaults (blur 6px, y 6px, 0.4s, 40ms stagger) replace the older heavier reveal --- */
.rx [data-reveal]{filter:blur(6px);transform:translateY(6px);transition:opacity .4s ease-out,filter .4s ease-out,transform .4s ease-out;transition-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){.slide.is-active::before,dialog.door[open]::before{animation:none}.slide:hover{transform:none}}

/* v2.5.1 (add-only): no sideways scroll on phones (Networkchuck QA). The page clips horizontal overflow, and the dot layer stays inside the panel at 640px and below. */
html{overflow-x:clip}
@media (max-width:640px){[role=tabpanel]::before{inset:0}}