/* Platform overview: five-part ecosystem, tablet-to-cloud diagram, tour tabs, price strip */

/* hero: the wireframe-truck still, cropped to keep the tractor and its towers in frame */
.pf-hero .phero-media.is-photo img{aspect-ratio:5/4;object-position:42% 50%}
/* four facts: 2x2 on phones instead of 3 + 1 */
@media (max-width:600px){
  .pf-hero .phero-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
}

/* --- ecosystem: one panel, five linked columns --- */
.pf-eco{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pf-eco li{min-width:0}
.pf-eco li+li{border-left:1px solid var(--line)}
.pf-eco a{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;height:100%;padding:30px 26px 28px;transition:background .25s}
.pf-eco a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pf-eco a:hover{background:var(--white)}
.pf-eco a:hover::after,.pf-eco a:focus-visible::after{transform:scaleX(1)}
.pf-eco a:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.pf-eco-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--navy-1);color:var(--electric);margin-bottom:6px}
.pf-eco-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pf-eco b{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.pf-eco-d{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.pf-eco-p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--brand)}
/* mono only for the numbers; qualifiers stay in the body face */
.pf-num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.pf-eco-p::after{content:"";flex:none;width:8px;height:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.pf-eco a:hover .pf-eco-p::after{transform:translateX(3px) rotate(45deg)}
@media (max-width:1180px){
  .pf-eco{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pf-eco li{grid-column:span 2;border-top:1px solid var(--line)}
  .pf-eco li:nth-child(-n+3){border-top:0}
  .pf-eco li:nth-child(4){grid-column:1/span 3;border-left:0}
  .pf-eco li:nth-child(5){grid-column:4/span 3}
}
@media (max-width:760px){
  .pf-eco{grid-template-columns:1fr}
  .pf-eco li,.pf-eco li:nth-child(4),.pf-eco li:nth-child(5){grid-column:auto;border-left:0;border-top:1px solid var(--line)}
  .pf-eco li:first-child{border-top:0}
  .pf-eco a{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto;gap:4px 16px;padding:22px 20px}
  .pf-eco-ico{grid-row:1/span 3;margin:0}
  .pf-eco-p{margin-top:8px;padding-top:12px}
}

/* --- tablet-to-cloud diagram --- */
.pf-dia-band{overflow:hidden}
.pf-dia-band .phero-grid{opacity:.35}
.pf-dia-band .wrap{position:relative}
.t2c{margin:0;display:grid;gap:18px}
.t2c-grid{display:grid;grid-template-columns:minmax(0,1.12fr) 76px minmax(0,.94fr) 76px minmax(0,1.04fr);align-items:stretch;
  padding:clamp(20px,2.6vw,36px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(11,42,82,.55),rgba(3,13,28,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.t2c-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.t2c-h{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--electric);padding-bottom:12px;border-bottom:1px dashed rgba(94,194,255,.3)}
.t2c-node{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(6,26,51,.92);min-width:0}
.t2c-node b{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.3}
.t2c-node small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:rgba(244,247,251,.68)}
.t2c-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(51,161,255,.12);color:var(--electric)}
.t2c-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t2c-col[data-zone="cloud"] .t2c-node{flex:1;align-items:center}
.t2c-node.is-sm{align-items:center}
.t2c-v{align-self:center;width:1px;height:26px;margin:-6px 0;background:linear-gradient(var(--electric),rgba(94,194,255,.2))}

.t2c-node.is-tab{flex-direction:column;flex:1;gap:16px;border-color:rgba(94,194,255,.45);background:linear-gradient(180deg,rgba(11,42,82,.95),rgba(6,26,51,.95));box-shadow:0 0 0 4px rgba(51,161,255,.06),0 30px 60px -30px rgba(0,0,0,.6)}
.t2c-tabhead{display:flex;gap:14px;align-items:center}
.t2c-ico.is-tab{width:46px;height:46px;border-radius:12px;background:rgba(51,161,255,.16)}
.t2c-ico.is-tab svg{width:24px;height:24px}
.t2c-layers{list-style:none;display:grid;gap:6px;width:100%}
.t2c-layers li{padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:14.5px;line-height:1.4;color:rgba(244,247,251,.86)}
.t2c-layers li:first-child{border-color:rgba(94,194,255,.35);color:#fff}

.t2c-node.is-net{flex-direction:column;flex:1;gap:14px}
.t2c-towers{display:flex;align-items:flex-end;gap:6px;height:30px}
.t2c-towers i{width:7px;border-radius:2px;background:rgba(94,194,255,.3)}
.t2c-towers i:nth-child(1){height:30%}.t2c-towers i:nth-child(2){height:55%}.t2c-towers i:nth-child(3){height:80%}.t2c-towers i:nth-child(4){height:100%;background:var(--electric)}
.t2c-list{list-style:none;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:rgba(244,247,251,.8)}
.t2c-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px}
.t2c-list li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--electric)}
.t2c-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.t2c-nums div{display:flex;flex-direction:column-reverse;gap:2px;min-width:0}
.t2c-nums div+div{padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.t2c-nums dd{font-family:var(--display);font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.t2c-nums dt{font-size:12.5px;color:rgba(244,247,251,.62)}

/* connectors: a hairline with a signal pulse travelling toward the cloud */
.t2c-wire{position:relative;display:grid;place-items:center;min-height:40px}
.t2c-wire i{position:absolute;left:8px;right:8px;top:50%;height:1px;background:rgba(94,194,255,.4);overflow:hidden}
.t2c-wire i::before{content:"";position:absolute;top:0;left:-30%;width:30%;height:1px;background:linear-gradient(90deg,transparent,var(--electric),transparent);animation:t2c-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite}
.t2c-wire::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:1.5px solid var(--electric);border-right:1.5px solid var(--electric);transform:rotate(45deg)}
.t2c-wire::before{content:"";position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--electric);box-shadow:0 0 12px var(--electric)}
.t2c-wire-l{position:relative;top:-18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--electric);white-space:nowrap}
.t2c-wire+.t2c-col+.t2c-wire i::before{animation-delay:1.3s}
@keyframes t2c-pulse{to{left:100%}}

.t2c-rail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 36px;align-items:center;padding:20px clamp(20px,2.6vw,36px);border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(51,161,255,.07)}
.t2c-rail-h{font-family:var(--display);font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em}
.t2c-rail ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px}
.t2c-rail li{display:grid;gap:2px;padding-left:16px;border-left:1px solid rgba(255,255,255,.14)}
.t2c-rail li b{font-family:var(--display);font-size:18px;font-weight:600;color:var(--electric);letter-spacing:-.01em}
.t2c-rail li span{font-size:14px;line-height:1.45;color:rgba(244,247,251,.72)}
.t2c figcaption{max-width:80ch}
.pf-dia-note{margin-top:28px;font-size:16px;color:var(--fg-2)}
.pf-dia-note .inline-link{color:var(--electric)}

@media (max-width:1180px){
  .t2c-rail{grid-template-columns:1fr}
  .t2c-rail ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .t2c-grid{grid-template-columns:1fr;gap:0}
  .t2c-wire{min-height:64px}
  .t2c-wire i{left:50%;right:auto;top:10px;bottom:16px;width:1px;height:auto}
  .t2c-wire i::before{left:0;top:-30%;width:1px;height:30%;background:linear-gradient(180deg,transparent,var(--electric),transparent);animation-name:t2c-pulse-v}
  .t2c-wire::before{left:50%;top:6px;margin:0 0 0 -3.5px}
  .t2c-wire::after{right:auto;left:50%;top:auto;bottom:10px;margin:0 0 0 -3.5px;transform:rotate(135deg)}
  .t2c-wire-l{top:0;left:44px;justify-self:center}
  .t2c-col[data-zone="cloud"] .t2c-node{flex:none}
}
@keyframes t2c-pulse-v{to{top:100%}}
@media (max-width:600px){
  .t2c-grid{padding:16px;border-radius:18px}
  .t2c-node{padding:14px}
  .t2c-rail ul{grid-template-columns:1fr 1fr;gap:14px}
  .t2c-rail li{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){.t2c-wire i::before{animation:none;display:none}}

/* --- tour tabs --- */
.ptabs{display:grid;gap:clamp(28px,3vw,40px)}
.ptabs-list{display:flex;gap:4px;padding:5px;border-radius:14px;background:#fff;border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ptabs-list::-webkit-scrollbar{display:none}
.ptabs-list button{flex:none;min-height:46px;padding:10px 20px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.ptabs-list button:hover{color:var(--ink);background:var(--paper)}
.ptabs-list button[aria-selected="true"]{background:var(--navy-1);color:#fff}
.ptabs-list button:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.ptabs-pane{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ptabs-pane[hidden]{display:none}
.ptabs-pane:focus-visible{outline:3px solid var(--brand);outline-offset:8px;border-radius:12px}
.js .ptabs-pane:not([hidden]){animation:ptabs-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ptabs-in{from{opacity:0;transform:translateY(10px)}}
.ptabs-txt{display:grid;gap:18px;justify-items:start;align-content:center}
.ptabs-txt h3{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.ptabs-txt p{color:var(--ink-2);font-size:17px;line-height:1.7;max-width:48ch}
.ptabs-txt .btn{margin-top:6px}
.ptabs-pic{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--paper-2);box-shadow:0 40px 80px -44px rgba(10,24,48,.55)}
.ptabs-pic img{width:100%;height:100%;object-fit:cover}
/* product screens: show the whole UI on its own navy, never cropped */
.ptabs-pic.is-screen{display:grid;place-items:center;padding:clamp(10px,1.4vw,18px);background:var(--navy-0)}
.ptabs-pic.is-screen img{height:auto;object-fit:contain;border-radius:12px}
/* product cut-out on white: show both tablets whole */
.ptabs-pic.is-product{display:grid;place-items:center;padding:clamp(16px,2.4vw,32px);background:#fff;border:1px solid var(--line)}
.ptabs-pic.is-product img{height:auto;object-fit:contain}
/* without JS every pane is shown in sequence and the inert tab bar is dropped */
html:not(.js) .ptabs-list{display:none}
html:not(.js) .ptabs-panes{display:grid;gap:56px}
@media (max-width:900px){.ptabs-pane{grid-template-columns:1fr}.ptabs-pic{order:-1}}
/* phones: all four tabs visible as a 2x2 grid, no hidden overflow */
@media (max-width:600px){.ptabs-list{display:grid;grid-template-columns:1fr 1fr;width:100%;overflow:visible}.ptabs-list button{padding:10px 12px;font-size:14.5px;white-space:normal;line-height:1.25}}
@media (prefers-reduced-motion:reduce){.js .ptabs-pane:not([hidden]){animation:none}}

/* --- one partner table --- */
.pf-one thead th{width:36%}
.pf-one-sub{display:block;margin-top:6px;font-size:13.5px;font-weight:400;color:var(--fg-2);line-height:1.45}
.pf-one td.is-pick{color:var(--ink);font-weight:500}
.pf-one td:not(.is-pick){color:var(--ink-2)}

/* --- price strip --- */
.pf-prices{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-prices li{display:grid;gap:4px;align-content:start;padding:30px 24px;border-left:1px solid var(--line)}
.pf-prices li:first-child{border-left:0;padding-left:0}
.pf-prices b{font-family:var(--display);font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:10px}
.pf-prices span{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pf-prices small{font-size:14px;color:var(--fg-2,var(--ink-2))}
.pf-prices-cta{margin-top:32px}
@media (max-width:1000px){
  .pf-prices{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pf-prices li{grid-column:span 2;padding:24px 20px}
  .pf-prices li:nth-child(4){grid-column:1/span 3;border-left:0;padding-left:0}
  .pf-prices li:nth-child(5){grid-column:4/span 3}
  .pf-prices li:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:600px){
  .pf-prices{grid-template-columns:1fr 1fr}
  .pf-prices li,.pf-prices li:nth-child(4),.pf-prices li:nth-child(5){grid-column:auto;padding:22px 0 22px 16px;border-left:1px solid var(--line);border-top:0}
  .pf-prices li:nth-child(odd){border-left:0;padding-left:0}
  .pf-prices li:nth-child(n+3){border-top:1px solid var(--line)}
  .pf-prices li:last-child{grid-column:1/-1;border-left:0;padding-left:0}
  .pf-prices-cta .btn{flex:1 1 auto;justify-content:center}
}

/* one-partner table: caption inside the frame; stacked cards on phones */
.pf-one caption{padding:18px 20px 0}
@media (max-width:640px){
  .pf-one-wrap{overflow:visible}
  .pf-one,.pf-one tbody,.pf-one tr,.pf-one th,.pf-one td{display:block;width:100%;min-width:0}
  .pf-one{min-width:0}
  .pf-one thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pf-one caption{display:block;padding:16px 18px 4px}
  .pf-one tr{padding:18px;border-bottom:1px solid var(--line)}
  .pf-one tr:last-child{border-bottom:0}
  .pf-one tbody th{position:static;width:100%;padding:0 0 10px;border:0;background:none;font-family:var(--display);font-size:17px;color:var(--ink)}
  .pf-one td{padding:10px 12px;border:0;border-radius:10px}
  .pf-one td+td{margin-top:6px}
  .pf-one td.is-pick{background:rgba(51,161,255,.1);box-shadow:inset 3px 0 0 var(--blue)}
  .pf-one td[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--brand);margin-bottom:2px}
}

/* round 3: all tab panes share one grid cell so the tallest sets the height and nothing below jumps on tap */
.js .ptabs-panes{display:grid}
.js .ptabs-pane{grid-area:1/1}
.js .ptabs-pane[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media (max-width:900px){.js .ptabs-pane{align-items:start}}
/* diagram wire label stays readable on phones */
.t2c-wire-l{font-size:clamp(12px,.9vw,13px)}