:root{
  --ink:#060B16;
  --panel:#0E1830;
  --navy:#1B2A6B;
  --cyan:#29ABE2;
  --text:#E8EDF7;
  --muted:#8393B4;
  --line:#1C2A47;
}
/* Sizes are in rem so the whole page scales with the root font size.
   Root scaling matches klicnsend.com: x1.33 from 2560px, x2 at 4K. */
html{font-size:16px;scroll-behavior:smooth}
@media (min-width:2560px){html{font-size:21.333px}}
@media (min-width:3840px){html{font-size:32px}}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Side padding matches the klicnsend.com header exactly, in px:
   16 / 48 from 900 / 160 from 1920 / 160 capped at 2560 / 240 at 4K */
.wrap{max-width:2560px;margin:0 auto;padding:0 16px}
@media (min-width:900px){.wrap{padding:0 48px}}
@media (min-width:1920px){.wrap{padding:0 160px}}
@media (min-width:3840px){.wrap{max-width:none;padding:0 240px}}

/* header */
header{
  padding:1.75rem 0;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;
  background:rgba(6,11,22,.86);
  backdrop-filter:blur(10px);
  z-index:20;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
header img{height:3.5rem;width:auto;max-width:100%;display:block}
header a.contact{
  flex-shrink:0;
  color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;
  border:1px solid var(--line);padding:.5625rem 1.125rem;border-radius:2px;
  transition:border-color .2s,color .2s;
}
header a.contact:hover,header a.contact:focus-visible{border-color:var(--cyan);color:var(--cyan)}

/* language selector - copied from klicnsend.com's LanguageSelect.vue, in px:
   flag h-3 w-5 / xl h-4 w-6 / 2xl h-5 w-7 / res-2560 h-7 w-9 / 4K h-10 w-14;
   code text-sm / xl text-lg / res-2560 text-2xl / 4K text-4xl;
   white dropdown w-40 / res-2560 w-56 / 4K w-80 */
.lang{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:#fff;font:inherit;font-weight:600}
.lang-btn:hover,.lang-btn:focus-visible{background:none}
.lang-btn img{width:20px;height:12px;object-fit:contain;flex-shrink:0}
.lang-code{width:24px;flex-shrink:0;text-transform:uppercase;font-size:14px;text-align:left}
.lang-arrow{width:10px;height:10px;flex-shrink:0;color:#fff}
.lang-list{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin:8px 0 0;width:160px;
  background:#fff;color:#000;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.25),0 4px 6px -4px rgba(0,0,0,.2);
  list-style:none;padding:8px 0;z-index:30;text-transform:uppercase;font-size:12px}
.lang-list li{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer}
.lang-list li+li{margin-top:4px}
.lang-list li:hover{background:#d1d5db}
.lang-list li img{width:24px;height:16px;object-fit:contain}
@media (min-width:1280px){
  .lang-btn img{width:24px;height:16px}
  .lang-code{font-size:18px}
  .lang-arrow{width:12px;height:12px}
  .lang-list{font-size:14px}
}
@media (min-width:1536px){
  .lang-btn img,.lang-list li img{width:28px;height:20px}
  .lang-arrow{width:14px;height:14px}
  .lang-list{font-size:16px}
}
@media (min-width:2560px){
  .lang-btn img,.lang-list li img{width:36px;height:28px}
  .lang-code{width:40px;font-size:24px}
  .lang-arrow{width:20px;height:20px}
  .lang-list{width:224px;font-size:20px}
  .lang-list li{padding:12px 24px}
}
@media (min-width:3840px){
  .lang-btn img,.lang-list li img{width:56px;height:40px}
  .lang-code{width:64px;font-size:36px}
  .lang-arrow{width:28px;height:28px}
  .lang-list{width:320px;font-size:30px}
  .lang-list li{padding:20px 32px}
}
/* small screens: open the list to the left so it never runs off the edge */
@media (max-width:899px){.lang-list{left:auto;right:0;transform:none}}

/* hero */
.hero{padding:3rem 0 1.5rem;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-16.25rem;top:-11.25rem;width:45rem;height:45rem;
  background:radial-gradient(circle,rgba(41,171,226,.16),transparent 62%);
  pointer-events:none;
}
.hero h1{
  font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 1.125rem;
}
/* the title breaks after "sale" on wide screens; phones wrap naturally */
.hero h1 .br{display:block}
.hero p{
  font-size:clamp(1.05rem,1.5vw,1.15rem);
  color:var(--muted);
  max-width:72ch;
  margin:0;
}

/* channels */
.journey{padding:.75rem 0 6.875rem}
.journey h2{
  font-size:1.05rem;font-weight:600;color:var(--muted);
  margin:0 0 .375rem;letter-spacing:.01em;
}
.journey .lead{color:var(--muted);margin:0 0 2.25rem;max-width:62ch}
.rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  position:relative;
  border-top:1px solid var(--line);
}
.node{
  padding:1.75rem 1.625rem 2rem;
  border-right:1px solid var(--line);
  position:relative;
  text-align:center;
}
.node:last-child{border-right:0}
/* the dot sits above the centre of each card, in line with its content */
.node::before{
  content:"";position:absolute;top:-.3125rem;left:50%;margin-left:-.28125rem;
  width:.5625rem;height:.5625rem;border-radius:50%;
  background:var(--line);
}
.node h3{font-size:1.45rem;font-weight:800;margin:0 0 .75rem;letter-spacing:-.01em}
.node p{color:var(--muted);font-size:.97rem;margin:0}
.node .status{
  display:block;margin-top:1.125rem;font-size:1.05rem;font-weight:600;
  color:var(--muted);
}
/* "Learn more" button under each card, same style as the header's Contact */
.node .more{
  display:inline-block;justify-self:center;align-self:start;margin-top:1.5rem;max-width:100%;
  color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;
  border:1px solid var(--line);padding:.5625rem 1.5rem;border-radius:2px;
  transition:border-color .2s,color .2s;
}
.node .more:hover,.node .more:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.node.live .more{border-color:var(--cyan)}

/* live node */
.node.live::before{background:var(--cyan);box-shadow:0 0 0 .3125rem rgba(41,171,226,.16)}
.node.live{background:linear-gradient(180deg,rgba(41,171,226,.07),transparent 72%)}
.node.live h3{color:#fff}
.node.live .status{color:var(--cyan)}
/* .mark holds the Klic n Send logo or a channel icon, all the same height
   so the titles below line up across the four cards */
.mark{height:5rem;margin:0 0 1.25rem;display:flex;align-items:center;justify-content:center}
.mark img{height:100%;width:auto;max-width:100%;display:block}
.mark svg{height:100%;width:auto;display:block;color:var(--muted)}
.node .status a{color:var(--cyan);text-decoration:none;font-weight:600}
.node .status a:hover,.node .status a:focus-visible{text-decoration:underline}

/* contact form layout */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:4.5rem;align-items:start}
.contact-grid p{color:var(--muted);margin:0 0 .875rem;max-width:44ch;font-size:clamp(1.05rem,1.7vw,1.2rem)}
.contact-grid a.mail{color:var(--cyan);text-decoration:none;font-weight:600}
.contact-grid a.mail:hover{text-decoration:underline}

form{display:grid;gap:1.125rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem}
label{display:block;font-size:.88rem;font-weight:600;margin:0 0 .4375rem;color:var(--text)}
input,textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--text);
  font:inherit;
  font-size:.97rem;
  padding:.75rem .875rem;
  transition:border-color .18s;
}
input:focus,textarea:focus{outline:none;border-color:var(--cyan)}
textarea{min-height:8.25rem;resize:vertical}
button{
  justify-self:start;
  background:var(--cyan);
  color:#04101C;
  border:0;border-radius:2px;
  font:inherit;font-weight:800;font-size:.97rem;
  padding:.8125rem 2rem;
  cursor:pointer;
  transition:background .18s;
}
button:hover,button:focus-visible{background:#4CC0F0}
button[disabled]{opacity:.55;cursor:not-allowed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:.92rem;margin:0}
.note.ok{color:var(--cyan)}
.note.err{color:#FF8A7A}

/* footer - same structure as klicnsend.com: logo left, links middle,
   social right, then a lighter bottom bar with the copyright */
footer{border-top:1px solid var(--line)}
.foot-main{padding:2.5rem 0}
.foot-main .wrap{display:flex;align-items:center;gap:4rem}
/* footer logo width copied from klicnsend.com's footer: w-40 / xl:w-52 /
   2xl:w-60 / res-2560:w-80 / 4K w-[22rem] (height follows the image) */
.foot-logo{width:160px;height:auto;max-width:100%;display:block;flex-shrink:0}
@media (min-width:1280px){.foot-logo{width:208px}}
@media (min-width:1536px){.foot-logo{width:240px}}
@media (min-width:2560px){.foot-logo{width:320px}}
@media (min-width:3840px){.foot-logo{width:352px}}
/* tablets and phones (stacked footer): the KT wordmark is much wider than
   tall, so KNS's 160px reads too small here - larger until 1024px */
@media (max-width:1023px){.foot-logo{width:300px}}
@media (max-width:560px){.foot-logo{width:240px}}
.foot-nav{display:flex;gap:2.5rem;flex:1;justify-content:center}
.foot-nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:16px}
/* link sizes copied from klicnsend.com's footer: base / lg:text-lg /
   xl:text-xl / 2xl:text-2xl / res-2560 text-4xl / 4K text-5xl */
@media (min-width:1024px){.foot-nav a{font-size:18px}}
@media (min-width:1280px){.foot-nav a{font-size:20px}}
@media (min-width:1536px){.foot-nav a{font-size:24px}}
@media (min-width:2560px){.foot-nav a{font-size:36px}}
@media (min-width:3840px){.foot-nav a{font-size:48px}}
.foot-nav a:hover,.foot-nav a:focus-visible,.foot-nav a[aria-current="page"]{color:var(--cyan)}
.foot-social{text-align:center;flex-shrink:0}
.foot-social p{margin:0 0 .625rem;font-weight:800;font-size:1.05rem;color:var(--text)}
.foot-social .icons{display:flex;justify-content:center;gap:1rem}
/* icons only for now - the Klic Technologies pages do not exist yet */
.foot-social svg{width:1.75rem;height:1.75rem;display:block;color:var(--muted)}
/* the Facebook glyph is a circle filling ~83% of its box, LinkedIn a square
   filling all of it; scaling Facebook by 1.2 makes both read the same size */
.foot-social span[title^="Facebook"] svg{transform:scale(1.2)}
.foot-bar{background:var(--panel);border-top:1px solid var(--line);padding:1.25rem 0;text-align:center}
.foot-bar p{margin:0;color:var(--muted);font-size:.85rem;font-weight:600}

/* footer sizing copied from klicnsend.com's Footer.vue, in px so it matches
   KNS exactly instead of following this page's root scaling:
   container max-w-screen-2xl (1536) px-5 / md:px-12, res-2560 max 2560 px-40,
   4K max 3840 px-60; py-10 / res-2560 py-20 / 4K py-28 */
footer .wrap{max-width:1536px;padding:0 20px}
@media (min-width:768px){footer .wrap{padding:0 48px}}
@media (min-width:2560px){footer .wrap{max-width:2560px;padding:0 160px}}
@media (min-width:3840px){footer .wrap{max-width:3840px;padding:0 240px}}
.foot-main{padding:40px 0}
@media (min-width:2560px){.foot-main{padding:80px 0}}
@media (min-width:3840px){.foot-main{padding:112px 0}}
/* social block: title text-xl / md:text-2xl / res-2560 text-5xl / 4K text-6xl;
   icons size-5 / lg:6 / res-1680:7 / res-1920:8 / res-2560:12 / 4K:16 */
.foot-social{padding-top:20px}
.foot-social p{font-size:20px;line-height:1.4;margin:0}
.foot-social .icons{gap:16px;margin-top:12px}
.foot-social svg{width:20px;height:20px}
@media (min-width:768px){.foot-social p{font-size:24px}}
@media (min-width:1024px){.foot-social svg{width:24px;height:24px}}
@media (min-width:1680px){.foot-social svg{width:28px;height:28px}}
@media (min-width:1920px){.foot-social svg{width:32px;height:32px}}
@media (min-width:2560px){
  .foot-social p{font-size:48px}
  .foot-social svg{width:48px;height:48px}
  .foot-social .icons{gap:24px;margin-top:20px}
}
@media (min-width:3840px){
  .foot-social p{font-size:60px}
  .foot-social svg{width:64px;height:64px}
  .foot-social .icons{gap:32px;margin-top:24px}
}

/* contact page */
.contact-page{padding:3rem 0 2.5rem}
.contact-page h1{font-weight:800;font-size:clamp(2.3rem,5.6vw,4.1rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1.25rem}
header a.contact[aria-current="page"]{border-color:var(--cyan);color:var(--cyan)}

/* channel detail pages (shipping / fulfillment / payment / sales) */
.detail{padding:4.5rem 0 6.875rem}
.detail .back{display:inline-block;margin:0 0 2.5rem;color:var(--muted);text-decoration:none;font-weight:600;font-size:1.2rem}
.detail .back:hover,.detail .back:focus-visible{color:var(--cyan)}
.detail .mark{justify-content:flex-start;height:6rem;margin-bottom:1.75rem}
.detail h1{font-weight:800;font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1rem}
.detail .lead{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:60ch;margin:0 0 1.25rem}
.detail .status{display:block;font-size:1.05rem;font-weight:600;color:var(--muted);margin:0 0 2.5rem}
.detail.live .status{color:var(--cyan)}
.detail .status a{color:var(--cyan);text-decoration:none}
.detail .status a:hover{text-decoration:underline}
.detail .soon{border:1px solid var(--line);background:var(--panel);padding:1.75rem 2rem;max-width:60ch;border-radius:2px}
.detail .soon p{margin:0;color:var(--muted)}
.detail .soon a{color:var(--cyan);text-decoration:none;font-weight:600}
.detail .soon a:hover{text-decoration:underline}

/* first screen (desktop): the hero and the four channels fill exactly one
   screen below the header, and the channel cards stretch to take whatever
   height is left. --hdr is the header's height at each size. */
:root{--hdr:7rem}
@media (min-width:900px){
  .fold{min-height:calc(100svh - var(--hdr) - 1px);display:flex;flex-direction:column}
  .fold .journey{flex:1;display:flex;flex-direction:column;padding-bottom:2.5rem}
  .fold .journey .wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .fold .rail{flex:1}
}

/* desktop: the four cards share one set of rows (subgrid), so icon, title,
   text, status and button sit on the same line in every card no matter how
   many lines each description wraps to */
@media (min-width:900px){
  .rail{grid-template-rows:auto auto auto auto auto 1fr}
  .node{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;padding-top:2.375rem}
}

/* shorter desktop screens (laptops): tighten vertically so the four channels
   stay visible without scrolling */
@media (min-width:900px) and (max-height:860px){
  :root{--hdr:6rem}
  header{padding:1.25rem 0}
  .hero{padding:2.75rem 0 1.25rem}
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin:0 0 1.125rem}
  .journey .lead{margin:0 0 1.5rem}
  .node{padding-top:1.8125rem;padding-bottom:1.5rem}
  .mark{height:4rem;margin-bottom:1rem}
}

@media (min-width:900px) and (max-height:740px){
  :root{--hdr:4.5rem}
  header{padding:.875rem 0}
  header img{height:2.75rem}
  .hero{padding:1.75rem 0 .75rem}
  .hero h1{font-size:clamp(2.1rem,4vw,2.8rem);margin:0 0 .875rem}
  .hero p{font-size:1.05rem;line-height:1.5}
  .journey{padding-top:.5rem}
  .journey .lead{margin:0 0 1.125rem}
  .node{padding-top:1.3125rem;padding-bottom:1.125rem}
  .mark{height:3.25rem;margin-bottom:.75rem}
  .node h3{margin-bottom:.5rem}
  .node .status{margin-top:.75rem}
}

/* below 900px: one column (900 itself uses the desktop layout, as klicnsend.com does) */
@media (max-width:899px){
  .rail{grid-template-columns:1fr;border-top:0}
  .node{border-right:0;border-top:1px solid var(--line);padding:1.875rem 0 2.125rem}
  .contact-grid{grid-template-columns:1fr;gap:2.75rem}
  .contact-page{padding:3.5rem 0 4.5rem}
  .detail{padding:3rem 0 4.5rem}
  .hero{padding:3.5rem 0 3rem}
  .hero h1 .br{display:inline}
}
/* 1024-1279: French and Spanish footer labels are longer, so the logo and
   gaps shrink a step to keep the row inside the page */
@media (min-width:1024px) and (max-width:1279px){
  .foot-main .wrap{gap:3rem}
}
/* footer stacks below 1024px, as klicnsend.com's does (lg:flex) */
@media (max-width:1023px){
  .foot-main .wrap{flex-direction:column;gap:1.75rem;text-align:center}
  .foot-nav{gap:1.75rem}
}
/* small tablets: keep the logo from pushing Contact off-screen */
@media (max-width:760px){
  header img{height:2.5rem}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  header{padding:1.125rem 0}
  header img{height:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ===== hero image (licensed iStock 987365514): the laptop and network sit on
   the right; the left fades into the image's own navy so the title stays
   readable, and the lower part darkens behind the four cards ===== */
:root{--wire:#F5A623;--hot:#FF4D6D;--glow:#00E5FF}
.fold{
  background:
    linear-gradient(0deg,rgba(3,11,28,.96) 0%,rgba(3,11,28,.82) 34%,rgba(3,11,28,0) 56%),
    linear-gradient(90deg,#01245A 0%,#01245A 34%,rgba(1,36,90,.7) 46%,rgba(1,36,90,0) 62%),
    url(assets/kt-hero.jpg) right -6% top 40%/auto 112% no-repeat,
    #01245A;
}
.hero::after{display:none}
/* card rail: dotted orange line with glowing rings, like the image's paths */
.rail{border-top:0}
/* the dotted line is drawn above the card panels so they never hide it */
.rail::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--wire) 0 2px,transparent 2px 9px)}
.node::before{z-index:2}
.node::before{background:#030b1c;border:2px solid var(--wire);width:.75rem;height:.75rem;top:-.3125rem;margin-left:-.375rem;box-shadow:0 0 10px rgba(245,166,35,.55)}
.node.live::before{background:#030b1c;border-color:var(--hot);box-shadow:0 0 0 4px rgba(255,77,109,.18),0 0 14px rgba(255,77,109,.7)}
.node{border-right-color:rgba(0,229,255,.14)}
.node.live{background:linear-gradient(180deg,rgba(0,229,255,.10),transparent 72%)}
/* dark translucent panel behind each card so the text never mixes with the
   image; the blur softens whatever shows through */
@media (min-width:900px){
  .node{background:rgba(3,11,28,.60);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .node.live{background:linear-gradient(180deg,rgba(0,229,255,.12),rgba(3,11,28,.60) 72%)}
}
.mark svg{color:var(--glow);filter:drop-shadow(0 0 6px rgba(0,229,255,.55))}
.node .more{border-color:rgba(0,229,255,.35)}
/* phones/tablets: image on top of the hero, cards on plain navy below */
@media (max-width:899px){
  .rail::after{display:none}
  .fold{background:none}
  .hero{background:
    linear-gradient(0deg,#060B16 0%,rgba(6,11,22,.6) 45%,rgba(6,11,22,.35) 100%),
    url(assets/kt-hero-1200.jpg) 70% center/cover no-repeat}
}
/* larger footer link spacing and language selector from 768px up */
@media (min-width:768px) and (max-width:1279px){.foot-nav{gap:3rem}}
@media (min-width:1280px){.foot-nav{gap:4rem}}
@media (min-width:768px){
  .lang-btn img{width:24px;height:16px}
  .lang-list li img{width:28px;height:20px}
  .lang-code{width:28px;font-size:16px}
  .lang-arrow{width:12px;height:12px}
}
@media (min-width:1280px){
  .lang-btn img{width:28px;height:20px}
  .lang-code{width:32px;font-size:20px}
  .lang-arrow{width:14px;height:14px}
  .lang-list{font-size:16px}
}
@media (min-width:1536px){
  .lang-btn img,.lang-list li img{width:32px;height:22px}
  .lang-code{width:34px;font-size:22px}
  .lang-arrow{width:16px;height:16px}
  .lang-list{font-size:18px}
}
@media (min-width:2560px){
  .lang-btn img,.lang-list li img{width:44px;height:32px}
  .lang-code{width:48px;font-size:28px}
  .lang-arrow{width:24px;height:24px}
  .lang-list{font-size:24px}
}
@media (min-width:3840px){
  .lang-btn img,.lang-list li img{width:64px;height:48px}
  .lang-code{width:72px;font-size:42px}
  .lang-arrow{width:32px;height:32px}
  .lang-list{font-size:36px}
}
/* larger footer links on ipad widths */
@media (min-width:768px) and (max-width:1023px){.foot-nav a{font-size:20px}}
@media (min-width:1024px) and (max-width:1279px){.foot-nav a{font-size:22px}}
@media (min-width:1280px) and (max-width:1366px){.foot-nav a{font-size:24px}}
/* larger kt footer logo on ipad pro widths */
@media (min-width:1024px){.foot-logo{width:256px}}
@media (min-width:1280px){.foot-logo{width:320px}}
@media (min-width:1536px){.foot-logo{width:368px}}
@media (min-width:2560px){.foot-logo{width:480px}}
@media (min-width:3840px){.foot-logo{width:528px}}
/* push the footer social block left from ipad pro up */
@media (min-width:1024px){.foot-social{padding-right:64px}}
@media (min-width:1280px){.foot-social{padding-right:80px}}
@media (min-width:1536px){.foot-social{padding-right:96px}}
@media (min-width:2560px){.foot-social{padding-right:160px}}
@media (min-width:3840px){.foot-social{padding-right:224px}}
/* tighter left edge in the footer from 1680 up */
@media (min-width:1680px){footer .wrap{padding-left:32px}}
@media (min-width:2560px){footer .wrap{padding-left:120px}}
@media (min-width:3840px){footer .wrap{padding-left:180px}}
/* equal side columns so the footer links centre on the page */
@media (min-width:1024px){
  .foot-main .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0}
  .foot-nav{flex:0 0 auto;justify-content:center}
  .foot-social{justify-self:end}
}
/* wider side padding inside the channel cards on desktop */
@media (min-width:900px){.node{padding-left:40px;padding-right:40px}}
@media (min-width:1680px){.node .status{white-space:nowrap}}
/* channel and about page backgrounds, one image per page */
.page-shipping{--page-img:url(assets/shipping.jpg);--page-img-sm:url(assets/shipping-1200.jpg)}
.page-sales{--page-img:url(assets/sales.jpg);--page-img-sm:url(assets/sales-1200.jpg)}
.page-fulfillment{--page-img:url(assets/fulfillment.jpg);--page-img-sm:url(assets/fulfillment-1200.jpg)}
.page-payments{--page-img:url(assets/payments.jpg);--page-img-sm:url(assets/payments-1200.jpg)}
.page-about{--page-img:url(assets/about.jpg);--page-img-sm:url(assets/about-1200.jpg)}
@media (min-width:900px){
  body[class^="page-"] .detail{
    background:
      linear-gradient(90deg,#01245A 0%,#01245A 34%,rgba(1,36,90,.7) 46%,rgba(1,36,90,0) 62%),
      var(--page-img) var(--page-pos,right center)/var(--page-size,cover) no-repeat,
      #01245A;
  }
}
@media (max-width:899px){
  body[class^="page-"] .detail{
    background:
      linear-gradient(0deg,#060B16 0%,rgba(6,11,22,.75) 45%,rgba(6,11,22,.55) 100%),
      var(--page-img-sm) var(--page-pos-sm,70% center)/var(--page-size-sm,cover) no-repeat;
  }
}
/* channel and about pages fill the first screen, like the home page */
@media (min-width:900px){
  body[class^="page-"] .detail{min-height:calc(100svh - var(--hdr) - 1px)}
}
/* body text on channel and about pages */
.detail .body{max-width:60ch;color:var(--muted)}
.detail .body p{margin:0 0 1rem;font-size:1.05rem;line-height:1.6}
.detail .body h2{font-size:1.2rem;font-weight:800;color:var(--text);margin:2rem 0 .75rem}
.detail .body ul{margin:0;padding-left:1.2rem}
.detail .body li{margin:.4rem 0;line-height:1.5}
/* tighter vertical spacing so channel pages fit one screen */
@media (min-width:900px){
  .detail{padding:2.5rem 0 2.5rem}
  .detail .back{margin-bottom:1.5rem}
  .detail .mark{height:4.5rem;margin-bottom:1.25rem}
  .detail .status{margin-bottom:1.75rem}
  .detail .body h2{margin-top:1.5rem}
}
/* live status pill on the shipping page */
.detail.live .status{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;
  border:1px solid rgba(0,229,255,.55);background:rgba(0,229,255,.10);border-radius:999px;
  font-size:1.15rem;font-weight:700;color:#fff;transition:box-shadow .2s}
.detail.live .status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0;
  background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.8)}
.detail.live .status::after{content:"\2192";color:var(--cyan)}
.detail.live .status a{color:var(--cyan);font-weight:700}
.detail.live .status:hover{box-shadow:0 0 18px rgba(0,229,255,.35)}
/* larger body text on channel and about pages */
@media (min-width:900px){
  .detail .body p{font-size:1.2rem}
  .detail .body li{font-size:1.15rem}
  .detail .body h2{font-size:1.4rem}
  .detail .body{max-width:40rem}
  .detail .body p{line-height:1.5}
}
/* roadmap status pill on channel pages */
.detail:not(.live) .status{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;
  border:1px solid rgba(245,166,35,.55);background:rgba(245,166,35,.10);border-radius:999px;
  font-size:1.15rem;font-weight:700;color:#fff}
.detail:not(.live) .status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0;
  background:var(--wire);box-shadow:0 0 8px rgba(245,166,35,.8)}
/* larger channel icons and logo on the home cards from full HD up */
@media (min-width:1920px) and (min-height:861px){
  .node .mark{height:6.25rem;margin-bottom:1.5rem}
}