/* ===== inner pages v2: sharper hero, asymmetric grids, calmer surfaces ===== */
.pg-hero{padding:min(15rem,17vw) 0 min(18rem,20vw);
  background:
    radial-gradient(46% 70% at 88% 0%,rgba(228,87,46,.5),transparent 60%),
    radial-gradient(38% 55% at 4% 100%,rgba(255,179,71,.2),transparent 65%),
    linear-gradient(165deg,#2b110b 0%,#170a09 58%,#0c0607 100%)}
.pg-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pg-hero::after{content:"";position:absolute;z-index:1;left:-12rem;top:-10rem;width:46rem;height:46rem;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 6rem rgba(255,255,255,.02),0 0 0 12rem rgba(255,255,255,.015);pointer-events:none}
.crumbs{display:inline-flex;padding:.8rem 1.6rem;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.pg-title{letter-spacing:-.01em;text-wrap:balance}
.pg-lead{text-wrap:pretty}
.pg-sec{padding:min(6rem,7vw) 0}
.pg-head{display:flex;align-items:center;gap:1.6rem}
.pg-head::after{content:"";flex:1;height:1px;background:var(--line)}
.pg-head h2{letter-spacing:-.01em}

/* filters */
.pfilter button{padding:1rem 2.6rem;font-weight:500}
.pfilter button.on{background:linear-gradient(120deg,#ffb347,#e4572e);border-color:transparent;color:#fff;box-shadow:0 1.4rem 3rem -1.4rem rgba(228,87,46,.7)}

/* project cards: borderless, staggered */
.pcard{background:transparent;border:0;border-radius:3.2rem}
.pcard-shot{border-radius:3.2rem;padding:2.8rem 2.8rem 0;overflow:hidden;background:radial-gradient(80% 100% at 50% 0%,color-mix(in srgb,var(--c) 42%,transparent),color-mix(in srgb,var(--c) 8%,transparent) 80%)}
.pcard-body{padding:2.4rem .6rem 0}
.pcard-foot{border-top:0;padding-top:1rem}
.pcard:hover{box-shadow:none;transform:translateY(-.6rem)}
.pcard:hover .pcard-shot{box-shadow:0 3rem 6rem -2.6rem color-mix(in srgb,var(--c) 80%,transparent)}
@media (min-width:50em){.pgrid .pcard:nth-child(even){margin-top:7rem}}
@media (min-width:80em){.pgrid .pcard:nth-child(even){margin-top:0}.pgrid .pcard:nth-child(3n+2){margin-top:8rem}}

/* features: bento */
.feat{border:0;background:var(--panel-2);border-radius:3rem;padding:3.6rem 3.2rem}
.feat-no{font-size:7rem;left:2rem;top:1rem;opacity:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 22%,transparent)}
.feat:hover{transform:translateY(-.6rem);box-shadow:0 2.6rem 5rem -2.8rem rgba(228,87,46,.5)}
@media (min-width:80em){
  .feat-grid>.feat:first-child{grid-column:span 2;color:#fff;background:linear-gradient(150deg,#e4572e,#a8331a)}
  .feat-grid>.feat:first-child p{color:rgba(255,255,255,.85);max-width:56ch}
  .feat-grid>.feat:first-child .feat-no{-webkit-text-stroke-color:rgba(255,255,255,.4)}
  /* the closing card is wide too, so the 7-item grid doesn't end on a lonely single cell */
  .feat-grid>.feat:last-child{grid-column:span 2;background:linear-gradient(150deg,var(--panel-2),color-mix(in srgb,var(--c-primary-400) 16%,var(--panel-2)));border:1px solid color-mix(in srgb,var(--c-primary-400) 30%,var(--line))}
  .feat-grid>.feat:last-child p{max-width:56ch}
}

/* steps: connected line */
.pg-steps li{border:0;background:var(--panel-2);border-radius:2.8rem;padding:2.8rem;flex-direction:column;gap:1.4rem}
.pg-steps li>span{background:linear-gradient(135deg,#ffb347,#e4572e);color:#fff;width:4.4rem;height:4.4rem}
@media (min-width:64em){
  .pg-steps:not(.tl){position:relative}
  .pg-steps:not(.tl)::before{content:"";position:absolute;right:6%;left:6%;top:4.6rem;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
  .pg-steps:not(.tl) li{position:relative;z-index:1}
}
.pg-steps.tl{position:relative;padding-right:0}
.pg-steps.tl li{flex-direction:row;align-items:center}
.pg-other{border:0;background:var(--panel-2)}

/* about */
.ab-numbers div{border:0;border-radius:3rem;padding:3.4rem 2rem}
.ab-numbers b{font-size:clamp(4rem,4.6vw,6.4rem);letter-spacing:-.02em}
.ab-story h2{letter-spacing:-.01em}
.ab-story p{max-width:62ch}

/* project detail */
.pd-facts div,.pd-block,.ct-tile{border:0;background:var(--panel-2)}
.pd-block{border-radius:3rem;padding:3.4rem}
.pd-stats div{border-radius:3rem}

/* shared CTA strip */
.proc-cta{border-radius:3.6rem}

/* ===== portfolio index: four columns ===== */
@media (min-width:64em){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}}
@media (min-width:64em){.pgrid .pcard:nth-child(even),.pgrid .pcard:nth-child(3n+2){margin-top:0}
  .pgrid .pcard:nth-child(4n+2),.pgrid .pcard:nth-child(4n+4){margin-top:5rem}}
.pgrid .pcard h3{font-size:2.2rem}
.pgrid .pcard-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgrid .pcard-shot{padding:1.8rem 1.8rem 0}
.pgrid .pcard-go{display:none}
.pgrid .pcard{cursor:pointer}

/* ===== inner-page banner: theme-aware, with an orbit illustration (all inner pages share .pg-hero) ===== */
.pg-hero::after{left:auto;top:50%;right:auto;width:min(56rem,46vw);aspect-ratio:1;height:auto;margin:0;border-radius:0;border:0;box-shadow:none;
  inset-inline-end:auto;left:-6rem;transform:translateY(-52%);background:url("../img/pg-orbit-dark.svg") center/contain no-repeat;opacity:.9;z-index:1;pointer-events:none;
  animation:pgFloat 16s ease-in-out infinite alternate}
@keyframes pgFloat{to{transform:translateY(-48%) rotate(6deg)}}
@media (max-width:63.99em){.pg-hero::after{width:36rem;left:-10rem;opacity:.5}}
@media (prefers-reduced-motion:reduce){.pg-hero::after{animation:none}}
.pg-hero .container{padding-block:0}
.pg-title{font-weight:800}

:root[data-theme="light"] .pg-hero{color:#2a1608;
  background:
    radial-gradient(46% 70% at 88% 0%,rgba(255,168,108,.6),transparent 60%),
    radial-gradient(38% 55% at 4% 100%,rgba(255,214,170,.7),transparent 65%),
    linear-gradient(165deg,#fff5ec 0%,#fde9d8 58%,#f8dcc4 100%)}
:root[data-theme="light"] .pg-hero::before{opacity:.12;mix-blend-mode:multiply}
:root[data-theme="light"] .pg-hero::after{background-image:url("../img/pg-orbit-light.svg")}
:root[data-theme="light"] .pg-grid{opacity:.35;background:radial-gradient(rgba(42,22,8,.28) 1px,transparent 1.5px) 0 0/3.2rem 3.2rem}
:root[data-theme="light"] .crumbs{color:rgba(42,22,8,.72);background:rgba(255,255,255,.55);border-color:rgba(42,22,8,.14)}
:root[data-theme="light"] .crumbs a:hover{color:#e4572e}
:root[data-theme="light"] .pg-title{background:linear-gradient(100deg,#2a1608 42%,#e4572e);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .pg-lead{color:rgba(42,22,8,.78)}
:root[data-theme="light"] .pg-en{color:#c8452b}
:root[data-theme="light"] .pg-hero .pcard-tags i{border-color:rgba(42,22,8,.25);color:#2a1608}
:root[data-theme="light"] .lp-tag{background:rgba(255,255,255,.6);border-color:rgba(42,22,8,.15);color:#2a1608}
:root[data-theme="light"] .lp-hero .pg-title em{background:linear-gradient(100deg,#e4572e,#b83a1f);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .lp-tel{color:#2a1608;border-bottom-color:rgba(42,22,8,.4)}
:root[data-theme="light"] .lp-stats li{background:rgba(255,255,255,.62);border-color:rgba(42,22,8,.12);color:#2a1608}
:root[data-theme="light"] .ar-meta{color:rgba(42,22,8,.72)}

/* ===== inner-page banner sits higher (breadcrumb closer to the header) ===== */
.pg-hero{padding-top:min(10.5rem,12vw)}
@media (max-width:49.99em){.pg-hero{padding-top:11rem;padding-bottom:16rem}}
.crumbs{margin-bottom:1.8rem}

/* ===== phones: the text under each portfolio card is larger ===== */
@media (max-width:49.99em){
  .pcard-cat{font-size:1.9rem}
  .pcard h3{font-size:3rem}
  .pcard-body p{font-size:2rem;line-height:1.9;-webkit-line-clamp:3}
  .pcard-tags i{font-size:1.6rem;padding:.5rem 1.6rem}
  .pcard-stat{font-size:1.8rem}
  .pcard-stat b{font-size:2.2rem}
}
@media (max-width:49.99em){.pgrid .pcard h3{font-size:3rem}.pgrid .pcard-body p{font-size:2rem;-webkit-line-clamp:3}}

/* phones: crumbs higher, more air below them, and the lead text stays above the wave */
@media (max-width:49.99em){
  .pg-hero{padding-top:7.5rem;padding-bottom:34rem}
  .crumbs{margin-bottom:3.6rem}
}
@media (max-width:49.99em){.pg-hero{padding-bottom:26rem}}

/* ===== banner spacing that follows the wave, at every width =====
   The wave's height is 26vw (capped), but the paddings were rem-based, so at tablet / small-laptop widths the
   text ran into the curve. The wave's crest reaches ~32% of its height, so the bottom padding is now derived
   from the wave height itself: 70% of it plus a fixed breathing gap. */
.pg-hero{padding-top:min(6.5rem,8vw);padding-bottom:calc(var(--wave-h) * .7 + 9rem)}
@media (max-width:49.99em){.pg-hero{padding-top:6.5rem;padding-bottom:calc(var(--wave-h) * .7 + 9rem)}}
.crumbs{margin-bottom:3rem}

/* ===== portfolio banner: eyebrow, accent word, fact tiles and a fan of project screens on the left ===== */
.pg-eyebrow{display:inline-flex;align-items:center;gap:1rem;margin-bottom:1.8rem;padding:.7rem 1.6rem;border-radius:99px;font-size:var(--fs-14);font-weight:600;letter-spacing:.02em;
  color:#ffd9b0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.pg-eyebrow i{width:.8rem;height:.8rem;border-radius:50%;background:#ffb347;box-shadow:0 0 0 .4rem rgba(255,179,71,.22)}
.pg-title em{font-style:normal;background:linear-gradient(100deg,#ffb347,#ff6a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-hero--work .pg-title{font-size:clamp(3.6rem,5.2vw,7.4rem);line-height:1.28;font-weight:800;max-width:none}
.pg-hero--work .pg-lead{max-width:60rem;font-size:clamp(1.7rem,1.35vw,2.2rem)}
.pg-facts{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2.8rem;list-style:none}
.pg-facts li{display:flex;flex-direction:column;gap:.2rem;min-width:13rem;padding:1.3rem 2rem;border-radius:2rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pg-facts b{font-size:clamp(2.6rem,2.4vw,3.4rem);line-height:1.2;font-weight:800;color:#fff}
.pg-facts span{font-size:var(--fs-14);opacity:.8}

/* the orbit illustration gives way to the project screens on this page */
.pg-hero--work::after{display:none}
.pg-art{display:none}
@media (min-width:64em){
  .pg-hero--work .container>*:not(.crumbs){max-width:min(66rem,56%)}
  .pg-hero--work .pg-facts{max-width:min(66rem,56%)}
  .pg-art{display:block;position:absolute;z-index:1;left:3.5%;top:50%;width:min(52rem,38vw);height:min(38rem,29vw);transform:translateY(-54%);pointer-events:none}
  .pg-shot{position:absolute;width:76%;margin:0;border-radius:1.6rem;overflow:hidden;background:#17181c;border:1px solid rgba(255,255,255,.16);
    box-shadow:0 3.2rem 6rem -2.2rem rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.2);animation:pgShot 9s ease-in-out infinite alternate}
  .pg-shot-bar{display:flex;align-items:center;gap:.6rem;height:2.8rem;padding:0 1.2rem;background:linear-gradient(#26272c,#1b1c20)}
  .pg-shot-bar i{width:.8rem;height:.8rem;border-radius:50%;background:#5a5d66}
  .pg-shot-bar i:first-child{background:#ff6a5c}.pg-shot-bar i:nth-child(2){background:#ffbd4a}.pg-shot-bar i:nth-child(3){background:#43c866}
  .pg-shot-bar b{margin-right:auto;font-size:1.15rem;font-weight:600;color:#a9acb5}
  .pg-shot-body{aspect-ratio:16/9.4;overflow:hidden;background:#fff}
  .pg-shot-body img{display:block;width:100%;height:auto}
  .pg-shot.s0{left:0;top:2%;transform:rotate(-8deg);z-index:1;animation-delay:-2s;filter:brightness(.82)}
  .pg-shot.s1{left:11%;top:22%;transform:rotate(-2deg);z-index:2;animation-delay:-5s;filter:brightness(.92)}
  .pg-shot.s2{left:24%;top:44%;transform:rotate(5deg);z-index:3}
  .pg-chip{position:absolute;z-index:4;padding:.8rem 1.6rem;border-radius:99px;font-size:1.4rem;font-weight:700;color:#fff;background:linear-gradient(120deg,#ffb347,#e4572e);box-shadow:0 1.4rem 3rem -1rem rgba(228,87,46,.8);animation:pgShot 7s ease-in-out infinite alternate}
  .pg-chip.c1{right:-2%;top:6%}.pg-chip.c2{left:2%;bottom:2%;animation-delay:-3s}
}
@keyframes pgShot{to{translate:0 -1.4rem}}
@media (prefers-reduced-motion:reduce){.pg-shot,.pg-chip{animation:none}}

:root[data-theme="light"] .pg-eyebrow{color:#8a3a12;background:rgba(255,255,255,.66);border-color:rgba(42,22,8,.16)}
:root[data-theme="light"] .pg-title em{background:linear-gradient(100deg,#e4572e,#b83a1f);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .pg-facts li{background:rgba(255,255,255,.66);border-color:rgba(42,22,8,.14)}
:root[data-theme="light"] .pg-facts b{color:#2a1608}
:root[data-theme="light"] .pg-shot{box-shadow:0 3rem 5rem -2.4rem rgba(120,60,20,.45),0 0 0 1px rgba(42,22,8,.12)}

/* portfolio cards are display-only: no pointer, no link */
.pgrid .pcard{cursor:default}

/* ===== portfolio banner art v2: a believable desk setup (replaces the fan of cartoon windows) ===== */
@media (min-width:64em){
  .pg-hero--work .pg-art{width:min(56rem,41vw);height:min(40rem,30vw);left:3%;transform:translateY(-54%)}
  .pg-glow{position:absolute;inset:-10% -8%;z-index:0;background:radial-gradient(closest-side,rgba(255,150,80,.42),rgba(255,150,80,.12) 55%,transparent 75%);filter:blur(1rem)}
  .pg-mon{position:absolute;z-index:1;left:0;top:4%;width:86%;transform:perspective(1400px) rotateY(9deg) rotateX(1.5deg);transform-origin:50% 100%}
  .pg-mon .monitor{width:100%}
  .pg-mon .monitor-screen{min-height:0}
  .pg-scroll{display:block;width:100%;height:auto;animation:pgScroll 22s ease-in-out infinite alternate}
  @keyframes pgScroll{from{transform:translateY(0)}to{transform:translateY(-34%)}}
  .pg-phone{position:absolute;z-index:3;right:0;bottom:3%;width:23%;aspect-ratio:9/19;padding:.75rem;border-radius:3.6rem;
    background:linear-gradient(140deg,#5b5e66 0%,#17181c 30%,#08080a 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 .35rem #0b0b0d,0 3.4rem 5.4rem -1.6rem rgba(0,0,0,.7),0 1rem 2rem rgba(0,0,0,.35);
    transform:perspective(1400px) rotateY(-8deg)}
  .pg-phone::before{content:"";position:absolute;left:-.25rem;top:22%;width:.3rem;height:6%;border-radius:2px;background:#3a3c42;box-shadow:0 3.4rem 0 #3a3c42}
  .pg-phone-screen{position:relative;height:100%;border-radius:2.9rem;overflow:hidden;background:#fff}
  .pg-phone-screen .pg-scroll{width:230%;max-width:none;animation-duration:26s;animation-direction:alternate-reverse}
  .pg-phone-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 34%,transparent 52%);pointer-events:none}
  .pg-notch{position:absolute;z-index:4;top:1.5rem;left:50%;width:30%;height:2rem;margin-left:-15%;border-radius:99px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .pg-floor{position:absolute;z-index:0;left:2%;right:0;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(.8rem)}
}
@media (prefers-reduced-motion:reduce){.pg-scroll{animation:none}}
:root[data-theme="light"] .pg-glow{background:radial-gradient(closest-side,rgba(255,150,80,.34),rgba(255,150,80,.1) 55%,transparent 75%)}
:root[data-theme="light"] .pg-floor{background:radial-gradient(closest-side,rgba(90,40,10,.35),transparent)}

/* ===== ai.html: feature icons + the zigzag "how do we start?" timeline with a rocket that climbs as you scroll ===== */
.feat-ic{display:flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;margin-bottom:1.8rem;border-radius:1.5rem;
  color:var(--c-primary-400);background:color-mix(in srgb,var(--c-primary-400) 14%,transparent);transition:transform .6s var(--ease5),background .4s}
.feat-ic svg{width:2.5rem;height:2.5rem}
.feat:hover .feat-ic{transform:rotate(-8deg) scale(1.08)}
@media (min-width:80em){.feat-grid>.feat:first-child .feat-ic{color:#fff;background:rgba(255,255,255,.18)}}

.ztl-sec{padding-bottom:min(8rem,10vw)}
.ztl-wrap{position:relative;max-width:112rem;margin:0 auto;padding:2rem 0}
.ztl{list-style:none;display:flex;flex-direction:column-reverse;gap:6.4rem;position:relative;z-index:2}   /* step 1 at the bottom: the rocket starts on the pad and climbs */
/* the rail is an SVG path drawn through the node centers (computed in ztl.js), so it naturally zigzags
   between the left and right steps instead of running straight down the middle */
.ztl-rail{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.ztl-line{fill:none;stroke:color-mix(in srgb,var(--fg) 28%,transparent);stroke-width:2;stroke-linecap:round;stroke-dasharray:.012 .026}
.ztl-fill{fill:none;stroke:#e4572e;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 .7rem rgba(255,150,70,.7))}
.ztl-rocket{position:absolute;left:0;top:0;width:4.4rem;height:8.8rem;will-change:transform,offset-distance;filter:drop-shadow(0 .8rem 1.6rem rgba(255,120,60,.6))}
.ztl-smoke{position:absolute;z-index:1;width:100%;height:100%;inset:0;pointer-events:none}
.ztl-rocket svg{display:block;width:100%;height:100%;overflow:visible}
.ztl-flame{transform-origin:24px 64px}
.flying .ztl-flame{animation:ztlFlame .14s ease-in-out infinite alternate}
@keyframes ztlFlame{from{transform:scaleY(.82) scaleX(.94)}to{transform:scaleY(1.22) scaleX(1.06)}}

.ztl-step{display:grid;grid-template-columns:minmax(0,1fr) 6.4rem minmax(0,1fr);align-items:center}
.ztl-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:3;width:5.6rem;height:5.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid color-mix(in srgb,var(--fg) 22%,transparent);
  font-size:2.3rem;font-weight:800;color:var(--fg-soft);transform:translateX(var(--nx,0));
  transition:background .5s,border-color .5s,color .5s,box-shadow .6s,transform .6s var(--ease5)}
.ztl-node b{font-weight:800;line-height:1}
.ztl-step.on .ztl-node{background:linear-gradient(135deg,#ffb347,#e4572e);border-color:transparent;color:#fff;transform:translateX(var(--nx,0)) scale(1.12);
  box-shadow:0 0 0 .9rem color-mix(in srgb,#e4572e 20%,transparent),0 1.6rem 3.4rem -.8rem rgba(228,87,46,.7)}
/* the node leans toward whichever side its card is on, so the rail connecting them actually zigzags */
@media (min-width:64em){.ztl-step--l{--nx:-2.6rem}.ztl-step--r{--nx:2.6rem}}

.ztl-card{grid-row:1;position:relative;overflow:hidden;isolation:isolate;padding:3rem 3.2rem;border-radius:2.8rem;background:linear-gradient(160deg,var(--panel-2),color-mix(in srgb,var(--fg) 4%,var(--panel-2)));border:1px solid var(--line);
  box-shadow:0 1.8rem 3.6rem -2.6rem rgba(0,0,0,.4);
  opacity:0;transform:translateX(var(--from,6rem));transition:opacity .9s var(--ease5),transform .9s var(--ease5),border-color .5s,box-shadow .6s}
.ztl-step:nth-child(odd) .ztl-card{grid-column:1;--from:7rem}
.ztl-step:nth-child(even) .ztl-card{grid-column:3;--from:-7rem}
.ztl-step.in .ztl-card{opacity:1;transform:none}
.ztl-card::after{content:"";position:absolute;top:50%;width:3.6rem;height:2px;background:repeating-linear-gradient(to right,color-mix(in srgb,var(--fg) 30%,transparent) 0 6px,transparent 6px 12px)}
.ztl-step:nth-child(odd) .ztl-card::after{left:-3.6rem}
.ztl-step:nth-child(even) .ztl-card::after{right:-3.6rem}
.ztl-step.on .ztl-card{border-color:color-mix(in srgb,var(--c-primary-400) 55%,var(--line));box-shadow:0 2.6rem 5.4rem -2.6rem rgba(228,87,46,.55)}
.ztl-step.on .ztl-card::after{background:linear-gradient(to right,#e4572e,#ffb347)}
.ztl-card small{display:inline-block;margin-bottom:1rem;padding:.4rem 1.3rem;border-radius:99px;font-size:1.3rem;font-weight:600;color:var(--c-primary-400);background:color-mix(in srgb,var(--c-primary-400) 12%,transparent)}
.ztl-card h3{font-size:clamp(2.4rem,2.2vw,3.2rem);font-weight:800;line-height:1.4;margin-bottom:.8rem}
.ztl-card p{color:var(--fg-soft);line-height:2.05;font-size:var(--fs-16)}
.ztl-out{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.8rem;padding:.8rem 1.6rem;border-radius:99px;font-size:1.4rem;font-weight:600;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.ztl-out::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--fg-soft);transition:background .5s}
.ztl-step.on .ztl-out::before{background:var(--c-primary-400);box-shadow:0 0 0 .4rem color-mix(in srgb,var(--c-primary-400) 22%,transparent)}

/* phones and tablets: one column, the rail runs down the right-hand edge */
@media (max-width:63.99em){
  .ztl{gap:4rem}
  .ztl-step{grid-template-columns:5.8rem minmax(0,1fr)}
  .ztl-node{grid-column:1;width:4.6rem;height:4.6rem;font-size:2rem}
  .ztl-step:nth-child(odd) .ztl-card,.ztl-step:nth-child(even) .ztl-card{grid-column:2;--from:-4rem;padding:2.4rem 2.4rem}
  .ztl-step:nth-child(odd) .ztl-card::after,.ztl-step:nth-child(even) .ztl-card::after{display:none}
  .ztl-rocket{width:3.6rem;height:7.2rem}
}
@media (prefers-reduced-motion:reduce){.flying .ztl-flame{animation:none}.ztl-card{transition:none;opacity:1;transform:none}}

/* ===== a little more air under the breadcrumb pill, on every inner page ===== */
.crumbs{margin-bottom:3.8rem}
@media (max-width:49.99em){.crumbs{margin-bottom:4.4rem}}

/* ===== banner icon art (blog, about): a big line-art glyph in place of the monitor/phone pair ===== */
.pg-art--ic{display:flex;align-items:center;justify-content:center}
.pg-art--ic svg{position:relative;z-index:1;width:62%;height:62%;color:#fff;opacity:.92;filter:drop-shadow(0 1.6rem 3rem rgba(0,0,0,.35))}