/* ==========================================================================
   Mauritius D'Silva Portfolio
   mauritiusdsilva.com
   global.css
   Version: 1.2.0
   Last updated: June 2026

   Changelog 1.2.0:
   - Unified featured-case cover plates to a single neutral grey
     (--work-cover-bg). Removed per-case tints (rose, blue, lavender, sand)
     and radial/linear gradient overlays.
   - All floating-card and device drop-shadows now use neutral ink tones
     (--work-cover-shadow-sm / -md / -lg) instead of per-plate tints.
   - Hover-state box-shadows and filter shadows unified to neutral ink.
   - Consolidated Homepage & Feed hover block into the shared hover section.
   - Extended reduced-motion rule to cover Homepage & Feed and Cari Unlimited.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

   :root {
    --ink: #0A0A0A;
    --ink-2: #1F1F1F;
    --muted: #72706E;
    --muted-2: #9D9B98;
    --link: #1573DD;
    --link-hover: #0F5BB8;
    --status-green: #10B981;
    --status-green-bg: rgba(16, 185, 129, 0.10);
  
    --line: rgba(10, 10, 10, 0.06);
    --line-strong: rgba(10, 10, 10, 0.1);
  
    --bg: #FFFFFF;
    --card-bg: #F7F7F7;
  
    /* Shared neutral grey for all featured case cover plates,
       and a single neutral ink shadow system for floating cards/devices. */
    --work-cover-bg: #F4F3F1;
    --work-cover-shadow-sm: rgba(10, 10, 10, 0.10);
    --work-cover-shadow-md: rgba(10, 10, 10, 0.12);
    --work-cover-shadow-lg: rgba(10, 10, 10, 0.14);
  
    --radius: 24px;
    --radius-sm: 12px;
  
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quick: cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  /* ==========================================================================
     2. Reset and base
     ========================================================================== */
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  img,
  svg {
    display: block;
  }
  
  a {
    color: inherit;
  }
  
  
  /* ==========================================================================
     3. Layout
     ========================================================================== */
  
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }
  
  
  /* ==========================================================================
     4. Header and navigation
     ========================================================================== */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    transition: border-color 0.2s ease;
  }
  
  .site-header.scrolled {
    border-bottom-color: var(--line);
  }
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  
  .logo {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
  }
  
  .logo svg {
    width: auto;
    height: 48px;
  }
  
  .logo svg path {
    fill: var(--ink);
  }
  
  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  
  .nav a {
    position: relative;
    padding-bottom: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  
  .nav a:hover {
    opacity: 0.6;
  }
  
  .nav a.active {
    font-weight: 600;
    opacity: 1;
  }
  
  .nav a.active::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
  }
  
  
  /* ==========================================================================
     5. Shared links and buttons
     ========================================================================== */
  
  .text-link,
  a.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link);
    border-bottom: 1px solid transparent;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition:
      gap 180ms ease,
      color 150ms ease,
      border-color 150ms ease;
  }
  
  .text-link:hover,
  a.text-link:hover {
    gap: 10px;
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
  }
  
  .text-arrow-link {
    --arrow-space: 26px;
  
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 10px;
    padding-bottom: 7px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition:
      color 180ms ease,
      gap 180ms ease;
  }
  
  .text-arrow-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transition:
      width 220ms ease,
      opacity 220ms ease;
  }
  
  .text-arrow-link span {
    display: inline-block;
    line-height: 1;
    transition: transform 180ms ease;
  }
  
  .text-arrow-link:hover {
    gap: 14px;
    color: var(--muted);
  }
  
  .text-arrow-link:hover::after {
    width: calc(100% - var(--arrow-space));
    opacity: 0.65;
  }
  
  .text-arrow-link:hover span {
    transform: translateX(2px);
  }
  
  .contact-btn,
  .card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    color: #FFFFFF;
    background: var(--ink);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }
  
  .contact-btn:hover,
  .card-cta:hover {
    background: var(--ink-2);
    transform: translateY(-1px);
  }
  
  .contact-btn-secondary {
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-strong);
  }
  
  .contact-btn-secondary:hover {
    color: var(--ink);
    background: var(--bg);
    border-color: var(--ink);
  }
  
  .card-cta-arrow {
    display: inline-block;
    font-size: 14px;
    transition: transform 0.2s ease;
  }
  
  .card-cta:hover .card-cta-arrow {
    transform: translateX(4px);
  }
  
  
  /* ==========================================================================
     6. Homepage hero
     ========================================================================== */
  
  .hero {
    padding: 88px 0 72px;
  }
  
  .hero-name {
    margin-bottom: 4px;
    color: var(--ink);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  
  .hero-role {
    margin-bottom: 56px;
    color: var(--ink);
    font-size: clamp(48px, 7.4vw, 92px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  
  .hero-bio {
    max-width: 920px;
    margin-bottom: 40px;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.015em;
  }
  
  .hero-bio .lead {
    color: var(--ink);
  }
  
  .hero-bio .trail {
    color: var(--muted);
  }
  
  .hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--muted);
    background: var(--status-green-bg);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status-dot {
    width: 8px;
    height: 8px;
    background: var(--status-green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    animation: pulse 2.4s ease-in-out infinite;
  }
  
  .status-sep {
    color: var(--muted-2);
    opacity: 0.5;
  }
  
  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    }
  
    50% {
      box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.08);
    }
  }
  
  
  /* ==========================================================================
     7. Homepage about bridge
     ========================================================================== */
  
  .about-bridge {
    padding: 72px 0 88px;
    border-top: 1px solid var(--line);
  }
  
  .about-eyebrow {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  .about-copy {
    max-width: 1100px;
    margin-bottom: 32px;
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.02em;
  }
  
  .about-copy .lead {
    color: var(--ink);
  }
  
  .about-copy .trail {
    color: var(--muted);
  }
  
  .read-more-link {
    margin: 36px 0 48px;
  }
  
  .capabilities-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--line-strong);
  }
  
  .capability {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .capability-name {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  
  .capability-context {
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  
  
  /* ==========================================================================
     7A. Homepage product range strip
     ========================================================================== */
  
  .product-range {
    margin-top: 88px;
  }
  
  .product-range-heading {
    margin-bottom: 40px;
    color: var(--muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
  }
  
  .product-range-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  
  .product-range-item {
    min-width: 0;
  }
  
  .product-range-logo {
    width: auto;
    max-width: 132px;
    height: 30px;
    margin-bottom: 20px;
    object-fit: contain;
    object-position: left center;
    opacity: 0.88;
  }
  
  .product-range-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .product-range-category {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  
  .product-range-detail {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
  }
  
  
  /* ==========================================================================
     8. Homepage selected work
     ========================================================================== */
  
  .work {
    padding: 72px 0 96px;
  }
  
  .section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
  }
  
  .section-label-meta {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
  }
  
  .project-list {
    display: flex;
    flex-direction: column;
  }
  
  .feature-case {
    width: 100%;
    overflow: hidden;
    margin-bottom: 88px;
  }
  
  .feature-case:last-child {
    margin-bottom: 0;
  }
  
  
  /* Shared featured case body */
  
  .feature-case-body {
    padding: 22px 8px 0;
  }
  
  .feature-case-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .feature-case-meta > span:first-child {
    color: var(--muted-2);
    text-transform: none;
  }
  
  .feature-case-meta .sep {
    width: 28px;
    height: 1px;
    background: var(--muted-2);
    opacity: 0.65;
  }
  
  .feature-case-title {
    max-width: 1100px;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: clamp(34px, 3.3vw, 48px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  
  .feature-case-description {
    max-width: 1180px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: clamp(16px, 1.45vw, 19px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.018em;
  }
  
  .feature-case-impact {
    display: grid;
    grid-template-columns: 280px 280px;
    gap: 40px;
    width: 100%;
    margin-bottom: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  
  .feature-case-impact-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  
  .feature-case-impact-item span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
  }
  
  .feature-case-impact-assist {
    gap: 96px;
  }
  
  .feature-case-impact-assist .feature-case-impact-item:nth-child(2),
  .feature-case-impact-campaign .feature-case-impact-item:nth-child(2) {
    min-width: 320px;
  }
  
  .feature-case-impact-campaign {
    gap: 120px;
  }
  
  /* Homepage & Feed uses three stats instead of two,
     so it overrides the base .feature-case-impact grid. */
  .feature-case-impact-homefeed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    max-width: 920px;
  }
  
  .feature-case-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .feature-case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
  }
  
  .feature-case-tags li {
    padding: 7px 12px;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
  }
  
  
  /* ==========================================================================
     8A. Featured case cover, Order Help
     ========================================================================== */
  
  .feature-case-plate {
    position: relative;
    height: 448px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
  }
  
  .feature-case-stack {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .orderhelp-flows,
  .orderhelp-rules,
  .orderhelp-device {
    position: absolute;
    z-index: 1;
  }
  
  .orderhelp-flows {
    top: 76px;
    left: 108px;
    width: 238px;
    transform: rotate(-7deg);
  }
  
  .orderhelp-rules {
    top: 110px;
    left: 300px;
    z-index: 2;
    width: 274px;
    transform: rotate(5deg);
  }
  
  .orderhelp-device {
    top: 68px;
    right: 180px;
    z-index: 3;
    width: 328px;
  }
  
  .orderhelp-flows img,
  .orderhelp-rules img,
  .orderhelp-device img {
    width: 100%;
    height: auto;
  }
  
  .orderhelp-flows img {
    filter: drop-shadow(0 24px 44px var(--work-cover-shadow-md));
  }
  
  .orderhelp-rules img {
    filter: drop-shadow(0 28px 52px var(--work-cover-shadow-md));
  }
  
  .orderhelp-device img {
    filter: drop-shadow(0 30px 54px var(--work-cover-shadow-lg));
  }
  
  
  /* ==========================================================================
     8B. Featured case cover, Cari Assist
     ========================================================================== */
  
  .assist-feature-plate {
    position: relative;
    height: 448px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
  }
  
  .assist-feature-stack {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .assist-request-card-art {
    position: absolute;
    top: 92px;
    left: 118px;
    z-index: 1;
    width: 286px;
    height: auto;
    transform: rotate(-6deg);
    filter: drop-shadow(0 24px 54px var(--work-cover-shadow-md));
  }
  
  .assist-logic-card-art {
    position: absolute;
    top: 142px;
    left: 350px;
    z-index: 2;
    width: 308px;
    height: auto;
    transform: rotate(4deg);
    filter: drop-shadow(0 28px 60px var(--work-cover-shadow-md));
  }
  
  .assist-device-art {
    position: absolute;
    top: 68px;
    right: 180px;
    z-index: 3;
    display: block;
    width: 328px;
    height: auto;
    filter: drop-shadow(0 30px 54px var(--work-cover-shadow-lg));
  }
  
  
  /* ==========================================================================
     8C. Featured case cover, Campaign Management
     ========================================================================== */
  
  .feature-case-campaign .campaign-feature-plate {
    position: relative;
    min-height: 472px;
    margin-bottom: 28px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
  }
  
  .feature-case-campaign .campaign-feature-stack {
    position: relative;
    height: 472px;
  }
  
  .feature-case-campaign .campaign-objective-art,
  .feature-case-campaign .campaign-visibility-art,
  .feature-case-campaign .campaign-device-art {
    position: absolute;
    height: auto;
  }
  
  .feature-case-campaign .campaign-objective-art {
    top: 80px;
    left: 96px;
    z-index: 2;
    width: 280px;
    transform: rotate(-4deg);
    filter: drop-shadow(0 28px 44px var(--work-cover-shadow-sm));
  }
  
  .feature-case-campaign .campaign-visibility-art {
    top: 126px;
    left: 265px;
    z-index: 3;
    width: 300px;
    transform: rotate(2.5deg);
    filter: drop-shadow(0 30px 48px var(--work-cover-shadow-md));
  }
  
  .feature-case-campaign .campaign-device-art {
    top: 66px;
    right: -168px;
    z-index: 4;
    width: 800px;
    max-width: none;
    filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
  }
  
  .feature-case-campaign .campaign-objective-art img,
  .feature-case-campaign .campaign-visibility-art img,
  .feature-case-campaign .campaign-device-art img {
    width: 100%;
    height: auto;
  }
  
  
  /* ==========================================================================
     8D. Featured case cover, Homepage & Feed Redesign
     ========================================================================== */
  
  .homefeed-feature-plate {
    position: relative;
    height: 448px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
  }
  
  .homefeed-feature-stack {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .homefeed-sections-art,
  .homefeed-journeys-art,
  .homefeed-device-art {
    position: absolute;
    height: auto;
  }
  
  .homefeed-sections-art {
    top: 80px;
    left: 108px;
    z-index: 1;
    width: 282px;
    transform: rotate(-6deg);
    filter: drop-shadow(0 24px 44px var(--work-cover-shadow-md));
  }
  
  .homefeed-journeys-art {
    top: 118px;
    left: 300px;
    z-index: 2;
    width: 290px;
    transform: rotate(4deg);
    filter: drop-shadow(0 28px 52px var(--work-cover-shadow-md));
  }
  
  .homefeed-device-art {
    top: 68px;
    right: 180px;
    z-index: 3;
    width: 328px;
    filter: drop-shadow(0 30px 54px var(--work-cover-shadow-lg));
  }
  
  .homefeed-sections-art img,
  .homefeed-journeys-art img,
  .homefeed-device-art img {
    width: 100%;
    height: auto;
  }
  
  
  
  /* ==========================================================================
     8E. Featured case cover, Cari Unlimited
     ========================================================================== */

  .feature-case-unlimited .unlimited-feature-plate {
    position: relative;
    height: 448px;
    overflow: hidden;
    background:
      radial-gradient(circle at 52% 46%, rgba(255, 45, 111, 0.13) 0%, rgba(255, 45, 111, 0.06) 26%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(135deg, #ffffff 0%, #fff7fa 48%, var(--work-cover-bg) 100%);
    border-radius: 32px;
  }

  .feature-case-unlimited .unlimited-feature-stack {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .feature-case-unlimited .unlimited-value-art,
  .feature-case-unlimited .unlimited-entry-art,
  .feature-case-unlimited .unlimited-device-art,
  .feature-case-unlimited .unlimited-active-art,
  .feature-case-unlimited .unlimited-inactive-art,
  .feature-case-unlimited .unlimited-payment-art {
    position: absolute;
    height: auto;
  }

  .feature-case-unlimited .unlimited-value-art {
    top: 82px;
    left: 96px;
    z-index: 2;
    width: 252px;
    transform: rotate(-6deg);
    filter: drop-shadow(0 24px 44px var(--work-cover-shadow-sm));
  }

  .feature-case-unlimited .unlimited-entry-art {
    top: 124px;
    left: 278px;
    z-index: 3;
    width: 284px;
    transform: rotate(4deg);
    filter: drop-shadow(0 28px 52px var(--work-cover-shadow-md));
  }

  .feature-case-unlimited .unlimited-device-art {
    top: 44px;
    left: 50%;
    z-index: 5;
    width: 328px;
    transform: translateX(-50%) rotate(-2deg);
    filter:
      drop-shadow(0 30px 54px var(--work-cover-shadow-lg))
      drop-shadow(0 54px 86px rgba(255, 45, 111, 0.12));
  }

  .feature-case-unlimited .unlimited-active-art {
    top: 78px;
    right: 292px;
    z-index: 2;
    width: 220px;
    transform: rotate(5deg);
    filter: drop-shadow(0 24px 44px var(--work-cover-shadow-sm));
  }

  .feature-case-unlimited .unlimited-inactive-art {
    top: 124px;
    right: 104px;
    z-index: 3;
    width: 220px;
    transform: rotate(-4deg);
    filter: drop-shadow(0 28px 52px var(--work-cover-shadow-md));
  }

  .feature-case-unlimited .unlimited-payment-art {
    right: 188px;
    bottom: 54px;
    z-index: 4;
    width: 248px;
    transform: rotate(2deg);
    filter:
      drop-shadow(0 28px 52px var(--work-cover-shadow-md))
      drop-shadow(0 42px 68px rgba(255, 45, 111, 0.10));
  }

  .feature-case-unlimited .unlimited-value-art svg,
  .feature-case-unlimited .unlimited-entry-art svg,
  .feature-case-unlimited .unlimited-device-art svg,
  .feature-case-unlimited .unlimited-value-art img,
  .feature-case-unlimited .unlimited-entry-art img,
  .feature-case-unlimited .unlimited-device-art img,
  .feature-case-unlimited .unlimited-active-art img,
  .feature-case-unlimited .unlimited-inactive-art img,
  .feature-case-unlimited .unlimited-payment-art img {
    display: block;
    width: 100%;
    height: auto;
  }

  .feature-case-unlimited .unlimited-cover-label {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: #CC0071;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 45, 111, 0.16);
    border-radius: 999px;
    box-shadow: 0 16px 36px rgba(10, 10, 10, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .feature-case-unlimited .unlimited-cover-label::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #D6007B;
    border-radius: 999px;
  }

  .feature-case-unlimited .unlimited-cover-label--entry {
    top: 58px;
    left: 118px;
  }

  .feature-case-unlimited .unlimited-cover-label--plan {
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
  }

  .feature-case-unlimited .unlimited-cover-label--states {
    top: 58px;
    right: 128px;
  }

  .feature-case-impact-unlimited {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    max-width: 980px;
  }


/* ==========================================================================
     8E. Featured cover hover interactions
     All five cases share the same neutral lift + depth treatment.
     ========================================================================== */
  
  /* Shared transitions */
  .feature-case-campaign .campaign-objective-art,
  .feature-case-campaign .campaign-visibility-art,
  .feature-case-campaign .campaign-device-art,
  .feature-case-orderhelp .orderhelp-flows,
  .feature-case-orderhelp .orderhelp-rules,
  .feature-case-orderhelp .orderhelp-device,
  .feature-case-assist .assist-request-card-art,
  .feature-case-assist .assist-logic-card-art,
  .feature-case-assist .assist-device-art,
  .feature-case-homefeed .homefeed-sections-art,
  .feature-case-homefeed .homefeed-journeys-art,
  .feature-case-homefeed .homefeed-device-art,
  .feature-case-unlimited .unlimited-value-art,
  .feature-case-unlimited .unlimited-entry-art,
  .feature-case-unlimited .unlimited-device-art,
  .feature-case-unlimited .unlimited-active-art,
  .feature-case-unlimited .unlimited-inactive-art,
  .feature-case-unlimited .unlimited-payment-art {
    transition:
      transform 420ms var(--ease-out-soft),
      filter 420ms var(--ease-out-soft);
  }
  
  .feature-case-campaign .campaign-feature-plate,
  .feature-case-orderhelp .feature-case-plate,
  .feature-case-assist .assist-feature-plate,
  .feature-case-homefeed .homefeed-feature-plate,
  .feature-case-unlimited .unlimited-feature-plate {
    transition: box-shadow 420ms var(--ease-out-soft);
  }
  
  
  /* Desktop hover only */
  @media (hover: hover) and (pointer: fine) {
  
    /* ----- Campaign Management ----- */
  
    .feature-case-campaign .campaign-feature-plate:hover {
      box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
    }
  
    .feature-case-campaign .campaign-feature-plate:hover .campaign-objective-art {
      transform: translate(-10px, -10px) rotate(-5deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }
  
    .feature-case-campaign .campaign-feature-plate:hover .campaign-visibility-art {
      transform: translate(10px, -8px) rotate(3deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }
  
    .feature-case-campaign .campaign-feature-plate:hover .campaign-device-art {
      transform: translateX(-10px) translateY(-4px);
      filter:
        drop-shadow(0 38px 56px rgba(10, 10, 10, 0.14))
        drop-shadow(0 58px 92px rgba(10, 10, 10, 0.16));
    }
  
  
    /* ----- Order Help ----- */
  
    .feature-case-orderhelp .feature-case-plate:hover {
      box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
    }
  
    .feature-case-orderhelp .feature-case-plate:hover .orderhelp-flows {
      transform: translate(-10px, -10px) rotate(-8deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }
  
    .feature-case-orderhelp .feature-case-plate:hover .orderhelp-rules {
      transform: translate(10px, -8px) rotate(6deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }
  
    .feature-case-orderhelp .feature-case-plate:hover .orderhelp-device {
      transform: translateX(-10px) translateY(-4px);
      filter:
        drop-shadow(0 38px 56px rgba(10, 10, 10, 0.14))
        drop-shadow(0 58px 92px rgba(10, 10, 10, 0.16));
    }
  
  
    /* ----- Cari Assist ----- */
  
    .feature-case-assist .assist-feature-plate:hover {
      box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
    }
  
    .feature-case-assist .assist-feature-plate:hover .assist-request-card-art {
      transform: translate(-10px, -10px) rotate(-7deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }
  
    .feature-case-assist .assist-feature-plate:hover .assist-logic-card-art {
      transform: translate(10px, -8px) rotate(5deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }
  
    .feature-case-assist .assist-feature-plate:hover .assist-device-art {
      transform: translateX(-10px) translateY(-4px);
      filter:
        drop-shadow(0 38px 56px rgba(10, 10, 10, 0.14))
        drop-shadow(0 58px 92px rgba(10, 10, 10, 0.16));
    }
  
  
    /* ----- Homepage & Feed Redesign ----- */
  
    .feature-case-homefeed .homefeed-feature-plate:hover {
      box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
    }
  
    .feature-case-homefeed .homefeed-feature-plate:hover .homefeed-sections-art {
      transform: translate(-10px, -10px) rotate(-7deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }
  
    .feature-case-homefeed .homefeed-feature-plate:hover .homefeed-journeys-art {
      transform: translate(10px, -8px) rotate(5deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }
  
    .feature-case-homefeed .homefeed-feature-plate:hover .homefeed-device-art {
      transform: translateX(-10px) translateY(-4px);
      filter:
        drop-shadow(0 38px 56px rgba(10, 10, 10, 0.14))
        drop-shadow(0 58px 92px rgba(10, 10, 10, 0.16));
    }

    /* ----- Cari Unlimited ----- */

    .feature-case-unlimited .unlimited-feature-plate:hover {
      box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-value-art {
      transform: translate(-10px, -10px) rotate(-7deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-entry-art {
      transform: translate(10px, -8px) rotate(5deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-device-art {
      transform: translateX(-50%) translateY(-6px) rotate(-1deg);
      filter:
        drop-shadow(0 38px 56px rgba(10, 10, 10, 0.14))
        drop-shadow(0 58px 92px rgba(255, 45, 111, 0.16));
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-active-art {
      transform: translate(8px, -8px) rotate(6deg);
      filter: drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-inactive-art {
      transform: translate(-8px, -6px) rotate(-5deg);
      filter: drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16));
    }

    .feature-case-unlimited .unlimited-feature-plate:hover .unlimited-payment-art {
      transform: translateY(-8px) rotate(2.5deg);
      filter:
        drop-shadow(0 38px 60px rgba(10, 10, 10, 0.16))
        drop-shadow(0 54px 84px rgba(255, 45, 111, 0.14));
    }

  }
  
  
  /* ==========================================================================
     9. Homepage contact CTA
     ========================================================================== */
  
  .contact {
    padding: 96px 0 32px;
    border-top: 1px solid var(--line);
  }
  
  .contact-inner {
    max-width: 1100px;
  }
  
  .contact-headline {
    margin-bottom: 8px;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  
  .contact-headline .trail {
    display: block;
    color: var(--muted);
  }
  
  .contact-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 36px;
  }
  
  
  /* ==========================================================================
     10. About page
     ========================================================================== */
  
  .about-hero {
    padding: 88px 0 76px;
  }
  
  .about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: 80px;
  }
  
  .about-hero-copy {
    min-width: 0;
  }
  
  .about-hero-title {
    max-width: 760px;
    margin-bottom: 36px;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }
  
  .about-hero-body {
    max-width: 640px;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.018em;
  }
  
  .about-hero-body p:first-child {
    color: var(--ink);
  }
  
  .about-hero-body p + p {
    margin-top: 18px;
    color: var(--muted);
  }
  
  .about-hero-links {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 44px;
  }
  
  .about-photo {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 5;
    justify-self: end;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 28px;
  }
  
  .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .about-section,
  .approach-section,
  .career-section,
  .about-statement-section {
    padding: 72px 0;
    border-top: 1px solid var(--line);
  }
  
  .about-section-title {
    max-width: 880px;
    margin-bottom: 32px;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  
  .about-section-body {
    max-width: 720px;
    color: var(--ink);
    font-size: clamp(18px, 1.35vw, 20px);
    line-height: 1.58;
    letter-spacing: -0.01em;
  }
  
  .about-section-body p {
    margin-bottom: 18px;
  }
  
  .about-section-body p + p {
    margin-top: 22px;
  }
  
  .about-section-body p:last-child {
    margin-bottom: 0;
  }
  
  
  /* About skill cards */
  
  .about-skill-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1120px;
  }
  
  .about-skill-card {
    min-height: 240px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
  }
  
  .about-skill-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  
  .about-skill-number {
    color: var(--muted-2);
    font-family: "JetBrains Mono", monospace;
  }
  
  .about-skill-label {
    color: var(--muted);
  }
  
  .about-skill-card h3 {
    max-width: 420px;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  
  .about-skill-card p {
    max-width: 520px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
  }
  
  
  /* Approach */
  
  .approach-section .about-eyebrow {
    margin-bottom: 40px;
  }
  
  .approach-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    max-width: 1180px;
  }
  
  .approach-item {
    min-width: 0;
  }
  
  .approach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 22px;
    color: var(--ink);
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
  }
  
  .approach-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .approach-item h3 {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.018em;
  }
  
  .approach-item p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  
  
  /* Career path */
  
  .career-list {
    max-width: 1120px;
  }
  
  .career-item {
    display: grid;
    grid-template-columns: 180px 28px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
  }
  
  .career-item:first-child {
    padding-top: 8px;
  }
  
  .career-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  
  .career-dates {
    padding-top: 3px;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }
  
  .career-dot-col {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  
  .career-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    background: var(--ink);
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .career-dot-col::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 1px;
    height: 72px;
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.14) 0%,
      rgba(10, 10, 10, 0.08) 55%,
      rgba(10, 10, 10, 0.03) 82%,
      rgba(10, 10, 10, 0) 100%
    );
  }
  
  .career-item:last-child .career-dot-col::after {
    display: none;
  }
  
  .career-content {
    min-width: 0;
  }
  
  .career-role {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  
  .career-detail {
    max-width: 760px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
  }
  
  .career-product-logos {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 30px;
    opacity: 0.62;
  }
  
  .career-product-logos img {
    display: block;
    width: auto;
    max-width: 132px;
    max-height: 34px;
    object-fit: contain;
  }
  
  
  /* Statement */
  
  .about-statement {
    max-width: 1080px;
  }
  
  .about-statement p {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.04em;
  }
  
  
  /* Outside work */
  
  .about-outside-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 72px;
    align-items: start;
  }
  
  .pexels-card {
    display: block;
    overflow: hidden;
    color: var(--ink);
    background: var(--card-bg);
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
    text-decoration: none;
    transition:
      transform 220ms ease,
      box-shadow 220ms ease;
  }
  
  .pexels-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(10, 10, 10, 0.08),
      0 18px 48px rgba(10, 10, 10, 0.06);
  }
  
  .pexels-image-wrap {
    position: relative;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--card-bg);
  }
  
  .pexels-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
  }
  
  .pexels-card:hover .pexels-image {
    transform: scale(1.025);
  }
  
  .pexels-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  
  .pexels-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--card-bg);
    border-top: 1px solid rgba(10, 10, 10, 0.06);
    font-size: 15px;
    font-weight: 500;
  }
  
  .pexels-card-footer span:last-child {
    white-space: nowrap;
  }
  
  
  /* About CTA */
  
  .about-cta {
    padding: 96px 0 40px;
    border-top: 1px solid var(--line);
  }
  
  .about-cta-inner {
    max-width: 900px;
  }
  
  .about-cta h2 {
    margin-bottom: 18px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  
  .about-cta p {
    max-width: 680px;
    margin-bottom: 36px;
    color: var(--muted);
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
  }
  
  .about-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  
  /* ==========================================================================
     11. Contact page
     ========================================================================== */
  
  .contact-hero {
    padding: 96px 0 88px;
  }
  
  .contact-eyebrow {
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  .contact-title {
    max-width: 920px;
    margin-bottom: 32px;
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
  }
  
  .contact-intro {
    max-width: 760px;
    color: var(--muted);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }
  
  .contact-primary {
    margin-top: 48px;
  }
  
  .contact-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition:
      gap 180ms ease,
      opacity 180ms ease;
  }
  
  .contact-email:hover {
    gap: 16px;
    opacity: 0.72;
  }
  
  .contact-details {
    padding: 72px 0 96px;
    border-top: 1px solid var(--line);
  }
  
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  
  .contact-card {
    position: relative;
    min-height: 260px;
    padding: 28px;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
  }
  
  .contact-card::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(10, 10, 10, 0.05);
    border-radius: 999px;
    pointer-events: none;
  }
  
  .contact-card h2 {
    margin-bottom: 18px;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  
  .contact-card p {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
  }
  
  .contact-card p:last-child {
    margin-bottom: 0;
  }
  
  .contact-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ink);
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.08);
  }
  
  .contact-icon svg {
    width: 15px;
    height: 15px;
  }
  
  .contact-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
  }
  
  .contact-pill-list span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    color: var(--ink);
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.08);
    font-size: 13px;
    font-weight: 500;
  }
  
  .contact-link-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  .contact-link-list a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    color: var(--ink);
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 180ms ease;
  }
  
  .contact-link-list a:hover {
    opacity: 0.7;
  }
  
  .contact-link-list a span:last-child {
    transition: transform 180ms ease;
  }
  
  .contact-link-list a:hover span:last-child {
    transform: translateX(4px);
  }
  
  
  /* ==========================================================================
     12. Footer
     ========================================================================== */
  
  .site-footer {
    padding: 56px 0 48px;
    border-top: 1px solid var(--line);
  }
  
  .footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  
  .footer-left,
  .footer-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .footer-right {
    align-items: flex-end;
    text-align: right;
  }
  
  .footer-line {
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
  }
  
  .footer-line-soft {
    color: var(--muted);
    font-size: 13px;
  }
  
  .footer-line-soft em {
    font-style: italic;
  }
  
  .footer-location {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  
  .footer-flag {
    display: inline-block;
    width: 20px;
    height: 12px;
    border-radius: 1px;
    transform: translateY(1px);
  }
  
  .footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  
  .footer-links a {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  
  .footer-links a:hover {
    opacity: 0.6;
  }
  
  .footer-links span {
    color: var(--muted-2);
    font-size: 12px;
  }
  
  
  /* ==========================================================================
     13. Scroll reveal and animation
     ========================================================================== */
  
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s var(--ease-out-quick),
      transform 0.7s var(--ease-out-quick);
    will-change: opacity, transform;
  }
  
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
  
  .reveal[data-delay="1"] {
    transition-delay: 0.05s;
  }
  
  .reveal[data-delay="2"] {
    transition-delay: 0.12s;
  }
  
  .reveal[data-delay="3"] {
    transition-delay: 0.2s;
  }
  
  .reveal[data-delay="4"] {
    transition-delay: 0.28s;
  }
  
  .reveal-card {
    opacity: 0;
    transform: translateY(32px) scale(0.99);
    transition:
      opacity 0.8s var(--ease-out-soft),
      transform 0.8s var(--ease-out-soft);
    will-change: opacity, transform;
  }
  
  .reveal-card.in {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  .capability {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.5s var(--ease-out-quick),
      transform 0.5s var(--ease-out-quick);
  }
  
  .capability.in {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  /* ==========================================================================
     14. Reduced motion
     ========================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  
    .reveal,
    .reveal-card,
    .capability {
      opacity: 1 !important;
      transform: none !important;
    }
  
    .pexels-card,
    .pexels-image {
      transition: none;
    }
  
    .pexels-card:hover,
    .pexels-card:hover .pexels-image {
      transform: none;
    }
  
    .feature-case-campaign .campaign-feature-plate,
    .feature-case-campaign .campaign-objective-art,
    .feature-case-campaign .campaign-visibility-art,
    .feature-case-campaign .campaign-device-art,
    .feature-case-orderhelp .feature-case-plate,
    .feature-case-orderhelp .orderhelp-flows,
    .feature-case-orderhelp .orderhelp-rules,
    .feature-case-orderhelp .orderhelp-device,
    .feature-case-assist .assist-feature-plate,
    .feature-case-assist .assist-request-card-art,
    .feature-case-assist .assist-logic-card-art,
    .feature-case-assist .assist-device-art,
    .feature-case-homefeed .homefeed-feature-plate,
    .feature-case-homefeed .homefeed-sections-art,
    .feature-case-homefeed .homefeed-journeys-art,
    .feature-case-homefeed .homefeed-device-art,
    .feature-case-unlimited .unlimited-feature-plate,
    .feature-case-unlimited .unlimited-value-art,
    .feature-case-unlimited .unlimited-entry-art,
    .feature-case-unlimited .unlimited-device-art,
    .feature-case-unlimited .unlimited-active-art,
    .feature-case-unlimited .unlimited-inactive-art,
    .feature-case-unlimited .unlimited-payment-art {
      transition: none;
    }
  }
  
  
  /* ==========================================================================
     15. Responsive
     ========================================================================== */
  
  @media (max-width: 1180px) {
    .feature-case-impact-assist,
    .feature-case-impact-campaign {
      gap: 48px;
    }
  
    .feature-case-impact-assist .feature-case-impact-item:nth-child(2),
    .feature-case-impact-campaign .feature-case-impact-item:nth-child(2) {
      min-width: 0;
    }
  
    .feature-case-impact-homefeed {
      gap: 28px 40px;
    }
  }
  
  @media (max-width: 1080px) {
    .capabilities-row {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px 32px;
    }
  
    .approach-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 32px;
    }
  
    .product-range-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 36px 28px;
    }
  }
  
  @media (max-width: 980px) {
    .container {
      padding: 0 24px;
    }
  
    .hero {
      padding: 56px 0;
    }
  
    .hero-role {
      margin-bottom: 40px;
    }
  
    .hero-bio {
      margin-bottom: 32px;
    }
  
    .about-bridge {
      padding: 56px 0 64px;
    }
  
    .about-copy {
      margin-bottom: 56px;
      font-size: clamp(22px, 3.6vw, 28px);
    }
  
    .work {
      padding: 48px 0 64px;
    }
  
    .feature-case {
      margin-bottom: 72px;
    }
  
    .contact {
      padding: 64px 0 24px;
    }
  
    .about-hero {
      padding: 56px 0;
    }
  
    .about-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
  
    .about-photo {
      max-width: 420px;
      aspect-ratio: 5 / 6;
      justify-self: start;
    }
  
    .about-section,
    .approach-section,
    .career-section,
    .about-statement-section {
      padding: 56px 0;
    }
  
    .about-section-title {
      margin-bottom: 24px;
    }
  
    .about-outside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  
    .pexels-card {
      max-width: 720px;
    }
  
    .about-cta {
      padding: 64px 0 32px;
    }
  
    .career-item {
      grid-template-columns: 150px 28px minmax(0, 1fr);
      gap: 24px;
    }
  
    .contact-hero {
      padding: 64px 0 72px;
    }
  
    .contact-details {
      padding: 56px 0 72px;
    }
  
    .contact-grid {
      grid-template-columns: 1fr;
    }
  
    .contact-card {
      min-height: auto;
    }
  
    .footer-inner {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .footer-right {
      align-items: flex-start;
      text-align: left;
    }
  
    .footer-location {
      justify-content: flex-start;
    }
  }
  
  
  /* Featured card responsive, Campaign — desktop-down */
  
  @media (max-width: 1200px) {
    .feature-case-campaign .campaign-feature-plate,
    .feature-case-campaign .campaign-feature-stack {
      min-height: 420px;
      height: 420px;
    }
  
    .feature-case-campaign .campaign-objective-art {
      top: 58px;
      left: 24px;
      width: 158px;
    }
  
    .feature-case-campaign .campaign-visibility-art {
      top: 78px;
      left: 182px;
      width: 196px;
    }
  
    .feature-case-campaign .campaign-device-art {
      top: 42px;
      right: -8px;
      width: 760px;
    }
  }
  
  
  /* Featured card responsive — tablet and below
     All four covers collapse their floating cards and centre the device. */
  
  @media (max-width: 900px) {
  
    /* Cari Assist */
    .assist-feature-plate {
      height: 440px;
    }
  
    .assist-request-card-art,
    .assist-logic-card-art {
      display: none;
    }
  
    .assist-device-art {
      top: 44px;
      right: auto;
      left: 50%;
      width: min(78vw, 360px);
      transform: translateX(-50%);
      filter: drop-shadow(0 28px 48px var(--work-cover-shadow-md));
    }
  
    /* Campaign */
    .feature-case-campaign .campaign-feature-plate,
    .feature-case-campaign .campaign-feature-stack {
      height: 420px;
      min-height: 420px;
    }
  
    .feature-case-campaign .campaign-objective-art,
    .feature-case-campaign .campaign-visibility-art {
      display: none;
    }
  
    .feature-case-campaign .campaign-device-art {
      top: 56px;
      right: auto;
      left: 50%;
      width: min(118vw, 820px);
      transform: translateX(-50%);
      filter: drop-shadow(0 30px 54px var(--work-cover-shadow-md));
    }
  
    /* Homepage & Feed */
    .homefeed-feature-plate {
      height: 440px;
    }
  
    .homefeed-sections-art,
    .homefeed-journeys-art {
      display: none;
    }
  
    .homefeed-device-art {
      top: 44px;
      right: auto;
      left: 50%;
      width: min(78vw, 360px);
      transform: translateX(-50%);
      filter: drop-shadow(0 28px 48px var(--work-cover-shadow-md));
    }
  }
  
  
  @media (max-width: 800px) {
    .about-skill-cards {
      grid-template-columns: 1fr;
    }
  
    .about-skill-card {
      min-height: auto;
      padding: 24px;
      border-radius: 22px;
    }
  
    .about-skill-card-top {
      margin-bottom: 24px;
    }
  
    .career-product-logos {
      gap: 20px 24px;
      margin-top: 24px;
    }
  
    .career-product-logos img {
      max-width: 112px;
      max-height: 30px;
    }
  }
  
  
  /* Featured card responsive, Order Help and shared impact stacking */
  
  @media (max-width: 760px) {
    .feature-case-plate {
      height: 420px;
    }
  
    .orderhelp-flows,
    .orderhelp-rules {
      display: none;
    }
  
    .orderhelp-device {
      top: 28px;
      right: auto;
      left: 50%;
      width: 300px;
      transform: translateX(-50%);
    }
  
    .feature-case-impact {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px 0;
    }
  
    .feature-case-impact-homefeed {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .feature-case-impact-item strong {
      font-size: 32px;
    }
  
    .feature-case-footer {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  
  @media (max-width: 700px) {
    .product-range {
      margin-top: 64px;
    }
  
    .product-range-heading {
      max-width: 100%;
      margin-bottom: 28px;
      font-size: 16px;
      line-height: 1.45;
    }
  
    .product-range-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 24px;
      padding-top: 24px;
    }
  
    .product-range-logo {
      max-width: 112px;
      height: 28px;
      margin-bottom: 16px;
    }
  
    .product-range-category {
      font-size: 14px;
      line-height: 1.35;
    }
  
    .product-range-detail {
      font-size: 13px;
      line-height: 1.4;
    }
  }
  
  
  @media (max-width: 600px) {
    .container {
      padding: 0 20px;
    }
  
    .nav {
      gap: 16px;
    }
  
    .nav a {
      font-size: 13px;
    }
  
    .logo svg {
      height: 32px;
    }
  
    .hero {
      padding: 40px 0;
    }
  
    .capabilities-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 20px;
    }
  
    .feature-case {
      margin-bottom: 56px;
    }
  
    .feature-case-title {
      font-size: 32px;
      line-height: 1.08;
    }
  
    .feature-case-description {
      font-size: 17px;
    }
  
    .card-cta,
    .contact-btn,
    .about-cta-actions .contact-btn {
      width: 100%;
      justify-content: center;
    }
  
    .assist-feature-plate {
      height: 390px;
      border-radius: 24px;
    }
  
    .assist-device-art {
      top: 38px;
      width: min(82vw, 320px);
    }
  
    .feature-case-campaign .campaign-feature-plate,
    .feature-case-campaign .campaign-feature-stack {
      height: 320px;
      min-height: 320px;
      border-radius: 24px;
    }
  
    .feature-case-campaign .campaign-device-art {
      top: 52px;
      left: 94%;
      width: min(150vw, 680px);
    }
  
    .feature-case-plate {
      height: 390px;
      border-radius: 24px;
    }
  
    .orderhelp-device {
      top: 24px;
      width: 290px;
    }
  
    .homefeed-feature-plate {
      height: 390px;
      border-radius: 24px;
    }
  
    .homefeed-device-art {
      top: 38px;
      width: min(82vw, 320px);
    }
  
    .about-hero {
      padding: 40px 0 48px;
    }
  
    .about-hero-grid {
      gap: 36px;
    }
  
    .about-hero-title {
      margin-bottom: 28px;
    }
  
    .about-hero-links {
      gap: 20px;
      margin-top: 28px;
    }
  
    .about-photo {
      aspect-ratio: 4 / 5;
      border-radius: 22px;
    }
  
    .about-section,
    .approach-section,
    .career-section,
    .about-statement-section {
      padding: 48px 0;
    }
  
    .approach-section .about-eyebrow {
      margin-bottom: 32px;
    }
  
    .approach-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .approach-icon {
      margin-bottom: 18px;
    }
  
    .approach-item h3 {
      font-size: 17px;
    }
  
    .career-item {
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 18px;
      padding: 24px 0;
    }
  
    .career-dates {
      grid-column: 2;
      padding-top: 0;
      margin-bottom: 6px;
      font-size: 12px;
    }
  
    .career-dot-col {
      grid-column: 1;
      grid-row: 1 / span 2;
      justify-content: flex-start;
      padding-top: 8px;
    }
  
    .career-dot-col::after {
      top: 16px;
      left: 4px;
      height: 56px;
      transform: none;
    }
  
    .career-content {
      grid-column: 2;
    }
  
    .career-role {
      font-size: 18px;
      line-height: 1.3;
    }
  
    .career-detail {
      font-size: 15px;
      line-height: 1.6;
    }
  
    .career-product-logos {
      gap: 18px 22px;
    }
  
    .career-product-logos img {
      max-width: 100px;
      max-height: 28px;
    }
  
    .about-statement p {
      font-size: 30px;
      line-height: 1.16;
      letter-spacing: -0.035em;
    }
  
    .pexels-image-wrap {
      aspect-ratio: 4 / 3;
    }
  
    .pexels-badge {
      bottom: 14px;
      left: 14px;
      padding: 7px 10px;
      font-size: 12px;
    }
  
    .pexels-card-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  
    .contact-hero {
      padding: 48px 0 56px;
    }
  
    .contact-primary {
      margin-top: 36px;
    }
  
    .contact-email {
      font-size: 24px;
      word-break: break-word;
    }
  
    .contact-details {
      padding: 48px 0 56px;
    }
  
    .contact-card {
      padding: 24px;
      border-radius: 22px;
    }
  }




  /* Featured card responsive, Cari Unlimited */

  @media (max-width: 1024px) {
    .feature-case-unlimited .unlimited-feature-plate {
      height: 420px;
    }

    .feature-case-unlimited .unlimited-device-art {
      top: 54px;
      width: 300px;
    }

    .feature-case-unlimited .unlimited-value-art {
      top: 86px;
      left: 54px;
      width: 224px;
    }

    .feature-case-unlimited .unlimited-entry-art {
      top: 134px;
      left: 210px;
      width: 252px;
    }

    .feature-case-unlimited .unlimited-active-art,
    .feature-case-unlimited .unlimited-inactive-art {
      width: 190px;
    }

    .feature-case-unlimited .unlimited-active-art {
      right: 196px;
    }

    .feature-case-unlimited .unlimited-inactive-art {
      right: 36px;
    }

    .feature-case-unlimited .unlimited-payment-art {
      right: 98px;
      width: 218px;
    }

    .feature-case-impact-unlimited {
      max-width: none;
    }
  }

  @media (max-width: 900px) {
    .feature-case-unlimited .unlimited-feature-plate {
      height: 420px;
    }

    .feature-case-unlimited .unlimited-active-art,
    .feature-case-unlimited .unlimited-inactive-art,
    .feature-case-unlimited .unlimited-payment-art,
    .feature-case-unlimited .unlimited-cover-label {
      display: none;
    }

    .feature-case-unlimited .unlimited-device-art {
      top: 44px;
      left: 50%;
      width: min(78vw, 360px);
      transform: translateX(-50%) rotate(-1deg);
      filter: drop-shadow(0 28px 48px var(--work-cover-shadow-md));
    }

    .feature-case-unlimited .unlimited-value-art,
    .feature-case-unlimited .unlimited-entry-art {
      display: none;
    }
  }

  @media (max-width: 760px) {
    .feature-case-impact-unlimited {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  @media (max-width: 600px) {
    .feature-case-unlimited .unlimited-feature-plate {
      height: 390px;
      border-radius: 24px;
    }

    .feature-case-unlimited .unlimited-device-art {
      top: 38px;
      width: min(82vw, 320px);
    }
  }

/* ==========================================================================
   16. Case study framework
   --------------------------------------------------------------------------
   Shared structure for all long-form project pages.

   Use this for Cari Design System, Homepage & Feed, Campaign Management,
   Order Help, Cari Assist, Sihaty, Khibra and future case studies.

   Markup rule:
   - Do not add page-specific classes to <body>.
   - Wrap every case study in:
     <main class="case-page">
   - Core typography, spacing, section rhythm, captions, grids and stats must
     come from this shared framework.
   - Only add extra visual classes when a section needs temporary inline art or
     a custom exported image treatment.

   This section is intentionally scoped to .case-page so it cannot change
   homepage, About, Contact or Work-card styling.
   ========================================================================== */

.case-page {
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   16A. Case hero
   -------------------------------------------------------------------------- */

.case-page .case-hero {
  padding: 96px 0 88px;
}

.case-page .case-kicker,
.case-page .case-eyebrow {
  margin-bottom: 24px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .case-title {
  max-width: 1040px;
  margin-bottom: 34px;
  color: var(--ink);
  font-size: clamp(56px, 7.2vw, 104px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.case-page .case-lede,
.case-page .case-subtitle {
  max-width: 980px;
  color: var(--muted);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.case-page .case-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .case-meta .sep {
  width: 28px;
  height: 1px;
  background: var(--muted-2);
  opacity: 0.65;
}

.case-page .case-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 980px;
  margin-top: 34px;
  list-style: none;
}

.case-page .case-tags li {
  padding: 7px 12px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* Hero / cover plates use the same neutral visual language as the Work page. */
.case-page .case-cover,
.case-page .case-hero-visual {
  position: relative;
  margin-top: 64px;
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.04);
}

/* --------------------------------------------------------------------------
   16B. Case section rhythm
   -------------------------------------------------------------------------- */

.case-page .case-section {
  padding: 88px 0;
  border-top: 1px solid var(--line);
}

.case-page .case-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 80px;
  align-items: start;
}

/* Naming supports both the newer .case-section-heading/.case-section-copy
   pattern and older .case-section-visual markup currently used by the Cari page. */
.case-page .case-section-heading,
.case-page .case-section-copy,
.case-page .case-section-visual {
  min-width: 0;
}

.case-page .case-section-title {
  max-width: 920px;
  margin-bottom: 24px;
  color: var(--ink);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.case-page .case-section-copy p,
.case-page .case-section-body {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.014em;
}

.case-page .case-section-copy p + p,
.case-page .case-section-body + .case-section-body {
  margin-top: 22px;
}

.case-page .case-section-copy strong,
.case-page .case-section-body strong {
  color: var(--ink);
  font-weight: 650;
}

/* Inline code is for small technical labels only.
   For important system artefacts, use .case-code-token or .case-callout. */
.case-page .case-section-copy code,
.case-page .case-section-body code {
  display: inline-flex;
  align-items: center;
  padding: 0.12em 0.38em;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Use this when a technical string needs visual focus.
   Example: language / text / property / sub-property */
.case-page .case-code-token {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  white-space: normal;
}

/* Short proof statement. Keep it to one line or one short sentence. */
.case-page .case-callout {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--card-bg);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .case-callout-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .case-callout strong {
  display: block;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   16C. Shared visual containers
   -------------------------------------------------------------------------- */

.case-page .case-visual-card,
.case-page .visual-card {
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.04);
}

.case-page .case-visual-card img,
.case-page .visual-card img {
  width: 100%;
  height: auto;
}

/* Future image-export pattern.
   Use this once inline placeholder visuals are replaced by real Figma exports. */
.case-page .case-visual {
  margin-top: 48px;
}

.case-page .case-visual img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--work-cover-bg);
  border-radius: 32px;
}

.case-page .case-visual--contained {
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.04);
}

.case-page .case-visual--contained img {
  border-radius: 0;
}

.case-page .case-visual figcaption,
.case-page .case-visual-caption {
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.case-page .wide-visual-wrap,
.case-page .case-proof-grid,
.case-page .case-impact-grid,
.case-page .system-architecture-grid,
.case-page .scale-strip {
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   16D. Shared stat / scale strip
   -------------------------------------------------------------------------- */

.case-page .scale-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
}

.case-page .scale-strip-item {
  padding: 30px 26px;
  background: var(--card-bg);
  border-right: 1px solid var(--line-strong);
}

.case-page .scale-strip-item:last-child {
  border-right: 0;
}

.case-page .scale-strip-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.case-page .scale-strip-item span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   16E. Shared content card grids
   -------------------------------------------------------------------------- */

.case-page .system-architecture-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.case-page .system-architecture-card {
  min-height: 190px;
  padding: 24px;
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .system-architecture-card .arch-index {
  display: block;
  margin-bottom: 20px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.case-page .system-architecture-card h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.case-page .system-architecture-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.case-page .case-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.case-page .case-proof-card {
  min-height: 220px;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .case-proof-card h3 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.case-page .case-proof-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

.case-page .case-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.case-page .case-impact-item {
  min-height: 220px;
  padding: 36px 30px;
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .case-impact-item strong {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
}

.case-page .case-impact-item span {
  display: block;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.52;
}


/* ==========================================================================
   17. Case study framework responsive rules
   ========================================================================== */

@media (max-width: 1080px) {
  .case-page .case-section-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .case-page .system-architecture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page .scale-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-page .scale-strip-item:nth-child(2) {
    border-right: 0;
  }

  .case-page .scale-strip-item:nth-child(1),
  .case-page .scale-strip-item:nth-child(2) {
    border-bottom: 1px solid var(--line-strong);
  }
}

@media (max-width: 980px) {
  .case-page .case-hero {
    padding: 64px 0 56px;
  }

  .case-page .case-section {
    padding: 64px 0;
  }

  .case-page .case-proof-grid,
  .case-page .case-impact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .case-page .case-title {
    font-size: clamp(46px, 13vw, 64px);
    line-height: 0.96;
  }

  .case-page .case-lede,
  .case-page .case-subtitle {
    font-size: 21px;
  }

  .case-page .case-meta {
    gap: 10px;
    font-size: 10px;
  }

  .case-page .case-meta .sep {
    width: 18px;
  }

  .case-page .case-cover,
  .case-page .case-hero-visual,
  .case-page .case-visual-card,
  .case-page .visual-card,
  .case-page .case-visual img,
  .case-page .case-visual--contained {
    border-radius: 24px;
  }

  .case-page .system-architecture-grid,
  .case-page .scale-strip {
    grid-template-columns: 1fr;
  }

  .case-page .scale-strip-item {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .case-page .scale-strip-item:last-child {
    border-bottom: 0;
  }
}


/* ==========================================================================
   18. Temporary inline case-study visual scaffolding
   --------------------------------------------------------------------------
   These rules support the current HTML/CSS placeholder visuals inside the
   Cari Design System page. They are intentionally scoped to .case-page so they
   only apply inside long-form case studies and cannot affect the homepage,
   Work cards, About page or Contact page.

   Important:
   - These classes are temporary scaffolding.
   - Do not build future case studies around div-based fake UI unless needed.
   - When final Figma exports are ready, replace these inline visual blocks with
     <figure class="case-visual case-visual--contained"> and image assets.
   - Keep the shared case-study framework above as the long-term system.

   Avoid page-specific wrappers by default.
   - Add a project-specific visual class only when a page has a genuine visual
     exception. The default should remain <main class="case-page">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18A. Shared shell for temporary inline visuals
   -------------------------------------------------------------------------- */
.case-page .visual-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  width: 100%;
}

.case-page .visual-card.dark { background: #111; }

.case-page {
  /* Temporary Cari tokens used by current inline placeholder visuals.
     These are safe here because they only exist inside case-study pages.
     Remove when the placeholder visuals are replaced with image exports. */
  --cari: #CC0071;
  --cari-light: #FFE9F6;
  --cari-mid: #F64AA8;
}

/* --------------------------------------------------------------------------
   18B. Hero collage placeholder
   -------------------------------------------------------------------------- */
   ══════════════════════════════════════════ */
.case-page .hero-collage {
  aspect-ratio: 16/9;
  background: #F4F3F1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.case-page .hero-col {
  border-right: 1px solid rgba(10,10,10,.06);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.case-page .hero-col:last-child { border-right: none; }

.case-page .hero-col-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
/* Mini phone frame */
.case-page .phone-frame {
  width: 130px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08);
  padding: 12px 8px;
  flex-shrink: 0;
}

.case-page .phone-bar {
  width: 32px; height: 3px;
  background: #0A0A0A;
  border-radius: 99px;
  margin: 0 auto 10px;
}

.case-page .phone-screen { display: flex; flex-direction: column; gap: 6px; }
/* Mini store card */
.case-page .mini-store-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.case-page .mini-store-img {
  height: 34px;
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.case-page .mini-store-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.case-page .mini-store-img.g3 { background: linear-gradient(135deg, #d4fc79, #96e6a1); }

.case-page .mini-store-body { padding: 5px 7px; }

.case-page .mini-store-name { font-size: 7px; font-weight: 700; color: var(--ink); }

.case-page .mini-store-meta { display: flex; gap: 4px; align-items: center; margin-top: 2px; }

.case-page .mini-chip {
  font-size: 5.5px; font-weight: 600;
  padding: 1.5px 4px;
  border-radius: 99px;
  background: var(--cari-light);
  color: var(--cari);
}

.case-page .mini-chip.green { background: #E8F8EE; color: #1A7A3A; }

.case-page .mini-store-rating { font-size: 5.5px; color: var(--muted); margin-left: auto; }
/* Mini nav bar */
.case-page .mini-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px; margin-top: 4px;
}

.case-page .mini-nav-item {
  height: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}

.case-page .mini-nav-dot { width: 10px; height: 10px; background: var(--bg); border-radius: 4px; }

.case-page .mini-nav-dot.active { background: var(--cari); }

.case-page .mini-nav-label { font-size: 4.5px; color: var(--muted-2); }

.case-page .mini-nav-label.active { color: var(--cari); }
/* Mini search bar */
.case-page .mini-search {
  height: 18px; background: var(--bg); border-radius: 7px;
  display: flex; align-items: center; padding: 0 8px; gap: 5px;
  margin-bottom: 4px;
}

.case-page .mini-search-icon { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted-2); }

.case-page .mini-search-text { font-size: 6px; color: var(--muted-2); }
/* Cari wordmark */
.case-page .cari-wordmark {
  font-size: 15px; font-weight: 800; color: var(--cari);
  letter-spacing: -0.04em; font-style: italic;
}

.case-page .cari-wordmark.black { color: var(--ink); }
/* Vendor mini screen */
.case-page .vendor-panel {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  width: 220px;
  margin: 0 auto;
}

.case-page .vendor-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}

.case-page .vendor-title { font-size: 9px; font-weight: 700; color: var(--ink); }

.case-page .vendor-btn {
  font-size: 7px; font-weight: 600; padding: 3px 8px;
  background: var(--cari); color: #fff; border-radius: 6px;
}

.case-page .vendor-row {
  display: grid; grid-template-columns: 1fr 60px 50px 44px;
  gap: 4px; align-items: center; padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 6.5px;
}

.case-page .vendor-row.head { color: var(--muted-2); font-weight: 600; }

.case-page .vendor-row:last-child { border-bottom: none; }

.case-page .vendor-name { font-weight: 600; color: var(--ink); }

.case-page .status-pill {
  font-size: 5.5px; font-weight: 600; padding: 2px 5px;
  border-radius: 99px; display: inline-block;
}

.case-page .status-pill.live { background: #E8F8EE; color: #1A7A3A; }

.case-page .status-pill.paused { background: #FFF5E5; color: #B36200; }
/* Token panel mini */
.case-page .token-mini-panel {
  background: #1C1C1E;
  border-radius: 14px;
  padding: 14px;
  width: 200px;
  margin: 0 auto;
}

.case-page .token-mini-header { font-size: 7px; color: #888; font-family: "JetBrains Mono", monospace; margin-bottom: 10px; letter-spacing: .06em; }

.case-page .token-mini-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}

.case-page .token-mini-row:last-child { border-bottom: none; }

.case-page .token-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.case-page .token-mini-name { font-size: 7px; color: #ccc; font-family: "JetBrains Mono", monospace; flex: 1; }

.case-page .token-mini-val { font-size: 6.5px; color: #666; font-family: "JetBrains Mono", monospace; }

/* ══════════════════════════════════════════
   2. FRAGMENTATION / PROBLEM
   ══════════════════════════════════════════ */
.case-page .frag-card {
  aspect-ratio: 16/10;
  background: #F4F3F1;
  display: flex;
  flex-direction: column;
  padding: 36px 40px;
  gap: 0;
  position: relative;
}

.case-page .frag-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 500;
  color: var(--muted-2); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 20px;
}

.case-page .frag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  flex: 1;
}

.case-page .frag-col-label {
  font-size: 9px; font-weight: 600; color: var(--muted-2);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.case-page .frag-surface-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px; color: var(--muted-2);
  margin-bottom: 8px;
}

.case-page .frag-btn-group { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.case-page .frag-btn {
  padding: 5px 10px; border-radius: 8px;
  font-size: 8px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}

.case-page .frag-btn.v1 { background: var(--cari); color: #fff; border-radius: 6px; }

.case-page .frag-btn.v2 { background: var(--cari); color: #fff; border-radius: 12px; }

.case-page .frag-btn.v3 { background: var(--cari); color: #fff; border-radius: 99px; }

.case-page .frag-btn.v1b { background: #F7F7F7; color: var(--cari); border: 1px solid var(--cari); border-radius: 6px; }

.case-page .frag-btn.v2b { background: #F7F7F7; color: var(--cari); border: 1px solid #ddd; border-radius: 10px; }

.case-page .frag-divider { height: 1px; background: rgba(204,0,113,.15); margin: 8px 0; }

.case-page .frag-card-mini {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-bottom: 8px;
  display: flex; gap: 8px; align-items: flex-start;
}

.case-page .frag-card-img { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #ffecd2, #fcb69f); flex-shrink: 0; }

.case-page .frag-card-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.case-page .frag-card-img.g3 { background: linear-gradient(135deg, #667eea, #764ba2); }

.case-page .frag-card-body { flex: 1; }

.case-page .frag-card-name { font-size: 7.5px; font-weight: 700; color: var(--ink); }

.case-page .frag-card-meta { font-size: 6.5px; color: var(--muted); margin-top: 2px; }

.case-page .frag-card-rating {
  font-size: 6px; font-weight: 600;
  display: flex; align-items: center; gap: 3px; margin-top: 3px;
  color: var(--muted);
}
/* Annotation line */
.case-page .frag-annotation {
  position: absolute; bottom: 28px; right: 40px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}

.case-page .frag-annotation-text {
  font-size: 8.5px; color: #CC0071;
  font-weight: 600;
  background: rgba(204,0,113,.08);
  padding: 3px 8px; border-radius: 4px;
}

/* ══════════════════════════════════════════
   3. SYSTEM ARCHITECTURE — already in HTML cards in main file
   (not needed as image — skip with note)
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   4. TYPOGRAPHY + VARIABLES — two-col
   ══════════════════════════════════════════ */
.case-page .type-vars-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
}

.case-page .type-panel,
.case-page .vars-panel {
  padding: 40px 36px;
}

.case-page .type-panel { border-right: 1px solid var(--line); }

.case-page .panel-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; font-weight: 500;
  color: var(--muted-2); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 24px;
}

.case-page .type-row-real {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.case-page .type-row-real:last-child { border-bottom: none; }

.case-page .type-sample-text { font-weight: 700; color: var(--ink); letter-spacing: -.02em; }

.case-page .type-meta-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; color: var(--muted-2);
  white-space: nowrap; text-align: right;
}
/* Arabic type row */
.case-page .type-row-ar .type-sample-text { font-size: 16px; direction: rtl; }
/* Variable rows */
.case-page .var-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg); border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 7px;
}

.case-page .var-swatch { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; border: 1px solid var(--line); }

.case-page .var-name { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--ink); flex: 1; }

.case-page .var-val { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); }

/* ══════════════════════════════════════════
   5. COMPONENT STATES
   ══════════════════════════════════════════ */
.case-page .comp-states-wrap {
  aspect-ratio: 16/9;
  background: #F4F3F1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-page .comp-states-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; color: var(--muted-2);
  letter-spacing: .1em; text-transform: uppercase;
}

.case-page .comp-row { display: flex; flex-direction: column; gap: 8px; }

.case-page .comp-row-label {
  font-size: 9px; font-weight: 600; color: var(--muted-2);
  letter-spacing: .06em; text-transform: uppercase;
}

.case-page .comp-states-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Button states */
.case-page .btn-state {
  padding: 7px 16px; border-radius: 99px;
  font-size: 9.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
}

.case-page .btn-state.default { background: var(--cari); color: #fff; }

.case-page .btn-state.hover { background: #A0005A; color: #fff; box-shadow: 0 2px 8px rgba(204,0,113,.3); }

.case-page .btn-state.focused { background: var(--cari); color: #fff; outline: 2px solid var(--cari); outline-offset: 2px; }

.case-page .btn-state.disabled { background: #E0DDD9; color: #aaa; }

.case-page .btn-state.loading {
  background: var(--cari); color: rgba(255,255,255,0.5);
  position: relative; overflow: hidden;
}

.case-page .btn-state.loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.case-page .btn-state.outline { background: transparent; color: var(--cari); border: 1.5px solid var(--cari); }

.case-page .btn-state.ghost { background: transparent; color: var(--cari); }

.case-page .btn-state.secondary { background: #FFF5E5; color: #B36200; }

.case-page .state-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5px; color: var(--muted-2);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
  margin-top: 3px;
}

.case-page .state-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* Input states */
.case-page .input-state {
  height: 30px; border-radius: 8px;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 9px; color: var(--ink);
  background: #fff;
  min-width: 110px;
}

.case-page .input-state.default { border: 1.5px solid #D8D6D3; }

.case-page .input-state.focused { border: 1.5px solid var(--cari); box-shadow: 0 0 0 3px rgba(204,0,113,.1); }

.case-page .input-state.filled { border: 1.5px solid #D8D6D3; }

.case-page .input-state.error { border: 1.5px solid #D9302A; }

.case-page .input-state.disabled { border: 1.5px solid #E8E6E3; background: #F7F7F7; color: var(--muted-2); }

.case-page .input-state .input-label { font-size: 7px; color: var(--muted-2); position: absolute; top: -8px; }
/* Chip states */
.case-page .chip-state {
  padding: 5px 10px; border-radius: 99px;
  font-size: 9px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}

.case-page .chip-state.default { background: #F7F7F7; color: var(--ink); border: 1px solid #E0DDD9; }

.case-page .chip-state.active { background: var(--cari-light); color: var(--cari); border: 1px solid rgba(204,0,113,.2); }

.case-page .chip-state.selected { background: var(--cari); color: #fff; }

.case-page .chip-state.disabled { background: #F7F7F7; color: #CCC; border: 1px solid #EDECEA; }
/* Toggle */
.case-page .toggle-wrap { display: flex; align-items: center; gap: 8px; }

.case-page .toggle {
  width: 32px; height: 18px; border-radius: 99px;
  position: relative; cursor: pointer;
}

.case-page .toggle.off { background: #D8D6D3; }

.case-page .toggle.on { background: var(--cari); }

.case-page .toggle::after {
  content: ""; position: absolute;
  width: 14px; height: 14px; background: #fff;
  border-radius: 50%; top: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .15s;
}

.case-page .toggle.off::after { left: 2px; }

.case-page .toggle.on::after { left: 16px; }

.case-page .toggle-text { font-size: 9px; color: var(--muted); }

/* ══════════════════════════════════════════
   6. STORE CARD STATES
   ══════════════════════════════════════════ */
.case-page .store-states-wrap {
  aspect-ratio: 4/3;
  background: #F4F3F1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-page .store-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; flex: 1; }

.case-page .store-card-mini {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  position: relative;
}

.case-page .sc-img {
  height: 70px;
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
  position: relative;
}

.case-page .sc-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.case-page .sc-img.g3 { background: linear-gradient(135deg, #96fbc4, #f9f586); }

.case-page .sc-img.g4 { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

.case-page .sc-img.skeleton { background: linear-gradient(90deg, #EDECEA 25%, #E0DDD9 50%, #EDECEA 75%); background-size: 200% 100%; animation: skelshimmer 1.4s infinite; }
@keyframes skelshimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.case-page .sc-img-closed {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 700; color: #fff; letter-spacing: .05em; text-transform: uppercase;
}

.case-page .sc-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 6.5px; font-weight: 700; padding: 2px 5px;
  border-radius: 5px; text-transform: uppercase; letter-spacing: .04em;
}

.case-page .sc-badge.sponsored { background: rgba(0,0,0,.55); color: #fff; }

.case-page .sc-badge.promo { background: var(--cari); color: #fff; }

.case-page .sc-badge.unlimited { background: #1A7A3A; color: #fff; }

.case-page .sc-fav {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; background: rgba(255,255,255,.9);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px;
}

.case-page .sc-body { padding: 8px; flex: 1; }

.case-page .sc-name { font-size: 8px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.case-page .sc-name.skeleton-text {
  height: 8px; background: #EDECEA; border-radius: 4px;
  animation: skelshimmer 1.4s infinite; margin-bottom: 6px;
}

.case-page .sc-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.case-page .sc-pill {
  font-size: 5.5px; font-weight: 600; padding: 2px 5px;
  border-radius: 99px;
}

.case-page .sc-pill.free { background: #E8F8EE; color: #1A7A3A; }

.case-page .sc-pill.busy { background: #FFF5E5; color: #B36200; }

.case-page .sc-pill.closed { background: #F5F5F5; color: #999; }

.case-page .sc-time { font-size: 5.5px; color: var(--muted); }

.case-page .sc-rating { font-size: 5.5px; color: var(--muted); display: flex; align-items: center; gap: 2px; margin-left: auto; }

.case-page .sc-footer { padding: 5px 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }

.case-page .sc-footer-text { font-size: 5.5px; color: var(--muted); }

.case-page .state-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px; color: var(--muted-2);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center; margin-top: 8px;
}

/* ══════════════════════════════════════════
   7. CHECKOUT / TRANSACTION STATES
   ══════════════════════════════════════════ */
.case-page .checkout-wrap {
  aspect-ratio: 16/10;
  background: #F4F3F1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-page .checkout-flow { display: flex; gap: 14px; flex: 1; align-items: stretch; }

.case-page .checkout-screen {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.case-page .cs-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 9px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}

.case-page .cs-step { font-family: "JetBrains Mono", monospace; font-size: 7px; color: var(--muted-2); }

.case-page .cs-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 7px; }

.case-page .cs-item { display: flex; gap: 7px; align-items: flex-start; }

.case-page .cs-item-img {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, #ffecd2, #fcb69f); flex-shrink: 0;
}

.case-page .cs-item-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.case-page .cs-item-body { flex: 1; }

.case-page .cs-item-name { font-size: 7.5px; font-weight: 600; color: var(--ink); }

.case-page .cs-item-price { font-size: 7px; color: var(--muted); margin-top: 1px; }

.case-page .cs-qty {
  width: 56px; display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border-radius: 6px; padding: 2px 5px;
  font-size: 7.5px; font-weight: 700;
}

.case-page .cs-qty-btn { color: var(--cari); font-size: 10px; line-height: 1; }

.case-page .cs-divider { height: 1px; background: var(--line); }

.case-page .cs-total { display: flex; justify-content: space-between; font-size: 8px; font-weight: 600; }

.case-page .cs-total.grand { font-size: 9px; font-weight: 700; color: var(--ink); }

.case-page .cs-footer { padding: 10px 12px; border-top: 1px solid var(--line); }

.case-page .cs-cta {
  width: 100%; padding: 8px;
  background: var(--cari); color: #fff;
  border-radius: 8px; font-size: 9px; font-weight: 700;
  text-align: center;
}

.case-page .cs-cta.outline { background: transparent; border: 1.5px solid var(--cari); color: var(--cari); }

.case-page .cs-cta.disabled { background: #E0DDD9; color: #aaa; }
/* Address fields */
.case-page .cs-field { height: 22px; background: var(--bg); border-radius: 6px; border: 1px solid #D8D6D3; display: flex; align-items: center; padding: 0 8px; }

.case-page .cs-field-label { font-size: 6.5px; color: var(--muted-2); margin-bottom: 4px; }

.case-page .cs-field-text { font-size: 7.5px; color: var(--ink); }

.case-page .cs-field.active { border-color: var(--cari); box-shadow: 0 0 0 2px rgba(204,0,113,.1); }
/* Payment method */
.case-page .cs-pm { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--line); }

.case-page .cs-pm:last-child { border-bottom: none; }

.case-page .cs-pm-icon { width: 22px; height: 15px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 5.5px; font-weight: 800; }

.case-page .cs-pm-icon.visa { color: #1A1F71; background: #fff; }

.case-page .cs-pm-icon.knet { background: #006BB6; color: #fff; }

.case-page .cs-pm-name { font-size: 7.5px; font-weight: 600; color: var(--ink); flex: 1; }

.case-page .cs-radio { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--cari); display: flex; align-items: center; justify-content: center; }

.case-page .cs-radio.checked::after { content: ""; width: 5px; height: 5px; background: var(--cari); border-radius: 50%; }
/* Processing state */
.case-page .cs-processing {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px;
}

.case-page .cs-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--cari-light);
  border-top-color: var(--cari);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.case-page .cs-processing-text { font-size: 9px; font-weight: 600; color: var(--ink); text-align: center; }

.case-page .cs-processing-sub { font-size: 7.5px; color: var(--muted); text-align: center; }
/* Success state */
.case-page .cs-success {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px;
}

.case-page .cs-check {
  width: 36px; height: 36px; border-radius: 50%;
  background: #E8F8EE;
  display: flex; align-items: center; justify-content: center;
  color: #1A7A3A; font-size: 18px;
}

.case-page .cs-success-title { font-size: 11px; font-weight: 700; color: var(--ink); }

.case-page .cs-success-sub { font-size: 7.5px; color: var(--muted); text-align: center; }

.case-page .cs-order-num { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); }
/* Error state */
.case-page .cs-error {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px;
}

.case-page .cs-error-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #FDE8E8;
  display: flex; align-items: center; justify-content: center;
  color: #D9302A; font-size: 18px;
}

.case-page .cs-error-title { font-size: 10px; font-weight: 700; color: var(--ink); }

.case-page .cs-error-sub { font-size: 7.5px; color: var(--muted); text-align: center; }
/* Flow labels */
.case-page .flow-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px; color: var(--muted-2);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center; margin-top: 8px;
}
/* Flow arrow */
.case-page .flow-arrow {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--muted-2); font-size: 14px;
  align-self: center;
  padding-bottom: 20px;
}

/* ══════════════════════════════════════════
   8. PRODUCT APPLICATION — 3 cards
   ══════════════════════════════════════════ */
.case-page .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.case-page .app-card {
  background: #F4F3F1;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3/2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Mobile frame inside app card */
.case-page .app-phone {
  width: 110px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 30px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.06);
  padding: 10px 7px;
  position: relative;
}

.case-page .app-phone-notch {
  width: 28px; height: 4px; background: #0A0A0A;
  border-radius: 99px; margin: 0 auto 8px;
}
/* Consumer app screen */
.case-page .app-consumer-screen { display: flex; flex-direction: column; gap: 6px; }

.case-page .app-search { height: 16px; background: #F7F7F7; border-radius: 6px; display: flex; align-items: center; padding: 0 6px; gap: 4px; }

.case-page .app-search-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #ccc; }

.case-page .app-search-ph { font-size: 5.5px; color: #ccc; }

.case-page .app-cats { display: flex; gap: 4px; overflow: hidden; }

.case-page .app-cat { width: 22px; height: 22px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; }

.case-page .app-cat.c1 { background: #FFE9F6; }

.case-page .app-cat.c2 { background: #E8F8EE; }

.case-page .app-cat.c3 { background: #E8F0FD; }

.case-page .app-cat.c4 { background: #FFF5E5; }

.case-page .app-cat-dot { width: 8px; height: 8px; border-radius: 3px; }

.case-page .app-cat.c1 .app-cat-dot { background: var(--cari); }

.case-page .app-cat.c2 .app-cat-dot { background: #1A7A3A; }

.case-page .app-cat.c3 .app-cat-dot { background: #1573DD; }

.case-page .app-cat.c4 .app-cat-dot { background: #B36200; }

.case-page .app-cat-label { font-size: 4px; color: #999; }

.case-page .app-sc { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); overflow: hidden; margin-bottom: 4px; }

.case-page .app-sc-img { height: 26px; background: linear-gradient(135deg, #ffecd2, #fcb69f); position: relative; }

.case-page .app-sc-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }

.case-page .app-sc-img .app-sc-badge { position: absolute; top: 3px; left: 3px; background: var(--cari); color: #fff; font-size: 4.5px; font-weight: 700; padding: 1px 3px; border-radius: 3px; }

.case-page .app-sc-body { padding: 4px 5px; }

.case-page .app-sc-name { font-size: 6px; font-weight: 700; color: var(--ink); }

.case-page .app-sc-meta { display: flex; gap: 3px; margin-top: 1.5px; align-items: center; }

.case-page .app-sc-pill { font-size: 4.5px; font-weight: 600; padding: 1px 3px; border-radius: 99px; background: #E8F8EE; color: #1A7A3A; }

.case-page .app-sc-time { font-size: 4.5px; color: var(--muted); }
/* Vendor app screen */
.case-page .app-vendor-screen { display: flex; flex-direction: column; gap: 5px; }

.case-page .app-vendor-header { font-size: 7px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }

.case-page .app-vendor-row { height: 14px; background: var(--bg); border-radius: 4px; display: flex; align-items: center; padding: 0 6px; gap: 5px; }

.case-page .app-vendor-dot { width: 5px; height: 5px; border-radius: 50%; }

.case-page .app-vendor-dot.live { background: #1A7A3A; }

.case-page .app-vendor-dot.paused { background: #B36200; }

.case-page .app-vendor-text { font-size: 5.5px; color: var(--ink); font-weight: 600; flex: 1; }

.case-page .app-vendor-pill { font-size: 4.5px; font-weight: 600; padding: 1px 4px; border-radius: 99px; }

.case-page .app-vendor-pill.live { background: #E8F8EE; color: #1A7A3A; }

.case-page .app-vendor-pill.paused { background: #FFF5E5; color: #B36200; }
/* Assist screen */
.case-page .app-assist-screen { display: flex; flex-direction: column; gap: 5px; }

.case-page .assist-bubble {
  padding: 6px 8px; border-radius: 10px;
  font-size: 6px; line-height: 1.4; max-width: 90%;
}

.case-page .assist-bubble.bot { background: var(--cari-light); color: var(--ink); border-bottom-left-radius: 3px; align-self: flex-start; }

.case-page .assist-bubble.user { background: var(--cari); color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }

.case-page .assist-chips { display: flex; gap: 3px; flex-wrap: wrap; }

.case-page .assist-chip { font-size: 5px; font-weight: 600; padding: 2px 5px; border-radius: 99px; background: var(--cari-light); color: var(--cari); border: 1px solid rgba(204,0,113,.2); }
/* App label */
.case-page .app-label {
  position: absolute; bottom: 14px;
  text-align: center;
}

.case-page .app-label-title { font-size: 9px; font-weight: 700; color: var(--ink); }

.case-page .app-label-sub { font-size: 8px; color: var(--muted); margin-top: 2px; }

.case-page .app-bg-accent {
  position: absolute;
  border-radius: 50%;
  opacity: .07;
  background: var(--cari);
}


/* ─── Integrated case-study visual tuning ─── */
.case-page .case-hero-visual .visual-card,
.case-page .case-visual-card .visual-card,
.case-page .wide-visual-wrap .visual-card { box-shadow: none; border-radius: inherit; }

.case-page .case-hero-visual { background: #F4F3F1; }

.case-page .case-hero-visual .visual-card { height: 100%; }

.case-page .case-hero-visual .hero-collage { height: 100%; }

.case-page .case-visual-card.integrated-visual { background: transparent; box-shadow: none; }

.case-page .integrated-visual > .visual-card { border-radius: 32px; }

.case-page .live-board-wrap {
  aspect-ratio: 16 / 9;
  background: #F4F3F1;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr .8fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.case-page .live-board-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.case-page .live-board-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #9D9B98;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-page .live-note {
  background: #FFFBEB;
  border: 1px solid rgba(234,179,8,.25);
  border-left: 3px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.case-page .live-note.success {
  background: #F0FDF4;
  border-color: rgba(34,197,94,.25);
  border-left-color: #22C55E;
}

.case-page .live-note.info {
  background: #EFF6FF;
  border-color: rgba(59,130,246,.25);
  border-left-color: #3B82F6;
}

.case-page .live-note strong {
  display: block;
  font-size: 9px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #92400E;
}

.case-page .live-note.success strong { color: #166534; }

.case-page .live-note.info strong { color: #1E40AF; }

.case-page .live-note span {
  font-size: 11px;
  color: #78350F;
  line-height: 1.45;
}

.case-page .live-note.success span { color: #14532D; }

.case-page .live-note.info span { color: #1E3A8A; }

.case-page .live-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #CC0071;
  font-size: 28px;
  opacity: .65;
}

.case-page .live-component-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}

.case-page .live-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-page .live-chip {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #E0DDD9;
  color: #0A0A0A;
  background: #fff;
}

.case-page .live-chip.active {
  color: #fff;
  background: #CC0071;
  border-color: #CC0071;
}

.case-page .live-chip.outline {
  color: #CC0071;
  border-color: #CC0071;
}

.case-page .live-chip.disabled {
  color: #BBB;
  background: #F7F7F7;
  border-color: #EDECEA;
}

.case-page .live-prop-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.case-page .live-prop {
  background: #F7F7F7;
  border: 1px solid rgba(10,10,10,.06);
  border-radius: 9px;
  padding: 8px 10px;
}

.case-page .live-prop b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: #9D9B98;
  margin-bottom: 3px;
  font-weight: 500;
}

.case-page .live-prop span {
  font-size: 11px;
  color: #0A0A0A;
  font-weight: 600;
}

.case-page .brand-flex-wrap {
  aspect-ratio: 16 / 9;
  background: #F4F3F1;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
}

.case-page .brand-panel {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}

.case-page .brand-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #9D9B98;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.case-page .brand-wordmark {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.05em;
  margin-bottom: 18px;
}

.case-page .brand-wordmark.cari { color: #CC0071; font-style: italic; }

.case-page .brand-wordmark.dukan { color: #1A5C3A; }

.case-page .brand-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(10,10,10,.06);
}

.case-page .brand-token-dot {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.case-page .brand-token-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #72706E;
}

.case-page .brand-shared {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #72706E;
}

.case-page .brand-shared-line {
  width: 1px;
  height: 70px;
  background: rgba(10,10,10,.12);
}

.case-page .brand-shared-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.1);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.case-page .brand-shared-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: #9D9B98;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 900px) {.case-page .hero-collage,
.case-page .frag-grid,
.case-page .checkout-flow,
.case-page .store-grid,
.case-page .app-grid,
.case-page .type-vars-wrap {
    display: block;
    aspect-ratio: auto;
  }

.case-page .hero-col,
.case-page .frag-card,
.case-page .comp-states-wrap,
.case-page .store-states-wrap,
.case-page .checkout-wrap,
.case-page .type-panel,
.case-page .vars-panel {
    padding: 24px;
  }

.case-page .hero-col { border-right: none; border-bottom: 1px solid rgba(10,10,10,.06); }

.case-page .hero-col:last-child { border-bottom: none; }

.case-page .store-grid,
.case-page .checkout-flow,
.case-page .app-grid { display: grid; grid-template-columns: 1fr; }

.case-page .live-board-wrap,
.case-page .brand-flex-wrap {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    padding: 24px;
  }

.case-page .brand-shared { flex-direction: row; justify-content: center; }

.case-page .brand-shared-line { width: 60px; height: 1px; }
}

/* ==========================================================================
   Temporary inline visual scaffolding, Cari Design System
   Keep this only while the case study uses HTML/CSS placeholder visuals.
   Replace with image-based .case-visual blocks later.
   ========================================================================== */

/* Hero collage */
.case-page .case-hero-visual {
  margin-top: 64px;
}

.case-page .case-hero-visual > .visual-card {
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.04);
}

.case-page .hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 560px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--work-cover-bg);
}

.case-page .hero-col {
  position: relative;
  min-width: 0;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  border-right: 1px solid rgba(10, 10, 10, 0.06);
}

.case-page .hero-col:last-child {
  border-right: 0;
}

.case-page .hero-col-label {
  position: absolute;
  top: 32px;
  left: 32px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Keep inner objects compact inside the collage */
.case-page .hero-col .phone-frame {
  width: 148px;
  max-width: 100%;
  margin: 0 auto;
}

.case-page .hero-col .vendor-panel {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.case-page .hero-col .token-mini-panel {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

/* Generic visual card, only for inline case-study placeholders */
.case-page .visual-card {
  width: 100%;
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
}

/* Prevent old visual-card white shell from fighting the case cover */
.case-page .case-hero-visual .visual-card {
  background: var(--work-cover-bg);
}

/* Responsive fallback for the hero collage */
@media (max-width: 980px) {
  .case-page .hero-collage {
    grid-template-columns: 1fr;
    min-height: auto;
    aspect-ratio: auto;
  }

  .case-page .hero-col {
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
  }

  .case-page .hero-col:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  .case-page .case-hero-visual > .visual-card,
  .case-page .visual-card {
    border-radius: 24px;
  }

  .case-page .hero-col {
    min-height: 360px;
    padding: 28px 22px;
  }

  .case-page .hero-col-label {
    top: 24px;
    left: 22px;
  }
}


/* ==========================================================================
   Temporary inline visual correction
   Use this while Cari Design System uses HTML/CSS placeholder visuals.
   Remove this block after replacing these visuals with real Figma exports.
   ========================================================================== */

/* Stop placeholder visuals from behaving like oversized image plates */
.case-page .integrated-visual,
.case-page .case-visual-card.large,
.case-page .wide-visual-wrap .case-visual-card {
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
}

/* Shared temporary visual plate */
.case-page .visual-card,
.case-page .case-visual-card {
  width: 100%;
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.04);
}

/* Keep placeholder boards compact, not full-page tall */
.case-page .frag-card,
.case-page .comp-states-wrap,
.case-page .store-states-wrap,
.case-page .checkout-wrap,
.case-page .brand-flex-wrap,
.case-page .type-vars-wrap,
.case-page .live-board-wrap {
  min-height: 0;
  height: auto;
  padding: clamp(28px, 4vw, 56px);
  background: var(--work-cover-bg);
}

/* Give only the hero a large cover treatment */
.case-page .case-hero-visual .hero-collage {
  min-height: 520px;
  aspect-ratio: 16 / 9;
}

/* All other inline visuals should fit their content */
.case-page .case-section .hero-collage,
.case-page .case-section .frag-card,
.case-page .case-section .comp-states-wrap,
.case-page .case-section .store-states-wrap,
.case-page .case-section .checkout-wrap,
.case-page .case-section .brand-flex-wrap,
.case-page .case-section .type-vars-wrap,
.case-page .case-section .live-board-wrap {
  aspect-ratio: auto;
}

/* Fragmentation board */
.case-page .frag-card {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.case-page .frag-grid {
  align-items: start;
  gap: clamp(20px, 3vw, 32px);
}

/* Component states board */
.case-page .comp-states-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.case-page .comp-row {
  gap: 16px;
}

.case-page .comp-states-row {
  gap: 12px;
  flex-wrap: wrap;
}

/* Store card board, keep cards visually centred */
.case-page .store-states-wrap {
  padding-bottom: clamp(36px, 4vw, 56px);
}

.case-page .store-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Checkout board needs width, but not unnecessary height */
.case-page .checkout-wrap {
  overflow-x: auto;
  padding-bottom: clamp(36px, 4vw, 56px);
}

.case-page .checkout-flow {
  align-items: stretch;
  gap: 20px;
}

/* Brand flexibility visual should not sit inside a giant empty plate */
.case-page .brand-flex-wrap {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.case-page .brand-panel {
  min-height: 220px;
}

/* Captions */
.case-page .case-visual-caption {
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Remove overly large paragraph feeling inside case sections */
.case-page .case-section-body,
.case-page .case-section-copy p,
.case-page .case-section-visual p {
  color: var(--muted);
  font-size: clamp(17px, 1.2vw, 19px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.012em;
}

/* Keep bold emphasis short and controlled */
.case-page .case-section-body strong {
  color: var(--ink);
  font-weight: 650;
}

/* Inline code should read as a clear system artefact */
.case-page code,
.case-page .case-code {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.42em;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 1080px) {
  .case-page .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page .brand-flex-wrap {
    grid-template-columns: 1fr;
  }

  .case-page .brand-shared {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .case-page .frag-card,
  .case-page .comp-states-wrap,
  .case-page .store-states-wrap,
  .case-page .checkout-wrap,
  .case-page .brand-flex-wrap,
  .case-page .type-vars-wrap,
  .case-page .live-board-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .case-page .store-grid {
    grid-template-columns: 1fr;
  }

  .case-page .case-hero-visual .hero-collage {
    min-height: 0;
    aspect-ratio: auto;
  }
}

.case-callout {
  max-width: 760px;
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--card-bg);
  border-left: 3px solid var(--ink);
  border-radius: 18px;
}

.case-callout-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-callout strong {
  display: block;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.035em;
}

.case-section-body,
.case-section-copy p,
.case-section-visual p {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(17px, 1.15vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.012em;
}


/* ==========================================================================
   Case study refinement v4
   Purpose:
   - Pull case-study pages back into the About page system.
   - Unify eyebrow sizing and spacing.
   - Reuse the About approach-card pattern for process/support cards with icons.
   - Keep temporary inline placeholder visuals working until replaced by exports.
   ========================================================================== */

/* Shared eyebrow language */
.about-eyebrow,
.case-page .case-eyebrow,
.case-page .case-kicker {
  margin-bottom: 28px;
  color: var(--muted);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Shared long-form case rhythm */
.case-page {
  background: var(--bg);
}

.case-page .container {
  max-width: 1280px;
}

.case-page .case-hero {
  padding: 88px 0 76px;
}

.case-page .case-title {
  max-width: 980px;
  margin-bottom: 36px;
  color: var(--ink);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.case-page .case-lede,
.case-page .case-subtitle {
  max-width: 820px;
  color: var(--ink);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.018em;
}

.case-page .case-lede + .case-lede,
.case-page .case-lede-secondary {
  max-width: 760px;
  margin-top: 18px;
  color: var(--muted);
}

.case-page .case-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .case-meta .sep {
  width: 28px;
  height: 1px;
  background: var(--muted-2);
  opacity: 0.65;
}

.case-page .case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 960px;
  margin-top: 28px;
  list-style: none;
}

.case-page .case-tags li {
  padding: 8px 13px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* Section rhythm mirrors About page */
.case-page .case-section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.case-page .case-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
}

.case-page .case-section-copy,
.case-page .case-section-visual {
  min-width: 0;
}

.case-page .case-section-title {
  max-width: 620px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.case-page .case-section-body,
.case-page .case-section-copy p,
.case-page .case-section-visual p {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(18px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.01em;
}

.case-page .case-section-visual > .case-section-body:first-child,
.case-page .case-section-copy > .case-section-body:first-of-type {
  color: var(--ink);
}

.case-page .case-section-body + .case-section-body,
.case-page .case-section-copy p + p,
.case-page .case-section-visual p + p {
  margin-top: 22px;
}

.case-page .case-section-body--focus {
  color: var(--ink);
  font-weight: 600;
}

.case-page .case-section-body strong {
  color: var(--ink);
  font-weight: 650;
}

/* About-style icon card group, use for process/support blocks */
.case-page .case-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  max-width: 1180px;
  margin-top: 56px;
}

.case-page .case-icon-card {
  min-width: 0;
}

.case-page .case-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  color: var(--ink);
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .case-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-page .case-icon-card h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.case-page .case-icon-card p {
  max-width: 280px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* Boxed card groups, only for artefacts that need equal visual weight */
.case-page .case-proof-grid,
.case-page .case-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.case-page .case-proof-card,
.case-page .case-impact-item,
.case-page .system-architecture-card {
  min-height: 190px;
  padding: 28px;
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .case-proof-card h3,
.case-page .system-architecture-card h3 {
  max-width: 420px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.case-page .case-proof-card p,
.case-page .system-architecture-card p,
.case-page .case-impact-item span {
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Retire fake callouts visually. They remain safe if old markup still exists. */
.case-page .case-callout {
  max-width: 720px;
  margin: 22px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.case-page .case-callout-label {
  display: none;
}

.case-page .case-callout strong {
  color: var(--ink);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Naming strip, lightweight artefact */
.case-page .case-code-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 28px;
  padding: 13px 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.case-page .case-code-strip span:nth-child(even) {
  color: var(--muted-2);
}

/* Temporary inline visual handling */
.case-page .case-hero-visual {
  margin-top: 48px;
}

.case-page .wide-visual-wrap,
.case-page .case-visual-card {
  margin-top: 40px;
}

.case-page .case-visual-card,
.case-page .visual-card {
  overflow: hidden;
  background: var(--work-cover-bg);
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.035);
}

.case-page .case-visual-card.integrated-visual,
.case-page .case-visual-card.large,
.case-page .wide-visual-wrap .case-visual-card,
.case-page .integrated-visual {
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
}

.case-page .frag-card,
.case-page .type-vars-wrap,
.case-page .comp-states-wrap,
.case-page .store-states-wrap,
.case-page .checkout-wrap,
.case-page .brand-flex-wrap,
.case-page .live-board-wrap {
  min-height: 0;
  height: auto;
  padding: clamp(28px, 4vw, 56px);
  background: var(--work-cover-bg);
}

.case-page .store-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 20px;
  align-items: start;
}

.case-page .brand-flex-wrap {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.case-page .checkout-wrap {
  overflow-x: auto;
}

.case-page .checkout-flow {
  align-items: stretch;
  gap: 20px;
}

.case-page .case-visual-caption {
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.008em;
}

/* Future image-export pattern */
.case-page .case-visual {
  margin-top: 40px;
}

.case-page .case-visual img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--work-cover-bg);
  border-radius: 28px;
}

.case-page .case-visual figcaption {
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1080px) {
  .case-page .case-section-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-page .case-section-title {
    max-width: 760px;
  }

  .case-page .case-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-page .brand-flex-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .case-page .case-hero {
    padding: 56px 0 64px;
  }

  .case-page .case-title {
    font-size: clamp(46px, 13vw, 68px);
    line-height: 0.96;
  }

  .case-page .case-lede,
  .case-page .case-subtitle {
    font-size: 20px;
    line-height: 1.42;
  }

  .case-page .case-section {
    padding: 56px 0;
  }

  .case-page .case-section-title {
    font-size: clamp(32px, 10vw, 46px);
  }

  .case-page .case-section-body,
  .case-page .case-section-copy p,
  .case-page .case-section-visual p {
    font-size: 17px;
  }

  .case-page .case-icon-grid,
  .case-page .case-proof-grid,
  .case-page .case-impact-grid {
    grid-template-columns: 1fr;
  }

  .case-page .case-icon-card p {
    max-width: 520px;
  }

  .case-page .store-grid {
    grid-template-columns: 1fr;
  }

  .case-page .case-proof-card,
  .case-page .case-impact-item,
  .case-page .system-architecture-card,
  .case-page .case-visual-card,
  .case-page .visual-card,
  .case-page .case-visual img {
    border-radius: 22px;
  }

  .case-page .frag-card,
  .case-page .type-vars-wrap,
  .case-page .comp-states-wrap,
  .case-page .store-states-wrap,
  .case-page .checkout-wrap,
  .case-page .brand-flex-wrap,
  .case-page .live-board-wrap {
    padding: 24px;
  }
}
/* ==========================================================================
   Case study v5 — unified with About page
   Appended to global.css. Do not edit rules above this block.
   These rules extend the About page system into case study pages.
   All existing rules are preserved above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CS tokens: Cari-specific brand values used by inline visual scaffolding.
   Scoped to .case-page so they cannot bleed into other pages.
   -------------------------------------------------------------------------- */
   .case-page {
    --cari: #CC0071;
    --cari-light: #FFE9F6;
    --cari-mid: #F64AA8;
  }
  
  /* --------------------------------------------------------------------------
     CS hero: aligns with About hero scale.
     .cs-hero-title overrides about-hero-title for the larger case study display.
     -------------------------------------------------------------------------- */
  .case-page .case-hero {
    padding: 88px 0 76px;
  }
  
  .cs-hero-title {
    max-width: 960px;
    font-size: clamp(52px, 6.8vw, 96px);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin-bottom: 36px;
  }
  
  .cs-hero-lede {
    max-width: 860px;
    margin-bottom: 0;
  }
  
  .cs-hero-lede p {
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.45;
    letter-spacing: -0.018em;
  }
  
  .cs-hero-lede p:first-child {
    color: var(--ink);
  }
  
  .cs-hero-lede p + p {
    margin-top: 16px;
    color: var(--muted);
  }
  
  .case-page .case-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 44px;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .case-page .case-meta .sep {
    width: 28px;
    height: 1px;
    background: var(--muted-2);
    opacity: 0.65;
  }
  
  .case-page .case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 960px;
    margin-top: 28px;
    list-style: none;
  }
  
  .case-page .case-tags li {
    padding: 7px 12px;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }
  
  /* --------------------------------------------------------------------------
     CS hero visual: large cover plate matching work-page cover language.
     -------------------------------------------------------------------------- */
  .case-page .case-hero-visual {
    margin-top: 56px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
    box-shadow:
      inset 0 0 0 1px rgba(10, 10, 10, 0.04),
      0 18px 56px rgba(10, 10, 10, 0.06);
  }
  
  .case-page .case-hero-visual > .visual-card {
    background: var(--work-cover-bg);
    border-radius: 0;
    box-shadow: none;
  }
  
  /* --------------------------------------------------------------------------
     CS section rhythm: mirrors About page section spacing.
     -------------------------------------------------------------------------- */
  .case-page .case-section {
    padding: 72px 0;
    border-top: 1px solid var(--line);
  }
  
  /* --------------------------------------------------------------------------
     CS two-column grid: about-outside-grid rhythm (copy | body).
     .cs-two-col replaces the old .case-section-grid.
     -------------------------------------------------------------------------- */
  .cs-two-col {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: start;
    margin-bottom: 48px;
  }
  
  .cs-col-label {
    min-width: 0;
  }
  
  .cs-col-label .about-eyebrow {
    margin-bottom: 20px;
  }
  
  .cs-col-label .about-section-title {
    margin-bottom: 0;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }
  
  .cs-col-body {
    min-width: 0;
  }
  
  .cs-col-body .about-section-body + .about-section-body {
    margin-top: 22px;
  }
  
  /* Focus variant: strong sentence, same weight as about-hero-body lead */
  .cs-focus {
    color: var(--ink) !important;
    font-weight: 600;
  }
  
  /* --------------------------------------------------------------------------
     CS approach grid: reuses about's .approach-grid with case-study density.
     .cs-approach-grid adds top margin when following a .cs-two-col.
     -------------------------------------------------------------------------- */
  .cs-approach-grid {
    margin-top: 0;
  }
  
  /* --------------------------------------------------------------------------
     CS scale strip: shared with case-page framework above,
     but needs margin correction when following .cs-two-col.
     -------------------------------------------------------------------------- */
  .case-page .cs-two-col + .scale-strip {
    margin-top: 0;
  }
  
  /* --------------------------------------------------------------------------
     CS visual card: shared container for all inline placeholder visuals.
     -------------------------------------------------------------------------- */
  .case-page .case-visual-card,
  .case-page .visual-card {
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 28px;
    box-shadow:
      inset 0 0 0 1px rgba(10, 10, 10, 0.04),
      0 18px 48px rgba(10, 10, 10, 0.04);
  }
  
  .case-page .wide-visual-wrap {
    margin-top: 0;
  }
  
  .case-page .case-visual-caption {
    max-width: 760px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.008em;
  }
  
  /* --------------------------------------------------------------------------
     CS impact grid: 3-col, reuses about-skill-card visual language.
     -------------------------------------------------------------------------- */
  .case-page .case-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
  }
  
  .case-page .case-impact-item {
    min-height: 180px;
    padding: 30px 28px;
    background: var(--card-bg);
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
  }
  
  .case-page .case-impact-item strong {
    display: block;
    margin-bottom: 12px;
    color: var(--ink);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.055em;
  }
  
  .case-page .case-impact-item span {
    display: block;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.52;
  }
  
  /* --------------------------------------------------------------------------
     CS app cards: 3-col product application grid.
     -------------------------------------------------------------------------- */
  .cs-app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
  }
  
  .cs-app-card {
    overflow: hidden;
    border-radius: 24px;
    box-shadow:
      inset 0 0 0 1px rgba(10, 10, 10, 0.05),
      0 4px 20px rgba(10, 10, 10, 0.06);
  }
  
  .cs-app-bg {
    aspect-ratio: 3 / 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
  }
  
  .cs-app-label {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
  }
  
  .cs-app-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  
  .cs-app-sub {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px;
  }
  
  /* --------------------------------------------------------------------------
     CS inline visual scaffolding.
     Preserves all working visual classes. Kept for backwards compatibility
     until replaced by Figma image exports.
     -------------------------------------------------------------------------- */
  
  /* Hero collage */
  .case-page .hero-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 520px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--work-cover-bg);
  }
  
  .case-page .hero-col {
    position: relative;
    min-width: 0;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    border-right: 1px solid rgba(10, 10, 10, 0.06);
  }
  
  .case-page .hero-col:last-child { border-right: 0; }
  
  .case-page .hero-col-label {
    position: absolute;
    top: 32px;
    left: 32px;
    color: var(--muted-2);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  .case-page .hero-col .phone-frame  { width: 148px; max-width: 100%; margin: 0 auto; }
  .case-page .hero-col .vendor-panel { width: 100%; max-width: 280px; margin: 0 auto; }
  .case-page .hero-col .token-mini-panel { width: 100%; max-width: 280px; margin: 0 auto; }
  
  /* Phone frame */
  .case-page .phone-frame {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
    padding: 12px 8px;
    flex-shrink: 0;
  }
  
  .case-page .phone-bar { width: 32px; height: 3px; background: #0A0A0A; border-radius: 99px; margin: 0 auto 10px; }
  .case-page .phone-screen { display: flex; flex-direction: column; gap: 6px; }
  
  /* Mini store card */
  .case-page .mini-store-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
  .case-page .mini-store-img { height: 34px; background: linear-gradient(135deg, #ffecd2, #fcb69f); }
  .case-page .mini-store-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
  .case-page .mini-store-img.g3 { background: linear-gradient(135deg, #d4fc79, #96e6a1); }
  .case-page .mini-store-body { padding: 5px 7px; }
  .case-page .mini-store-name { font-size: 7px; font-weight: 700; color: var(--ink); }
  .case-page .mini-store-meta { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
  .case-page .mini-chip { font-size: 5.5px; font-weight: 600; padding: 1.5px 4px; border-radius: 99px; background: var(--cari-light); color: var(--cari); }
  .case-page .mini-chip.green { background: #E8F8EE; color: #1A7A3A; }
  .case-page .mini-store-rating { font-size: 5.5px; color: var(--muted); margin-left: auto; }
  
  /* Mini nav bar */
  .case-page .mini-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 4px; }
  .case-page .mini-nav-item { height: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .case-page .mini-nav-dot { width: 10px; height: 10px; background: var(--bg); border-radius: 4px; }
  .case-page .mini-nav-dot.active { background: var(--cari); }
  .case-page .mini-nav-label { font-size: 4.5px; color: var(--muted-2); }
  .case-page .mini-nav-label.active { color: var(--cari); }
  
  /* Mini search */
  .case-page .mini-search { height: 18px; background: var(--bg); border-radius: 7px; display: flex; align-items: center; padding: 0 8px; gap: 5px; margin-bottom: 4px; }
  .case-page .mini-search-icon { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted-2); }
  .case-page .mini-search-text { font-size: 6px; color: var(--muted-2); }
  
  /* Cari wordmark */
  .case-page .cari-wordmark { font-size: 15px; font-weight: 800; color: var(--cari); letter-spacing: -0.04em; font-style: italic; }
  
  /* Vendor panel */
  .case-page .vendor-panel { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.1); width: 220px; margin: 0 auto; }
  .case-page .vendor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .case-page .vendor-title { font-size: 9px; font-weight: 700; color: var(--ink); }
  .case-page .vendor-btn { font-size: 7px; font-weight: 600; padding: 3px 8px; background: var(--cari); color: #fff; border-radius: 6px; }
  .case-page .vendor-row { display: grid; grid-template-columns: 1fr 60px 50px 44px; gap: 4px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 6.5px; }
  .case-page .vendor-row.head { color: var(--muted-2); font-weight: 600; }
  .case-page .vendor-row:last-child { border-bottom: none; }
  .case-page .vendor-name { font-weight: 600; color: var(--ink); }
  .case-page .status-pill { font-size: 5.5px; font-weight: 600; padding: 2px 5px; border-radius: 99px; display: inline-block; }
  .case-page .status-pill.live { background: #E8F8EE; color: #1A7A3A; }
  .case-page .status-pill.paused { background: #FFF5E5; color: #B36200; }
  
  /* Token panel */
  .case-page .token-mini-panel { background: #1C1C1E; border-radius: 14px; padding: 14px; width: 200px; margin: 0 auto; }
  .case-page .token-mini-header { font-size: 7px; color: #888; font-family: "JetBrains Mono", monospace; margin-bottom: 10px; letter-spacing: .06em; }
  .case-page .token-mini-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .case-page .token-mini-row:last-child { border-bottom: none; }
  .case-page .token-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
  .case-page .token-mini-name { font-size: 7px; color: #ccc; font-family: "JetBrains Mono", monospace; flex: 1; }
  .case-page .token-mini-val { font-size: 6.5px; color: #666; font-family: "JetBrains Mono", monospace; }
  
  /* Fragmentation visual */
  .case-page .frag-card { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 0; }
  .case-page .frag-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 500; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
  .case-page .frag-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 3vw, 28px); align-items: start; }
  .case-page .frag-col-label { font-size: 9px; font-weight: 600; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .case-page .frag-surface-label { font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--muted-2); margin-bottom: 10px; }
  .case-page .frag-btn-group { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .case-page .frag-btn { padding: 5px 10px; font-size: 8px; font-weight: 600; display: inline-flex; align-items: center; }
  .case-page .frag-btn.v1 { background: var(--cari); color: #fff; border-radius: 6px; }
  .case-page .frag-btn.v2 { background: var(--cari); color: #fff; border-radius: 12px; }
  .case-page .frag-btn.v3 { background: var(--cari); color: #fff; border-radius: 99px; }
  .case-page .frag-btn.v1b { background: #F7F7F7; color: var(--cari); border: 1px solid var(--cari); border-radius: 6px; }
  .case-page .frag-btn.v2b { background: #F7F7F7; color: var(--cari); border: 1px solid #ddd; border-radius: 10px; }
  .case-page .frag-divider { height: 1px; background: rgba(204,0,113,.15); margin: 8px 0; }
  .case-page .frag-card-mini { background: #fff; border-radius: 8px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; }
  .case-page .frag-card-img { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #ffecd2, #fcb69f); flex-shrink: 0; }
  .case-page .frag-card-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
  .case-page .frag-card-img.g3 { background: linear-gradient(135deg, #667eea, #764ba2); }
  .case-page .frag-card-body { flex: 1; }
  .case-page .frag-card-name { font-size: 7.5px; font-weight: 700; color: var(--ink); }
  .case-page .frag-card-meta { font-size: 6.5px; color: var(--muted); margin-top: 2px; }
  .case-page .frag-card-rating { font-size: 6px; font-weight: 600; color: var(--muted); margin-top: 3px; }
  
  /* Type + variables */
  .case-page .type-vars-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; }
  .case-page .type-panel { padding: 36px 32px; border-right: 1px solid var(--line); }
  .case-page .vars-panel { padding: 36px 32px; }
  .case-page .panel-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 500; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 22px; }
  .case-page .type-row-real { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 12px; }
  .case-page .type-row-real:last-child { border-bottom: none; }
  .case-page .type-sample-text { font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
  .case-page .type-meta-text { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); white-space: nowrap; text-align: right; }
  .case-page .var-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; }
  .case-page .var-swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--line); }
  .case-page .var-name { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink); flex: 1; }
  .case-page .var-val { font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--muted-2); }
  
  /* Code strip */
  .case-page .case-code-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: fit-content; margin: 22px 0 28px; padding: 12px 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; font-family: "JetBrains Mono", monospace; font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
  .case-page .case-code-strip span:nth-child(even) { color: var(--muted-2); }
  
  /* Component states */
  .case-page .comp-states-wrap { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
  .case-page .comp-states-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; }
  .case-page .comp-row { display: flex; flex-direction: column; gap: 12px; }
  .case-page .comp-row-label { font-size: 9px; font-weight: 600; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
  .case-page .comp-states-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .case-page .btn-state { padding: 7px 16px; border-radius: 99px; font-size: 9.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
  .case-page .btn-state.default { background: var(--cari); color: #fff; }
  .case-page .btn-state.hover { background: #A0005A; color: #fff; box-shadow: 0 2px 8px rgba(204,0,113,.3); }
  .case-page .btn-state.focused { background: var(--cari); color: #fff; outline: 2px solid var(--cari); outline-offset: 2px; }
  .case-page .btn-state.disabled { background: #E0DDD9; color: #aaa; }
  .case-page .btn-state.loading { background: var(--cari); color: rgba(255,255,255,.5); position: relative; overflow: hidden; }
  .case-page .btn-state.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: shimmer 1.4s infinite; }
  @keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
  .case-page .btn-state.outline { background: transparent; color: var(--cari); border: 1.5px solid var(--cari); }
  .case-page .btn-state.ghost { background: transparent; color: var(--cari); }
  .case-page .btn-state.secondary { background: #FFF5E5; color: #B36200; }
  .case-page .state-label { font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; text-align: center; margin-top: 3px; }
  .case-page .state-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .case-page .input-state { height: 30px; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; font-size: 9px; color: var(--ink); background: #fff; min-width: 110px; }
  .case-page .input-state.default { border: 1.5px solid #D8D6D3; }
  .case-page .input-state.focused { border: 1.5px solid var(--cari); box-shadow: 0 0 0 3px rgba(204,0,113,.1); }
  .case-page .input-state.filled { border: 1.5px solid #D8D6D3; }
  .case-page .input-state.error { border: 1.5px solid #D9302A; }
  .case-page .input-state.disabled { border: 1.5px solid #E8E6E3; background: #F7F7F7; color: var(--muted-2); }
  .case-page .chip-state { padding: 5px 10px; border-radius: 99px; font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .case-page .chip-state.default { background: #F7F7F7; color: var(--ink); border: 1px solid #E0DDD9; }
  .case-page .chip-state.active { background: var(--cari-light); color: var(--cari); border: 1px solid rgba(204,0,113,.2); }
  .case-page .chip-state.selected { background: var(--cari); color: #fff; }
  .case-page .chip-state.disabled { background: #F7F7F7; color: #CCC; border: 1px solid #EDECEA; }
  .case-page .toggle-wrap { display: flex; align-items: center; gap: 8px; }
  .case-page .toggle { width: 32px; height: 18px; border-radius: 99px; position: relative; }
  .case-page .toggle.off { background: #D8D6D3; }
  .case-page .toggle.on { background: var(--cari); }
  .case-page .toggle::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
  .case-page .toggle.off::after { left: 2px; }
  .case-page .toggle.on::after { left: 16px; }
  .case-page .toggle-text { font-size: 9px; color: var(--muted); }
  
  /* Store card states */
  .case-page .store-states-wrap { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
  .case-page .store-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 16px; align-items: start; }
  .case-page .store-card-mini { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.09), inset 0 0 0 1px rgba(0,0,0,.05); display: flex; flex-direction: column; position: relative; }
  .case-page .sc-img { height: 70px; background: linear-gradient(135deg, #ffecd2, #fcb69f); position: relative; }
  .case-page .sc-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
  .case-page .sc-img.g3 { background: linear-gradient(135deg, #96fbc4, #f9f586); }
  .case-page .sc-img.g4 { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
  .case-page .sc-img.skeleton { background: linear-gradient(90deg, #EDECEA 25%, #E0DDD9 50%, #EDECEA 75%); background-size: 200% 100%; animation: skelshimmer 1.4s infinite; }
  @keyframes skelshimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  .case-page .sc-img-closed { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; color: #fff; letter-spacing: .05em; text-transform: uppercase; }
  .case-page .sc-badge { position: absolute; top: 6px; left: 6px; font-size: 6.5px; font-weight: 700; padding: 2px 5px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
  .case-page .sc-badge.sponsored { background: rgba(0,0,0,.55); color: #fff; }
  .case-page .sc-badge.promo { background: var(--cari); color: #fff; }
  .case-page .sc-fav { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; }
  .case-page .sc-body { padding: 8px; flex: 1; }
  .case-page .sc-name { font-size: 8px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
  .case-page .sc-name.skeleton-text { height: 8px; background: #EDECEA; border-radius: 4px; animation: skelshimmer 1.4s infinite; }
  .case-page .sc-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .case-page .sc-pill { font-size: 5.5px; font-weight: 600; padding: 2px 5px; border-radius: 99px; }
  .case-page .sc-pill.free { background: #E8F8EE; color: #1A7A3A; }
  .case-page .sc-pill.closed { background: #F5F5F5; color: #999; }
  .case-page .sc-time { font-size: 5.5px; color: var(--muted); }
  .case-page .sc-rating { font-size: 5.5px; color: var(--muted); margin-left: auto; }
  .case-page .sc-footer { padding: 5px 8px; border-top: 1px solid var(--line); }
  .case-page .sc-footer-text { font-size: 5.5px; color: var(--muted); }
  .case-page .state-tag { font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; text-align: center; margin-top: 8px; }
  
  /* Checkout states */
  .case-page .checkout-wrap { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px; overflow-x: auto; }
  .case-page .checkout-flow { display: flex; gap: 10px; align-items: stretch; min-width: min-content; }
  .case-page .checkout-screen { width: 130px; flex-shrink: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.08); display: flex; flex-direction: column; overflow: hidden; }
  .case-page .cs-header { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 8.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
  .case-page .cs-step { font-family: "JetBrains Mono", monospace; font-size: 6.5px; color: var(--muted-2); }
  .case-page .cs-body { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .case-page .cs-item { display: flex; gap: 6px; align-items: flex-start; }
  .case-page .cs-item-img { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #ffecd2, #fcb69f); flex-shrink: 0; }
  .case-page .cs-item-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
  .case-page .cs-item-body { flex: 1; }
  .case-page .cs-item-name { font-size: 7px; font-weight: 600; color: var(--ink); }
  .case-page .cs-item-price { font-size: 6.5px; color: var(--muted); }
  .case-page .cs-qty { width: 48px; display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: 5px; padding: 2px 4px; font-size: 7px; font-weight: 700; }
  .case-page .cs-qty-btn { color: var(--cari); font-size: 9px; line-height: 1; }
  .case-page .cs-divider { height: 1px; background: var(--line); }
  .case-page .cs-total { display: flex; justify-content: space-between; font-size: 7px; font-weight: 600; }
  .case-page .cs-total.grand { font-size: 8px; font-weight: 700; color: var(--ink); }
  .case-page .cs-footer { padding: 8px 10px; border-top: 1px solid var(--line); }
  .case-page .cs-cta { width: 100%; padding: 6px; background: var(--cari); color: #fff; border-radius: 7px; font-size: 8px; font-weight: 700; text-align: center; }
  .case-page .cs-cta.outline { background: transparent; border: 1.5px solid var(--cari); color: var(--cari); }
  .case-page .cs-cta.disabled { background: #E0DDD9; color: #aaa; }
  .case-page .cs-field { height: 20px; background: var(--bg); border-radius: 5px; border: 1px solid #D8D6D3; display: flex; align-items: center; padding: 0 6px; }
  .case-page .cs-field-label { font-size: 6px; color: var(--muted-2); margin-bottom: 3px; }
  .case-page .cs-field-text { font-size: 7px; color: var(--ink); }
  .case-page .cs-field.active { border-color: var(--cari); }
  .case-page .cs-pm { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
  .case-page .cs-pm:last-child { border-bottom: none; }
  .case-page .cs-pm-icon { width: 20px; height: 13px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 5px; font-weight: 800; }
  .case-page .cs-pm-icon.visa { color: #1A1F71; }
  .case-page .cs-pm-icon.knet { background: #006BB6; color: #fff; }
  .case-page .cs-pm-name { font-size: 7px; font-weight: 600; color: var(--ink); flex: 1; }
  .case-page .cs-radio { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--cari); display: flex; align-items: center; justify-content: center; }
  .case-page .cs-radio.checked::after { content: ""; width: 4px; height: 4px; background: var(--cari); border-radius: 50%; }
  .case-page .cs-processing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; }
  .case-page .cs-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--cari-light); border-top-color: var(--cari); animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .case-page .cs-processing-text { font-size: 8px; font-weight: 600; color: var(--ink); text-align: center; }
  .case-page .cs-processing-sub { font-size: 6.5px; color: var(--muted); text-align: center; }
  .case-page .cs-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; }
  .case-page .cs-check { width: 30px; height: 30px; border-radius: 50%; background: #E8F8EE; display: flex; align-items: center; justify-content: center; color: #1A7A3A; font-size: 15px; }
  .case-page .cs-success-title { font-size: 9px; font-weight: 700; color: var(--ink); }
  .case-page .cs-success-sub { font-size: 6.5px; color: var(--muted); text-align: center; }
  .case-page .cs-order-num { font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--muted-2); }
  .case-page .cs-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; }
  .case-page .cs-error-icon { width: 30px; height: 30px; border-radius: 50%; background: #FDE8E8; display: flex; align-items: center; justify-content: center; color: #D9302A; font-size: 15px; }
  .case-page .cs-error-title { font-size: 8.5px; font-weight: 700; color: var(--ink); }
  .case-page .cs-error-sub { font-size: 6.5px; color: var(--muted); text-align: center; }
  .case-page .flow-label { font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; text-align: center; margin-top: 6px; }
  .case-page .flow-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted-2); font-size: 13px; align-self: center; padding-bottom: 18px; }
  
  /* Brand flex */
  .case-page .brand-flex-wrap { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: 320px; }
  .case-page .brand-panel { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
  .case-page .brand-title { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
  .case-page .brand-wordmark { font-size: 32px; font-weight: 800; letter-spacing: -.05em; margin-bottom: 16px; }
  .case-page .brand-wordmark.cari { color: var(--cari); font-style: italic; }
  .case-page .brand-wordmark.dukan { color: #1A5C3A; }
  .case-page .brand-token-row { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
  .case-page .brand-token-dot { width: 16px; height: 16px; border-radius: 4px; }
  .case-page .brand-token-text { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted); }
  .case-page .brand-shared { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .case-page .brand-shared-line { width: 1px; height: 56px; background: rgba(10,10,10,.12); }
  .case-page .brand-shared-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.1); display: grid; place-items: center; font-size: 18px; color: var(--muted); }
  .case-page .brand-shared-label { font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
  
  /* App phone helpers */
  .case-page .app-phone { width: 110px; background: #fff; border-radius: 18px; box-shadow: 0 6px 28px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.06); padding: 10px 7px; }
  .case-page .app-phone-notch { width: 28px; height: 4px; background: #0A0A0A; border-radius: 99px; margin: 0 auto 8px; }
  .case-page .app-consumer-screen,.case-page .app-vendor-screen { display: flex; flex-direction: column; gap: 6px; }
  .case-page .app-search { height: 16px; background: #F7F7F7; border-radius: 6px; display: flex; align-items: center; padding: 0 6px; gap: 4px; }
  .case-page .app-search-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #ccc; }
  .case-page .app-search-ph { font-size: 5.5px; color: #ccc; }
  .case-page .app-cats { display: flex; gap: 4px; overflow: hidden; }
  .case-page .app-cat { width: 22px; height: 22px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; }
  .case-page .app-cat.c1 { background: #FFE9F6; } .case-page .app-cat.c2 { background: #E8F8EE; }
  .case-page .app-cat.c3 { background: #E8F0FD; } .case-page .app-cat.c4 { background: #FFF5E5; }
  .case-page .app-cat-dot { width: 8px; height: 8px; border-radius: 3px; }
  .case-page .app-cat.c1 .app-cat-dot { background: var(--cari); } .case-page .app-cat.c2 .app-cat-dot { background: #1A7A3A; }
  .case-page .app-cat.c3 .app-cat-dot { background: #1573DD; } .case-page .app-cat.c4 .app-cat-dot { background: #B36200; }
  .case-page .app-cat-label { font-size: 4px; color: #999; }
  .case-page .app-sc { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); overflow: hidden; margin-bottom: 4px; }
  .case-page .app-sc-img { height: 26px; background: linear-gradient(135deg, #ffecd2, #fcb69f); position: relative; }
  .case-page .app-sc-img.g2 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
  .case-page .app-sc-img .app-sc-badge { position: absolute; top: 3px; left: 3px; background: var(--cari); color: #fff; font-size: 4.5px; font-weight: 700; padding: 1px 3px; border-radius: 3px; }
  .case-page .app-sc-body { padding: 4px 5px; }
  .case-page .app-sc-name { font-size: 6px; font-weight: 700; color: var(--ink); }
  .case-page .app-sc-meta { display: flex; gap: 3px; margin-top: 1.5px; align-items: center; }
  .case-page .app-sc-pill { font-size: 4.5px; font-weight: 600; padding: 1px 3px; border-radius: 99px; background: #E8F8EE; color: #1A7A3A; }
  .case-page .app-sc-time { font-size: 4.5px; color: var(--muted); }
  .case-page .assist-bubble { padding: 6px 8px; border-radius: 10px; font-size: 6px; line-height: 1.4; max-width: 90%; }
  .case-page .assist-bubble.bot { background: var(--cari-light); color: var(--ink); border-bottom-left-radius: 3px; align-self: flex-start; }
  .case-page .assist-bubble.user { background: var(--cari); color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }
  .case-page .assist-chips { display: flex; gap: 3px; flex-wrap: wrap; }
  .case-page .assist-chip { font-size: 5px; font-weight: 600; padding: 2px 5px; border-radius: 99px; background: var(--cari-light); color: var(--cari); border: 1px solid rgba(204,0,113,.2); }
  
  /* Living system board */
  .case-page .live-board-wrap { background: var(--work-cover-bg); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1.05fr 0.5fr 1.05fr; gap: 24px; align-items: center; }
  .case-page .live-board-column { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .case-page .live-board-label { font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; }
  .case-page .live-note { border-radius: 10px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
  .case-page .live-note { background: #FFFBEB; border: 1px solid rgba(234,179,8,.25); border-left: 3px solid #F59E0B; }
  .case-page .live-note.success { background: #F0FDF4; border-color: rgba(34,197,94,.25); border-left-color: #22C55E; }
  .case-page .live-note.info { background: #EFF6FF; border-color: rgba(59,130,246,.25); border-left-color: #3B82F6; }
  .case-page .live-note strong { display: block; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; color: #92400E; }
  .case-page .live-note.success strong { color: #166534; }
  .case-page .live-note.info strong { color: #1E40AF; }
  .case-page .live-note span { font-size: 11px; color: #78350F; line-height: 1.45; }
  .case-page .live-note.success span { color: #14532D; }
  .case-page .live-note.info span { color: #1E3A8A; }
  .case-page .live-arrow { display: flex; justify-content: center; align-items: center; color: var(--cari); font-size: 24px; opacity: .6; }
  .case-page .live-component-card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04); }
  .case-page .live-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
  .case-page .live-chip { padding: 6px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid #E0DDD9; color: var(--ink); background: #fff; }
  .case-page .live-chip.active { color: #fff; background: var(--cari); border-color: var(--cari); }
  .case-page .live-chip.outline { color: var(--cari); border-color: var(--cari); }
  .case-page .live-chip.disabled { color: #BBB; background: #F7F7F7; border-color: #EDECEA; }
  .case-page .live-prop-list { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .case-page .live-prop { background: #F7F7F7; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
  .case-page .live-prop b { display: block; font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--muted-2); margin-bottom: 3px; font-weight: 500; }
  .case-page .live-prop span { font-size: 10.5px; color: var(--ink); font-weight: 600; }
  
  /* --------------------------------------------------------------------------
     CS responsive
     -------------------------------------------------------------------------- */
  @media (max-width: 1080px) {
    .cs-two-col {
      grid-template-columns: 1fr;
      gap: 28px;
      margin-bottom: 32px;
    }
  
    .cs-col-label .about-section-title {
      max-width: 760px;
    }
  
    .cs-app-grid {
      grid-template-columns: 1fr 1fr;
    }
  
    .case-page .hero-collage {
      grid-template-columns: 1fr;
      min-height: 0;
      aspect-ratio: auto;
    }
  
    .case-page .hero-col {
      min-height: 400px;
      border-right: 0;
      border-bottom: 1px solid rgba(10, 10, 10, 0.06);
    }
  
    .case-page .hero-col:last-child { border-bottom: 0; }
  
    .case-page .brand-flex-wrap {
      grid-template-columns: 1fr;
      min-height: 0;
    }
  
    .case-page .brand-shared {
      flex-direction: row;
      justify-content: center;
    }
  
    .case-page .brand-shared-line {
      width: 60px;
      height: 1px;
    }
  
    .case-page .store-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .case-page .live-board-wrap {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 760px) {
    .case-page .case-hero {
      padding: 56px 0 64px;
    }
  
    .cs-hero-title {
      font-size: clamp(46px, 13vw, 68px);
      line-height: 0.96;
      letter-spacing: -0.055em;
    }
  
    .cs-hero-lede p {
      font-size: 19px;
    }
  
    .case-page .case-section {
      padding: 56px 0;
    }
  
    .cs-two-col {
      gap: 20px;
      margin-bottom: 24px;
    }
  
    .case-page .case-impact-grid {
      grid-template-columns: 1fr;
    }
  
    .cs-app-grid {
      grid-template-columns: 1fr;
    }
  
    .case-page .case-hero-visual,
    .case-page .case-visual-card {
      border-radius: 24px;
    }
  
    .case-page .frag-card,
    .case-page .comp-states-wrap,
    .case-page .store-states-wrap,
    .case-page .checkout-wrap,
    .case-page .brand-flex-wrap,
    .case-page .type-vars-wrap,
    .case-page .live-board-wrap {
      padding: 24px;
      border-radius: 24px;
    }
  
    .case-page .frag-grid,
    .case-page .type-vars-wrap {
      grid-template-columns: 1fr;
    }
  
    .case-page .store-grid {
      grid-template-columns: 1fr;
    }
  
    .case-page .hero-col {
      min-height: 340px;
      padding: 28px 22px;
    }
  }


  .cs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: color 150ms, gap 150ms;
  }
  .cs-back-link::after { display: none; }
  .cs-back-link:hover { color: var(--ink); gap: 10px; }

  .case-cover-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 40px;
    background: #f4f3f1;
  }
  
  .case-cover-figure img {
    display: block;
    width: 100%;
    height: auto;
  }

  .case-page .system-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 48px;
    padding: 28px;
    background: var(--work-cover-bg);
    border-radius: 28px;
    box-shadow:
      inset 0 0 0 1px rgba(10, 10, 10, 0.04),
      0 18px 48px rgba(10, 10, 10, 0.035);
  }
  
  .case-page .system-flow-step {
    min-height: 150px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
  }
  
  .case-page .system-flow-step span {
    display: block;
    margin-bottom: 28px;
    color: var(--muted-2);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  
  .case-page .system-flow-step strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
  }
  
  .case-page .system-flow-step p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
  }
  
  .case-page .system-flow-step.key {
    border-color: rgba(204, 0, 113, 0.22);
    box-shadow: inset 0 0 0 1px rgba(204, 0, 113, 0.08);
  }
  
  .case-page .system-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-2);
    font-size: 20px;
  }
  
  .case-page .system-decision-strip {
    margin-top: 28px;
  }
  
  @media (max-width: 1080px) {
    .case-page .system-flow {
      grid-template-columns: 1fr;
    }
  
    .case-page .system-flow-arrow {
      transform: rotate(90deg);
      min-height: 20px;
    }
  }

  /* Proof sections */
.case-page .proof-intro-section {
  padding-bottom: 56px;
}

.case-page .proof-section {
  padding-top: 72px;
}

.case-page .proof-section-header {
  margin-bottom: 40px;
}

.case-page .proof-visual {
  margin-top: 0;
}

.case-page .proof-visual-compact .comp-states-wrap {
  gap: 24px;
}

/* Store card annotations */
.case-page .proof-annotation-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.case-page .proof-annotation-row span {
  display: block;
  padding: 12px 14px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}

/* Checkout behaviour map */
.case-page .checkout-system-wrap {
  padding: clamp(28px, 4vw, 56px);
  background: var(--work-cover-bg);
}

.case-page .checkout-system-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 28px;
}

.case-page .checkout-flow-node {
  min-height: 180px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
}

.case-page .checkout-flow-node span {
  display: block;
  margin-bottom: 24px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .checkout-flow-node strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.case-page .checkout-flow-node p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.case-page .checkout-flow-node.success {
  border-color: rgba(34, 197, 94, 0.24);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.08);
}

.case-page .checkout-flow-node.error {
  max-width: 420px;
  border-color: rgba(217, 48, 42, 0.22);
  box-shadow: inset 0 0 0 1px rgba(217, 48, 42, 0.08);
}

.case-page .checkout-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 20px;
}

.case-page .checkout-failure-path {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}

.case-page .checkout-failure-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0.04),
    rgba(217, 48, 42, 0.25)
  );
}

@media (max-width: 1080px) {
  .case-page .checkout-system-flow {
    grid-template-columns: 1fr;
  }

  .case-page .checkout-flow-arrow {
    transform: rotate(90deg);
    min-height: 20px;
  }

  .case-page .checkout-failure-path {
    grid-template-columns: 1fr;
  }

  .case-page .checkout-failure-line {
    display: none;
  }

  .case-page .checkout-flow-node.error {
    max-width: none;
  }

  .case-page .proof-annotation-row {
    grid-template-columns: 1fr;
  }
}

.case-page .system-decision-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 48px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--work-cover-bg);
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.035);
}

.case-page .system-decision-panel {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
}

.case-page .system-decision-panel.is-strong {
  border-color: rgba(204, 0, 113, 0.22);
  box-shadow: inset 0 0 0 1px rgba(204, 0, 113, 0.08);
}

.case-page .system-decision-label {
  display: block;
  margin-bottom: 24px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-page .system-decision-panel strong {
  display: block;
  max-width: 420px;
  margin-bottom: 24px;
  color: var(--ink);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.case-page .system-token-list {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.case-page .system-token-list span {
  display: block;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
}

.case-page .system-decision-panel p {
  max-width: 460px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.case-page .system-decision-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 24px;
}

.case-page .system-outcome-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.case-page .system-outcome-strip div {
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.case-page .system-outcome-strip span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-page .system-outcome-strip strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

@media (max-width: 900px) {
  .case-page .system-decision-visual {
    grid-template-columns: 1fr;
  }

  .case-page .system-decision-arrow {
    transform: rotate(90deg);
    min-height: 24px;
  }

  .case-page .system-outcome-strip {
    grid-template-columns: 1fr;
  }
}


.case-page .story-statement {
  max-width: 980px;
  margin: 0 0 42px;
  color: var(--ink);
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.case-page .story-statement .trail {
  color: var(--muted);
}

.case-page .story-note {
  max-width: 860px;
  margin-top: 28px;
  padding: 26px 30px;
  color: var(--ink);
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.case-page .pressure-map {
  display: grid;
  grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr);
  gap: 24px;
  margin-top: 44px;
  padding: clamp(28px,4vw,48px);
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.04), 0 18px 48px rgba(10,10,10,.035);
}

.case-page .pressure-core {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(10,10,10,.07);
}

.case-page .pressure-core strong {
  display: block;
  color: var(--ink);
  font-size: clamp(28px,3.5vw,44px);
  line-height: 1;
  letter-spacing: -.055em;
}

.case-page .pressure-core span {
  display: block;
  max-width: 260px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.case-page .pressure-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.case-page .pressure-node {
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06);
}

.case-page .pressure-node b {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.case-page .pressure-node span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.case-page .risk-board {
  margin-top: 44px;
  padding: clamp(28px,4vw,48px);
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.04), 0 18px 48px rgba(10,10,10,.035);
}

.case-page .risk-board-title {
  margin-bottom: 22px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-page .risk-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}

.case-page .risk-item {
  min-height: 150px;
  padding: 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06);
}

.case-page .risk-item .old {
  display: block;
  margin-bottom: 14px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1.35;
}

.case-page .risk-item strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.case-page .decision-strip {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 44px;
}

.case-page .decision-card {
  padding: 26px;
  background: var(--card-bg);
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06);
}

.case-page .decision-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-page .decision-card strong {
  display: block;
  color: var(--ink);
  font-size: clamp(20px,2vw,28px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.case-page .proof-preview-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin-top: 44px;
}

.case-page .proof-preview-card {
  padding: 28px;
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06);
}

.case-page .proof-preview-card h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.case-page .proof-preview-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.case-page .impact-compact {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

@media (max-width: 1080px) {
  .case-page .pressure-map,
  .case-page .decision-strip,
  .case-page .proof-preview-grid,
  .case-page .impact-compact {
    grid-template-columns: 1fr;
  }
  .case-page .risk-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .case-page .pressure-map,
  .case-page .risk-board {
    border-radius: 24px;
    padding: 24px;
  }
  .case-page .pressure-grid,
  .case-page .risk-grid {
    grid-template-columns: 1fr;
  }
}

/* Visual-first case study pass */
.case-page .case-section { padding: 64px 0; }
.case-page .cs-col-body .about-section-body { max-width: 640px; }
.case-page .proof-section-header { margin-bottom: 8px; }
.case-page .case-visual-caption { max-width: 620px; font-size: 13px; }
.case-page .story-statement { max-width: 1040px; }



.case-page .system-flow-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 44px;
  padding: 24px;
  background: var(--work-cover-bg);
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.035);
}

.case-page .system-flow-strip > div {
  min-width: 0;
  padding: 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.case-page .system-flow-strip span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-page .system-flow-strip strong {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.case-page .system-flow-strip code {
  display: inline-flex;
  width: fit-content;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.case-page .system-flow-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  color: var(--muted-2) !important;
  font-family: "Inter Tight", sans-serif !important;
  font-size: 24px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 980px) {
  .case-page .system-flow-strip {
    grid-template-columns: 1fr;
  }

  .case-page .system-flow-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}


.case-page .case-visual {
  margin-top: 48px;
}

.case-page .case-visual--contained {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.case-page .case-visual--contained img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--work-cover-bg);
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.04),
    0 18px 48px rgba(10, 10, 10, 0.04);
}

.case-page .case-visual figcaption {
  max-width: 760px;
  margin-top: 18px;
  padding-left: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}


/* ============================================================
   STANDALONE PREVIEW STYLES
   Replicates a minimal slice of global.css so this file renders
   on its own. When ready, extract the .designsys-* CSS at the
   bottom of this <style> block into global.css.
   ============================================================ */
 
:root{
  --ink:#0A0A0A;
  --ink-2:#1F1F1F;
  --muted:#72706E;
  --muted-2:#9D9B98;
  --line:rgba(10,10,10,.06);
  --line-strong:rgba(10,10,10,.1);
  --bg:#FFFFFF;
  --card-bg:#F7F7F7;
  --work-cover-bg:#F4F3F1;
  --work-cover-shadow-sm:rgba(10,10,10,.10);
  --work-cover-shadow-md:rgba(10,10,10,.12);
  --work-cover-shadow-lg:rgba(10,10,10,.14);
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
}
 
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;padding:0px 0}
img,svg{display:block}
a{color:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 32px}
 
.feature-case{width:100%;overflow:hidden}
.feature-case-body{padding:22px 8px 0}
.feature-case-meta{display:flex;align-items:center;gap:14px;margin-bottom:12px;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.feature-case-meta>span:first-child{color:var(--muted-2);text-transform:none}
.feature-case-meta .sep{width:28px;height:1px;background:var(--muted-2);opacity:.65}
.feature-case-title{max-width:1100px;margin-bottom:10px;color:var(--ink);font-size:clamp(34px,3.3vw,48px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
.feature-case-description{max-width:1180px;margin-bottom:18px;color:var(--muted);font-size:clamp(16px,1.45vw,19px);font-weight:500;line-height:1.45;letter-spacing:-.018em}
.feature-case-impact{display:grid;grid-template-columns:280px 280px;gap:40px;width:100%;margin-bottom:18px;padding:16px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.feature-case-impact-item strong{display:block;margin-bottom:5px;color:var(--ink);font-size:32px;font-weight:700;line-height:1;letter-spacing:-.04em}
.feature-case-impact-item span{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.feature-case-impact-designsys{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:920px}
.feature-case-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.card-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;color:#fff;background:var(--ink);border-radius:10px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s ease,transform .2s ease}
.card-cta:hover{background:var(--ink-2);transform:translateY(-1px)}
.card-cta-arrow{display:inline-block;font-size:14px;transition:transform .2s ease}
.card-cta:hover .card-cta-arrow{transform:translateX(4px)}
.feature-case-tags{display:flex;gap:8px;flex-wrap:wrap;list-style:none}
.feature-case-tags li{padding:7px 12px;color:var(--muted);background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;font-size:12px;font-weight:500}
 
 
/* ============================================================
   DESIGN SYSTEM CASE — cover plate
   This is the part to extract into global.css as section 8F.
   ============================================================ */
 
.designsys-feature-plate{
  position:relative;
  height:472px;
  overflow:hidden;
  background:var(--work-cover-bg);
  border-radius:32px;
}
 
.designsys-feature-stack{
  position:relative;
  width:100%;
  height:100%;
}
 
.designsys-tokens-art,
.designsys-states-art,
.designsys-brand-art,
.designsys-device-art{
  position:absolute;
  height:auto;
}
 
/* Card 1 — Token flow (top-left, primary) */
.designsys-tokens-art{
  top:64px;
  left:64px;
  z-index:1;
  width:240px;
  transform:rotate(-7deg);
  filter:drop-shadow(0 24px 44px var(--work-cover-shadow-md));
}
 
/* Card 2 — Component states (centre, primary) */
.designsys-states-art{
  top:96px;
  left:240px;
  z-index:2;
  width:280px;
  transform:rotate(3deg);
  filter:drop-shadow(0 28px 52px var(--work-cover-shadow-md));
}
 
/* Card 3 — Brand-layer swap (validation footnote, smaller) */
.designsys-brand-art{
  bottom:48px;
  left:140px;
  z-index:3;
  width:240px;
  transform:rotate(-2deg);
  filter:drop-shadow(0 24px 44px var(--work-cover-shadow-md));
}
 
/* Phone artwork (right) */
.designsys-device-art{
  top:68px;
  right:180px;
  z-index:4;
  width:328px;
  filter:drop-shadow(0 30px 54px var(--work-cover-shadow-lg));
}
 
.designsys-tokens-art img,
.designsys-states-art img,
.designsys-brand-art img,
.designsys-device-art img{
  width:100%;
  height:auto;
}
 
 
/* Hover interaction */
.feature-case-designsys .designsys-tokens-art,
.feature-case-designsys .designsys-states-art,
.feature-case-designsys .designsys-brand-art,
.feature-case-designsys .designsys-device-art{
  transition:transform 420ms var(--ease-out-soft),filter 420ms var(--ease-out-soft);
}
.feature-case-designsys .designsys-feature-plate{
  transition:box-shadow 420ms var(--ease-out-soft);
}
 
@media (hover:hover) and (pointer:fine){
  .feature-case-designsys .designsys-feature-plate:hover{
    box-shadow:0 24px 72px -56px rgba(10,10,10,.18);
  }
  .feature-case-designsys .designsys-feature-plate:hover .designsys-tokens-art{
    transform:translate(-8px,-10px) rotate(-8deg);
    filter:drop-shadow(0 34px 54px var(--work-cover-shadow-lg));
  }
  .feature-case-designsys .designsys-feature-plate:hover .designsys-states-art{
    transform:translate(8px,-8px) rotate(4deg);
    filter:drop-shadow(0 38px 60px rgba(10,10,10,.16));
  }
  .feature-case-designsys .designsys-feature-plate:hover .designsys-brand-art{
    transform:translate(-6px,8px) rotate(-3deg);
    filter:drop-shadow(0 32px 52px var(--work-cover-shadow-lg));
  }
  .feature-case-designsys .designsys-feature-plate:hover .designsys-device-art{
    transform:translateX(-10px) translateY(-4px);
    filter:drop-shadow(0 38px 56px rgba(10,10,10,.14)) drop-shadow(0 58px 92px rgba(10,10,10,.16));
  }
}
 
 
/* Responsive */
@media (max-width:1180px){
  .feature-case-impact-designsys{gap:28px 40px}
}
 
@media (max-width:900px){
  .designsys-feature-plate{height:440px}
  .designsys-tokens-art,.designsys-states-art,.designsys-brand-art{display:none}
  .designsys-device-art{
    top:44px;
    right:auto;
    left:50%;
    width:min(78vw,360px);
    transform:translateX(-50%);
    filter:drop-shadow(0 28px 48px var(--work-cover-shadow-md));
  }
}
 
@media (max-width:760px){
  .feature-case-impact{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .feature-case-impact-designsys{grid-template-columns:1fr;gap:20px}
  .feature-case-footer{flex-direction:column;align-items:flex-start}
}
 
@media (max-width:600px){
  .designsys-feature-plate{height:390px;border-radius:24px}
  .designsys-device-art{top:38px;width:min(82vw,320px)}
} 

.feature-case-impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
  margin-bottom: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

@media (max-width: 900px) {
  .feature-case-impact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .feature-case-impact {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.feature-case-impact {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 72px;
  width: 100%;
  margin-bottom: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

/* ==========================================================================
   Work card layout fix
   Keeps metrics, CTA and tags aligned inside featured case cards.
   ========================================================================== */

   .feature-case-impact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
    max-width: none;
    margin-bottom: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  
  .feature-case-impact-homefeed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
  
  .feature-case-impact-assist,
  .feature-case-impact-campaign {
    gap: 40px;
  }
  
  .feature-case-impact-assist .feature-case-impact-item:nth-child(2),
  .feature-case-impact-campaign .feature-case-impact-item:nth-child(2) {
    min-width: 0;
  }
  
  .feature-case-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .feature-case-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    list-style: none;
  }
  
  @media (max-width: 900px) {
    .feature-case-impact,
    .feature-case-impact-homefeed {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
    }
  }
  
  @media (max-width: 760px) {
    .feature-case-impact,
    .feature-case-impact-homefeed {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px 0;
    }
  
    .feature-case-footer {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .feature-case-tags {
      justify-content: flex-start;
      margin-left: 0;
    }
  }

  /* Design System work-card cover, image-based */
.designsys-feature-cover {
  position: relative;
  width: 100%;
  height: 448px;
  overflow: hidden;
  margin: 0;
  background: var(--work-cover-bg);
  border-radius: 32px;
}

.designsys-feature-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   8E. Featured case cover, Cari Unlimited
   ========================================================================== */

   .feature-case-unlimited .unlimited-feature-plate {
    position: relative;
    height: 448px;
    overflow: hidden;
    background: var(--work-cover-bg);
    border-radius: 32px;
  }
  
  .feature-case-unlimited .unlimited-feature-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .feature-case-impact-unlimited {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    max-width: 980px;
  }

  .feature-case-campaign .campaign-feature-plate,
.feature-case-orderhelp .feature-case-plate,
.feature-case-assist .assist-feature-plate,
.feature-case-homefeed .homefeed-feature-plate,
.feature-case-unlimited .unlimited-feature-plate {
  transition: box-shadow 420ms var(--ease-out-soft);
}

/* ----- Cari Unlimited ----- */

.feature-case-unlimited .unlimited-feature-plate:hover {
  box-shadow: 0 24px 72px -56px rgba(10, 10, 10, 0.18);
}@media (max-width: 900px) {
  .feature-case-unlimited .unlimited-feature-plate {
    height: 440px;
  }
}

@media (max-width: 600px) {
  .feature-case-unlimited .unlimited-feature-plate {
    height: 390px;
    border-radius: 24px;
  }
}

/* Impact cards, calmer hierarchy */
.case-section .case-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.case-section .case-impact-item {
  min-height: 220px;
  padding: clamp(2rem, 2.6vw, 2.75rem);
  border-radius: 28px;
  background: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.case-section .case-impact-item strong {
  display: block;
  max-width: 13ch;
  margin-bottom: 1rem;

  font-size: clamp(1.75rem, 2.25vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.case-section .case-impact-item span {
  display: block;
  max-width: 34ch;

  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.55);
}

/* Responsive */
@media (max-width: 980px) {
  .case-section .case-impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .case-section .case-impact-grid {
    grid-template-columns: 1fr;
  }

  .case-section .case-impact-item {
    min-height: auto;
  }
}

.case-section .case-impact-grid .case-impact-item strong {
  font-size: 44px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}