*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#1a2f4a;color:#fff;font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}

.atmo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

.atmo-orb{position:absolute;border-radius:50%;filter:blur(120px);}
.atmo-orb.o1{width:500px;height:500px;background:#1e3a5f;opacity:0.18;top:-200px;left:50%;transform:translateX(-50%);animation:orb1 14s ease-in-out infinite;}
.atmo-orb.o2{width:400px;height:400px;background:#2c5a82;opacity:0.13;top:40%;left:-100px;animation:orb2 16s ease-in-out infinite;}
.atmo-orb.o3{width:350px;height:350px;background:#2c5a82;opacity:0.11;bottom:-80px;right:-80px;animation:orb3 12s ease-in-out infinite;}
@keyframes orb1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-40px)}}
@keyframes orb2{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes orb3{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;padding:0 24px;height:68px;background:linear-gradient(90deg, #deeef8 0%, #4A6D8C 320px, #4A6D8C 100%);box-shadow:0 4px 24px rgba(0,0,0,0.45);border-bottom:1px solid rgba(255,255,255,0.03);}
.topbar-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex-shrink:0;margin-right:20px;}
.topbar-nav{margin-left:64px;display:flex;align-items:center;gap:28px;margin-right:auto;}.topbar-nav a{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:rgba(255,255,255,0.75);text-decoration:none;letter-spacing:0.3px;transition:color 0.2s;cursor:pointer;}
.topbar-nav a:hover{color:#fff;}
.bundle-rotator{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:5px 12px 5px 10px;min-width:320px;flex-shrink:0;margin-right:28px;}
.bundle-rotator-icon{font-size:13px;flex-shrink:0;}
.bundle-rotator-track{position:relative;height:19px;overflow:hidden;flex:1;}
.bundle-rotator-item{position:absolute;top:0;left:0;width:100%;font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity 0.5s,transform 0.5s;}
.bundle-rotator-item.active{opacity:1;transform:translateY(0);}
.bundle-rotator-item.exit{opacity:0;transform:translateY(-100%);}
.bundle-rotator-cta{font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:10px;padding:3px 9px;cursor:pointer;flex-shrink:0;}
.topbar-actions{display:flex;align-items:center;gap:28px;flex-shrink:0;}
.btn-signin,.btn-trial{background:none;border:none;padding:0;color:rgba(255,255,255,0.85);font-size:16px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;}
.topbar-spacer{flex:1;}

/* PAGE LAYOUT */
.page-wrap{position:relative;z-index:5;display:flex;flex-direction:row;align-items:flex-start;width:100%;padding-top:72px;}
.side-panel{width:300px;flex-shrink:0;padding:24px 8px;}.page-centre{flex:1;min-width:0;padding:0 16px;}

/* HERO */
.hero{text-align:center;padding:20px 24px 20px;}
/* Bundle stickers flanking the main heading. Held well clear of it — the gap is
   deliberately generous so they read as a pair of marks either side rather than
   as part of the headline. */
.hero-row{display:flex;align-items:center;justify-content:center;gap:124px;}
/* min-width:0 lets the headline wrap inside the flex row. Without it a flex
   item refuses to shrink below its content and the row runs off narrow screens
   instead of the heading taking a second line. */
.hero-row h1{min-width:0;}
.hero-sticker{display:block;width:104px;height:104px;flex-shrink:0;}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-size:64px;font-weight:900;line-height:0.95;text-transform:uppercase;letter-spacing:-1px;}
.hero h1 .h-line{display:block;background:linear-gradient(to right,#ffffff,#e8d5b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.hero h1 .word-accent{background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.hiw-step-title .word-accent{background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;}.hiw-heading .word-accent{background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;}

.section-label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;margin:20px auto 32px;background:linear-gradient(135deg,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.section-label::before,.section-label::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,#d4844a);flex-shrink:0;-webkit-text-fill-color:initial;}
.section-label::after{background:linear-gradient(90deg,#d4844a,transparent);}

/* CATEGORY TABS — the three category cards act as tabs that drive the spotlight */
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 12px 26px;}
.industry-card{position:relative;border-radius:14px;cursor:pointer;border:2px solid rgba(255,255,255,0.10);background:linear-gradient(135deg,rgba(30,58,95,0.45),rgba(20,35,58,0.55));padding:20px 22px;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),border-color 0.25s,background 0.25s;animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1) both;}
.industry-card:nth-child(2){animation-delay:0.06s}.industry-card:nth-child(3){animation-delay:0.12s}
.industry-card:hover{transform:translateY(-3px);border-color:rgba(212,132,74,0.55);}
.industry-card.active{border-color:#c4622a;background:linear-gradient(135deg,rgba(196,98,42,0.20),rgba(30,58,95,0.45));}
.card-name{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:0.5px;color:#e8d5b8;margin-bottom:6px;}
.card-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#d4844a;line-height:1.3;}

/* ===== SPOTLIGHT CAROUSEL — one tool at a time for the active category ===== */
@keyframes spotFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.spotlight{padding:0 12px 44px;}
.spotlight-inner{position:relative;display:flex;flex-direction:column;background:linear-gradient(135deg,rgba(30,58,95,0.32),rgba(20,35,58,0.5));border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:44px 44px 34px;min-height:600px;}
.spot-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.spot-panel{flex:1;display:grid;grid-template-columns:1fr 2.2fr;gap:32px;align-items:center;}
.spot-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px;}
/* Bundle stickers, flanking the arrow row at the bottom of the card — STAX3 and
   STAX6 left, STAXALL right.

   Both groups are flex:1 so they claim EQUAL side space, which is what keeps the
   arrows centred on the card even though there are two stickers one side and one
   the other. The left pair then spreads across its share (space-between) and the
   right one anchors to the far edge, so the outermost sticker on each side lines
   up with the card's content edge.

   The PNGs now carry a real alpha channel, so there is no mix-blend-mode here
   and there must not be one: blending was only ever a workaround for artwork
   with a black ground, it depended on the backdrop staying darker than the
   sticker, and any transformed ancestor silently broke it by trapping the blend
   in a new stacking context. Transparency has none of those failure modes. */
.spot-stickers{flex:1;min-width:0;display:flex;align-items:center;pointer-events:none;}
.spot-stickers.left{justify-content:space-between;}
/* Pull STAX6 back off the arrows. This is a margin on the IMAGE, not padding on
   the group: padding widens the group, which made it wider than its opposite
   number and shoved the whole arrow row off-centre. A margin sits inside the
   group's existing width, so STAX3 stays pinned to the card edge, STAX6 stops
   short, and the arrows do not move. */
.spot-stickers.left img:last-child{margin-right:44px;}
/* STAXALL sits centred in its half rather than jammed against the card edge. */
.spot-stickers.right{justify-content:center;}
.spot-stickers img{display:block;width:96px;height:96px;}
.spot-arrow{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,border-color 0.2s;}
.spot-arrow:hover{background:rgba(196,98,42,0.55);border-color:#c4622a;}
/* Arrow labels — the tool sitting either side of the current one is named next to
   its arrow, so the row reads as navigation between tools rather than as two
   unlabelled buttons. Eyebrow in the page accent orange, tool name in the cream
   heading colour, both matching the existing micro-label treatments on the page.
   Visual only — pointer-events stay off the label so the arrows remain the sole
   controls and the click behaviour is untouched. */
.spot-nav-side{display:flex;align-items:center;gap:13px;min-width:0;}
.spot-nav-label{display:flex;flex-direction:column;min-width:0;pointer-events:none;}
.spot-nav-side.next .spot-nav-label{align-items:flex-end;text-align:right;}
.spot-nav-eyebrow{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#d4844a;line-height:1.4;}
.spot-nav-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#e8d5b8;line-height:1.1;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spot-panel.fade{animation:spotFade 0.4s cubic-bezier(0.16,1,0.3,1) both;}
/* Every tool's text panel is rendered into the same grid cell, with only the
   current one visible. The cell is therefore always as tall as the longest
   description, at whatever width the page happens to be, so the nav row below
   never moves as you click through the tools — and no height is guessed. */
.spot-left-stack{display:grid;min-width:0;}
.spot-left-stack > .spot-left{grid-area:1/1;align-self:center;min-width:0;}
.spot-left-stack > .spot-left:not(.is-active){visibility:hidden;}
.spot-left{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.spot-badge{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;padding:6px 15px;border-radius:12px;color:#fff;}
.spot-badge.live{background:#1D9E75;}
.spot-badge.soon{background:#E8A54B;}
.spot-name{font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:0.5px;color:#fff;margin:0;}
.spot-desc{font-size:18px;line-height:1.7;color:rgba(255,255,255,0.85);margin:0;}
/* Card pricing block — bundle-first, the whole block linking to the pricing
   page. "BUNDLE & SAVE" carries the size and the tiers sit small beneath it, so
   the block reads as an invitation to bundle rather than a price list. The
   arrow is a PERSISTENT click affordance, not a hover one — hover alone leaves
   the block looking inert on touch, where there is no hover to discover.

   The padding is for the hover ring below; the matching negative margin cancels
   it, so the text sits exactly where it did without one. */
.spot-price{display:inline-block;position:relative;text-decoration:none;line-height:1.5;padding:9px 13px;margin:-9px 0 -9px -13px;border-radius:9px;}
/* Orange at rest, matching .card-eyebrow above — the heading is the block's
   standing flag, not a hover reveal. */
.spot-price-head{display:block;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#d4844a;margin-bottom:4px;}
.spot-price-arrow{display:inline-block;margin-left:5px;transition:transform 0.2s;}
.spot-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:26px;}
/* Tier name and amount are separate cells so the three amounts line up in a
   column rather than sitting ragged behind names of different lengths. The
   min-width is in em, so it tracks the font size instead of needing a new pixel
   value if the type ever changes. */
.spot-price-pair{display:flex;gap:9px;}
.spot-price-tier{display:inline-block;min-width:5em;}
.spot-price-pair,.spot-price-bundle{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.4px;color:#e8d5b8;}
.spot-price-alt{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.8px;color:rgba(255,255,255,0.5);}
.spot-price:hover .spot-price-arrow{transform:translateX(3px);}
/* Hover announcement — a gradient ring that travels around the block. It is a
   masked pseudo-element rather than a real border so it can sit on the card's
   gradient background with nothing opaque behind it, and so it costs no layout:
   the ring appears in the padding the block already reserves, and nothing on
   the card moves. Gated on @supports because a browser without mask compositing
   would otherwise paint the gradient as a filled rectangle over the prices. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .spot-price::after{content:'';position:absolute;inset:0;border-radius:9px;padding:1px;pointer-events:none;opacity:0;transition:opacity 0.25s;background:linear-gradient(90deg,rgba(212,132,74,0) 0%,#d4844a 30%,#e8d5b8 50%,#d4844a 70%,rgba(212,132,74,0) 100%);background-size:250% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
  .spot-price:hover::after{opacity:1;animation:spotPriceRing 1.8s linear infinite;}
}
@keyframes spotPriceRing{from{background-position:150% 0;}to{background-position:-150% 0;}}
/* Someone who has asked for less motion still gets the ring — it just holds
   still rather than sweeping. */
@media(prefers-reduced-motion:reduce){
  .spot-price:hover::after{animation:none;background-position:50% 0;}
}
/* ---- TEMPORARY — owner is previewing the card without the pricing block.
        Delete this one rule to bring "Bundle & Save" back. It must stay AFTER
        the .spot-price rules above to win on source order. ---- */
.spot-price{display:none;}
/* ---- end temporary ---- */
.spot-cta{display:inline-flex;align-items:center;gap:9px;background:#c4622a;color:#fff;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;padding:16px 36px;border-radius:9px;text-decoration:none;transition:background 0.2s;margin-top:6px;}
.spot-cta:hover{background:#d4844a;}
.spot-right{border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#1e3a5f,#0f1a2d);aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;}
.spot-shot{width:100%;height:100%;object-fit:contain;display:block;}
.spot-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,0.5);text-align:center;padding:20px;}
.spot-ph-icon{font-size:72px;opacity:0.55;line-height:1;}
.spot-ph-sub{font-size:14px;letter-spacing:0.5px;}
.spot-dots{display:flex;gap:10px;}
.spot-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.25);border:none;cursor:pointer;padding:0;transition:background 0.2s,transform 0.2s;}
.spot-dot.active{background:#c4622a;transform:scale(1.3);}
@media(max-width:760px){
  .spot-panel{grid-template-columns:1fr;gap:22px;}
  .spotlight-inner{padding:26px 16px 24px;min-height:0;}
  .spot-name{font-size:32px;}
  .spot-desc{font-size:16px;}
  .spot-nav{margin-top:20px;}
  .spot-nav-label{display:none;}
  /* Narrow cards cannot give each side room for a 96px sticker beside the
     arrows — flex:1 would shrink the group below its images and they would
     ride over the arrows. Let the row wrap and drop all three stickers onto a
     centred line of their own beneath it. */
  .spot-nav{flex-wrap:wrap;}
  .spot-stickers{flex:0 0 auto;}
  .spot-stickers.left{order:2;}
  .spot-stickers.right{order:3;}
  .spot-stickers img{width:72px;height:72px;}
}

/* =============================================
   LEFT PANEL — RIBBON STEPS
   ============================================= */
.hiw-panel{padding:0 24px;padding-top:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;}
.hiw-header{margin-bottom:32px;text-align:center;}
.hiw-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;margin-bottom:32px;background:linear-gradient(135deg,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hiw-eyebrow::before{content:'';width:32px;height:1px;background:linear-gradient(90deg,transparent,#d4844a);opacity:1;flex-shrink:0;}.hiw-eyebrow::after{content:'';width:32px;height:1px;background:linear-gradient(90deg,#d4844a,transparent);opacity:1;flex-shrink:0;}
.hiw-heading{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;text-transform:uppercase;line-height:0.95;letter-spacing:-0.5px;color:#e8d5b8;margin-bottom:0px;}
.hiw-steps{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;width:100%;}
.hiw-step{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0;position:relative;z-index:1;width:100%;}
.hiw-step-num{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1e3a5f,#2c5a82);border:2px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:#fff;position:relative;z-index:2;}
.hiw-step-body{text-align:center;}
.hiw-step-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:#e8d5b8;margin-bottom:6px;}
.hiw-connector{width:2px;height:30px;background:linear-gradient(to bottom,rgba(26,84,144,0.85),rgba(26,84,144,0.35));border-radius:2px;margin:0 auto;}
.hiw-step-desc{font-size:15px;color:rgba(255,255,255,0.92);line-height:1.55;max-width:200px;margin:0 auto;}

/* =============================================
   RIGHT PANEL — WHAT YOU GET
   ============================================= */
.info-panel{padding:24px 16px;display:flex;flex-direction:column;justify-content:center;height:100%;}
.wyg-panel{padding:0 24px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;}
.wyg-item{display:flex;align-items:flex-start;gap:12px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.wyg-item:last-child{border-bottom:none;}
.wyg-icon{width:28px;height:28px;flex-shrink:0;margin-top:2px;background:linear-gradient(135deg,#1e3a5f,#2c5a82);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.wyg-title{font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#e8d5b8;margin-bottom:4px;}
.wyg-desc{font-size:15px;color:rgba(255,255,255,0.92);line-height:1.5;}

/* FOOTER */
footer{background:#1a2f4a;padding:32px 48px 20px;border-top:1px solid rgba(255,255,255,0.08);}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:24px;}
.footer-brand p{font-size:14px;font-family:'DM Sans',sans-serif;font-weight:400;color:rgba(255,255,255,0.75);line-height:1.6;margin-top:8px;max-width:300px;}
.footer-col a{display:block;font-size:14px;font-family:'DM Sans',sans-serif;font-weight:600;color:rgba(255,255,255,0.75);text-decoration:none;margin-bottom:6px;transition:color 0.2s;}
.footer-col a:hover{color:white;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);font-size:13px;font-family:'DM Sans',sans-serif;font-weight:400;color:rgba(255,255,255,0.75);flex-wrap:wrap;gap:10px;}
.footer-eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(135deg,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;margin-left:-28px;}
.footer-eyebrow::before{content:'';width:20px;height:1px;background:linear-gradient(90deg,transparent,#d4844a);flex-shrink:0;}
.footer-eyebrow::after{content:'';width:20px;height:1px;background:linear-gradient(90deg,#d4844a,transparent);flex-shrink:0;}

/* ── LAPTOP BAND — no breakpoint existed between the desktop shell and 900px, so
   small laptops (≈1024–1440px) rendered the full desktop layout: two 300px side
   panels left the centre too narrow, cramping the two-column spotlight. Narrow the
   panels, then collapse the spotlight to a single column at the lower end. ── */
@media(max-width:1400px){
  .side-panel{width:230px;}
  .hero h1{font-size:52px;}
}
@media(max-width:1100px){
  .side-panel{width:200px;padding:24px 6px;}
  .spot-panel{grid-template-columns:1fr;gap:22px;}
}
@media(max-width:900px){
  .page-wrap{flex-direction:column;}
  .side-panel{width:100%;}
  .page-centre{padding:0 24px;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px;}
  /* Pull the flanking gap in before the headline has to start wrapping. */
  .hero-row{gap:36px;}
  .hero-sticker{width:84px;height:84px;}
}
@media(max-width:560px){
  .industry-grid{grid-template-columns:1fr;}
  .hero h1{font-size:48px;}
  /* Below this the headline needs the full width, so the stickers drop under it
     as a pair rather than squeezing it into a narrow column. */
  .hero-row{flex-wrap:wrap;gap:18px;}
  .hero-row h1{flex:1 0 100%;order:1;}
  .hero-sticker{width:72px;height:72px;order:2;}
}
/* =============================================
   THE STAXAI CONCEPT — interconnection diagram
   Full-width section below the spotlight carousel.
   Page-scoped styles only (stx- prefix) — nothing here belongs in staxai-auth.css.
   ============================================= */
.stx-concept{position:relative;z-index:5;width:100%;padding:28px 24px 64px;background:linear-gradient(180deg,rgba(26,35,50,0) 0%,#1a2332 12%,#1a2332 88%,rgba(26,35,50,0) 100%);}
.stx-concept-inner{max-width:1280px;margin:0 auto;text-align:center;}
/* Section eyebrow — sized to the platform pre-auth standard (matches the
   "THE PROBLEM" .section-tag on index.html: Barlow Condensed, 28px). Scoped to
   this section so the shared .section-label elsewhere on the page is untouched. */
.stx-concept .section-label{font-family:'Barlow Condensed',sans-serif;font-size:28px;margin:20px auto 60px;}
.stx-concept-heading{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:900;line-height:0.98;text-transform:uppercase;letter-spacing:-0.5px;color:#fff;margin-bottom:10px;}
/* STAX anywhere in this section. Declares exactly what the hero's own STAX rule
   declares (.hero h1 .word-accent, and index.html's CREATE YOUR STAX line) — the
   gradient clipped to the text — and nothing else, so family, weight, size and
   letter-spacing all come from the text it sits in. No color:transparent here
   either: like the hero, the fill alone hides the underlying colour, which keeps
   the word readable if background-clip:text ever fails.
   The section eyebrow needs no span: .section-label is already painted in this
   gradient end to end, and it is a flex row, so wrapping a word would add a 12px
   gap either side of it. */
.stx-concept .word-accent{background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stx-concept-sub{font-size:15px;font-weight:600;letter-spacing:0.4px;color:rgba(255,255,255,0.6);margin-bottom:34px;}

/* Diagram + flanking notes. The ring sits in the middle column at a reduced
   size so the three note blocks have room either side. The stagger — left
   upper, right middle, left lower — comes from the column padding and the gap
   between the two left notes, so nothing is absolutely positioned. */
.stx-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px) minmax(0,1fr);gap:30px;align-items:start;margin-top:8px;}
.stx-side{display:flex;flex-direction:column;text-align:left;}
.stx-side-left{gap:150px;padding-top:40px;}
.stx-side-right{padding-top:140px;}
/* Note headings: same Barlow Condensed family as the section heading above but
   far smaller and lighter, so they stay subordinate to BUILD YOUR STAX. */
.stx-note-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:0.4px;color:#e8d5b8;margin:0 0 10px;}
/* Body copy matches the spotlight carousel's light grey (.spot-desc), stepped
   down from 18px to 16px for the narrower column. */
.stx-note-list{list-style:none;margin:0;padding:0;}
.stx-note-list li{position:relative;padding-left:18px;font-size:16px;line-height:1.65;color:rgba(255,255,255,0.85);}
.stx-note-list li + li{margin-top:12px;}
.stx-note-list li::before{content:'';position:absolute;left:0;top:0.62em;width:6px;height:6px;border-radius:50%;background:#E8A54B;}
.stx-diagram-wrap{width:100%;max-width:660px;margin:0 auto;overflow-x:auto;}
#stx-svg{display:block;width:100%;height:auto;overflow:visible;}

/* Hub */
.stx-hub-glow{transition:opacity 0.6s ease;pointer-events:none;}
.stx-hub-ring{transition:stroke 0.6s ease,stroke-width 0.6s ease;}
.stx-hub-label{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;letter-spacing:1px;text-transform:uppercase;fill:#fff;}
.stx-hub-note{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;fill:#E8A54B;}

/* Spokes — tool to hub. Dormant by default, orange when that tool is active. */
.stx-spoke{stroke:#4a6d8c;stroke-width:2;opacity:0.3;transition:stroke 0.45s ease,stroke-width 0.45s ease,opacity 0.45s ease;}
.stx-spoke.on{stroke:#c4622a;stroke-width:4;opacity:1;}

/* Feed curves — thinner secondary lines out of the hub to receiving tools. */
.stx-feed{fill:none;stroke:#c4622a;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:7 7;opacity:0;transition:opacity 0.45s ease;}
.stx-feed.on{opacity:0.85;animation:stxFlow 1.1s linear infinite;}
@keyframes stxFlow{to{stroke-dashoffset:-14;}}

/* Tool nodes */
.stx-node{cursor:pointer;}
.stx-node-base{stroke-width:2;transition:fill 0.4s ease,stroke 0.4s ease;}
.stx-node.live .stx-node-base{fill:rgba(29,158,117,0.20);stroke:#1D9E75;}
.stx-node.soon .stx-node-base{fill:rgba(232,165,75,0.18);stroke:#E8A54B;}
.stx-node-ring{fill:none;stroke:#c4622a;stroke-width:2.5;opacity:0;transition:opacity 0.35s ease;}
.stx-node:hover .stx-node-ring{opacity:0.45;}
.stx-node.active .stx-node-ring{opacity:1;}
.stx-node:focus{outline:none;}
.stx-node:focus-visible .stx-node-ring{opacity:0.8;}
.stx-node-icon{font-size:30px;text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.stx-node-label{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:600;fill:rgba(255,255,255,0.88);text-anchor:middle;pointer-events:none;}
.stx-node.active .stx-node-label{fill:#fff;}

/* Water-rising fill inside each node */
.stx-fill{transition:transform 0.75s cubic-bezier(0.16,1,0.3,1);}
.stx-wave{animation:stxWave 3s linear infinite;}
@keyframes stxWave{from{transform:translateX(0);}to{transform:translateX(-42px);}}

/* Tagline + toggles */
.stx-tagline{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;text-transform:uppercase;letter-spacing:0.5px;color:#e8d5b8;margin-top:18px;}
/* STAX here is covered by the .stx-concept .word-accent rule above. */
.stx-toggles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;}
.stx-toggle{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.3px;color:rgba(255,255,255,0.78);background:rgba(30,58,95,0.5);border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:6px 13px;cursor:pointer;transition:background 0.25s,border-color 0.25s,color 0.25s;}
.stx-toggle:hover{border-color:rgba(212,132,74,0.6);color:#fff;}
.stx-toggle.active{background:#c4622a;border-color:#c4622a;color:#fff;}
.stx-toggle-icon{margin-right:5px;}

@media(max-width:1180px){
  .stx-layout{grid-template-columns:1fr;gap:30px;}
  .stx-side-left,.stx-side-right{padding-top:0;gap:30px;}
  .stx-diagram-wrap{max-width:640px;order:-1;}
}
@media(max-width:760px){
  .stx-concept{padding:36px 12px 44px;}
  .stx-concept .section-label{font-size:20px;}
  .stx-concept-heading{font-size:30px;}
  /* The eyebrow plus two 96px stickers overflows a phone (419px of content in
     360px). Tighten the gap and the stickers so the row still fits on one line
     rather than wrapping one sticker onto its own. */
  /* The ring keeps its proportions on a phone — it holds a floor width and the
     wrap scrolls sideways, with the text scaled up so the labels stay legible. */
  #stx-svg{min-width:640px;}
  .stx-node-label{font-size:26px;}
  .stx-node-icon{font-size:34px;}
  .stx-hub-label{font-size:28px;}
  .stx-hub-note{font-size:14px;}
  .stx-tagline{font-size:22px;}
  .stx-toggle{font-size:11px;padding:5px 10px;}
}
@media(prefers-reduced-motion:reduce){
  .stx-feed.on{animation:none;}
  .stx-wave{animation:none;}
  .stx-fill{transition:none;}
}