/* Digital Perception — responsive layer.
   Tablet reduces depth. Phones get a purpose-built experience: a short pinned hero story, scroll-linked (reversible)
   section reveals via ScrollTrigger (html.dp-mpin), a rebuilt plans layout, a compact footer and tight, deliberate spacing. */

/* ── Tablet (pinned): shorter pins, smaller product windows ── */
@media (max-width:1099px){
  html.dp-pin .hero-track{height:240vh}
  html.dp-pin .system-track{height:320vh}
  html.dp-pin .products-track{height:290vh}
}
@media (max-width:1199px){
  html.dp-pin .pwin{left:60%;width:min(520px,72%)}
}

/* ── Tablet & below: mobile navigation ── */
@media (max-width:1099px){
  .hn span{display:none}
  .hd-nav{display:none}
  .hd-toggle{display:block;margin-left:0}
  .hd-cta{margin-left:auto}
  .hero-copy,html.dp-pin .hero-copy{grid-template-columns:1fr;gap:20px}
  .hero-lead{max-width:56ch}
  .hero-actions{justify-content:flex-start}
  .system-head,.sec-head{grid-template-columns:1fr;gap:18px}
  .control{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control .inst{grid-column:auto;grid-row:auto}
  .control .inst-seo{grid-column:1/-1}
  .inst-seo .radar{height:min(100%,300px)}
  .ft-top{grid-template-columns:1fr}
}

/* ── Small tablet + phones (<900): stacked, tight, purpose-built ── */
@media (max-width:899px){
  :root{--hd:62px}
  .sec-head,.system-head{gap:12px;margin-bottom:26px}
  .sec-head>p,.sec-head>div>p,.system-intro{font-size:.96rem}
  .kicker{margin-bottom:12px}
  .ln{text-wrap:balance}
  .plans .h2{font-size:clamp(1.6rem,.6rem + 4.3vw,2.4rem)}

  /* rhythm: one deliberate gap between sections (top padding only) */
  .stream{padding:34px 0 0}
  .stream-head{margin-bottom:20px}
  .system{padding:56px 0 0}
  .services{padding:56px 0 0}
  .conv{margin-top:14px}
  .products{padding:30px 0 0}
  .products-stage{gap:16px}
  .market{padding:56px 0 0}
  .work{padding:56px 0 0}
  .process{padding:56px 0 0}
  .plans{padding:56px 0 0}
  .insights{padding:56px 0 0}
  .cta{min-height:0;padding:64px 0 56px}

  .engines{grid-template-columns:1fr;gap:26px}
  .engine{display:grid;padding:18px}
  .viz{height:clamp(150px,40vw,200px)}
  .viz-automate{height:clamp(196px,54vw,250px)}
  .conv{height:104px}
  .pwin{max-width:none;margin-bottom:6px}
  .market-grid{grid-template-columns:1fr;gap:34px}
  .market-copy>p{margin:16px 0 20px}
  .flow{margin-bottom:22px}
  .net{max-width:480px;margin-bottom:58px}
  .portals{gap:20px;margin-top:0}
  .portal,.portal:nth-child(even){grid-template-columns:1fr;min-height:0;gap:16px}
  .portal:nth-child(even) .pt-frame{order:0}
  .pt-copy>p:not(.pt-meta){margin-bottom:12px}
  .spine{gap:42px}
  .spine-line,.spine-sig{left:8px}
  .st{grid-template-columns:18px minmax(0,1fr);gap:0 20px;align-items:start}
  .st-node{grid-column:1;grid-row:1;margin-top:8px}
  .st-copy,.st:nth-child(even) .st-copy{grid-column:2;grid-row:1;text-align:left;justify-self:start;opacity:1;translate:0 0}
  .st:nth-child(even) .st-copy p{margin-left:0}
  .st-viz,.st:nth-child(even) .st-viz{grid-column:2;grid-row:2;justify-self:start;margin-top:12px;height:64px;width:min(200px,70%);opacity:1}
  .edit{grid-template-columns:1fr;gap:26px}
  .ed-feature,.ed-a,.ed-b,.ed-c{grid-column:1;grid-row:auto}
  .ed-c{grid-template-columns:1fr;padding-top:22px;gap:0}
  .ed-c .ed-img,.ed-feature .ed-img{aspect-ratio:16/10}
  .ed-meta{margin:12px 0 8px}

  /* ── Plans: selector → selected plan → capability list (rebuilt) ── */
  .matrix{display:flex;flex-direction:column;gap:14px}
  .mx-table-wrap,.mx-table{display:contents}
  .mx-table thead{order:1;display:block}
  .mx-summary{order:2;position:relative;top:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;align-items:center;padding:18px}
  .mx-table tbody{order:3;display:block;padding:2px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(14,19,24,.55)}
  .mx-table tfoot{display:none}
  .mx-note{order:5;margin:0;grid-column:auto}
  .mx-table thead tr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mx-table thead th{display:block;padding:0}
  .mx-table thead th:first-child{display:none}
  .mx-plan{padding:12px 13px;border-radius:14px;border:1px solid var(--line)}
  .mx-plan .pn{font-size:.9rem}
  .mx-plan[aria-pressed=true]{border-color:rgba(255,148,31,.7)}
  .mx-price{grid-column:1;grid-row:1;margin:0}
  .mx-price b{font-size:clamp(2.6rem,2rem + 2.4vw,3.2rem)}
  .mx-summary h3{grid-column:2;grid-row:1;margin:0;font-size:1.15rem}
  .mx-summary>p:not(.mx-price){grid-column:1/-1;margin:6px 0 12px;font-size:.9rem}
  .mx-summary .btn{grid-column:1/-1}
  .mx-table tbody tr{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;padding:13px 0;border-top:1px solid var(--line);clip-path:none!important}
  .mx-table tbody tr:first-child{border-top:0}
  .mx-table th[scope=row]{grid-column:2;grid-row:1;padding:0;border:0;font-size:.95rem;font-weight:500}
  .mx-table td,.mx-table tfoot td{display:none}
  .matrix[data-active=de] td[data-col=de],.matrix[data-active=ga] td[data-col=ga],.matrix[data-active=ba] td[data-col=ba],.matrix[data-active=cd] td[data-col=cd]{display:contents}
  .matrix[data-active=de] td[data-col=de]>i,.matrix[data-active=ga] td[data-col=ga]>i,.matrix[data-active=ba] td[data-col=ba]>i,.matrix[data-active=cd] td[data-col=cd]>i{grid-column:1;grid-row:1/span 2;margin:2px 0 0;align-self:start}
  .matrix[data-active=de] td[data-col=de]>span,.matrix[data-active=ga] td[data-col=ga]>span,.matrix[data-active=ba] td[data-col=ba]>span,.matrix[data-active=cd] td[data-col=cd]>span{grid-column:2;grid-row:2;margin-top:2px;font-size:.84rem;line-height:1.4;color:var(--mute)}
  .mx-table td.n>span{color:var(--dim)}

  /* ── Compact footer: link groups collapse ── */
  .dp-footer{padding-top:40px}
  .ft-top{gap:22px}
  .ft-brand p{margin:14px 0 12px;font-size:.94rem}
  .ft-brand address{gap:3px;font-size:.9rem}
  .ft-nav{display:block;border-top:1px solid var(--line)}
  .ft-group{border-bottom:1px solid var(--line)}
  .ft-group summary{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;cursor:pointer;pointer-events:auto}
  .ft-group summary h2{margin:0}
  .ft-group summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--amber-hot);border-bottom:1.5px solid var(--amber-hot);rotate:45deg;translate:0 -2px;transition:rotate .35s var(--ease)}
  .ft-group[open] summary::after{rotate:225deg;translate:0 2px}
  .ft-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:0 2px 12px}
  .ft-word{margin:24px 0 0;font-size:9.2vw}
  .ft-bottom{padding-block:14px 20px}
}

/* ── Phones ── */
@media (max-width:719px){
  .hero-stage{min-height:max(100svh,600px)}
  .hero-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(transparent,rgba(6,8,10,.88) 44%);pointer-events:none;z-index:1}
  html:not(.dp-mpin) .hero-nodes{display:none}
  .hero-core-static{top:30%;width:min(78vw,340px)}
  .hero-copy{padding-top:calc(var(--hd) + 24px);padding-bottom:52px;gap:16px}
  .hero-title{font-size:clamp(2.15rem,9.6vw,3.2rem)}
  .hero-lead{font-size:.94rem;line-height:1.55}
  .hero-actions{flex-wrap:nowrap;gap:10px}
  .hero-actions .btn{flex:1 1 0;min-width:0;padding:.95em .5em;font-size:.86rem;gap:.45em}
  .hero-cue{bottom:14px;font-size:.72rem}
  .control{grid-template-columns:1fr}
  .control .inst-seo{grid-column:auto}
  .inst{min-height:0}
  .inst .viz{min-height:150px}
  .si-plate{height:64px;min-width:124px}
  .conv-sig i{font-size:.66rem;padding:5px 9px 5px 8px;gap:6px}
  .flow li{grid-template-columns:80px 1fr;gap:12px;padding:10px 0}
  .flow strong{font-size:1.12rem}
  .net-doms{bottom:-64px}
  .ft-bottom{flex-direction:column;gap:6px}
  .cta-actions .btn{flex:1 1 100%}
  .cta-title{font-size:clamp(1.65rem,.5rem + 4.7vw,2.4rem);letter-spacing:-.045em}
  .net{margin-bottom:52px}
}
@media (max-width:560px){
  .hd-cta{display:none}
  .hd-toggle{margin-left:auto}
  .hd-brand small{display:none}
}

/* ── Phone hero story (short pin) ── */
@media (max-width:899px){
  html.dp-mpin .hero-track{height:250svh}
  html.dp-mpin .hero-stage{position:sticky;top:0;height:100svh;min-height:560px;display:block}
  html.dp-mpin .hero-copy{position:absolute;left:50%;translate:-50% 0;bottom:0;padding:0 0 clamp(52px,8.5svh,80px);will-change:transform,opacity}
  html.dp-mpin .hero-stage::after{opacity:calc(1 - var(--copy,0)*.9)}
  .hn{padding:5px 11px 5px 13px;border-radius:99px}
  .hn strong{font-size:.72rem}
  .hn::before{top:50%;translate:-50% -50%}
  html.dp-mpin .hn.is-active{border-color:rgba(255,148,31,.85);background:rgba(var(--energy),.22)}
  .hero-caption{display:none}
  html.dp-mpin .hero-caption{display:grid;position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:3;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,148,31,.38);background:rgba(10,13,16,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:var(--cap,0);translate:0 calc((1 - var(--cap,0))*18px);pointer-events:none}
  .hero-caption b{grid-column:1;font:600 1.4rem/1.1 var(--f-display);letter-spacing:-.03em}
  .hero-caption span{grid-column:1;color:var(--mute);font-size:.86rem}
  .hero-caption em{grid-column:2;grid-row:1/3;display:flex;gap:6px}
  .hero-caption em i{width:6px;height:6px;border-radius:50%;background:var(--steel-2);border:1px solid var(--line-3);transition:background .35s,box-shadow .35s,border-color .35s}
  .hero-caption em i.on{background:var(--amber-hot);border-color:var(--amber-hot);box-shadow:0 0 8px rgba(var(--energy),.9)}
  .hero-caption.pulse b,.hero-caption.pulse span{animation:capin .55s var(--ease-out)}
  @keyframes capin{from{opacity:0;transform:translateY(8px)}}
}

/* ── Phone scroll-linked states (html.dp-mpin: ScrollTrigger writes --in / --a per element; fully reversible) ── */
@media (max-width:899px){
  html.dp-mpin .control .inst,html.dp-mpin .control .inst.is-in,html.dp-mpin .control .inst.is-done{opacity:calc(.12 + var(--in,0)*.88);clip-path:none;transform:translate3d(0,calc((1 - var(--in,0))*46px),0) scale(calc(.94 + var(--in,0)*.06));transition:border-color .5s,box-shadow .6s}
  html.dp-mpin .system-core{display:block;position:relative;width:74px;margin:0 auto 26px;opacity:var(--core,0);scale:calc(.6 + var(--core,0)*.4)}
  html.dp-mpin .system-core::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:linear-gradient(var(--amber-hot),transparent);transform:scaleY(var(--core,0));transform-origin:top}
  html.dp-mpin .engine{opacity:calc(.25 + var(--in,0)*.75);transform:translate3d(0,calc((1 - var(--in,0))*40px),0);border-color:rgba(255,148,31,calc(var(--a,0)*.5 + .06));box-shadow:0 0 calc(var(--a,0)*40px) -18px rgba(var(--energy),.55)}
  html.dp-mpin .engine:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:linear-gradient(var(--amber-hot),rgba(255,148,31,.15));transform:scaleY(var(--a,0));transform-origin:top;pointer-events:none}
  html.dp-mpin .pwin{opacity:calc(.2 + var(--in,0)*.8);transform:perspective(1000px) rotateX(calc((1 - var(--in,0))*18deg)) translate3d(0,calc((1 - var(--in,0))*36px),0) scale(calc(.94 + var(--in,0)*.06));transform-origin:50% 100%}
  html.dp-mpin .pc{opacity:calc(.2 + var(--in,0)*.8);translate:0 calc((1 - var(--in,0))*24px)}
  html.dp-mpin .pc li{opacity:calc(.15 + clamp(0,var(--in,0)*5 - var(--i,0),1)*.85)}
  html.dp-mpin .pc li:nth-child(1){--i:0}html.dp-mpin .pc li:nth-child(2){--i:1}html.dp-mpin .pc li:nth-child(3){--i:2}html.dp-mpin .pc li:nth-child(4){--i:3}
  html.dp-mpin .net-hub{scale:calc(.78 + var(--in,0)*.22)}
  html.dp-mpin .ed{opacity:calc(.3 + var(--in,0)*.7);translate:0 calc((1 - var(--in,0))*30px)}
  html.dp-mpin .ed .ed-img,html.dp-mpin .ed.is-in .ed-img{clip-path:inset(0 0 calc((1 - var(--in,0))*100%) 0 round 14px);transition:none}
  html.dp-mpin .ed .ed-copy,html.dp-mpin .ed.is-in .ed-copy{opacity:1;transition:none}
  html.dp-depth .portal{transform:perspective(1100px) translate3d(0,calc(var(--d)*-2vh),calc((1 - var(--k))*-120px)) rotateX(calc(var(--d)*-4deg));opacity:calc(.3 + var(--k)*.7)}
  html.dp-depth .pt-copy{opacity:calc((var(--k) - .25)*2.4);translate:0 calc((1 - var(--k))*22px)}
}

/* ── Touch: no hover-only information ── */
@media (hover:none){
  .inst-copy .inst-more{max-height:26px;opacity:1}
  .si-meta small{opacity:1;translate:0 0}
  .si-plate{opacity:.9}
  .si-plate img{filter:none;opacity:1}
}