/* ankurbhatt.design — ConvertWay case study styles
   Extracted from inline <style>. Bump ?v= on the <link> in index.html when you change this file. */

/* ===== inlined style.css (site) ===== */
  :root{
    --bg:#f5f4f0;
    --bg-tint:#edf0f7;
    --ink:#15171c;
    --ink-soft:#565963;
    --ink-faint:#6b6f79;
    --line:#e6e4de;
    --line-2:#d5d9e4;
    --accent:#1f3d94;
    --accent-2:#4172dd;
    --accent-3:#6f97ee;
    --accent-soft:#e9eefc;
    --good:#1f9d57;
    --card:#ffffff;
    --maxw:1180px;
    --pad:24px;
    --ease:cubic-bezier(.22,.61,.24,1);   /* soft, premium easing */
    --ease-out:cubic-bezier(.16,.84,.28,1);
    --display:'Sora','Inter',system-ui,sans-serif;
    font-family:'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px;overflow-x:hidden;position:relative;letter-spacing:-.005em}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* richer but still light ambient depth */
  body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(900px 900px at -5% 0%, rgba(120,145,240,.20), transparent 42%),
      radial-gradient(900px 900px at 105% 8%, rgba(150,140,235,.18), transparent 44%),
      radial-gradient(1000px 800px at 88% -6%, rgba(120,150,240,.14), transparent 52%),
      radial-gradient(820px 620px at 50% 116%, rgba(111,151,238,.12), transparent 58%);}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7;
    background-image:linear-gradient(rgba(27,58,143,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,58,143,.045) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(ellipse 92% 66% at 50% 0%,#000 26%,transparent 72%);
    mask-image:radial-gradient(ellipse 92% 66% at 50% 0%,#000 26%,transparent 72%);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  a{color:inherit;text-decoration:none}
  .accent{color:var(--accent)}
  .mono{font-family:'JetBrains Mono',monospace}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .reveal.in{opacity:1;transform:none}

    /* ---------- UTILITIES ---------- */
  .pt-0{padding-top:0 !important}
  .pb-0{padding-bottom:0 !important}
  
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.gauge-arc{stroke-dashoffset:25!important}.floaty{animation:none!important}}

  nav{position:sticky;top:0;z-index:30;padding:16px 0}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:auto}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:100px;padding:12px 14px 12px 24px;box-shadow:0 10px 30px -14px rgba(31,50,110,.2)}
  .brand{font-family:var(--display);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;font-size:17px}
  .brand .bdot{width:10px;height:10px;border-radius:3px;background:var(--accent)}
  .navlinks{display:flex;gap:30px;font-size:14.5px;color:var(--ink-soft);font-weight:500}
  .navlinks a{position:relative}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--accent);transition:width .25s ease}
  .navlinks a:hover{color:var(--accent)}
  .navlinks a:hover::after{width:100%}
  .nav-cta{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#fff;background:var(--ink);border-radius:100px;padding:11px 22px;box-shadow:0 5px 0 rgba(10,22,60,.28),0 12px 24px -8px rgba(0,0,0,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(10,22,60,.28),0 18px 30px -10px rgba(0,0,0,.4);color:#fff}
  .nav-cta:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,22,60,.28),0 8px 16px -8px rgba(0,0,0,.35)}
  @media(max-width:640px){.navlinks{display:none}.nav-inner{padding:12px 12px 12px 20px}}

  section{padding:136px 0}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;display:flex;align-items:center;gap:13px;font-family:'JetBrains Mono',monospace}
  .eyebrow::before{content:"";width:30px;height:2px;background:var(--accent);display:inline-block;transition:width .6s var(--ease)}

  /* ---------- HERO ---------- */
  .hero{padding:70px 0 90px;position:relative;overflow:hidden}
  .hero-bigtext{position:absolute;bottom:-4%;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:clamp(120px,20vw,340px);line-height:1;letter-spacing:-.04em;white-space:nowrap;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(65,114,221,.10),rgba(65,114,221,0));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .hero .wrap{position:relative;z-index:1}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  .hero-right{position:relative;display:flex;flex-direction:column;gap:20px}
  .hero .tagchip{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--line-2);border-radius:100px;padding:7px 14px;margin-bottom:26px}
  .hero h1{font-family:var(--display);font-size:clamp(42px,6.6vw,72px);line-height:1.04;letter-spacing:-.03em;font-weight:700}
  .hero h1 .rot{display:block;overflow:hidden}
  .hero h1 .rot span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .hero.play h1 .rot span{transform:translateY(0)}
  .hero.play h1 .rot:nth-child(2) span{transition-delay:.09s}
  .hero.play h1 .rot:nth-child(3) span{transition-delay:.18s}
  .hero .grad{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .sub{margin-top:28px;font-size:19px;color:var(--ink-soft);max-width:38ch;opacity:0;transition:opacity .8s ease .55s}
  .hero.play .sub{opacity:1}
  .pill{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:10px 18px;border:1px solid var(--line);border-radius:100px;background:var(--card);font-size:14px;font-weight:500;opacity:0;transition:opacity .8s ease .72s;box-shadow:0 2px 10px rgba(20,30,60,.04)}
  .hero.play .pill{opacity:1}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(31,157,87,.45);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,87,.45)}70%{box-shadow:0 0 0 9px rgba(31,157,87,0)}100%{box-shadow:0 0 0 0 rgba(31,157,87,0)}}

  /* photo frame */
  .photo-wrap{position:relative}
  .photo-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(31,50,110,.4);background:linear-gradient(160deg,var(--bg-tint),#fff);aspect-ratio:4/5;z-index:1}
  .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;filter:saturate(1.02)}
  .photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(21,23,28,.5));pointer-events:none}
  .photo-cap{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff}
  .photo-cap b{font-size:15px;font-weight:700;letter-spacing:-.01em;display:block}
  .photo-cap span{font-size:11px;color:#d6ddf2;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

  /* signature: LAYERED composition — back product screen + front decision panel */
  .hero-visual{position:relative;min-height:300px}
  @media(max-width:860px){.hero-visual{min-height:300px;margin-top:8px}}
  .glow{position:absolute;inset:-6% -8% -10% -8%;background:radial-gradient(closest-side,rgba(120,150,240,.35),transparent 72%);filter:blur(12px);z-index:0;border-radius:40px}

  /* back layer: product dashboard mock */
  .screen-back{position:absolute;top:0;right:0;width:88%;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -40px rgba(31,50,110,.4);overflow:hidden;z-index:1;transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transform-origin:right center}
  .sb-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfbfd}
  .sb-bar i{width:9px;height:9px;border-radius:50%;background:#e0e0e0;font-style:normal}
  .sb-bar i:nth-child(1){background:#f2a4a4}.sb-bar i:nth-child(2){background:#f3d09a}.sb-bar i:nth-child(3){background:#a8d8b0}
  .sb-bar span{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.04em}
  .sb-body{padding:16px}
  .sb-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
  .sb-title small{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--accent);font-weight:600;background:var(--accent-soft);padding:2px 7px;border-radius:5px}
  .sb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
  .sb-stat{background:#f7f8fb;border:1px solid var(--line);border-radius:9px;padding:9px}
  .sb-stat .rr{width:26px;height:26px;border-radius:50%;margin-bottom:6px;background:conic-gradient(var(--accent) var(--p,75%),rgba(31,61,148,.1) 0)}
  .sb-stat .rr.g{background:conic-gradient(var(--good) 82%,rgba(31,157,87,.12) 0)}
  .sb-stat .rr.w{background:conic-gradient(#e0a83a 40%,rgba(224,168,58,.14) 0)}
  .sb-stat b{font-size:11px;color:var(--ink);display:block}
  .sb-stat span{font-size:8px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;letter-spacing:.03em}
  .sb-rows{display:flex;flex-direction:column;gap:7px}
  .sb-row{display:flex;align-items:center;justify-content:space-between;background:#f7f8fb;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
  .sb-row .l{font-size:10px;color:var(--ink-soft);font-weight:500}
  .sb-row .r{font-size:10px;color:var(--good);font-weight:700;font-family:'JetBrains Mono',monospace}

  /* floating badge — top right of photo */
  .fbadge{position:absolute;top:-16px;right:-20px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);z-index:4;display:flex;align-items:center;gap:9px}
  .fbadge .fi{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:13px}
  .fbadge .ft b{font-size:11px;display:block;line-height:1.2}
  .fbadge .ft span{font-size:9px;color:#9fb0d0;font-family:'JetBrains Mono',monospace}
  @media(max-width:520px){.fbadge{display:none}.screen-back{width:94%}}

  .floaty{animation:floaty 6.5s ease-in-out infinite}
  .floaty2{animation:floaty2 7.5s ease-in-out infinite .8s}
  @keyframes floaty{0%,100%{transform:translateY(0) perspective(1400px) rotateY(6deg)}50%{transform:translateY(-9px) perspective(1400px) rotateY(6deg)}}
  @keyframes floaty2{0%,100%{transform:translateY(0) perspective(1400px) rotateY(-8deg) rotateX(3deg)}50%{transform:translateY(-7px) perspective(1400px) rotateY(-8deg) rotateX(3deg)}}
  .fbadge.floaty{animation:floatyb 6.5s ease-in-out infinite}
  @keyframes floatyb{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  /* ---------- THESIS BAND (kept dark for contrast punch) ---------- */
  .thesis{background:var(--ink);color:#f2f1ee;position:relative;overflow:hidden}
  .thesis::before{content:"";position:absolute;top:-32%;right:-8%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(61,111,216,.22),transparent 62%);pointer-events:none}
  .thesis .wrap{max-width:900px;position:relative}
  .thesis p{font-size:clamp(21px,2.7vw,30px);line-height:1.48;letter-spacing:-.015em;font-weight:500;color:#cfcdc8}
  .thesis p+p{margin-top:30px}
  .thesis .punch{color:#fff;font-weight:700}
  .punch-wrap{margin-top:46px}
  .punch-line{font-family:var(--display);font-size:clamp(30px,4.6vw,52px);color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1.12;display:inline}
  .punch-line .mark{position:relative;color:var(--accent-2);white-space:nowrap}
  .punch-line .mark::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:12px;background:rgba(61,111,216,.28);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .2s;z-index:-1}
  .thesis.lit .punch-line .mark::after{transform:scaleX(1)}

  /* ---------- WORK ---------- */
  .work-head{margin-bottom:44px}
  .work-intro{font-size:21px;color:var(--ink-soft);max-width:46ch}
  .cards{display:flex;flex-direction:column;gap:20px}
  .card{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:26px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);overflow:hidden;will-change:transform}
  .card::before{content:"";position:absolute;inset:0;background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(65,114,221,.07),transparent 42%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
  .card:hover{border-color:var(--line-2);box-shadow:0 34px 70px -34px rgba(31,50,110,.26)}
  .card:hover::before{opacity:1}
  .cindex{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent);font-weight:600;align-self:flex-start;padding-top:4px;transition:color .4s var(--ease)}
  .card:hover .cindex{color:var(--accent-2)}
  .card .tag{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.03em;margin-bottom:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace}
  .conf{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--ink-soft);background:var(--accent-soft);border:1px solid var(--line-2);border-radius:100px;padding:3px 10px;transition:background .4s var(--ease)}
  .card:hover .conf{background:#dce6fb}
  .conf i{width:5px;height:5px;border-radius:50%;background:var(--accent);font-style:normal}
  .card h3{font-family:var(--display);font-size:26px;letter-spacing:-.02em;margin-bottom:11px;font-weight:700;transition:color .4s var(--ease)}
  .card:hover h3{color:var(--accent)}
  .card p{color:var(--ink-soft);max-width:56ch;font-size:16px}
  .card .go{white-space:nowrap;font-size:14px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace}
  .card .go .arw{transition:transform .5s var(--ease)}
  .card:hover .go .arw{transform:translateX(7px)}
  .ph{font-size:10px;color:var(--ink-faint);border:1px dashed var(--line-2);border-radius:5px;padding:2px 8px;display:inline-block;margin-bottom:14px;font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
  @media(max-width:640px){.card{grid-template-columns:1fr;gap:16px}.cindex{display:none}.card .go{justify-content:flex-start}}

  /* ---------- EXPERIENCE ---------- */
  h2.section-title{font-family:var(--display);font-size:clamp(28px,3.6vw,42px);letter-spacing:-.025em;font-weight:700;margin-bottom:8px}
  .exp-row{border-top:1px solid var(--line);padding:28px 0;transition:background .25s ease;border-radius:8px}
  .exp-row:last-of-type{border-bottom:1px solid var(--line)}
  .exp-row:hover{background:rgba(61,111,216,.035)}
  .exp-head{display:grid;grid-template-columns:170px 1fr auto;gap:26px;align-items:baseline}
  .exp-type{font-size:11.5px;font-weight:600;color:var(--accent);letter-spacing:.06em;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
  .exp-main .role{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em}
  .exp-main .domain{font-size:14px;color:var(--ink-faint);margin-top:4px}
  .exp-main .built{font-size:15px;color:var(--ink-soft);margin-top:11px}
  .exp-date{font-size:13px;color:var(--ink-faint);white-space:nowrap;font-family:'JetBrains Mono',monospace}
  .exp-toggle{font-size:12px;color:var(--accent);font-weight:600;margin-top:14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:'JetBrains Mono',monospace}
  .exp-detail{max-height:0;overflow:hidden;transition:max-height .45s ease}
  .exp-detail.open{max-height:440px}
  .exp-detail ul{margin:18px 0 4px;padding-left:20px;color:var(--ink-soft);font-size:15px}
  .exp-detail li{margin-bottom:9px}
  .exp-earlier{border-top:1px solid var(--line);padding:22px 0;font-size:14px;color:var(--ink-faint)}
  @media(max-width:700px){.exp-head{grid-template-columns:1fr;gap:8px}.exp-date{margin-top:4px}}

  /* ---------- ABOUT ---------- */
  .about .wrap{max-width:760px}
  .about p.body{font-size:18px;color:var(--ink-soft);margin-bottom:22px;line-height:1.72}
  .about p.body:first-of-type{color:var(--ink);font-size:20px}
  .capabilities{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:640px){.capabilities{grid-template-columns:1fr}}
  .cap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;transition:transform .6s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease);will-change:transform}
  .cap:hover{border-color:var(--line-2);box-shadow:0 24px 44px -26px rgba(31,50,110,.24)}
  .cap .cap-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent);margin-bottom:12px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
  .cap p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.6}
  .also-fluent{margin-top:24px;font-size:14px;color:var(--ink-faint)}
  .also-fluent strong{color:var(--ink-soft);font-weight:600}
  .about .human{font-size:16px;color:var(--ink-faint);border-left:2px solid var(--accent);padding-left:22px;margin-top:36px}

  /* ---------- HOW I WORK ---------- */
  .method{position:relative}
  .method .lead{font-size:21px;color:var(--ink-soft);max-width:52ch;margin-bottom:52px}
  .method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:820px){.method-grid{grid-template-columns:1fr}}
  .mcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;transition:transform .6s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease);overflow:hidden;will-change:transform}
  .mcard::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(65,114,221,.06),transparent 45%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
  .mcard:hover{border-color:var(--line-2);box-shadow:0 30px 60px -32px rgba(31,50,110,.26)}
  .mcard:hover::before{opacity:1}
  .mnum{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.05em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
  .mnum::after{content:"";flex:1;height:1px;background:var(--line)}
  .mcard h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
  .mcard p{font-size:15px;color:var(--ink-soft);line-height:1.62;margin-bottom:18px}
  .mtags{display:flex;flex-wrap:wrap;gap:8px}
  .mtag{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--ink-soft);background:var(--accent-soft);border:1px solid var(--line-2);border-radius:100px;padding:4px 11px;letter-spacing:.02em;transition:background .4s var(--ease)}
  .mcard:hover .mtag{background:#dce6fb}
  .method-note{margin-top:34px;font-size:15px;color:var(--ink-faint);border-left:2px solid var(--accent);padding-left:22px;max-width:64ch}

  /* ---------- CAPABILITIES ORBIT ---------- */
  .orbit-sec{position:relative;overflow:hidden}
  .orbit-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  @media(max-width:860px){.orbit-wrap{grid-template-columns:1fr;gap:40px}}
  .orbit-sec .lead{font-size:20px;color:var(--ink-soft);max-width:44ch;margin-top:18px}
  .orbit{position:relative;width:440px;height:440px;margin:0 auto;max-width:100%}
  @media(max-width:520px){.orbit{width:330px;height:330px}}
  .orbit-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-2));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;box-shadow:0 20px 50px -16px rgba(31,61,148,.5);z-index:3}
  .orbit-core b{font-family:var(--display);font-size:15px;font-weight:700;line-height:1.15}
  .orbit-core span{font-size:8.5px;opacity:.82;font-family:'JetBrains Mono',monospace;margin-top:4px;letter-spacing:.06em}
  .orbit-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px dashed rgba(31,61,148,.2);border-radius:50%}
  .orbit-ring.r1{width:280px;height:280px}
  .orbit-ring.r2{width:440px;height:440px}
  @media(max-width:520px){.orbit-ring.r1{width:205px;height:205px}.orbit-ring.r2{width:330px;height:330px}}
  .orbit-rotate{position:absolute;inset:0;animation:spin 42s linear infinite}
  .orbit-rotate.rev{animation:spin 55s linear infinite reverse}
  @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.orbit-rotate,.orbit-rotate.rev{animation:none}}
  .orbit-node{position:absolute;top:50%;left:50%;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 10px 28px -12px rgba(31,50,110,.22);display:flex;align-items:center;gap:8px}
  .orbit-node i{width:7px;height:7px;border-radius:50%;font-style:normal;flex-shrink:0}
  .orbit-node span{display:flex;align-items:center;gap:8px;animation:counter-spin 42s linear infinite}
  .orbit-rotate.rev .orbit-node span{animation:counter-spin 55s linear infinite reverse}
  @keyframes counter-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
  @media (prefers-reduced-motion:reduce){.orbit-node span{animation:none}}

  /* ---------- APPRECIATION ---------- */
  .appreciation .wrap{max-width:1000px}
  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
  @media(max-width:720px){.quotes{grid-template-columns:1fr}}
  .quote{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px;position:relative;transition:transform .6s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease);will-change:transform}
  .quote:hover{border-color:var(--line-2);box-shadow:0 24px 44px -26px rgba(31,50,110,.2)}
  .quote .mk{font-size:52px;line-height:.5;color:var(--accent);opacity:.28;font-weight:800;font-family:Georgia,serif}
  .quote blockquote{font-size:16.5px;color:var(--ink);line-height:1.62;margin:14px 0 20px;font-weight:500}
  .quote .who{font-size:14px;color:var(--ink-faint)}
  .quote .who b{color:var(--ink);font-weight:600}
  .quote .who .rel{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.02em}
  .quote.ph-q{border-style:dashed}

  /* ---------- BEYOND ---------- */
  .beyond .wrap{max-width:760px}
  .beyond h2{font-family:var(--display);font-size:30px;letter-spacing:-.025em;margin-bottom:16px;font-weight:800}
  .beyond .lead{font-size:18px;color:var(--ink-soft);margin-bottom:26px}
  .beyond .feed{border:1px dashed var(--line-2);border-radius:14px;padding:26px;color:var(--ink-faint);font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card)}
  .beyond .feed a{color:var(--accent);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:14px}

  /* ---------- CLOSE ---------- */
  .close{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--accent),#16307a 60%,#122658);color:#fff}
  .close::before{content:"";position:absolute;top:-40%;right:-10%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(143,176,255,.24),transparent 60%)}
  .close::after{content:"";/*position:absolute;*/inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 100% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 70% 100% at 100% 0%,#000,transparent 70%)}
  .close .wrap{max-width:820px;position:relative}
  .close h2{font-family:var(--display);font-size:clamp(30px,4.6vw,50px);letter-spacing:-.03em;line-height:1.14;font-weight:800}
  .close .avail{margin-top:22px;font-size:18px;color:#cfdcff}
  .close .links{margin-top:40px;display:flex;gap:15px;flex-wrap:wrap}
  .close .links a{border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:13px 26px;font-weight:600;font-size:15px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s var(--ease);position:relative}
  .close .links a:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
  .close .links a:active{transform:translateY(-1px)}
  .close .links a.primary{background:#fff;color:var(--accent);border-color:#fff;box-shadow:0 6px 0 rgba(10,22,60,.35),0 14px 30px -10px rgba(0,0,0,.4)}
  .close .links a.primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(10,22,60,.35),0 22px 40px -12px rgba(0,0,0,.45)}
  .close .links a.primary:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,22,60,.35),0 8px 18px -8px rgba(0,0,0,.4)}

  /* ---- WhatsApp pill (close band) ---- */
  .close .links a.whatsapp{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
  .close .links a.whatsapp svg{color:#ffffff;flex-shrink:0}
  .close .links a.whatsapp:hover{background:rgba(255,255,255,.26);border-color:#ffffff;transform:translateY(-3px)}
  .close .links-secondary{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
  .close .links-secondary a{color:rgba(255,255,255,.65);text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
  .close .links-secondary a:hover{color:#fff}
  .close .links-secondary__dot{color:rgba(255,255,255,.35)}

  footer{background:var(--ink);color:var(--ink-faint);padding:40px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:14px}
  .bigname{background:var(--ink);font-size:clamp(46px,14vw,170px);font-weight:900;letter-spacing:-.05em;color:#232527;line-height:1;padding:48px 0 6px;text-align:center;overflow:hidden}

/* ===== inlined case.css (case study) ===== */
/* ============================================================
   case.css  —  shared styles for all case-study pages
   Loads AFTER style.css and reuses its tokens, fonts, nav,
   footer and buttons. Only case-study-specific components live
   here. Per-project accent is scoped on <body class="case case--x">.
   ============================================================ */

/* ---- project accent (this file ships with the green ConvertWay set;
        a future case study just overrides these four on its body) ---- */
.case{
  --acc:var(--good,#1f9d57);
  --acc-deep:#15833f;
  --acc-soft:#eaf6ef;
  --acc-soft-line:#c6e6d2;
  --fail:#d9534f;
  --part:#e08a2b;
}
.case--crm{ --acc:#1f9d57; --acc-deep:#15833f; }
.case--courier{ --acc:#4172dd; --acc-deep:#1f3d94; --acc-soft:#eef2fc; --acc-soft-line:#c9d8f7; }

/* ---- eyebrow: reuse site .eyebrow treatment, tint it with the accent ---- */
.case .eyebrow{color:var(--acc)}
.case .eyebrow::before{background:var(--acc)}

/* ---- section scaffolding ---- */
.cs-section{padding:92px 0;position:relative;overflow:hidden}
.cs-section--alt{background:#fff}
.cs-section > .wrap{position:relative;z-index:1}
.cs-h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.015em;margin-top:14px}
.cs-lead{font-size:clamp(15.5px,1.5vw,18px);color:var(--ink-soft);/*max-width:780px;*/margin-top:16px;line-height:1.55}
.cs-wm{position:absolute;top:24px;right:4%;font-family:var(--display);font-weight:800;font-size:clamp(90px,15vw,180px);line-height:1;color:var(--ink);opacity:.04;pointer-events:none;user-select:none;z-index:0}
.cs-subhead{font-family:var(--display);font-size:21px;font-weight:700;margin:44px 0 16px}

@media(max-width:720px){.cs-section{padding:62px 0}}

/* ---- hero ---- */
.cs-hero{position:relative;overflow:hidden;text-align:center;padding:60px 0 72px;
  background:radial-gradient(1100px 560px at 12% -14%,rgba(31,157,87,.16),transparent 56%),
             radial-gradient(900px 520px at 102% -8%,rgba(31,157,87,.12),transparent 52%)}
.cs-hero__eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:18px}
.cs-hero__title{font-family:var(--display);font-weight:800;font-size:clamp(31px,5.8vw,60px);line-height:1.06;letter-spacing:-.025em;max-width:19ch;margin:0 auto}
.cs-hero__title .g{color:var(--acc)}
.cs-hero__sub{font-size:clamp(16px,1.8vw,20px);color:var(--ink-soft);max-width:800px;margin:22px auto 0;line-height:1.5}
.cs-hero__sub b{color:var(--ink);font-weight:700}
.cs-hero__meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.cs-chip{background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:13px;color:var(--ink-soft);transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.cs-chip b{color:var(--ink);font-weight:600;transition:color .35s var(--ease)}
.cs-chip:hover{border-color:var(--accent-2);background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 0 0 3px var(--accent-soft),0 10px 24px -14px rgba(31,61,148,.35)}
.cs-chip:hover b{color:var(--accent)}
.cs-hero__shot{margin-top:46px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 44px 90px -46px rgba(15,90,50,.4);transition:box-shadow .5s var(--ease);position:relative}
.cs-hero__shot img{display:block;width:100%;height:auto}
.cs-hero__shot:hover{box-shadow:0 54px 110px -40px rgba(15,90,50,.5)}
.cs-hero__shot__hint{display:none}

/* On devices that can actually hover (desktop/trackpad), cap the frame
   height and let hovering pan down through the full screenshot — no
   content is ever cropped away, it's just revealed on demand. Touch
   devices (no real hover) skip this entirely and see the full image
   at natural height, since there's nothing to "hover" on a phone. */
@media (hover:hover) and (pointer:fine){
  .cs-hero__shot{height:600px}
  .cs-hero__shot img{transition:transform var(--pan-duration,1.4s) var(--ease);transform:translateY(0)}
  .cs-hero__shot:hover img{transform:translateY(calc(-1 * var(--pan-distance,0px)))}

  .cs-hero__shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom,transparent,var(--bg) 88%);pointer-events:none;transition:opacity .35s var(--ease);z-index:1}
  .cs-hero__shot:hover::after{opacity:0}
  .cs-hero__shot__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px 6px 12px;display:flex;align-items:center;gap:6px;pointer-events:none;transition:opacity .3s var(--ease);box-shadow:0 8px 20px -10px rgba(0,0,0,.18);z-index:2}
  .cs-hero__shot:hover .cs-hero__shot__hint{opacity:0}
  .cs-hero__shot__hint svg{animation:heroHintBounce 1.4s ease-in-out infinite}
}
@keyframes heroHintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

@media(prefers-reduced-motion:reduce){
  .cs-hero__shot{height:auto !important}
  .cs-hero__shot img{transform:none !important}
  .cs-hero__shot::after,.cs-hero__shot__hint{display:none !important}
}
.case--courier .cs-hero{background:radial-gradient(1100px 560px at 12% -14%,rgba(65,114,221,.16),transparent 56%),radial-gradient(900px 520px at 102% -8%,rgba(65,114,221,.12),transparent 52%)}
.case--courier .cs-hero__shot{box-shadow:0 44px 90px -46px rgba(15,40,90,.4)}
.case--courier .cs-hero__shot:hover{box-shadow:0 54px 110px -40px rgba(15,40,90,.5)}
@media(prefers-reduced-motion:reduce){
  .cs-chip{transition:border-color .01s,background .01s}
  .cs-chip:hover{transform:none}
}
.case--courier .cs-ctaBand__btn{box-shadow:0 6px 0 rgba(10,30,60,.25),0 14px 26px -10px rgba(20,40,60,.4)}
.case--courier .cs-ctaBand__btn:hover{box-shadow:0 9px 0 rgba(10,30,60,.25),0 20px 36px -12px rgba(20,40,60,.45)}
.case--courier .cs-ctaBand--onDark .cs-ctaBand__btn{box-shadow:0 6px 0 rgba(10,25,55,.25),0 14px 30px -10px rgba(0,0,0,.35)}

/* ---- grids & base card ---- */
.cs-grid{display:grid;gap:20px;margin-top:34px}
.cs-grid--2{grid-template-columns:1fr 1fr}
.cs-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.cs-grid--2,.cs-grid--3{grid-template-columns:1fr}}
.cs-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;
  transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.cs-card:hover{border-color:var(--line-2);box-shadow:0 26px 50px -34px rgba(20,60,40,.22);transform:translateY(-2px)}
.cs-card__title{font-size:17px;font-weight:700;margin-bottom:8px}
.cs-card__body{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.cs-card__body b{color:var(--ink);font-weight:600}
@media(max-width:720px){.cs-card{padding:24px}}

.cs-ico{width:36px;height:36px;border-radius:10px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;margin-bottom:16px}
.cs-ico svg{width:19px;height:19px}
.cs-ico--sm{width:30px;height:30px;margin-bottom:0}
.cs-ico--sm svg{width:16px;height:16px}

/* ---- quote card ---- */
.cs-quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:0 12px 12px 0;padding:22px 26px;margin-top:16px}
.cs-quote p{font-size:16px;color:var(--ink);line-height:1.55}
.cs-quote__who{font-size:13px;color:var(--ink-faint);margin-top:12px}

/* ---- key finding ---- */
.cs-find{background:var(--acc-soft);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:16px 20px;margin-top:14px}
.cs-find__label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:7px}
.cs-find p{font-size:14.5px;color:var(--ink);line-height:1.55}
.cs-hl,.cs-find .hl{color:var(--acc-deep);font-weight:700}

/* ---- phases / timeline ---- */
.cs-phases{position:relative;margin-top:30px}
.cs-phases::before{content:"";position:absolute;left:6px;top:6px;bottom:14px;width:2px;background:var(--line-2)}
.cs-phase{position:relative;padding:0 0 38px 34px}
.cs-phase:last-child{padding-bottom:0}
.cs-phase::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid var(--bg)}
.cs-section--alt .cs-phase::before{border-color:#fff}
.cs-phase__title{font-size:18px;font-weight:700;line-height:1.25}
.cs-phase__meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin:5px 0 10px}
.cs-phase__body{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.cs-phase__body b{color:var(--ink);font-weight:600}

/* ---- iteration cards (feature-card treatment: hover-lift, matching radius/padding) ---- */
.cs-iter{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line-2);border-radius:16px;padding:28px;
  transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.cs-iter:hover{border-color:var(--line-2);box-shadow:0 26px 50px -34px rgba(20,60,40,.22);transform:translateY(-2px)}
.cs-iter--fail{border-top-color:var(--fail)}
.cs-iter--part{border-top-color:var(--part)}
.cs-iter--win{border-top-color:var(--acc)}
.cs-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:100px;color:#fff}
.cs-badge--fail{background:var(--fail)}
.cs-badge--part{background:var(--part)}
.cs-badge--win{background:var(--acc)}
.cs-iter__title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;margin:14px 0}
.cs-wire{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);background:var(--bg);border:1px dashed var(--line-2);border-radius:8px;padding:20px 14px;text-align:center;margin-bottom:14px}
.cs-section--alt .cs-wire{background:#faf9f6}

/* ---- wireframe-panel visualization (replaces bracket-text placeholders) ---- */
.cs-wireviz{display:flex;gap:3px;height:64px;margin-bottom:14px;border-radius:8px;overflow:hidden;border:1px solid var(--line-2);background:var(--line-2)}
.cs-wireviz__panel{background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:4px}
.cs-section--alt .cs-wireviz__panel{background:#faf9f6}
.cs-wireviz__panel--acc{background:var(--acc-soft)!important}
.cs-wireviz__label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.cs-wireviz__panel--acc .cs-wireviz__label{color:var(--acc-deep)}
.cs-wireviz__label--sub{font-size:8.5px;letter-spacing:.02em;color:var(--ink-faint);opacity:.75;text-transform:none;font-weight:500}
.cs-wireviz--combined .cs-wireviz__panel{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 8px,#ecebe6 8px,#ecebe6 9px)}
.cs-section--alt .cs-wireviz--combined .cs-wireviz__panel{background:repeating-linear-gradient(135deg,#faf9f6,#faf9f6 8px,#f1f0eb 8px,#f1f0eb 9px)}
.cs-iter__body{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.cs-iter__body b{color:var(--ink);font-weight:600}
@media(max-width:720px){.cs-iter{padding:24px}}

/* ---- decision callout ---- */
.cs-decision{background:var(--acc-soft);border:1px solid var(--acc-soft-line);border-radius:14px;padding:26px 28px;margin-top:22px}
.cs-decision__label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:10px}
.cs-decision h4{font-size:16px;font-weight:700;margin-bottom:12px}
.cs-opt{font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.cs-opt .no{color:var(--fail);font-weight:700}
.cs-opt .yes{color:var(--acc-deep);font-weight:700}
.cs-why{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-top:12px}
.cs-why b{color:var(--ink)}

/* ---- feature cards ---- */
.cs-feat__label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600}
.cs-feat__title{font-family:var(--display);font-size:22px;font-weight:700;margin:12px 0 8px;line-height:1.18;letter-spacing:-.01em}
.cs-feat__prob{font-size:13px;color:var(--acc-deep);margin-bottom:12px}
.cs-feat__desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.cs-alist{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:14px}
.cs-alist li{position:relative;padding-left:22px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.cs-alist li::before{content:"→";position:absolute;left:0;top:0;color:var(--acc);font-weight:700}
.cs-alist li b{color:var(--ink);font-weight:600}
.cs-rules-code{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.75;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--ink-soft);white-space:pre-wrap;margin-top:14px;word-break:break-word}
.cs-note{background:var(--acc-soft);border-radius:10px;padding:16px 18px;margin-top:16px}
.cs-note__label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:6px}
.cs-note p{font-size:14px;color:var(--ink);line-height:1.55}

/* ---- impact band ---- */
.cs-impact{background:linear-gradient(135deg,#1f9d57,#0f7540);color:#fff;padding:82px 0;position:relative;overflow:hidden}
.case--courier .cs-impact{background:linear-gradient(135deg,#4172dd,#1f3d94)}
.case--courier .cs-impact .eyebrow{color:#dbe6fb}
.case--courier .cs-impact .eyebrow::before{background:#dbe6fb}
.cs-impact .eyebrow{color:#c3f0d5}
.cs-impact .eyebrow::before{background:#c3f0d5}
.cs-impact__title{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.015em;margin-top:14px}
.cs-impact__sub{color:rgba(255,255,255,.85);margin-top:14px;max-width:720px;font-size:16px}
.cs-bigmetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media(max-width:760px){.cs-bigmetrics{grid-template-columns:1fr}}
.cs-bigmetric{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:28px}
.cs-bigmetric__num{font-family:var(--display);font-size:clamp(42px,6vw,58px);font-weight:800;line-height:1;letter-spacing:-.02em}
.cs-bigmetric__label{font-weight:700;margin:12px 0 8px;font-size:16.5px}
.cs-bigmetric__note{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.5}
.cs-impact__foot{color:rgba(255,255,255,.72);font-size:12.5px;margin-top:28px;max-width:940px;line-height:1.55}
@media(max-width:720px){.cs-impact{padding:62px 0}}

/* ---- stat rows ---- */
.cs-statgroup{margin-top:34px}
.cs-statgroup__h{font-family:var(--display);font-size:21px;font-weight:700;margin-bottom:16px}
.cs-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:12px}
.cs-stat__label{font-size:13px;color:var(--ink-faint)}
.cs-stat__val{font-family:var(--display);font-size:18px;font-weight:700;color:var(--acc-deep);margin:3px 0 5px;letter-spacing:-.01em}
.cs-stat__note{font-size:12.5px;color:var(--ink-faint);line-height:1.5}

/* ---- principles ---- */
.cs-rule__num{font-family:'JetBrains Mono',monospace;color:var(--acc);font-weight:600;font-size:14px}
.cs-rule__title{font-family:var(--display);font-size:20px;font-weight:700;margin:8px 0;letter-spacing:-.01em}
.cs-rule__body{color:var(--ink-soft);font-size:15px;line-height:1.55}
.cs-rule__pl{font-weight:700;font-size:13px;margin-top:16px;color:var(--ink)}
.cs-rule__pj{color:var(--ink-soft);font-size:14px;margin-top:5px;line-height:1.55}

/* ---- assumed / learned ---- */
.cs-al{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin-bottom:12px;gap:6px}
.cs-al__lab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.cs-al__lab--a{color:var(--ink-faint)}
.cs-al__lab--l{color:var(--acc)}
.cs-al__txt{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.cs-al__txt--l{color:var(--ink)}
.cs-al__arrow{color:var(--acc);text-align:center;font-size:20px;font-weight:700}
@media(max-width:640px){.cs-al{grid-template-columns:1fr}.cs-al__arrow{transform:rotate(90deg);margin:4px 0}}
.cs-diff{background:var(--acc-soft);border:1px solid var(--acc-soft-line);border-radius:16px;padding:30px 32px;margin-top:26px}
.cs-diff__label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600}
.cs-diff p{margin-top:15px;color:var(--ink);font-size:15px;line-height:1.6}
.cs-diff b{color:var(--ink);font-weight:700}

/* ---- media block (for screenshots / screen recordings) ---- */
.cs-media{margin-top:20px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.cs-media video,.cs-media img{display:block;width:100%}
.cs-media__cap{font-size:13px;color:var(--ink-faint);padding:12px 16px;border-top:1px solid var(--line)}
.cs-phonerow{display:flex;gap:18px;overflow-x:auto;margin-top:24px;padding-bottom:8px;scroll-snap-type:x mandatory}
.cs-phone{flex:0 0 auto;width:260px;height:560px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;scroll-snap-align:start;box-shadow:0 24px 50px -30px rgba(20,60,40,.25);position:relative}
.cs-phone img{display:block;width:100%;height:auto}


  /* ===== ABOUT THE DESIGNER (shared case-study template block) ===== */
  .cs-about{background:var(--bg);padding:96px 0;border-top:1px solid var(--line)}
  .cs-about .wrap{max-width:820px;margin:0 auto;padding:0 var(--pad)}
  .cs-about__eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:flex;align-items:center;gap:12px}
  .cs-about__eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
  .cs-about__title{font-family:var(--display);font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:24px;color:var(--ink)}
  .cs-about__body{font-size:17px;color:var(--ink-soft);line-height:1.7;margin-bottom:18px}
  .cs-about__body:last-child{margin-bottom:0}
  .cs-about__body b{color:var(--ink);font-weight:600}

  /* ===== case-study nav: right-group (back + CTA) ===== */
  .nav-right{display:flex;align-items:center;gap:22px}
  .nav-back{font-size:14px;color:var(--ink-soft);font-weight:500;white-space:nowrap;transition:color .25s ease}
  .nav-back:hover{color:var(--accent)}

  /* ===== MOBILE HARDENING ===== */
  img{max-width:100%;height:auto}
  .cs-hero__meta{flex-wrap:wrap}
  @media(max-width:640px){
    .wrap{padding:0 18px}
    .nav-right{gap:12px}
    .nav-back{font-size:13px}
    .nav-cta{padding:10px 16px;font-size:13px}
    .cs-hero__meta{gap:8px}
    .cs-about{padding:72px 0}
    .close{padding-top:84px;padding-bottom:84px}
    .close .links{gap:10px}
    .close .links a{padding:12px 18px;font-size:14px}
    .bigname{font-size:clamp(40px,17vw,120px)}
  }
  @media(max-width:400px){
    .nav-inner{padding:10px 10px 10px 16px}
    .nav-back{font-size:12px}
    .brand{font-size:15px}
  }


/* ===== FEATURE MOCKUPS (Final Solution — show, don't tell) ===== */
.cs-heroFeat{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:60px}
.cs-heroFeat__title{font-family:var(--display);font-size:clamp(23px,2.8vw,30px);font-weight:800;letter-spacing:-.015em;line-height:1.18;margin:12px 0 14px}
@media(max-width:900px){
  .cs-heroFeat{grid-template-columns:1fr;gap:26px;margin-top:44px}
}

.cs-mock{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 60px -30px rgba(20,30,60,.18)}
.cs-mock__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cs-mock__title{font-family:var(--display);font-weight:700;font-size:15px}
.cs-mock__meta{font-size:12px;color:var(--ink-faint)}
.cs-mock__badge{font-size:11px;font-weight:700;color:var(--acc-deep);background:var(--acc-soft);border-radius:100px;padding:4px 10px}

/* pills (tags) */
.cs-pill{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;border-radius:100px;padding:6px 12px;white-space:nowrap}
.cs-pill--green{background:#eaf6ef;color:#15833f}
.cs-pill--blue{background:#e8f0ff;color:#2857c9}
.cs-pill--orange{background:#fdf0e2;color:#b5670e}
.cs-pill--purple{background:#f1eaff;color:#6a3fc9}
.cs-pill--pink{background:#fdeaf3;color:#c23a80}
.cs-mock__addtag{border:1px dashed var(--line-2);border-radius:100px;padding:6px 14px;font-size:12.5px;color:var(--ink-faint);font-weight:600}

/* tag table (Manage Tags mock) */
.cs-mock__table{width:100%;margin-top:4px;border-top:1px solid var(--line);padding-top:6px}
.cs-mock__row{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;padding:11px 0;font-size:13px;border-bottom:1px solid var(--line)}
.cs-mock__row:last-child{border-bottom:none}
.cs-mock__rowhead{color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}

/* quick replies list */
.cs-mock__qr{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:10px;margin-bottom:7px;background:var(--bg)}
.cs-mock__qr:last-child{margin-bottom:0}
.cs-mock__qr--active{background:var(--acc-soft);border:1px solid var(--acc-soft-line)}
.cs-mock__qricon{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-faint);margin-top:1px}
.cs-mock__qr--active .cs-mock__qricon{color:var(--acc-deep);border-color:var(--acc-soft-line)}
.cs-mock__qrcmd{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--ink)}
.cs-mock__qrprev{font-size:12px;color:var(--ink-faint);margin-top:2px;line-height:1.4}

/* assignment rules */
.cs-mock__rule{padding:12px 14px;border-radius:10px;background:var(--bg);margin-bottom:7px}
.cs-mock__rule:last-child{margin-bottom:0}
.cs-mock__rule--active{background:var(--acc-soft);border:1px solid var(--acc-soft-line)}
.cs-mock__ruletitle{font-size:13px;font-weight:700;margin-bottom:3px}
.cs-mock__rulebody{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft)}
.cs-mock__rulebody b{color:var(--acc-deep)}

/* "+5 more capabilities" compact grid */

/* ===== DETAILED RESULTS — compact stat grid (was 1-per-row, now 3-col) ===== */
.cs-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-statgrid .cs-stat{margin-bottom:0}
@media(max-width:760px){.cs-statgrid{grid-template-columns:1fr}}
/* ===== PERSONAS (story variation) ===== */
.cs-personaGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media(max-width:860px){.cs-personaGrid{grid-template-columns:1fr}}
.cs-persona{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px}
.cs-persona__head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cs-persona__avatar{width:46px;height:46px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:14px;flex-shrink:0}
.cs-persona__name{font-family:var(--display);font-weight:700;font-size:17px}
.cs-persona__role{font-size:13px;color:var(--ink-faint);margin-top:2px}
.cs-persona__quote{font-size:15px;color:var(--ink-soft);font-style:italic;line-height:1.6;padding:16px 18px;background:var(--bg);border-radius:10px;border-left:3px solid var(--acc);margin-bottom:22px}
.cs-persona__h{font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:20px 0 10px}
.cs-persona__h:first-of-type{margin-top:0}

/* ===== USER FLOW (story variation) ===== */
.cs-flow{display:flex;align-items:stretch;gap:0;margin-top:44px;flex-wrap:wrap}
.cs-flow__step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 16px;flex:1;min-width:145px;text-align:center}
.cs-flow__step--hl{background:var(--acc-soft);border-color:var(--acc-soft-line)}
.cs-flow__num{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:12px;margin:0 auto 12px}
.cs-flow__label{font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:4px;line-height:1.25}
.cs-flow__sub{font-size:11.5px;color:var(--ink-faint);line-height:1.4}
.cs-flow__decision{margin-top:10px;font-size:10.5px;font-weight:700;color:var(--acc-deep);padding-top:8px;border-top:1px dashed var(--acc-soft-line);text-transform:uppercase;letter-spacing:.03em}
.cs-flow__arrow{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:16px;padding:0 6px;flex:0 0 auto}
@media(max-width:860px){
  .cs-flow{flex-direction:column}
  .cs-flow__arrow{transform:rotate(90deg);padding:8px 0}
  .cs-flow__step{min-width:0}
}


/* ===== GOALS & SUCCESS METRICS ===== */
.cs-goalList{display:flex;flex-direction:column;gap:22px;margin-top:40px;/*max-width:760px*/}
.cs-goalRow{display:flex;gap:18px;align-items:flex-start}
.cs-goalRow .cs-ico{margin-bottom:0;flex-shrink:0}
.cs-goalRow__title{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:4px}
.cs-goalRow__desc{font-size:14px;color:var(--ink-soft);line-height:1.6}

/* ===== SYSTEM — thumbnail cards ===== */
.cs-sysCard{padding:0;overflow:hidden}
.cs-sysCard__body{padding:22px 24px 26px}
.cs-sysThumb{height:130px;border-radius:16px 16px 0 0;background:var(--bg);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:9px;overflow:hidden}
.cs-sysThumb__row{display:flex;align-items:center;gap:10px}
.cs-sysThumb__dot{width:20px;height:20px;border-radius:6px;background:var(--line-2);flex-shrink:0}
.cs-sysThumb__bar{height:9px;border-radius:4px;background:var(--line-2);flex:1}
.cs-sysThumb__bar--hl{background:var(--acc-soft-line)}
.cs-sysThumb__bar--dark{background:var(--ink-faint);opacity:.4}
.cs-sysThumb__msg{font-size:10.5px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--ink-soft)}
.cs-sysThumb__msg b{color:var(--ink)}
.cs-sysThumb__msg--hl{background:var(--acc-soft);border-color:var(--acc-soft-line);color:var(--acc-deep)}
.cs-sysThumb__msg--hl b{color:var(--acc-deep)}
.cs-sysThumb__code{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink);width:100%}
.cs-sysThumb__code2{color:var(--ink-faint);margin-top:3px}
.cs-sysThumb__user{display:flex;align-items:center;gap:9px}
.cs-sysThumb__avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;flex-shrink:0}
.cs-sysThumb__avatar--a{background:var(--acc-soft);color:var(--acc-deep)}
.cs-sysThumb__avatar--b{background:#e8f0ff;color:#2857c9}
.cs-sysThumb__uname{font-size:10.5px;font-weight:700;color:var(--ink)}
.cs-sysThumb__ustatus{font-size:9px;color:var(--ink-faint)}
.cs-sysThumb__ustatus--on{color:var(--acc-deep)}

/* ===== DEEP DIVE — 3-panel inbox mockup ===== */
.cs-deepdive{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;margin-top:44px}
@media(max-width:960px){.cs-deepdive{grid-template-columns:1fr}}
.cs-mock--wide{width:100%}
.cs-mock--wide:has(img){height:525px;position:relative;overflow:hidden}
.cs-dd3{display:grid;grid-template-columns:.85fr 1.2fr 1.5fr 1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:11px;margin-top:4px}
@media(max-width:760px){.cs-dd3{grid-template-columns:1fr;}
  .cs-dd3__col{border-right:none!important;border-bottom:1px solid var(--line)}
}
.cs-dd3__col{padding:12px;border-right:1px solid var(--line)}
.cs-dd3__col:last-child{border-right:none}
.cs-dd3__col--nav{background:var(--bg)}
.cs-dd3__navitem{padding:7px 8px;border-radius:6px;color:var(--ink-faint);font-size:10.5px;margin-bottom:2px}
.cs-dd3__navitem--active{background:#fff;color:var(--ink);font-weight:600}
.cs-dd3__listhead{font-size:10px;color:var(--ink-faint);font-weight:600;margin-bottom:10px}
.cs-dd3__chat{display:flex;gap:8px;padding:8px;border-radius:8px;margin-bottom:6px}
.cs-dd3__chat--active{background:var(--acc-soft)}
.cs-dd3__cname{font-size:10.5px;font-weight:700}
.cs-dd3__cprev{font-size:9.5px;color:var(--ink-faint);margin:2px 0 4px}
.cs-dd3__threadhead{font-size:10.5px;font-weight:600;color:var(--ink-soft);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cs-dd3__msg{font-size:10px;padding:7px 10px;border-radius:8px;margin-bottom:6px;max-width:90%;line-height:1.4}
.cs-dd3__msg--in{background:var(--bg);color:var(--ink-soft)}
.cs-dd3__msg--out{background:var(--acc-soft);color:var(--acc-deep);margin-left:auto}
.cs-dd3__inputbar{margin-top:10px;font-size:10px;color:var(--ink-faint);background:var(--bg);border-radius:20px;padding:8px 12px}
.cs-dd3__col--ctx{background:var(--bg)}
.cs-dd3__ctxtitle{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:12px}
.cs-dd3__field{margin-bottom:10px;font-size:10.5px}
.cs-dd3__field span{display:block;color:var(--ink-faint);font-size:9.5px;margin-bottom:2px}

.cs-deepdive__anno{padding-top:6px}
.cs-callout{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.cs-callout li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.cs-callout li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.cs-callout li b{color:var(--ink);font-weight:600}



/* ===== CROSS-LINK CTAs — story page -> full process case study ===== */
.cs-ctaBand{margin-top:32px;padding:26px 30px;background:var(--acc-soft);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cs-ctaBand__text{font-size:15px;color:var(--acc-deep);line-height:1.5;max-width:520px}
.cs-ctaBand__text b{color:var(--ink);font-weight:700}
.cs-ctaBand__btn{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#fff;font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:100px;box-shadow:0 6px 0 rgba(10,60,30,.25),0 14px 26px -10px rgba(20,60,40,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cs-ctaBand__btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(10,60,30,.25),0 20px 36px -12px rgba(20,60,40,.45)}
.cs-ctaBand__btn:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,60,30,.25),0 8px 16px -8px rgba(20,60,40,.35)}
@media(max-width:600px){
  .cs-ctaBand{flex-direction:column;align-items:flex-start;padding:22px 22px}
  .cs-ctaBand__btn{width:100%;justify-content:center}
}

/* --onDark: for placing the same CTA band directly on a colored/gradient
   section (e.g. the green Impact band) — band itself stays transparent,
   a thin divider replaces the boxed background, button flips to white-fill. */
.cs-ctaBand--onDark{background:transparent;padding:24px 0 0;margin-top:36px;border-top:1px solid rgba(255,255,255,.25);border-radius:0}
.cs-ctaBand--onDark .cs-ctaBand__text{color:rgba(255,255,255,.8)}
.cs-ctaBand--onDark .cs-ctaBand__text b{color:#fff}
.cs-ctaBand--onDark .cs-ctaBand__btn{background:#fff;color:var(--acc-deep);box-shadow:0 6px 0 rgba(10,40,25,.25),0 14px 30px -10px rgba(0,0,0,.35)}
.cs-ctaBand--onDark .cs-ctaBand__btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(10,40,25,.25),0 22px 40px -12px rgba(0,0,0,.4)}
.cs-ctaBand--onDark .cs-ctaBand__btn:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,40,25,.25),0 8px 16px -8px rgba(0,0,0,.35)}
@media(max-width:600px){.cs-ctaBand--onDark{padding-top:22px}}



  /* ===== back-link (matches certifications.html / work.html pattern) ===== */
  .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-faint);margin-bottom:22px;transition:color .3s var(--ease),gap .3s var(--ease)}
  .back-link:hover{color:var(--accent);gap:10px}

/* ===================================================================
   MICRO-INTERACTIONS — page-wide hover polish
   Same restrained language throughout: subtle lift, border/shadow
   deepen, gentle image zoom inside clipped containers. No looping
   animations — everything is a transition triggered by :hover, and
   everything respects prefers-reduced-motion.
   =================================================================== */

/* System module cards — image zooms inside the thumb, card already
   lifts via the shared .cs-card:hover rule */
.cs-sysThumb img{transition:transform .5s var(--ease)}
.cs-sysCard:hover .cs-sysThumb img{transform:scale(1.06)}

/* Deep-dive comparison mock (ShipSense AI table / analytics screen) —
   these screenshots are much taller than the fixed 525px frame, so on
   hover-capable devices, hovering pans down to reveal the rest, same
   pattern originally used for the hero screenshot. Touch devices see
   the full image at natural height since there's nothing to hover. */
.cs-mock--wide{transition:box-shadow .5s var(--ease)}
.cs-mock--wide img{display:block;width:100%;height:auto}
.cs-mock--wide__hint{display:none}
.cs-mock--wide:hover{box-shadow:0 32px 70px -30px rgba(20,30,60,.28)}

@media (hover:hover) and (pointer:fine){
  .cs-mock--wide img{transition:transform var(--pan-duration,1.4s) var(--ease);transform:translateY(0)}
  .cs-mock--wide:hover img{transform:translateY(calc(-1 * var(--pan-distance,0px)))}

  .cs-mock--wide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom,transparent,var(--bg) 88%);pointer-events:none;transition:opacity .35s var(--ease);z-index:1}
  .cs-mock--wide:hover::after{opacity:0}
  .cs-mock--wide__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px 6px 12px;display:flex;align-items:center;gap:6px;pointer-events:none;transition:opacity .3s var(--ease);box-shadow:0 8px 20px -10px rgba(0,0,0,.18);z-index:2}
  .cs-mock--wide:hover .cs-mock--wide__hint{opacity:0}
  .cs-mock--wide__hint svg{animation:heroHintBounce 1.4s ease-in-out infinite}
}

@media(prefers-reduced-motion:reduce){
  .cs-mock--wide{height:auto !important}
  .cs-mock--wide img{transform:none !important}
  .cs-mock--wide::after,.cs-mock--wide__hint{display:none !important}
}

/* Feature breakdown screens (ShipSense AI / Priority / Rules / Deactivation) */
.cs-heroFeat__media img{transition:transform .6s var(--ease)}
.cs-heroFeat__media:hover img{transform:scale(1.025)}

/* Mobile phone mockup row */
.cs-phone{transition:box-shadow .5s var(--ease),transform .35s var(--ease)}
.cs-phone:hover{transform:translateY(-4px);box-shadow:0 34px 70px -32px rgba(20,60,40,.32)}
.cs-phone__hint{display:none}

@media (hover:hover) and (pointer:fine){
  .cs-phone img{transition:transform var(--pan-duration,1.4s) var(--ease);transform:translateY(0)}
  .cs-phone:hover img{transform:translateY(calc(-1 * var(--pan-distance,0px)))}

  .cs-phone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;background:linear-gradient(to bottom,transparent,var(--bg) 88%);pointer-events:none;transition:opacity .35s var(--ease);z-index:1}
  .cs-phone:hover::after{opacity:0}
  .cs-phone__hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px 11px 5px 10px;display:flex;align-items:center;gap:5px;pointer-events:none;transition:opacity .3s var(--ease);box-shadow:0 6px 16px -8px rgba(0,0,0,.18);z-index:2;white-space:nowrap}
  .cs-phone:hover .cs-phone__hint{opacity:0}
  .cs-phone__hint svg{animation:heroHintBounce 1.4s ease-in-out infinite}
}

@media(prefers-reduced-motion:reduce){
  .cs-phone{height:auto !important}
  .cs-phone img{transform:none !important}
  .cs-phone::after,.cs-phone__hint{display:none !important}
}

/* Persona cards */
.cs-persona{transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .35s var(--ease)}
.cs-persona:hover{border-color:var(--line-2);box-shadow:0 26px 50px -34px rgba(20,60,40,.22);transform:translateY(-2px)}

/* Big impact numbers (dark band) */
.cs-bigmetric{transition:background .4s var(--ease),border-color .4s var(--ease),transform .35s var(--ease)}
.cs-bigmetric:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);transform:translateY(-3px)}

/* Flow diagram steps */
.cs-flow__step{transition:border-color .35s var(--ease),transform .3s var(--ease),box-shadow .35s var(--ease)}
.cs-flow__step:hover{border-color:var(--accent-2);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(31,61,148,.3)}

@media(prefers-reduced-motion:reduce){
  .cs-sysThumb img,.cs-heroFeat__media img{transition:none}
  .cs-sysCard:hover .cs-sysThumb img,.cs-heroFeat__media:hover img{transform:none}
  .cs-persona:hover,.cs-bigmetric:hover,.cs-flow__step:hover{transform:none}
}

/* Highlighted step keeps its own identity on hover — never falls back
   to the plain accent-2 border every other step gets */
.cs-flow__step--hl:hover{
  border-color:var(--acc-soft-line);
  background:var(--acc-soft);
  transform:translateY(-3px);
  box-shadow:0 18px 36px -18px rgba(31,61,148,.4);
}
@media(prefers-reduced-motion:reduce){
  .cs-flow__step--hl:hover{transform:none}
}

/* ===================================================================
   USER FLOW — continuous "process relay" animation.
   Only the currently-active step lifts and switches its border to
   the accent color; every other step sits at its plain default
   border. The highlight moves left to right through all 5 steps,
   then pauses for 5s before looping again. Uses the real CSS border
   (not an overlay) so it always respects the card's own 14px radius.
   =================================================================== */

.cs-flow__step{position:relative}

/* number badge — quick confirm pop, synced to its step's active moment */
@keyframes flowNumPop{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(65,114,221,0)}
  0.602%{transform:scale(1.24);box-shadow:0 0 0 6px rgba(65,114,221,.28)}
  2.41%{transform:scale(1);box-shadow:0 0 0 0 rgba(65,114,221,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(65,114,221,0)}
}

/* arrow — brief color flash + nudge as the relay passes through it */
@keyframes flowArrowPulse{
  0%{color:var(--ink-faint);transform:translateX(0)}
  0.904%{color:var(--accent-2);transform:translateX(5px)}
  1.807%{color:var(--ink-faint);transform:translateX(0)}
  100%{color:var(--ink-faint);transform:translateX(0)}
}

/* the recommended step's extra confirm glow, layered on top of its
   own active window */
@keyframes flowHlGlow{
  0%{box-shadow:0 0 0 0 rgba(65,114,221,.45)}
  1.506%{box-shadow:0 0 0 0 rgba(65,114,221,.45)}
  5.723%{box-shadow:0 0 0 14px rgba(65,114,221,0)}
  100%{box-shadow:0 0 0 0 rgba(65,114,221,0)}
}

/* --- regular steps: default border <-> active border+lift --- */
@keyframes flowActive{
  0%{border-color:var(--line);transform:translateY(0);box-shadow:none}
  1.506%{border-color:var(--accent-2);transform:translateY(-6px);box-shadow:0 14px 30px -18px rgba(31,61,148,.35)}
  4.518%{border-color:var(--accent-2);transform:translateY(-6px);box-shadow:0 14px 30px -18px rgba(31,61,148,.35)}
  6.024%{border-color:var(--line);transform:translateY(0);box-shadow:none}
  100%{border-color:var(--line);transform:translateY(0);box-shadow:none}
}

/* --- the recommended step: same lift, but rests on ITS OWN tint
   instead of the plain default border --- */
@keyframes flowActiveHl{
  0%{border-color:var(--acc-soft-line);transform:translateY(0);box-shadow:none}
  1.506%{border-color:var(--accent-2);transform:translateY(-6px);box-shadow:0 14px 30px -18px rgba(31,61,148,.35)}
  4.518%{border-color:var(--accent-2);transform:translateY(-6px);box-shadow:0 14px 30px -18px rgba(31,61,148,.35)}
  6.024%{border-color:var(--acc-soft-line);transform:translateY(0);box-shadow:none}
  100%{border-color:var(--acc-soft-line);transform:translateY(0);box-shadow:none}
}

/* total cycle = 5 steps x 1.4s stride (last one finishing at 6.6s)
   + a 10s pause before the relay restarts = 16.6s */
.cs-flow.flow-play .cs-flow__step:not(.cs-flow__step--hl){
  animation:flowActive 16.6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.4s);
  animation-play-state:paused;
}
.cs-flow.flow-play .cs-flow__step--hl{
  animation:flowActiveHl 16.6s var(--ease) infinite,flowHlGlow 16.6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.4s),calc(var(--i) * 1.4s);
  animation-play-state:paused,paused;
}
.cs-flow.flow-play .cs-flow__step .cs-flow__num{
  animation:flowNumPop 16.6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.4s);
  animation-play-state:paused;
}
.cs-flow.flow-play .cs-flow__arrow{
  animation:flowArrowPulse 16.6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.4s + .7s);
  animation-play-state:paused;
}

/* only actually run the animations while the diagram is on screen —
   saves battery/CPU when the user has scrolled past it */
.cs-flow.flow-play.flow-in-view .cs-flow__step:not(.cs-flow__step--hl),
.cs-flow.flow-play.flow-in-view .cs-flow__step--hl,
.cs-flow.flow-play.flow-in-view .cs-flow__step .cs-flow__num,
.cs-flow.flow-play.flow-in-view .cs-flow__arrow{
  animation-play-state:running,running;
}

@media(prefers-reduced-motion:reduce){
  .cs-flow.flow-play .cs-flow__step,
  .cs-flow.flow-play .cs-flow__step--hl,
  .cs-flow.flow-play .cs-flow__step .cs-flow__num,
  .cs-flow.flow-play .cs-flow__arrow{animation:none !important}
}