/* ============================================================
   Fulfillment by Shoplazza — page styles
   Built on athena-design tokens (see style.css :root).
   ============================================================ */

/* ---------- Fulfillment Agent theme (orange-red) ---------- */
:root{
  --agent:#ff5a00;          /* Fulfillment Agent — action / efficiency / logistics */
  --agent-2:#ff7a2e;
}

body{position:relative;background:var(--bg)}
main{position:relative;z-index:1}

/* shared accent helper */
.accent{color:var(--agent)}

/* generic pill buttons reused across hero */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:15px 28px;font-family:"Space Grotesk",sans-serif;
  font-weight:500;font-size:clamp(15px,1.3vw,17px);letter-spacing:-.01em;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-primary{background:var(--fg);color:var(--bg);border:1px solid var(--fg)}
.btn-primary:hover{background:var(--agent);border-color:var(--agent);color:#fff;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--agent) 60%,transparent)}
/* The hero CTA carries inline black styles, so explicitly let the page theme
   take control on hover. */
.fhero .btn-primary:hover{
  background:var(--agent) !important;
  border-color:var(--agent) !important;
}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--fg)}

/* ---------- 1. Hero ---------- */
.fhero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(120px,18vh,180px) var(--pad) clamp(70px,10vh,110px);overflow:hidden;
  background:transparent}

/* Ethereal 4-pointed star */
.fhero__star {
  position: absolute;
  top: 42%; left: 50%;
  /* 初始时通过动画控制缩放，结束时停在 scale(1) */
  width: clamp(500px, 70vw, 1000px);
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  animation: starEntrance 6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes starEntrance {
  0% { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(-30deg) scale(1); opacity: 1; }
}
/* 外围光晕更淡，波动范围更小 */
.fhero__star-halo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: color-mix(in srgb, var(--agent) 10%, transparent); /* 浓度从 20% 降为 10% */
  filter: blur(40px);
  animation: haloBreathe 16s ease-in-out infinite;
}
/* 星星核心变淡 */
.fhero__star-core {
  position: absolute;
  inset: 15%;
  width: 70%; height: 70%;
  color: color-mix(in srgb, var(--agent) 50%, #fff); /* 浓度从 90% 降为 50%，混入大量白色让其变得极淡 */
  filter: blur(8px);
  animation: coreBreathe 16s ease-in-out infinite;
}

@keyframes haloBreathe {
  0%, 100% { transform: scale(1); opacity: 0.15; filter: blur(34px); } /* 降低不透明度 */
  50%      { transform: scale(1.2); opacity: 0.35; filter: blur(46px); } /* 降低最高亮度 */
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); opacity: 0.25; } /* 核心变得非常虚无 */
  50%      { transform: scale(1.05); opacity: 0.45; }
}

/* Glassmorphism layer over the star */
.fhero__glass {
  position: absolute;
  inset: -10%; /* slight bleed to prevent edge blur artifacts */
  z-index: 0;
  pointer-events: none;
  background: rgba(240, 241, 250, 0.15); /* 统一的极淡色底，避免上下亮度不一致 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* 改为从上到下的线性遮罩：顶部和两侧保持100%完全模糊，仅在最底部边缘柔和消散以衔接下一屏 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 98%);
}

.fhero__inner{position:relative;z-index:1;width:100%;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.fhero__tag{color:var(--muted);margin-bottom:clamp(18px,3vh,28px)}
.fhero__title{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--fg);
  font-size:clamp(42px,7.5vw,90px);line-height:1.0;letter-spacing:-.035em;max-width:15ch}
.fhero__title .line{display:block;overflow:hidden}
.fhero__do-wrap{display:flex;align-items:baseline;justify-content:center}
.fhero__do,.fhero__r{display:inline-block;white-space:pre}

/* 包含四角星的 wrapper 控制挤开 r, 的宽度动画 */
.fhero__title-star-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0;
  opacity:0;
  transform:scale(0) rotate(-180deg);
  transform-origin:center;
  overflow:hidden; /* 确保它未展开时不占据空间 */
}
.fhero__title-star{
  display:inline-block;
  width:0.65em;
  height:0.65em;
  color:var(--agent);
  margin:0 0.04em; /* 给前后一点间距 */
  transform:translateY(0.04em);
  flex:none; /* 防止被 flex 挤压 */
}
.fhero__accent{color:var(--agent)}
.fhero__body{margin-top:clamp(20px,3vh,30px);font-family:"Space Grotesk",sans-serif;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--fg);max-width:62ch}
.fhero__stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px clamp(16px,2.5vw,30px);margin-top:clamp(26px,4vh,40px);color:var(--muted)}
.fhero__stats li{position:relative;display:inline-flex;align-items:center}
.fhero__stats li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--agent);margin-left:clamp(16px,2.5vw,30px)}
.fhero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(34px,5vh,48px)}

/* ---------- 2. The difference ---------- */
.diff{position:relative;padding:var(--sec-y) var(--pad);overflow:hidden}
/* 移除 1400px 的居中约束，让它和首页完全一样由外层 padding(--pad) 控制边缘留白 */
.diff__head{position:relative;z-index:1}
.diff__card--merged{position:relative;}

.diff__head{margin-bottom:clamp(40px,7vh,72px);text-align:left}

/* Reusing the Statement module's typography for the Diff heading */
.statement__text{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(40px,10vw,150px);line-height:1.04;letter-spacing:-.04em;max-width:32ch;margin:0}
.statement__text .w{display:inline-block;overflow:visible;padding-bottom:.06em;vertical-align:top}

/* Merged Card with sliding split */
.diff__card--merged{
  background:var(--bg-2);border:1px solid var(--line);border-radius:24px;
  display:grid;grid-template-columns:28% 1px 1fr;overflow:hidden;
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.05);
}
.diff__panel{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;gap:16px}
.diff__panel--old{color:var(--fg)}
.diff__panel--new{
  background-color:#0a0e1a;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:0 0;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.diff__panel--new .diff__p{color:rgba(255,255,255,.8);position:relative;z-index:1}
.diff__panel--new .diff__label{color:var(--agent);position:relative;z-index:1}
.diff__panel--new .flow__path{stroke:var(--agent);stroke-width:30px}
.diff__divider{background:var(--line);width:1px;height:100%}

.diff__label{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(18px,1.5vw,22px);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.diff__p{font-family:"Space Grotesk",sans-serif;font-size:clamp(16px,1.4vw,20px);line-height:1.55;
  color:var(--fg);margin:0}

@media (max-width:768px){
  .diff__card--merged{grid-template-columns:1fr !important;grid-template-rows:auto 1px auto}
  .diff__divider{width:100%;height:1px}
}

/* ---------- 3. Capabilities (Fullscreen Stacking Cards) ---------- */
.caps { height: 100vh; padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; z-index: 60; pointer-events: none; }
.caps__head { max-width: none; margin: 0 auto clamp(40px,7vh,64px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 var(--pad); position: relative; z-index: 20; }
.caps__title { font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: clamp(26px,4.5vw,64px); letter-spacing: -.035em; line-height: 1.0; }
.caps__title span { display: block; white-space: nowrap; }
@media (max-width: 800px) {
  .caps__title span { white-space: normal; } /* 屏幕过小时放宽折行限制，防止挤破版面 */
}
.caps__sub { margin-top: 12px; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(16px,1.5vw,20px); line-height: 1.5; color: var(--muted); max-width: 100ch; }

.caps__cards {
  position: relative;
  width: 100%;
  height: 60vh;
  max-width: 1400px;
  margin: 0 auto;
}
.cap {
  position: absolute;
  width: 40%;
  top: 50%;
  margin-top: -150px; /* offset for centering */
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 32px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: clamp(30px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
}
.cap--left {
  left: 5%;
}
.cap--right {
  right: 5%;
}

/* 用一个专门的伪元素来承载网格和遮罩，防止影响内部内容 */
.cap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 32px;
  background-image: 
    linear-gradient(to right, rgba(10, 14, 26, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 14, 26, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
}

.cap__content {
  display: flex; flex-direction: column; gap: 16px;
  position: relative; z-index: 2;
}

.cap__k { display: flex; align-items: center; justify-content: center; width: clamp(24px, 2.5vw, 32px); height: clamp(24px, 2.5vw, 32px); color: var(--agent); margin-bottom: 8px; }
.cap__k svg { width: 100%; height: 100%; opacity: 0.8; }
.cap__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.02em; color: var(--fg); margin-bottom: 8px; line-height: 1.1; }
.cap__line { font-family: "Space Grotesk", sans-serif; font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; color: var(--fg); }
.cap__desc { font-family: "Space Grotesk", sans-serif; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.55; color: var(--muted); max-width: 48ch; }

@media (max-width: 900px) {
  .cap { gap: 24px; padding: calc(var(--pad) * 1.5); }
}

/* ---------- 4. Session (chat demo) ---------- */
.session{padding:var(--sec-y) var(--pad);position:relative;overflow:hidden}

.session__mockup {
  pointer-events: auto;
  width: 95%;
  max-width: 1200px;
  /* Sized by the conversation rather than the viewport — the thread carries a
     min-height reserved for its finished state, so the card is already at its
     final size before the first bubble opens. The cap keeps a margin on every
     side, including room for the drop shadow, since .caps clips its overflow. */
  height: auto;
  max-height: 86vh;
  margin: 0;
  background: #f9fafb;
  border-radius: 40px;
  padding: 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.session__mockup-screen {
  background: #ffffff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  padding-top: 28px;
  padding-bottom: 28px;
  border: 1px solid #f3f4f6;
  /* basis auto, not 0 — the card is auto-height now, so the screen's own
     content has to count towards it. It still grows to fill when the card is
     given a fixed height for the full-screen expand. */
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  overflow-y: auto;
}
.session__mockup--line-frame {
  padding: 0;
  background: transparent;
  border-radius: 24px;
  box-shadow: none;
}
.session__mockup--line-frame .session__mockup-screen {
  background: rgba(17, 24, 39, .035);
  border: 1px dashed rgba(17, 24, 39, .2);
  outline: 0;
  border-radius: 24px;
}
.session__mockup--line-frame .session__ambience {
  background:
    radial-gradient(70% 60% at 50% 15%, rgba(255,255,255,.72), rgba(231,233,239,.28) 58%, transparent 100%);
}
.session__mockup-screen::-webkit-scrollbar {
  display: none;
}
.session__mockup-screen {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.session__mockup-screen::after {
  content: "";
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  background: rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 10;
}

.session__thread{max-width:none;margin:0;display:flex;flex-direction:column;
  gap:clamp(14px,2.4vh,24px);width:100%;padding:10px 24px 20px;box-sizing:border-box}

/* light-mode overrides of the shared .msg pattern for mockup */
.session .msg--ai .msg__bubble{background:#f3f4f6;color:#111827;
  border:1px solid #e5e7eb}
.session .msg--user .msg__bubble{background:#111827;color:#ffffff}
.session .msg__agent{color:#6b7280}
.session .msg__avatar{background:#f3f4f6;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.session .msg__meta{color:#9ca3af}
.session .msg__typing{background:#f3f4f6;border:1px solid #e5e7eb}
.session .msg__typing span{background:#9ca3af}
.session .msg__status{background:#ecfdf5;border-color:#d1fae5;color:#059669}
.session .msg__status svg{color:#059669}
.session .msg__status--warn{background:#fffbeb;border-color:#fef3c7;color:#d97706}
.session .msg__status--warn svg{color:#d97706}

/* ---------- Home-style frameless session chat (shared agent pages) ---------- */
.home-style-chat .session__mockup{
  width:min(720px,92vw);max-width:720px;height:92vh;max-height:92vh;
  padding:0 !important;background:transparent !important;border-radius:0 !important;
  box-shadow:none !important;overflow:hidden;display:flex;flex-direction:column}
.home-style-chat .session__mockup-screen{
  flex:1 1 auto;min-height:0;height:100%;max-height:100%;padding:28px 8px;
  display:flex;flex-direction:column;background:transparent !important;border:0 !important;
  border-radius:0 !important;outline:0 !important;box-shadow:none !important;
  overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
.home-style-chat .session__mockup-screen::after{content:none !important}
.home-style-chat .session__mockup .session__ambience{display:none !important}
.home-style-chat .session__thread{
  flex:0 0 auto;min-height:0 !important;max-width:720px;margin:0 auto;
  justify-content:flex-start;gap:clamp(12px,2vh,22px);padding:8px 4px 32px;
  width:100%;box-sizing:border-box}
.home-style-chat .session__thread .msg{
  display:flex;flex-direction:column;gap:8px;max-width:82%}
.home-style-chat .session__thread .msg--user{align-self:flex-end;align-items:flex-end}
.home-style-chat .session__thread .msg--ai{
  align-self:flex-start;align-items:flex-start;flex-direction:row;gap:14px}
.home-style-chat .session__thread .msg__avatar{
  flex:none;width:52px;height:52px;border-radius:50%;margin-top:2px;position:relative;
  overflow:hidden;background:#efeff5;box-shadow:0 0 0 1px var(--line)}
.home-style-chat .session__thread .msg__avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-style-chat .session__thread .msg__col{display:flex;flex-direction:column;gap:8px;min-width:0}
.home-style-chat .session__thread .msg__bubble{
  font-family:"Space Grotesk",sans-serif;font-size:clamp(16px,1.5vw,19px);line-height:1.5;
  padding:16px 20px;border-radius:22px;letter-spacing:-.01em;position:relative}
.home-style-chat .session__thread .msg--user .msg__bubble{
  background:var(--fg);color:var(--bg);border:0}
.home-style-chat .session__thread .msg--ai .msg__bubble{
  background:var(--bg-2);color:var(--fg);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.home-style-chat .session__thread .msg__agent{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.home-style-chat .session__thread .msg__text{display:block}
.home-style-chat .session__thread .msg__meta{color:var(--muted);padding:0 4px}
.home-style-chat .session__thread .msg__status{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.03em;text-transform:uppercase;color:#1a9d5a;white-space:nowrap;
  padding:0;background:transparent;border:0}
.home-style-chat .session__thread .msg__status svg{color:#1a9d5a}
.home-style-chat .session__thread .msg__typing{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:22px;
  padding:18px 22px;overflow:hidden}
.home-style-chat .session__thread .msg__typing span{
  width:9px;height:9px;border-radius:50%;background:var(--agent);
  animation:homeChatMsgDot 1.1s infinite ease-in-out}
.home-style-chat .session__thread .msg__typing span:nth-child(2){animation-delay:.16s}
.home-style-chat .session__thread .msg__typing span:nth-child(3){animation-delay:.32s}
@keyframes homeChatMsgDot{
  0%,80%,100%{opacity:.3;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-4px)}
}
/* ---------- 5. Coordination ---------- */
.coord{padding:var(--sec-y) var(--pad); margin-top: -100vh; position: relative; z-index: 20;}
.coord__head{max-width:820px;margin:0 auto clamp(36px,6vh,56px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.coord__title{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(30px,5vw,64px);letter-spacing:-.035em;line-height:1.0}
.coord__sub{margin-top:14px;font-family:"Space Grotesk",sans-serif;
  font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:100ch}
.coord__card{max-width:1200px;margin:0 auto;background:var(--bg-2);border-radius:28px;
  border:1px solid var(--line);box-shadow:0 18px 48px -28px rgba(20,16,40,0.18);overflow:hidden}
.coord__list{list-style:none;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(10px, 1.6vw, 22px);padding:clamp(32px, 4vw, 48px) clamp(22px, 3vw, 40px)}
/* 外层仅作定位框架，不含 flex */
.coord__col{height:100%}
.coord__star{height:100%}

/* 将真正的 flex 排版交给内层，动画也施加于内层 */
.coord__inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;height:100%}
.coord__star .coord__inner{align-items:center;justify-content:center;gap:0;color:var(--muted)}

/* Plus sits mid-column; spacer no longer needed once numbers became icons */
.star__spacer{display:none}
.coord__star span{font-family:"Space Grotesk",sans-serif;font-size:28px;font-weight:300;line-height:1;opacity:0.55;user-select:none;color:#b8b4c4}

.coord__icon{
  display:block;flex:none;width:34px;height:34px;opacity:1;
  color:#0a0e1a;background-color:transparent;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  -webkit-mask-image:none;mask-image:none}
.coord__icon svg{display:none}
.coord__icon--store{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.5%22%20width%3D%2217.6%22%20height%3D%2212.2%22%20rx%3D%221.8%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M9.2%2019.2h5.6M12%2015.7v3.5%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.coord__icon--studio{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%228.2%22%20cy%3D%229.8%22%20r%3D%221.5%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M4.2%2017.2l5-4.6%202.8%202.5%203.6-4.2%204.2%206.3%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  width:34px;height:34px;margin:0}
.coord__icon--ads{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.2%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M14.8%209.2l-1.7%204.9-4.9%201.7%201.7-4.9%204.9-1.7z%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.coord__icon--payments{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%223.5%22%20y%3D%224%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%222%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M3.5%208.5h17%22%20stroke%3D%22%230a0e1a%22%20stroke-width%3D%221.7%22%2F%3E%3Crect%20x%3D%2214.2%22%20y%3D%2214.2%22%20width%3D%223.5%22%20height%3D%222.6%22%20rx%3D%220.4%22%20fill%3D%22%230a0e1a%22%2F%3E%3C%2Fsvg%3E")}
.coord__icon--fulfillment{
  background-image:none;
  background-color:#0a0e1a;
  -webkit-mask-image:url(https://cdn.prod.website-files.com/69b77207d4ad61ffdad2acc9/6a74a662cc4854460527be5a_sa-fulfillment-line-icon.png);
  mask-image:url(https://cdn.prod.website-files.com/69b77207d4ad61ffdad2acc9/6a74a662cc4854460527be5a_sa-fulfillment-line-icon.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.coord__icon--loyalty{
  background-image:none;
  background-color:#0a0e1a;
  -webkit-mask-image:url(https://cdn.prod.website-files.com/69b77207d4ad61ffdad2acc9/6a74a6613c3e0ce747dbe9ee_sa-loyalty-line-icon.png);
  mask-image:url(https://cdn.prod.website-files.com/69b77207d4ad61ffdad2acc9/6a74a6613c3e0ce747dbe9ee_sa-loyalty-line-icon.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  display:block}

.coord__num{color:var(--fg);font-size:clamp(14px, 1vw, 16px);letter-spacing:0.06em;font-weight:600;
  margin-bottom:0;line-height:1}
.coord__p{font-family:"Space Grotesk",sans-serif;font-size:clamp(15px,1.25vw,18px);
  font-weight:400;
  line-height:1.45;letter-spacing:-.015em;color:var(--fg);
  margin:0}

@media (max-width:800px){
  .coord__list{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;gap:20px;padding:28px 24px}
  .coord__star{transform:rotate(90deg)}
}

.coord__links{max-width:1200px;margin:clamp(30px,4vh,44px) auto 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(12px, 2vw, 24px)}
.coord__link{display:inline-flex;align-items:center;
  padding:4px 0;border-bottom:1px solid var(--fg);
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:-.01em;color:var(--fg);transition:color .3s var(--ease),border-color .3s var(--ease)}
.coord__link:hover{color:var(--agent);border-color:var(--agent)}
.coord__dot{color:var(--muted);font-size:clamp(15px,1.4vw,19px);font-weight:700;user-select:none;}

/* ---------- 6. Who it's for ---------- */
.who{padding:var(--sec-y) var(--pad)}
.who__head{max-width:900px;margin:0 auto clamp(40px,7vh,64px);text-align:center}
.who__title{font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(28px,4.8vw,60px);letter-spacing:-.035em;line-height:1.02}

/* ---------- 8. Final CTA extras (extends shared .final) ---------- */
.final { text-align: left; position: relative; overflow: hidden; }
.final > * { position: relative; z-index: 1; }
/* Keep CTA particle layers viewport-fixed — `.final > *` would otherwise
   force position:relative and push the star into document flow (looks gone). */
.final > .final-hero-particles,
.final > .final-hero-particle-tracker,
.final > .loyalty-cta-particles,
.final > .loyalty-cta-star-tracker {
  position: fixed;
}

/* Match home .final__title size; leave mid-page .statement__text alone */
.final__title--statement {
  font-size: clamp(40px, 8vw, 110px);
}

.final__inner { align-items: flex-start; max-width: none; }
.final__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:16px;margin-top:clamp(20px,4vh,30px)}
.final__link{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;
  font-weight:500;font-size:clamp(15px,1.3vw,17px);letter-spacing:-.01em;color:var(--muted);
  transition:color .3s var(--ease)}
.final__link i{transition:transform .35s var(--ease)}
.final__link:hover{color:var(--fg)}
.final__link:hover i{transform:translateX(5px)}

.final__body { text-align: left; margin-top: clamp(28px, 4vh, 44px); max-width: 60ch; }
.final__note { text-align: left; margin-top: 16px; }

.final__inner { position: relative; z-index: 2; }
.final-hero-particles,
.loyalty-cta-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}
.final-hero-particle-tracker,
.loyalty-cta-star-tracker {
  position: fixed;
  top: 50%;
  left: 78%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 800px) {
  .final-hero-particle-tracker,
  .loyalty-cta-star-tracker { left: 50%; }
}

/* ---------- Agent-color overrides for shared components ---------- */
.final__cta:hover{background:var(--agent);border-color:var(--agent);color:#fff}
.faq__q:hover{color:var(--agent)}
.faq__q:hover .faq__icon{color:var(--agent)}

/* The grid and orange glow are isolated so the full-screen transition can
   remove both without fading the white card surface or the conversation. */
.session__mockup-screen{background:#ffffff}
.session__ambience{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb,var(--agent) 8%,transparent), transparent 60%)}
.session__ambience::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%)}
.session__thread{position:relative;z-index:1}



/* Ensure subsequent sections are above the fixed mockup grid */
.faq, .final { position: relative; z-index: 20; }

#global-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb,var(--agent) 8%,transparent), transparent 60%), #ffffff;
}
#global-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
}
.fulfillment-page .session__ambience::before,
.fulfillment-page #global-grid-bg::before,
.session-frame-page .session__ambience::before,
.session-frame-page #global-grid-bg::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.25) 1px, transparent 1px);
}

/* ---------- Audience — fulfillment-scoped version of home gallery ---------- */
.audience {
  position: relative;
  z-index: 3;
  padding: var(--sec-y) var(--pad) calc(var(--sec-y) * 2);
}
.audience__head {
  max-width: 960px;
  margin: 0 auto clamp(48px, 8vh, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.audience__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fg);
}
.audience__sub {
  max-width: 72ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.audience__layout {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 52px;
}
.audience__list {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
}
.audience__item {
  appearance: none;
  position: relative;
  width: 100%;
  padding: 18px 0 18px 24px;
  border: 0;
  border-left: 2px solid #d9dce7;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  opacity: .3;
  transition: opacity .3s ease;
}
.audience__item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 15%;
  width: 2px;
  height: 70%;
  background: var(--agent);
  opacity: 0;
  transition: opacity .3s ease;
}
.audience__item.active {
  opacity: 1;
}
.audience__item.active::before {
  opacity: 1;
}
.audience__item:focus-visible {
  outline: 2px solid var(--agent);
  outline-offset: 4px;
  border-radius: 4px;
}
.audience__item-title {
  display: block;
  margin: 0 0 4px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  transition: color .3s ease;
}
.audience__item.active .audience__item-title {
  color: var(--agent);
}
.audience__item-desc {
  display: block;
  /* Keep the subtitle in layout even while it is visually hidden, so changing
     the active item never changes row or list height. */
  max-height: 84px;
  overflow: hidden;
  color: #555;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  transition: max-height .35s ease, opacity .3s ease, transform .35s ease;
}
.audience__item.active .audience__item-desc {
  opacity: 1;
  transform: translateY(0);
}
.audience__display {
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 11;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 24px;
  background: transparent;
}
.audience__images {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
  border: 0;
  outline: 1px solid #d9dce6;
  outline-offset: -1px;
  box-shadow: none;
}
.audience__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .45s ease, transform .55s ease;
}
.audience__image.active {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 900px) {
  .audience__layout {
    flex-direction: column;
    gap: 40px;
  }
  .audience__list {
    flex: none;
    width: 100%;
  }
  .audience__display {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
  }
}
@media (max-width: 600px) {
  .audience__title br {
    display: none;
  }
  .audience__display {
    padding: 0;
    border-radius: 24px;
  }
  .audience__images {
    border-radius: 24px;
  }
}

/* ---------- Mobile overrides (must stay last — beats home-style-chat base) ---------- */
@media (max-width: 800px) {
  .fhero {
    min-height: 100svh;
    padding: clamp(88px, 12vh, 140px) var(--pad) clamp(48px, 8vh, 80px);
    overflow-x: clip;
  }
  .fhero__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .fhero__tag {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: .03em;
    padding: 0 2px;
  }
  .fhero__title {
    font-size: clamp(26px, 7.2vw, 40px);
    line-height: 1.08;
    max-width: none;
    width: 100%;
  }
  .fhero__title .line,
  .fhero__title .line > span {
    white-space: normal;
    overflow: visible;
  }
  .fhero__star {
    width: min(120vw, 420px);
  }
  .fhero__body {
    font-size: clamp(15px, 4vw, 18px);
    max-width: 36ch;
    width: 100%;
  }
  .fhero__stats {
    gap: 10px 14px;
    width: 100%;
  }
  .fhero__stats li {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .fhero__stats li:not(:last-child)::after {
    margin-left: 14px;
  }
  .fhero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fhero .btn-primary,
  .fhero .btn-ghost {
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;
    font-size: clamp(14px, 3.8vw, 16px);
  }
  .fhero .hero__prompt {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(20px, 4vh, 32px);
    padding: 16px 14px 14px;
    border-radius: 22px;
  }
  .fhero .hero__prompt textarea {
    min-height: 72px;
    font-size: 15px;
  }

  .diff .statement__text,
  .statement__text {
    font-size: clamp(28px, 8vw, 48px);
    line-height: 1.08;
    max-width: 18ch;
  }

  .caps__title {
    font-size: clamp(22px, 6.5vw, 36px);
    line-height: 1.12;
  }
  .caps__title.reveal-line,
  .caps__title .caps__reveal {
    overflow: visible;
  }
  .caps__sub {
    font-size: clamp(14px, 3.8vw, 17px);
    max-width: 36ch;
    padding: 0 4px;
  }
  .caps__cards {
    height: 55vh;
    width: 100%;
  }
  /* Absolute for GSAP; center both lanes — avoid translateX (GSAP owns transform) */
  .cap,
  .cap--left,
  .cap--right {
    left: 6%;
    right: auto;
    width: 88%;
    margin-top: -18vh;
    padding: 22px 18px;
    border-radius: 24px;
    gap: 14px;
  }
  .cap__name { font-size: clamp(20px, 5.5vw, 26px); }
  .cap__line { font-size: clamp(15px, 4vw, 18px); }
  .cap__desc { font-size: clamp(13px, 3.6vw, 15px); }

  .home-style-chat .session__mockup {
    width: min(100%, 94vw) !important;
    max-width: 94vw !important;
    height: min(72vh, 580px) !important;
    max-height: min(72vh, 580px) !important;
  }
  .home-style-chat .session__mockup-screen {
    padding: 16px 4px;
  }
  .home-style-chat .session__thread {
    gap: clamp(10px, 2vh, 16px);
    padding: 4px 2px 24px;
  }
  .home-style-chat .session__thread .msg__avatar {
    width: 36px;
    height: 36px;
  }
  .home-style-chat .session__thread .msg--ai { gap: 10px; }
  .home-style-chat .session__thread .msg__bubble {
    padding: 12px 14px;
    font-size: clamp(14px, 3.8vw, 16px);
    border-radius: 18px;
  }
  .home-style-chat .session__thread .msg__typing {
    padding: 14px 16px;
    border-radius: 18px;
  }
  .home-style-chat .session__thread .msg__agent {
    font-size: 10px;
    letter-spacing: .06em;
  }
  .home-style-chat .session__thread .msg__status {
    font-size: 10px;
    white-space: normal;
  }

  .coord__title {
    font-size: clamp(24px, 7vw, 40px);
    line-height: 1.12;
  }
  .coord__head { overflow: visible; }
  .coord__title.reveal-line { overflow: visible; }
  .coord__sub {
    font-size: clamp(14px, 3.8vw, 17px);
    max-width: 36ch;
  }
  .coord__p { font-size: clamp(14px, 3.8vw, 16px); }
  .coord__icon { width: 30px; height: 30px; }
  .coord__icon--studio { width: 34px; height: 34px; margin: 0; }
  .coord__links {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .coord__dot { display: none; }
  .coord__link { font-size: clamp(14px, 3.8vw, 17px); }

  .final__title--statement {
    font-size: clamp(28px, 8vw, 48px);
    line-height: 1.08;
  }
}

@media (max-width: 640px) {
  .home-style-chat .session__mockup {
    height: min(68vh, 520px) !important;
    max-height: min(68vh, 520px) !important;
  }
  .home-style-chat .session__thread .msg { max-width: 92%; }
  .caps__cards { height: 50vh; }
  .cap,
  .cap--left,
  .cap--right {
    margin-top: -16vh;
    padding: 18px 16px;
  }
  .fhero__title {
    font-size: clamp(24px, 7vw, 34px);
  }
}