/* ═══════════════════════════════════════════
   OWN360 HOMEPAGE-SPECIFIC STYLES
   Hero, sections, app store, animations
═══════════════════════════════════════════ */

/* ── Improved hero stat row ── */
.hero-stats {
  display: flex; gap: 0; justify-content: center; flex-wrap: wrap;
  margin: 56px auto 0; max-width: 760px;
  border: 1px solid var(--rule2); background: var(--cream2);
  backdrop-filter: blur(8px); opacity: 0;
  animation: fadeUp .8s ease forwards 1.1s;
}
[data-theme="dark"] .hero-stats {
  background: rgba(232,228,216,.06);
  border-color: var(--rule);
  backdrop-filter: blur(12px);
}
.hero-stat {
  flex: 1; min-width: 140px; padding: 18px 24px;
  text-align: center; border-right: 1px solid var(--rule2);
}
[data-theme="dark"] .hero-stat { border-right-color: var(--rule); }
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
  font-family: 'Playfair Display', serif; font-size: 32px; line-height: 1;
  color: var(--forest); display: block; margin-bottom: 4px;
}
.hero-stat-lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}

/* ── Section divider accent ── */
.section-divider {
  width: 48px; height: 2px; background: var(--scarlet);
  margin: 0 auto 36px; display: block;
}
.section-divider.green { background: var(--forest); }

/* ── Back-to-top button ── */
#back-to-top {
  position: fixed; bottom: 28px; left: 28px; z-index: 200;
  width: 40px; height: 40px;
  background: var(--cream2); border: 1px solid var(--rule);
  color: var(--faint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s; opacity: 0; pointer-events: none;
  font-size: 16px;
}
#back-to-top.visible { opacity: 1; pointer-events: all; }
#back-to-top:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); }
[data-theme="dark"] #back-to-top { background: var(--cream2); border-color: var(--rule); }
[data-theme="dark"] #back-to-top:hover { background: var(--forest); color: #0e100d; }

/* ── Section fade-in entrance ── */
.section-enter { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.section-enter.visible { opacity: 1; transform: none; }

/* ── Improved success stat pulse ── */
@keyframes stat-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 24px rgba(27,94,56,.35); }
}
.success-stat { animation: stat-pulse 4s ease-in-out infinite; }
[data-theme="dark"] .success-stat { animation: none; text-shadow: 0 0 30px rgba(74,222,128,.25); }

/* ── Nav scroll state ── */
[data-theme="dark"] 
/* All theme-sensitive properties transition smoothly — ONLY during theme switch */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color var(--theme-duration) ease,
              border-color var(--theme-duration) ease,
              color var(--theme-duration) ease,
              box-shadow var(--theme-duration) ease !important;
}
/* Never transition transforms during theme switch (breaks rAF animations) */
html.theme-transitioning .orb,
html.theme-transitioning .ring,
html.theme-transitioning .ticker,
html.theme-transitioning .logos-track {
  transition: none !important;
}


/* ── HOMEPAGE ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 40px 80px;overflow:hidden;z-index:2;}
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(110px);animation:drift 9s ease-in-out infinite;}
.orb-1{display:none;}
.orb-2{display:none;}
.orb-3{display:none;}
@keyframes drift{0%,100%{transform:translate(0,0)scale(1);}33%{transform:translate(25px,-18px)scale(1.04);}66%{transform:translate(-18px,25px)scale(0.96);}}

.ring-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(181,58,42,.04);}
.ring-1{width:750px;height:750px;animation:spin 28s linear infinite;}
.ring-2{width:1050px;height:1050px;animation:spin 48s linear infinite reverse;border-color:rgba(27,94,56,.03);}
.ring-3{width:1350px;height:1350px;animation:spin 68s linear infinite;border-color:rgba(123,47,255,.04);}
.ring::before{content:'';position:absolute;width:5px;height:5px;background:var(--scarlet);border-radius:50%;top:0;left:50%;transform:translateX(-50%);box-shadow:0 0 12px var(--scarlet);}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

.hero-content{position:relative;z-index:2;max-width:1100px;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--cobalt);margin-bottom:28px;display:inline-flex;align-items:center;gap:12px;opacity:0;animation:fadeUp .8s ease forwards .3s;}
.eyebrow::before,.eyebrow::after{content:'';display:block;width:36px;height:1px;background:var(--cobalt);opacity:.5;}

.hero-headline{font-family:'Playfair Display',Georgia,serif;font-size:clamp(64px,11vw,148px);line-height:.92;margin-bottom:8px;opacity:0;animation:fadeUp .8s ease forwards .5s;}
.line-magenta{color:var(--scarlet);display:block;font-style:italic;}
.line-green{color:var(--forest);display:block;}

/* neon-flicker removed for light theme */
/* green-pulse removed */

.hero-sub{font-size:clamp(18px,2vw,23px);color:var(--faint);line-height:1.7;max-width:720px;margin:28px auto 50px;opacity:0;animation:fadeUp .8s ease forwards .7s;}
.hero-sub strong{color:var(--ink);font-weight:700;}
.hero-sub .mg{color:var(--scarlet);font-weight:700;}
.hero-sub .gn{color:var(--forest);font-weight:700;}

.hero-cta-group{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease forwards .9s;}
.btn-primary{padding:16px 44px;background:var(--forest);color:var(--cream);font-family:'IBM Plex Sans',sans-serif;font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;position:relative;overflow:hidden;transition:box-shadow .3s;text-decoration:none;display:inline-block;}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--inka22),transparent);transform:translateX(-100%);transition:transform .5s;}
.btn-primary:hover::before{transform:translateX(100%);}
.btn-primary:hover{box-shadow:0 0 50px rgba(27,94,56,.12);}
.btn-ghost{padding:16px 44px;background:transparent;color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule2);cursor:pointer;transition:background .18s,border-color .3s,color .3s;text-decoration:none;display:inline-block;}
.btn-ghost:hover{background:rgba(27,94,56,.06);border-color:var(--forest);color:var(--forest);}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* HERO ILLUSTRATION */
.hero-illustration{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:500px;opacity:.12;pointer-events:none;}

/* TICKER */
.ticker-wrap{position:relative;z-index:2;padding:16px 0;background:rgba(181,58,42,.03);border-top:1px solid rgba(181,58,42,.08);border-bottom:1px solid rgba(181,58,42,.08);overflow:hidden;}
.ticker{display:flex;animation:ticker 30s linear infinite;width:max-content;}
.ticker-item{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--scarlet);padding:0 40px;white-space:nowrap;opacity:.75;}
.ticker-item span{color:var(--forest);margin:0 10px;font-weight:700;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTION COMMON */
.section-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--cobalt);margin-bottom:18px;display:block;}
/* section-headline-placeholder */
.section-body{font-size:19px;color:var(--faint);max-width:600px;margin:0 auto 70px;line-height:1.75;}

/* ─── TRANSFORMATION VISUAL ─── */
.transform-section{position:relative;z-index:2;padding:120px 60px;text-align:center;overflow:hidden;}

.transform-viz{max-width:1000px;margin:70px auto 0;position:relative;}
.transform-row{display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:center;margin-bottom:3px;}
.transform-before{background:rgba(181,58,42,.04);border:1px solid rgba(181,58,42,.08);padding:20px 24px;display:flex;align-items:center;gap:14px;transition:all .3s;}
.transform-before:hover{background:rgba(181,58,42,.07);}
.transform-arrow{display:flex;align-items:center;justify-content:center;background:var(--cream3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.transform-after{background:rgba(27,94,56,.04);border:1px solid rgba(27,94,56,.07);padding:20px 24px;display:flex;align-items:center;gap:14px;transition:all .3s;}
.transform-after:hover{background:rgba(27,94,56,.06);}
.t-logo{width:32px;height:32px;flex-shrink:0;}
.t-name{font-weight:700;font-size:16px;color:var(--ink);}
.t-cost{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--scarlet);letter-spacing:.05em;margin-top:2px;}
.t-own{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--forest);letter-spacing:.05em;margin-top:2px;}

/* ─── GRAVEYARD ─── */

.logo-graveyard{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;max-width:1200px;margin:0 auto;position:relative;}
.logo-graveyard::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 28%,var(--cream) 80%);pointer-events:none;}
.app-card{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--cream2);border:1px solid var(--rule);transition:all .35s;cursor:none;overflow:hidden;padding:16px;}
.app-logo-img{width:40px;height:40px;flex-shrink:0;}
.app-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(181,58,42,.07),transparent);opacity:0;transition:opacity .35s;}
.app-card:hover{border-color:rgba(181,58,42,.35);background:rgba(181,58,42,.04);transform:scale(1.04);z-index:2;}
.app-card:hover::before{opacity:1;}
.app-card:hover .app-logo-img,.app-card:hover svg.app-logo-img{filter:grayscale(1) brightness(.18);opacity:.3;}
.app-card:hover .app-strike{opacity:1;transform:scaleX(1);}
.app-card:hover .app-replaced{opacity:1;transform:translateY(0);font-size:10px;}
svg.app-logo-img,.app-logo-img{width:34px;height:34px;object-fit:contain;transition:filter .35s,opacity .35s;display:block;}
.app-name{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;line-height:1.2;text-align:center;}
.app-strike{position:absolute;height:2px;background:var(--scarlet);width:70%;top:calc(50% - 8px);transform:scaleX(0);transform-origin:left;transition:transform .35s,opacity .35s;opacity:0;box-shadow:0 0 10px var(--scarlet);}
.app-replaced{position:absolute;bottom:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--forest);letter-spacing:.05em;opacity:0;transition:opacity .35s,transform .35s;transform:translateY(4px);}
.stack-svg{width:20px;height:20px;display:inline-block;vertical-align:middle;opacity:.38;filter:grayscale(1);flex-shrink:0;}

/* ─── SUCCESS STORIES ─── */
.success-section{position:relative;z-index:2;padding:120px 60px;background:linear-gradient(to bottom,transparent,rgba(27,94,56,.02),transparent);}
.success-intro{text-align:center;margin-bottom:80px;}
.success-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1100px;margin:0 auto 60px;}
.success-card{background:var(--cream2);border:1px solid var(--rule);padding:40px 32px;position:relative;overflow:hidden;transition:border-color .3s;}
.success-card:hover{border-color:rgba(27,94,56,.15);}
.success-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--forest),transparent);opacity:.5;}
.success-logo-area{height:48px;display:flex;align-items:center;margin-bottom:22px;}
.success-logo-text{
  font-family:'Bebas Neue','IBM Plex Mono',monospace;
  font-size:36px; letter-spacing:.06em;
  line-height:1; white-space:nowrap;
  display:block;
}
.success-logo-sm{ font-size:26px; }
.success-company{font-family:'Playfair Display',sans-serif;font-size:32px;color:var(--ink);letter-spacing:.05em;}
.success-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);margin-bottom:14px;display:block;}
.success-stat{font-family:'Playfair Display',sans-serif;font-size:56px;line-height:1;color:var(--forest);margin-bottom:10px;display:block;}
.success-desc{font-size:16px;color:var(--faint);line-height:1.75;}
.success-desc strong{color:var(--ink);}

.success-quote{max-width:900px;margin:0 auto;padding:50px 60px;border:1px solid rgba(27,94,56,.12);background:rgba(27,94,56,.02);text-align:center;position:relative;}
.success-quote::before{content:'\201C';font-family:'Playfair Display',sans-serif;font-size:160px;line-height:.8;color:rgba(27,94,56,.06);position:absolute;top:10px;left:20px;}
.success-quote p{font-size:22px;color:var(--ink);line-height:1.7;font-style:italic;position:relative;z-index:1;}
.success-quote cite{display:block;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.2em;color:var(--forest);font-style:normal;}

/* ─── APP STORE ─── */
.appstore-section{position:relative;z-index:2;padding:120px 60px;overflow:hidden;}
.appstore-intro{text-align:center;}

/* App store illustration */
.appstore-window{max-width:1000px;margin:70px auto 0;background:var(--cream2);border:1px solid rgba(181,58,42,.15);border-radius:0;position:relative;overflow:hidden;}
.appstore-window::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--scarlet),transparent);}
.appstore-titlebar{display:flex;align-items:center;gap:10px;padding:14px 20px;background:rgba(181,58,42,.04);border-bottom:1px solid rgba(181,58,42,.08);}
.appstore-dot{width:12px;height:12px;border-radius:50%;}
.appstore-dot.r{background:#ff5f56;}
.appstore-dot.y{background:#ffbd2e;}
.appstore-dot.g{background:#27c93f;}
.appstore-title{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.15em;color:var(--faint);margin-left:auto;margin-right:auto;}
.appstore-body{display:grid;grid-template-columns:200px 1fr;min-height:400px;}
.appstore-sidebar{border-right:1px solid rgba(181,58,42,.07);padding:20px 0;}
.sidebar-item{padding:12px 20px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;cursor:pointer;transition:all .2s;border-left:2px solid transparent;}
.sidebar-item.active{color:var(--scarlet);background:rgba(181,58,42,.06);border-left-color:var(--scarlet);}
.sidebar-item:hover{color:var(--ink);background:var(--cream2);}
.appstore-grid{padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-content:start;background:var(--cream3);}
.store-app{background:var(--cream3);border-right:1px solid var(--rule2);border-bottom:1px solid var(--rule2);padding:20px 16px 16px;min-height:160px;display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;transition:background .18s;cursor:pointer;position:relative;}
.store-app:hover{background:var(--cream2);}
.store-app-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;}
.store-app-name{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:800;color:var(--ink);}
.store-app-cat{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--faint);letter-spacing:.08em;}
.store-app-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;padding:3px 7px;font-weight:700;letter-spacing:.08em;}
.store-app-badge.owned{background:var(--forest);color:var(--cream);}
.store-app-badge.new{background:var(--scarlet);color:#fff;}

/* ─── SERVICES ─── */
.services-section{position:relative;z-index:2;padding:120px 60px;text-align:center;}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:1000px;margin:70px auto 0;}
.service-card{background:var(--cream2);border:1px solid var(--rule);padding:60px 50px;text-align:left;position:relative;overflow:hidden;transition:border-color .3s;}
.service-card:hover{border-color:rgba(181,58,42,.18);}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--scarlet),transparent);opacity:0;transition:opacity .3s;}
.service-card:hover::after{opacity:.5;}
.service-num{font-family:'Playfair Display',sans-serif;font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(181,58,42,.07);position:absolute;right:20px;bottom:-10px;pointer-events:none;}
.service-icon-wrap{width:60px;height:60px;border:1px solid rgba(181,58,42,.15);background:rgba(181,58,42,.04);display:flex;align-items:center;justify-content:center;margin-bottom:28px;}
.service-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--scarlet);margin-bottom:14px;display:block;}
.service-title{font-family:'Playfair Display',sans-serif;font-size:clamp(32px,3.5vw,48px);line-height:1.05;margin-bottom:18px;}
.service-desc{font-size:17px;color:var(--faint);line-height:1.85;max-width:380px;}
.service-desc strong{color:var(--ink);}
.service-features{margin-top:24px;display:flex;flex-direction:column;gap:10px;}
.sf{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--faint);}
.sf-dot{width:5px;height:5px;border-radius:50%;background:var(--forest);flex-shrink:0;margin-top:6px;}

/* ─── CAPEX / OPEX ─── */
.capex-section{position:relative;z-index:2;padding:100px 60px;}
.capex-inner{max-width:1100px;margin:0 auto;}
.capex-header{text-align:center;margin-bottom:80px;}

.capex-visual{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:60px;}
.capex-side{padding:44px 40px;border:1px solid var(--rule);}
.capex-side.opex{background:rgba(181,58,42,.03);border-color:rgba(181,58,42,.15);border-right:none;}
.capex-side.capex{background:rgba(27,94,56,.03);border-color:rgba(27,94,56,.15);}
.capex-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:20px;display:block;opacity:.8;}
.capex-side.opex .capex-tag{color:var(--scarlet);}
.capex-side.capex .capex-tag{color:var(--forest);}
.capex-number{font-family:'Playfair Display',sans-serif;font-size:clamp(48px,5.5vw,72px);line-height:1;margin-bottom:8px;display:block;letter-spacing:-.02em;}
.capex-side.opex .capex-number{color:var(--scarlet);}
.capex-side.capex .capex-number{color:var(--forest);}
.capex-desc{font-size:14px;color:var(--faint);line-height:1.75;margin-bottom:4px;}
.capex-desc strong{color:var(--ink2);}
.capex-list{margin-top:20px;display:flex;flex-direction:column;gap:2px;}
.cl{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink2);padding:9px 12px;border-bottom:1px solid transparent;line-height:1.5;}
.cl:last-child{border-bottom:none;}
.capex-side.opex .cl{border-bottom-color:rgba(181,58,42,.06);}
.capex-side.capex .cl{border-bottom-color:rgba(27,94,56,.06);}
.cl-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.capex-side.opex .cl-dot{background:var(--scarlet);}
.capex-side.capex .cl-dot{background:var(--forest);}

/* SVG Illustration: cash flow */
.capex-chart{max-width:700px;margin:0 auto;padding:40px;border:1px solid var(--rule);background:var(--cream2);}
.capex-chart-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--forest);text-align:center;margin-bottom:20px;text-transform:uppercase;}

/* ─── MANIFESTO ─── */
.mission-section{position:relative;z-index:2;padding:0 0 120px;overflow:hidden;}
.mission-banner{background:linear-gradient(135deg,rgba(27,94,56,.05),rgba(123,47,255,.07));border-top:1px solid rgba(27,94,56,.1);border-bottom:1px solid rgba(27,94,56,.1);padding:80px 60px;text-align:center;margin-bottom:80px;}
.mission-headline{font-family:'Playfair Display',sans-serif;font-size:clamp(44px,6.5vw,86px);line-height:.95;margin-bottom:28px;}
.mission-headline .g{color:var(--forest);}
.mission-body{font-size:21px;color:var(--faint);max-width:800px;margin:0 auto;line-height:1.8;}
.mission-body strong{color:var(--ink);}

.mission-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:1100px;margin:0 auto;padding:0 60px;}
.pillar{background:var(--cream2);border:1px solid var(--rule);padding:50px 40px;position:relative;overflow:hidden;transition:border-color .3s;}
.pillar:hover{border-color:rgba(27,94,56,.15);}
.pillar-num{font-family:'Playfair Display',sans-serif;font-size:100px;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(27,94,56,.07);position:absolute;bottom:-10px;right:20px;pointer-events:none;}
.pillar-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--forest);margin-bottom:14px;display:block;}
.pillar-title{font-family:'Playfair Display',sans-serif;font-size:clamp(26px,2.6vw,38px);line-height:1.05;margin-bottom:14px;}
.pillar-desc{font-size:16px;color:var(--faint);line-height:1.8;}
.pillar-desc strong{color:var(--ink);}

/* ─── TRUTHS ─── */
.truths{position:relative;z-index:2;padding:120px 60px;}
.truths-inner{max-width:1000px;margin:60px auto 0;border-left:2px solid rgba(27,94,56,.12);}
.truth-item{border-bottom:1px solid var(--cream2);padding:56px 0 56px 60px;position:relative;}
.truth-item::before{content:'';position:absolute;left:-5px;top:62px;width:8px;height:8px;background:var(--forest);border-radius:50%;box-shadow:0 0 18px var(--forest);}
.truth-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;color:var(--cobalt);text-transform:uppercase;margin-bottom:12px;display:block;}
.truth-title{font-family:'Playfair Display',sans-serif;font-size:clamp(32px,4vw,56px);line-height:1;margin-bottom:14px;}
.truth-desc{font-size:17px;color:var(--faint);line-height:1.85;max-width:580px;}
.truth-desc strong{color:var(--ink);}

/* ─── HOW ─── */
.how{position:relative;z-index:2;padding:80px 60px 120px;text-align:center;}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1100px;margin:70px auto 0;}
.how-card{background:var(--cream2);border:1px solid var(--rule);padding:48px 36px;text-align:left;position:relative;overflow:hidden;transition:border-color .3s;}
.how-card:hover{border-color:rgba(27,94,56,.15);}
.how-card::before{content:attr(data-num);position:absolute;top:14px;right:18px;font-family:'Playfair Display',sans-serif;font-size:80px;color:rgba(27,94,56,.04);line-height:1;}
.how-icon{font-size:38px;margin-bottom:28px;display:block;}
.how-title{font-family:'IBM Plex Sans',sans-serif;font-size:21px;font-weight:800;margin-bottom:14px;}
.how-desc{font-size:16px;color:var(--faint);line-height:1.8;}

/* ─── STACK ─── */
.stack-section{position:relative;z-index:2;padding:60px 60px 120px;background:linear-gradient(to bottom,transparent,rgba(27,94,56,.02),transparent);}
.stack-container{max-width:1000px;margin:70px auto 0;}
.stack-layer{display:flex;align-items:stretch;margin-bottom:3px;}
.stack-label{width:180px;padding:18px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;flex-shrink:0;justify-content:flex-end;}
.stack-bar{flex:1;padding:18px 28px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;background:rgba(27,94,56,.03);border:1px solid rgba(27,94,56,.06);transition:all .3s;cursor:pointer;}
.stack-bar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--forest);}
.stack-bar:hover{background:rgba(27,94,56,.06);}
.stack-bar-text{font-size:15px;font-weight:700;color:var(--ink);flex:1;}
.stack-logos{display:flex;gap:5px;align-items:center;}
.stack-owned{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--forest);letter-spacing:.1em;background:rgba(27,94,56,.07);padding:4px 9px;white-space:nowrap;}
.stack-total{text-align:center;margin-top:40px;padding:40px;border:1px solid rgba(27,94,56,.15);background:rgba(27,94,56,.03);}
.stack-total-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--forest);margin-bottom:10px;}
.stack-total-num{font-family:'Playfair Display',sans-serif;font-size:48px;line-height:1.1;color:var(--forest);}
.stack-total-desc{font-size:15px;color:var(--faint);margin-top:10px;line-height:1.65;}
.stack-total-desc strong{color:var(--ink);}

/* ─── COST / EV ─── */
.cost-section{position:relative;z-index:2;padding:80px 60px 60px;text-align:center;}
.cost-display{font-family:'Playfair Display',sans-serif;font-size:clamp(80px,14vw,190px);line-height:1;color:var(--scarlet);margin:8px 0 0;display:block;letter-spacing:-.03em;}
.cost-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase;display:block;margin-bottom:0;}
.cost-breakdown{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;max-width:900px;margin:32px auto 0;}
.cost-pill{background:rgba(181,58,42,.04);border:1px solid rgba(181,58,42,.14);padding:6px 13px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--scarlet);white-space:nowrap;}

/* ─── FINAL CTA ─── */
.final-cta{position:relative;z-index:2;padding:160px 60px;text-align:center;overflow:hidden;}
.final-cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(27,94,56,.07) 0%,transparent 70%);}
.final-headline{font-family:'Playfair Display',sans-serif;line-height:1;margin-bottom:40px;position:relative;}
.final-stop{font-size:clamp(32px,4.5vw,68px);display:block;color:var(--scarlet);text-shadow:0 0 2px rgba(100,20,50,.25);animation:dead-flicker 9s infinite;}
.final-own{font-size:clamp(64px,9vw,136px);display:block;color:var(--forest)margin-top:-.05em;}

/* ── Final CTA — always dark, both themes ── */
/* ── Final CTA: light mode uses site cream palette ── */

.fcta-lines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    transparent, transparent 27px,
    var(--cra03) 27px, var(--cra03) 28px);
}
.fcta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 40%,
    rgba(27,94,56,.14) 0%, transparent 70%);
}
.fcta-inner {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
}
.fcta-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--faint); display: block; margin-bottom: 24px;
}
.fcta-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 7vw, 96px); font-weight: 900;
  line-height: .92; letter-spacing: -.03em;
  color: var(--ink2); margin-bottom: 28px;
}
.fcta-headline em {
  color: var(--forest); font-style: italic;
}
.fcta-body {
  font-size: 18px; color: var(--faint);
  line-height: 1.75; max-width: 540px;
  margin: 0 auto 48px; font-weight: 300;
}
.fcta-btns {
  display: flex; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.fcta-btn-primary {
  display: inline-block; padding: 16px 40px;
  background: var(--forest); color: var(--cream);
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: background .18s, box-shadow .18s;
}
.fcta-btn-primary:hover {
  background: var(--forest2);
  box-shadow: 0 4px 24px rgba(27,94,56,.5);
}
.fcta-btn-ghost {
  display: inline-block; padding: 15px 36px;
  background: transparent; color: var(--ink2);
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--rule); text-decoration: none;
  transition: border-color .18s, color .18s;
}
.fcta-btn-ghost:hover {
  border-color: var(--forest);
  color: var(--forest);
}
.fcta-note {
  margin-top: 36px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--faint); letter-spacing: .1em;
}

/* Dark mode: slightly lighter surface so it contrasts with the dark page bg */
[data-theme="dark"] .fcta-eyebrow { color: var(--cra45); }
[data-theme="dark"] .fcta-headline { color: var(--cra92); }
[data-theme="dark"] .fcta-headline em { color: #4ade80; }
[data-theme="dark"] .fcta-body { color: var(--cra55); }
[data-theme="dark"] .fcta-btn-ghost { color: var(--cra60); border-color: var(--cra25); }
[data-theme="dark"] .fcta-btn-ghost:hover { color: var(--cra85); border-color: var(--cra45); }
[data-theme="dark"] .fcta-note { color: var(--cra22); }
[data-theme="dark"] .fcta-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 40%,
    rgba(74,222,128,.12) 0%, transparent 70%);
}

@media(max-width:640px) {
  .final-cta { padding: 80px 20px; }
  .fcta-btns { flex-direction: column; align-items: center; }
}

@keyframes dead-flicker{
  0%,100%{color:var(--scarlet);text-shadow:0 0 2px rgba(100,20,50,.22);}
  15%{color:var(--scarlet);text-shadow:0 0 3px rgba(120,30,60,.28),0 0 8px rgba(90,15,40,.1);}
  40%{color:var(--scarlet);text-shadow:0 0 4px rgba(140,40,70,.32),0 0 10px rgba(110,20,50,.14);}
  40.3%{color:rgba(181,58,42,.7);text-shadow:none;}
  72%{color:rgba(181,58,42,.8);text-shadow:0 0 3px rgba(110,25,55,.25);}
  72.2%{color:rgba(181,58,42,.5);text-shadow:none;}
  90%,99%{color:rgba(181,58,42,.5);text-shadow:none;}
}

.scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(27,94,56,.01) 2px,rgba(27,94,56,.01) 4px);pointer-events:none;animation:scanmove 8s linear infinite;}
@keyframes scanmove{from{background-position:0 0;}to{background-position:0 100px;}}

/* FOOTER */


/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:900px){
  nav{padding:18px 22px;}
  nav ul{display:none;}
  .graveyard,.appstore-section,.services-section,.capex-section,.truths,.how,.stack-section,.final-cta,.success-section,.cost-section,.transform-section{padding:80px 20px;}
  .logo-graveyard{grid-template-columns:repeat(4,1fr);}
  .success-grid,.services-grid,.capex-visual,.mission-pillars,.how-grid{grid-template-columns:1fr;}
  .stack-label{display:none;}
  .transform-row{grid-template-columns:1fr 36px 1fr;}
  .appstore-body{grid-template-columns:1fr;}
  .appstore-sidebar{display:none;}
  .appstore-grid{grid-template-columns:repeat(2,1fr);}
  .mission-banner,.mission-pillars,.mission-warning{padding:60px 20px;}
}

  /* ─── ENRICHED APP STORE ─── */

  /* Stats bar */
  .store-stats{display:flex;align-items:center;justify-content:center;gap:0;max-width:900px;margin:0 auto 50px;border:1px solid rgba(27,94,56,.1);background:rgba(27,94,56,.02);}
  .store-stat{flex:1;display:flex;flex-direction:column;align-items:center;padding:22px 16px;gap:4px;}
  .ss-num{font-family:'Playfair Display',sans-serif;font-size:32px;color:var(--forest);line-height:1;}
  .ss-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
  .store-stat-div{width:1px;height:40px;background:rgba(27,94,56,.07);}

  /* Window */
  .appstore-window{max-width:1140px;margin:0 auto;background:var(--cream2);border:1px solid var(--rule2);position:relative;overflow:hidden;box-shadow:0 8px 40px var(--inka12),0 0 0 1px var(--rule);}
  .appstore-window::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(181,58,42,.5) 30%,rgba(27,94,56,0.5) 70%,transparent 100%);}

  /* Title bar */
  .appstore-titlebar{display:flex;align-items:center;gap:16px;padding:14px 22px;background:var(--rule2);border-bottom:1px solid var(--cream3);}
  .as-dots{display:flex;gap:8px;}
  .appstore-dot{width:13px;height:13px;border-radius:50%;}
  .appstore-dot.r{background:#ff5f56;}
  .appstore-dot.y{background:#ffbd2e;}
  .appstore-dot.g{background:#27c93f;}
  .appstore-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--ink2);margin:0 auto;}
  .as-search-wrap{display:flex;align-items:center;gap:9px;background:var(--cream2);border:1px solid var(--rule2);padding:7px 14px;min-width:220px;transition:border-color .2s;}
  .as-search-wrap:focus-within{border-color:rgba(27,94,56,.35);}
  .as-search{background:none;border:none;outline:none;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);width:100%;letter-spacing:.04em;}
  .as-search::placeholder{color:var(--rule);}

  /* Body layout */
  .appstore-body{display:grid;grid-template-columns:200px 1fr;min-height:560px;}

  /* Sidebar */
  .appstore-sidebar{border-right:1px solid var(--cream2);padding:20px 0;background:var(--cream2);overflow-y:auto;}
  .sidebar-section-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.4em;color:var(--inka18);text-transform:uppercase;padding:10px 18px 6px;}
  .sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 18px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--faint);text-transform:uppercase;cursor:pointer;transition:all .16s;border-left:2px solid transparent;}
  .sidebar-item.active{color:var(--forest);background:rgba(27,94,56,.09);border-left-color:var(--scarlet);}
  .sidebar-item:hover:not(.active){color:var(--ink2);background:var(--cream2);}
  .sidebar-item svg{opacity:.45;flex-shrink:0;}
  .sidebar-item.active svg{opacity:1;color:var(--scarlet);}
  .sidebar-count{margin-left:auto;background:var(--cream3);font-size:10px;padding:2px 7px;letter-spacing:0;border-radius:20px;color:var(--faint);}
  .sidebar-item.active .sidebar-count{background:rgba(181,58,42,.15);color:var(--scarlet);}

  /* Sidebar filters */
  .sidebar-filter{padding:4px 18px;display:flex;flex-direction:column;gap:10px;}
  .sf-check{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--faint);cursor:pointer;letter-spacing:.04em;transition:color .15s;}
  .sf-check input{display:none;}
  .sf-checkmark{width:13px;height:13px;border:1px solid var(--rule);flex-shrink:0;position:relative;transition:all .15s;}
  .sf-check input:checked + .sf-checkmark{background:var(--forest);border-color:var(--forest);}
  .sf-check input:checked + .sf-checkmark::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cream);}
  .sf-check:hover{color:var(--ink2);}

  /* Main area */
  .appstore-main{display:flex;flex-direction:column;overflow:hidden;min-width:0;}
  .as-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--cream2);background:var(--rule2);}
  .as-cat-title{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:800;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase;}
  .as-sort{display:flex;align-items:center;gap:8px;}
  .as-sort-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--rule);}
  .as-sort-select{background:var(--cream2);border:1px solid var(--rule);color:var(--ink2);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 10px;outline:none;cursor:pointer;}

  /* Grid — breathing room, not 1px tiles */
  .appstore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;overflow-y:auto;max-height:560px;background:var(--cream3);align-content:start;}
  .appstore-grid::-webkit-scrollbar{width:4px;}
  .appstore-grid::-webkit-scrollbar-track{background:var(--rule2);}
  .appstore-grid::-webkit-scrollbar-thumb{background:rgba(181,58,42,.22);border-radius:2px;}

  /* App card — explicit min-height so cards never collapse */
  .store-app{
    background:var(--cream3);
    padding:20px 16px 16px;
    min-height:160px;
    display:flex;flex-direction:column;align-items:flex-start;
    cursor:pointer;
    transition:background .18s,box-shadow .18s;
    position:relative;
    border-right:1px solid var(--rule2);
    border-bottom:1px solid var(--rule2);
    overflow:hidden;
  }
  .store-app::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,var(--rule2) 0%,transparent 60%);
    pointer-events:none;
  }
  .store-app:hover{background:var(--cream2);box-shadow:inset 0 0 0 1px rgba(27,94,56,.15),0 0 24px rgba(27,94,56,.04);}
  .store-app.hidden{display:none;}
  .store-app.fade-in{animation:fadeInCard .2s ease forwards;}
  @keyframes fadeInCard{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  /* Icon — larger, with category color accent line */
  .store-app-icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px;
    border-radius:12px;
    position:relative;
    flex-shrink:0;
  }
  .store-app-icon::after{
    content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;
    border-radius:0 0 2px 2px;
    opacity:.8;
  }

  .store-app-name{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px;line-height:1.25;}
  .store-app-tagline{font-size:11.5px;color:var(--faint);line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}

  .store-app-
  .store-app-price{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:rgba(27,94,56,.6);letter-spacing:.06em;white-space:nowrap;}
  .store-app-badges{display:flex;gap:4px;flex-wrap:wrap;}

  /* Badges — high contrast, actually visible */
  .store-app-badge{
    font-family:'IBM Plex Mono',monospace;font-size:9px;
    padding:3px 7px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;white-space:nowrap;
  }
  .store-app-badge.owned{
    background:var(--forest);
    color:var(--cream);
    border:none;
  }
  .store-app-badge.new{
    background:var(--scarlet);
    color:#fff;
    border:none;
  }
  .store-app-badge.ai{
    background:transparent;
    color:var(--cobalt);
    border:1px solid rgba(0,240,255,.45);
  }
  .store-app-badge.trial{
    background:transparent;
    color:var(--gold);
    border:1px solid rgba(255,214,10,.4);
  }

  /* Remove the useless category dot — replaced by icon underline */
  .store-app-cat-dot{display:none;}

  /* Empty state */
  .as-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 40px;color:var(--faint);font-size:13px;width:100%;}

  /* Detail panel */
  .app-detail-overlay{position:fixed;inset:0;background:var(--inka55);z-index:500;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(6px);}
  .app-detail-overlay.open{opacity:1;pointer-events:all;}
  .app-detail-panel{position:fixed;right:-620px;top:0;bottom:0;width:min(560px,90vw);background:var(--cream);border-left:1px solid var(--rule2);z-index:501;overflow-y:auto;transition:right .35s cubic-bezier(.25,.46,.45,.94);box-shadow:-8px 0 40px var(--inka18);}
  .app-detail-panel.open{right:0;}
  .app-detail-panel::-webkit-scrollbar{width:3px;}
  .app-detail-panel::-webkit-scrollbar-thumb{background:rgba(27,94,56,.18);}
  .app-detail-close{position:sticky;top:16px;left:calc(100% - 48px);display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--cream2);border:1px solid var(--rule2);color:var(--faint);font-size:13px;cursor:pointer;z-index:2;transition:all .2s;margin:16px 16px 0 auto;}
  .app-detail-close:hover{background:var(--rule2);color:var(--ink);}
  .app-detail-inner{padding:0 32px 48px;}

  .ad-header{display:flex;align-items:flex-start;gap:20px;padding:24px 0 22px;border-bottom:1px solid var(--cream3);margin-bottom:24px;}
  .ad-icon{width:60px;height:60px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;}
  .ad-title{font-family:'Playfair Display',sans-serif;font-size:34px;line-height:1;margin-bottom:5px;color:var(--ink);}
  .ad-subtitle{font-size:14px;color:var(--faint);line-height:1.55;}
  .ad-cat{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--scarlet);text-transform:uppercase;margin-top:7px;display:block;}

  .ad-badges{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;}
  .ad-price-block{background:rgba(27,94,56,.03);border:1px solid rgba(27,94,56,.1);padding:20px 22px;margin-bottom:22px;}
  .ad-price-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(27,94,56,.6);text-transform:uppercase;margin-bottom:6px;}
  .ad-price-num{font-family:'Playfair Display',sans-serif;font-size:38px;color:var(--forest);line-height:1;}
  .ad-price-note{font-size:13px;color:var(--faint);margin-top:7px;line-height:1.5;}

  .ad-desc{font-size:14px;color:var(--ink2);line-height:1.85;margin-bottom:24px;}
  .ad-desc strong{color:var(--ink);}

  .ad-features-title{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--cobalt);text-transform:uppercase;margin-bottom:12px;}
  .ad-features{display:flex;flex-direction:column;gap:6px;margin-bottom:26px;}
  .ad-feature{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:var(--ink2);padding:10px 14px;background:var(--rule2);border-left:2px solid rgba(27,94,56,.22);}
  .ad-feature-dot{width:5px;height:5px;border-radius:50%;background:var(--forest);flex-shrink:0;margin-top:4px;}
  .ad-feature strong{color:var(--ink);}

  .ad-replaces{margin-bottom:28px;}
  .ad-replaces-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.25em;color:var(--faint);text-transform:uppercase;margin-bottom:10px;}
  .ad-replaces-pills{display:flex;gap:6px;flex-wrap:wrap;}
  .ad-replaces-pill{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 10px;background:rgba(181,58,42,.06);border:1px solid rgba(181,58,42,.12);color:rgba(181,58,42,.8);letter-spacing:.04em;text-decoration:line-through;text-decoration-color:rgba(181,58,42,.4);}

  .ad-cta-group{display:flex;gap:10px;}
  .ad-cta-primary{flex:1;padding:14px;background:var(--forest);color:var(--cream);font-family:'IBM Plex Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;transition:box-shadow .2s;}
  .ad-cta-primary:hover{box-shadow:0 0 30px rgba(27,94,56,.35);}
  .ad-cta-secondary{padding:14px 20px;background:transparent;color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);cursor:pointer;transition:border-color .2s;}
  .ad-cta-secondary:hover{border-color:var(--rule2);}

  /* Feature pills row */
  .store-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:36px auto 0;}
  .sf-pill{display:flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(27,94,56,.12);background:rgba(27,94,56,.03);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--faint);letter-spacing:.06em;transition:all .2s;}
  .sf-pill:hover{border-color:rgba(27,94,56,.28);color:var(--ink);}

  /* Scrollbar for sidebar */
  .appstore-sidebar::-webkit-scrollbar{width:3px;}
  .appstore-sidebar::-webkit-scrollbar-thumb{background:rgba(181,58,42,.15);}

  /* Responsive overrides handled by comprehensive block below */

  /* Mobile category pills — hidden on desktop, shown on phones */
  .as-mobile-cats{
    display:none;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:10px 16px;gap:6px;
    border-bottom:1px solid var(--cream2);
    scrollbar-width:none;
  }
  .as-mobile-cats::-webkit-scrollbar{display:none;}
  .as-mobile-cats{display:none;flex-direction:row;white-space:nowrap;}
  .as-mobile-cat{
    display:inline-block;
    padding:6px 14px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faint);
    border:1px solid var(--rule);background:transparent;
    cursor:pointer;transition:all .15s;flex-shrink:0;
  }
  .as-mobile-cat.active{background:rgba(181,58,42,.07);border-color:rgba(181,58,42,.22);color:var(--scarlet);}
  .as-mobile-cat:hover:not(.active){color:var(--ink2);border-color:var(--rule);}

  /* Mobile search bar — hidden on desktop, shown on phones */
  .as-mobile-search{
    display:none;
    align-items:center;gap:10px;
    padding:10px 16px;
    border-bottom:1px solid var(--cream2);
    background:var(--rule2);
  }
  .as-mobile-search input{
    background:none;border:none;outline:none;
    font-family:'IBM Plex Mono',monospace;font-size:13px;
    color:var(--ink);width:100%;letter-spacing:.04em;
  }
  .as-mobile-search input::placeholder{color:var(--rule);}


/* ═══════════════════════════════════════
   MODE PICKER OVERLAY
═══════════════════════════════════════ */
.mode-picker-overlay{position:fixed;inset:0;background:var(--cra97);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(12px);}
.mode-picker-overlay.hidden{display:none;}
.mode-picker-box{max-width:640px;width:100%;text-align:center;}
.mp-logo{font-family:'Playfair Display',sans-serif;font-size:36px;color:var(--forest);letter-spacing:.1em;margin-bottom:32px;}
.mp-logo span{color:var(--ink);}
.mp-headline{font-family:'Playfair Display',sans-serif;font-size:clamp(28px,5vw,48px);line-height:1;margin-bottom:12px;color:var(--ink);}
.mp-sub{font-size:16px;color:var(--faint);margin-bottom:40px;}
.mp-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mp-option{background:var(--cream2);border:1px solid var(--rule);padding:36px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:all .25s;position:relative;text-align:center;}
.mp-option:hover{transform:translateY(-3px);}
.mp-brief:hover{border-color:var(--scarlet);background:rgba(181,58,42,.05);}
.mp-detailed:hover{border-color:var(--forest);background:rgba(27,94,56,.04);}
.mp-option-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.mp-brief .mp-option-icon{background:rgba(181,58,42,.08);color:var(--scarlet);}
.mp-detailed .mp-option-icon{background:rgba(27,94,56,.07);color:var(--forest);}
.mp-option-title{font-family:'Playfair Display',sans-serif;font-size:22px;letter-spacing:.05em;}
.mp-brief .mp-option-title{color:var(--scarlet);}
.mp-detailed .mp-option-title{color:var(--forest);}
.mp-option-desc{font-size:15px;color:var(--faint);line-height:1.65;}
.mp-option-tag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--scarlet);color:var(--cream);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:3px 10px;letter-spacing:.15em;font-weight:700;}
.mp-option-tag:empty{display:none;}
@media(max-width:500px){.mp-options{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════
   MODE TOGGLE (nav)
═══════════════════════════════════════ */
.mode-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;}
.mode-opt{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:color .2s;}
.mode-opt.active{color:var(--forest);}
.mode-track{width:38px;height:20px;background:var(--cream3);border:1px solid var(--rule);border-radius:20px;position:relative;transition:background .2s;flex-shrink:0;}
.mode-track.detailed-on{background:rgba(27,94,56,.12);border-color:rgba(27,94,56,.22);}
.mode-thumb{width:12px;height:12px;border-radius:50%;background:var(--faint);position:absolute;top:3px;left:3px;transition:transform .25s,background .2s;}
.mode-track.detailed-on .mode-thumb{transform:translateX(18px);background:var(--forest);}

/* Mobile mode toggle */
.mode-toggle-mobile{gap:5px;}
.mode-opt-sm{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);transition:color .2s;}

/* ═══════════════════════════════════════
   HAMBURGER + MOBILE NAV
═══════════════════════════════════════ */
.nav-right-mobile{display:none;align-items:center;gap:12px;}
.hamburger{background:none;border:1px solid var(--rule);width:38px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0;transition:border-color .2s;}
.hamburger:hover{border-color:var(--scarlet);}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:all .3s;transform-origin:center;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.nav-overlay{position:fixed;inset:0;background:var(--inka45);z-index:98;opacity:0;pointer-events:none;transition:opacity .3s;}
.nav-overlay.open{opacity:1;pointer-events:all;}

/* ═══════════════════════════════════════
   BRIEF / DETAILED MODE CONTENT
═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   COMPREHENSIVE FOOTER STYLES
═══════════════════════════════════════ */


/* Compliance section */


@media(max-width:1024px){}
@media(max-width:600px){}

/* Newsletter */

/* Bottom bar */

/* ═══════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE
═══════════════════════════════════════ */

/* ── 1200px ── */
@media(max-width:1200px){
  nav{padding:18px 40px;}
  .hero{padding:110px 40px 70px;}
  .appstore-grid{grid-template-columns:repeat(3,1fr);}
}

/* ── 1024px ── */
@media(max-width:1024px){
  nav{padding:16px 28px;}
  nav ul{gap:18px;}
  nav ul a{font-size:12px;letter-spacing:.1em;}
  .hero{padding:100px 28px 60px;}
  .success-grid,.services-grid,.capex-visual{grid-template-columns:1fr 1fr;}
  .how-grid{grid-template-columns:1fr 1fr;}
  .mission-pillars{grid-template-columns:1fr 1fr;padding:0 28px;}
}

/* ── 900px (tablet) ── */
@media(max-width:900px){
  body{cursor:auto;}
  .cursor,.cursor-ring{display:none;}
  nav{padding:14px 20px;}
  nav ul{
    position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100vh;
    background:var(--cra99);border-left:1px solid var(--ink);
    flex-direction:column;gap:0;padding:80px 0 30px;z-index:99;
    transition:right .35s cubic-bezier(.25,.46,.45,.94);
    backdrop-filter:blur(20px);
    list-style:none;
  }
  nav ul.open{right:0;}
  nav ul li{border-bottom:1px solid var(--cream2);}
  nav ul a{display:block;padding:16px 28px;font-size:13px;letter-spacing:.12em;}
  nav ul .nav-cta{margin:20px 28px;display:block;text-align:center;padding:14px 20px;}
  nav ul li:has(.mode-toggle){padding:16px 28px;}
  .nav-right-mobile{display:flex;}
  .mode-toggle:not(.mode-toggle-mobile){display:none;}

  .graveyard,.appstore-section,.services-section,.capex-section,.truths,
  .how,.stack-section,.final-cta,.success-section,.cost-section,.transform-section,
  .mission-section{padding:70px 20px;}
  .mission-banner{padding:50px 20px;}
  .mission-pillars{padding:0 20px;}

  .logo-graveyard{grid-template-columns:repeat(4,1fr);}
  .success-grid,.services-grid,.capex-visual,.mission-pillars,.how-grid{grid-template-columns:1fr;}
  .stack-label{display:none;}
  .transform-row{grid-template-columns:1fr 36px 1fr;}
  .appstore-body{grid-template-columns:1fr;}
  .appstore-sidebar{display:none;}
  .appstore-grid{grid-template-columns:repeat(2,1fr);}
  .store-stats{flex-wrap:wrap;}
  .store-stat-div{display:none;}
  .store-stat{min-width:50%;}

  
  
  

  .capex-chart{padding:20px 12px;}
  .success-quote{padding:32px 24px;}
  .success-quote::before{font-size:100px;}
  .appstore-window{border-radius:0;}
  .as-search-wrap{display:none;}
  .appstore-grid{max-height:none;}
}

/* ── 640px (large phone) ── */
@media(max-width:640px){
  .hero{padding:90px 16px 50px;min-height:auto;}
  .hero-headline{font-size:clamp(52px,15vw,90px)!important;}
  .hero-cta-group{flex-direction:column;}
  .btn-primary,.btn-ghost{width:100%;text-align:center;}

  /* section-headline-placeholder */
  .logo-graveyard{grid-template-columns:repeat(3,1fr);}
  .appstore-grid{grid-template-columns:1fr 1fr;}
  .success-grid{grid-template-columns:1fr;}
  .mission-pillars{grid-template-columns:1fr;}
  .how-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .capex-visual{grid-template-columns:1fr;}
  .store-app{padding:14px 12px 12px;}
  .store-app-icon{width:40px;height:40px;}
  .store-app-name{font-size:12px;}
  .store-app-tagline{display:none;}
  .transform-section{display:none;}
  .cost-display{font-size:clamp(60px,18vw,120px)!important;}
  .store-features{gap:6px;}
  .sf-pill{font-size:12px;padding:7px 12px;}
  .ad-header{flex-direction:column;}
  .ad-cta-group{flex-direction:column;}
  .app-detail-panel{width:100vw;}
  .success-stat{font-size:44px!important;}
  .capex-number{font-size:52px!important;}
  .ticker-item{font-size:12px;padding:0 20px;}
}

/* ── 400px (small phone) ── */
@media(max-width:400px){
  nav{padding:12px 14px;}
  .logo{font-size:22px;}
  .hero{padding:80px 14px 40px;}
  .logo-graveyard{grid-template-columns:repeat(2,1fr);}
  .appstore-grid{grid-template-columns:1fr 1fr;}
  .store-app-tagline{display:none;}
  .mp-options{grid-template-columns:1fr;}
  .mode-picker-box{padding:10px;}
}


/* ─── BRIEF MODE — strong visual differentiation ─── */
/* brief-mode per-selector overrides above */


/* Brief mode indicator pill */

.brief-mode-banner {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(181,58,42,.08);
  border: 1px solid rgba(181,58,42,.22);
  padding: 8px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing: .2em;
  color: var(--scarlet);
  text-transform: uppercase;
  z-index: 200;
  cursor: pointer;
}


/* ─── SUCCESS SECTION — TIER LABELS & WIDE GRID ─── */
.success-tier-label{display:flex;align-items:center;gap:20px;max-width:1100px;margin:0 auto 40px;padding:0 60px;}
.stl-line{flex:1;height:1px;background:var(--rule);}
.stl-text{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.success-grid-wide{grid-template-columns:repeat(3,1fr);}
.success-card-sm .success-stat{font-size:clamp(28px,4vw,44px);}
.success-stat-sm{font-size:clamp(28px,4vw,44px) !important;}
@media(max-width:900px){
  .success-grid-wide{grid-template-columns:1fr 1fr;}
  .success-tier-label{padding:0 20px;}
}
@media(max-width:600px){
  .success-grid-wide{grid-template-columns:1fr;}
}


/* ═══ COMPLIANCE BADGES — REBUILT ═══ */
@media (max-width: 1200px) {
}
@media (max-width: 900px) {
}
@media (max-width: 500px) {
}

/* ════════════════════════════════════════════════════
   SITE FOOTER — FULL RESPONSIVE REWRITE
════════════════════════════════════════════════════ */


/* ── Top: brand + nav columns ── */


/* ── Compliance badges ── */


/* ── Newsletter ── */


/* ── Bottom bar ── */


/* ════════════════════════════════════════════════════
   FOOTER RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════ */

/* 1200px */
@media (max-width: 1200px) {
  
  
  
  
  
}

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
  
  
  
  
  
  
}

/* 900px — tablet portrait / large phone */
@media (max-width: 900px) {
  
  
  
  
  
  
  
  
  
  
  
}

/* 600px — phone */
@media (max-width: 600px) {
  
  
  
  
  
  
  
  
  
  
  
}

/* 400px — small phone */
@media (max-width: 400px) {
  
  
}


/* ── Base paragraph weights — never inherit heading weight ── */
.how-desc,.pillar-desc,.success-desc,.capex-desc,.truth-desc,
.service-desc,.mission-body,.section-body,.hero-sub,.fn-sub,
.success-quote p,.ad-desc,.stack-total-desc {
  font-weight: 400;
}


/* ════════════════════════════════════════════════════
   BRIEF MODE — readable scan mode, no heavy weights
════════════════════════════════════════════════════ */

/* Banner */
.brief-mode-banner {
  display: none;
  position: fixed;
  bottom: 24px; right: 24px;
  background: rgba(181,58,42,.07);
  border: 1px solid rgba(181,58,42,.18);
  padding: 8px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--scarlet);
  z-index: 200; cursor: pointer;
  align-items: center; gap: 8px;
}
body.brief-mode .brief-mode-banner { display: flex; }
body.brief-mode::before { content: none; }

/* In brief mode, [data-brief] elements show the short text.
   All should be normal weight — brief ≠ bold.
   The content is shorter so it reads faster; no need for heavy type. */

body.brief-mode .hero-sub[data-brief] {
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 400 !important;
  color: var(--inka78) !important;
  line-height: 1.65 !important;
}
body.brief-mode .section-body[data-brief] {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--inka78) !important;
  line-height: 1.65 !important;
  max-width: 100% !important;
}
body.brief-mode .mission-body[data-brief] {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--inka78) !important;
  line-height: 1.6 !important;
}
body.brief-mode .success-desc[data-brief] {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
body.brief-mode .service-desc[data-brief] {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
body.brief-mode .how-desc[data-brief] {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
body.brief-mode .capex-desc[data-brief] {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
body.brief-mode .pillar-desc[data-brief] {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
body.brief-mode .truth-desc[data-brief] {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--inka72) !important;
  line-height: 1.65 !important;
}
/* Strong tags inside brief content should be medium, not heavy */
body.brief-mode [data-brief] strong {
  font-weight: 600;
  color: var(--inka92);
}

/* ── Brief mode: suppress all bold inside brief content ── */
body.brief-mode [data-brief] strong,
body.brief-mode [data-brief] b,
body.brief-mode .content-text strong,
body.brief-mode .content-text b {
  font-weight: 500;
  color: inherit;
}

/* The content-text span itself: never let it inherit a heavy weight
   from parent elements (e.g. section titles that use Syne 800) */
.content-text {
  font-weight: inherit;
}

/* Syne 800 is used on headings — make sure descriptive elements
   explicitly declare 400 so nothing silently inherits heavy weight */
.how-desc, .pillar-desc, .success-desc, .capex-desc,
.truth-desc, .service-desc, .mission-body, .section-body,
.hero-sub, .fn-sub, .success-quote p, .ad-desc,
.stack-total-desc, .pillar-sub, .how-sub {
  font-weight: 400;
}


/* ═══════════════ TRUST SIGNALS BAR ═══════════════ */
.trust-bar {
  display:flex; align-items:center; justify-content:center;
  gap:32px; padding:14px 60px;
  background:rgba(27,94,56,.03);
  border-top:1px solid rgba(27,94,56,.07);
  border-bottom:1px solid rgba(27,94,56,.06);
  flex-wrap:wrap;
}
.trust-item {
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink2); white-space:nowrap;
}
.trust-item svg { flex-shrink:0; }
.trust-dot { width:3px; height:3px; border-radius:50%; background:rgba(27,94,56,.22); }
@media(max-width:768px){
  .trust-bar { gap:16px; padding:12px 20px; }
  .trust-dot { display:none; }
}

/* ═══════════════ LOGOS BAR ═══════════════ */
.logos-section {
  padding:52px 60px 0;
  border-top:1px solid var(--cream2);
}
.logos-label {
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--faint); text-align:center; margin-bottom:28px;
}
.logos-track-wrap { overflow:hidden; position:relative; }
.logos-track-wrap::before, .logos-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.logos-track-wrap::before { left:0; background:linear-gradient(90deg, var(--cream), transparent); }
.logos-track-wrap::after  { right:0; background:linear-gradient(-90deg, var(--cream), transparent); }
.logos-track {
  display:flex; gap:0; width:max-content;
  animation:logoScroll 38s linear infinite;
}
.logos-track:hover { animation-play-state:paused; }
@keyframes logoScroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.logo-pill {
  display:flex; align-items:center; gap:9px;
  padding:10px 28px; border-right:1px solid var(--cream3);
  font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:700;
  color:var(--faint); white-space:nowrap;
  transition:color .2s;
}
.logo-pill:hover { color:var(--ink); }
.logo-pill .lp-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
@media(max-width:768px){ .logos-section { padding:40px 0 0; } }

/* ═══════════════ TESTIMONIALS ═══════════════ */
.testimonials-section {
  padding:100px 60px;
  position:relative; z-index:2;
}
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; max-width:1200px; margin:60px auto 0;
}
.testi-card {
  background:var(--rule2); border:1px solid var(--rule);
  padding:40px 36px; position:relative; overflow:hidden;
  transition:border-color .3s;
}
.testi-card:hover { border-color:rgba(27,94,56,.18); }
.testi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.testi-card.tc-gn::before { background:linear-gradient(90deg,var(--forest),transparent); }
.testi-card.tc-mg::before { background:linear-gradient(90deg,var(--scarlet),transparent); }
.testi-card.tc-pl::before { background:linear-gradient(90deg,var(--gold),transparent); }
.testi-quote {
  font-size:15px; line-height:1.8; color:var(--ink2);
  margin-bottom:28px; font-style:italic; position:relative;
}
.testi-quote::before {
  content:'"'; position:absolute; top:-18px; left:-8px;
  font-family:'Playfair Display',sans-serif; font-size:80px;
  color:rgba(27,94,56,.06); line-height:1; pointer-events:none;
}
.testi-stat {
  font-family:'Playfair Display',sans-serif; font-size:42px; line-height:1;
  margin-bottom:6px;
}
.tc-gn .testi-stat { color:var(--forest);  }
.tc-mg .testi-stat { color:var(--scarlet); text-shadow:0 0 20px rgba(181,58,42,.22); }
.tc-pl .testi-stat { color:var(--gold); text-shadow:0 0 20px rgba(123,47,255,.3); }
.testi-stat-label { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:28px; }
.testi-person { display:flex; align-items:center; gap:14px; border-top:1px solid var(--cream3); padding-top:22px; }
.testi-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',sans-serif; font-size:18px;
  border:1px solid var(--rule2);
}
.testi-name  { font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:700; color:var(--ink); }
.testi-role  { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--faint); letter-spacing:.06em; margin-top:2px; }
.testi-company { font-size:11px; color:var(--rule); margin-top:1px; }
@media(max-width:1000px){ .testi-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px)  { .testi-grid { grid-template-columns:1fr; } }

/* ═══════════════ INLINE ROI WIDGET ═══════════════ */
.roi-widget {
  background:rgba(27,94,56,.035); border:1px solid rgba(27,94,56,.1);
  padding:48px 56px; max-width:860px; margin:52px auto 0;
  position:relative; overflow:hidden;
}
.roi-widget::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--forest),transparent);
}
.roi-widget-label {
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--forest); margin-bottom:10px;
}
.roi-widget-title { font-family:'Playfair Display',sans-serif; font-size:36px; margin-bottom:28px; }
.roi-inputs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:24px; }
.roi-field { display:flex; flex-direction:column; gap:6px; }
.roi-field label {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.roi-input-wrap { display:flex; align-items:stretch; border:1px solid var(--rule2); background:var(--cream2); transition:border-color .2s; }
.roi-input-wrap:focus-within { border-color:rgba(27,94,56,.28); }
.roi-prefix, .roi-suffix {
  padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--faint); background:var(--cream2);
  border-right:1px solid var(--rule); display:flex; align-items:center;
}
.roi-suffix { border-right:none; border-left:1px solid var(--rule); }
.roi-num-input {
  background:transparent; border:none; outline:none; padding:10px 12px;
  font-family:'IBM Plex Sans',sans-serif; font-size:16px; font-weight:700;
  color:var(--ink); width:100%; min-width:0;
}
.roi-select {
  background:var(--cream2); border:1px solid var(--rule2);
  color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:600;
  padding:10px 14px; outline:none; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='var(--faint)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.roi-results {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--cream2); padding:24px 28px; margin-top:4px;
}
.roi-result-item { text-align:center; padding:8px; }
.roi-result-val {
  font-family:'Playfair Display',sans-serif; font-size:32px; line-height:1;
  color:var(--forest); 
}
.roi-result-lbl {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); margin-top:5px;
}
.roi-widget-cta { display:flex; align-items:center; justify-content:space-between; margin-top:20px; flex-wrap:wrap; gap:14px; }
.roi-disclaimer { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--faint); }
@media(max-width:768px){
  .roi-widget { padding:32px 24px; }
  .roi-inputs  { grid-template-columns:1fr; }
  .roi-results { grid-template-columns:1fr 1fr; }
}

/* ═══════════════ BEFORE / AFTER ═══════════════ */
.before-after {
  padding: 100px 60px;
  position: relative; z-index: 2;
}

/* Tabs */
.ba-tabs { display:flex; gap:2px; justify-content:center; margin-bottom:40px; flex-wrap:wrap; }
.ba-tab {
  padding: 11px 28px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--rule); background: var(--cream2);
  color: var(--faint); transition: all .2s;
}
.ba-tab.active { background: rgba(27,94,56,.06); border-color: rgba(27,94,56,.25); color: var(--forest); font-weight: 700; }
.ba-tab:hover:not(.active) { border-color: var(--ink2); color: var(--ink2); }

/* Panel */
.ba-panel { display: none; max-width: 1100px; margin: 0 auto; }
.ba-panel.active { display: block; }

/* Two-column grid with VS divider */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* VS column */
.ba-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--cream3);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.ba-vs-line { flex: 1; width: 1px; background: var(--rule2); }
.ba-vs-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .14em;
  color: var(--faint); padding: 10px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Column */
.ba-col { display: flex; flex-direction: column; }

/* Column header */
.ba-col-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid;
  position: sticky; top: 0;
}
.ba-header-icon { font-size: 16px; flex-shrink: 0; }
.ba-header-sub {
  margin-left: auto; font-size: 9px; letter-spacing: .1em;
  opacity: .6; white-space: nowrap;
}
.ba-before .ba-col-header {
  color: var(--scarlet); border-color: rgba(181,58,42,.2);
  background: rgba(181,58,42,.04);
}
.ba-after .ba-col-header {
  color: var(--forest); border-color: rgba(27,94,56,.2);
  background: rgba(27,94,56,.04);
}

/* Rows */
.ba-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--cream3);
  gap: 16px;
}
.ba-row:last-child { border-bottom: none; }
.ba-before .ba-row { background: rgba(181,58,42,.015); }
.ba-after  .ba-row { background: rgba(27,94,56,.015); }
.ba-before .ba-row:hover { background: rgba(181,58,42,.04); }
.ba-after  .ba-row:hover { background: rgba(27,94,56,.04); }

.ba-tool { font-size: 14px; color: var(--ink2); line-height: 1.4; flex: 1; }
.ba-cost {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.ba-cost-bad  { color: rgba(181,58,42,.75); }
.ba-cost-good { color: var(--forest); }

/* Total row */
.ba-row-total {
  padding: 16px 24px; margin-top: auto;
  border-top: 2px solid !important; border-bottom: none !important;
}
.ba-before .ba-row-total {
  background: rgba(181,58,42,.06) !important;
  border-top-color: rgba(181,58,42,.25) !important;
}
.ba-after .ba-row-total {
  background: rgba(27,94,56,.06) !important;
  border-top-color: rgba(27,94,56,.25) !important;
}
.ba-total-label { font-size: 12px; color: var(--faint); font-family: 'IBM Plex Mono', monospace; letter-spacing: .06em; }
.ba-total-num {
  font-family: 'Playfair Display', serif; font-size: 28px; line-height: 1;
  flex-shrink: 0;
}
.ba-total-bad  { color: var(--scarlet); }
.ba-total-good { color: var(--forest); }

/* Saving banner */
.ba-saving-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-top: 3px;
  padding: 28px 36px;
  background: rgba(27,94,56,.04);
  border: 1px solid rgba(27,94,56,.14);
  border-top: 3px solid var(--forest);
}
.ba-saving-left { display: flex; flex-direction: column; gap: 4px; }
.ba-saving-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase; color: var(--forest); opacity: .7;
}
.ba-saving-num {
  font-family: 'Playfair Display', serif; font-size: 52px;
  color: var(--forest); line-height: 1;
}
.ba-saving-right { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ba-saving-desc { font-size: 15px; color: var(--ink2); line-height: 1.55; max-width: 380px; }
.ba-saving-cta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid rgba(27,94,56,.3);
  transition: border-color .2s, color .2s;
}
.ba-saving-cta:hover { border-color: var(--forest); }

/* Dark theme */
[data-theme="dark"] .ba-tab { background: var(--cream2); border-color: var(--rule); }
[data-theme="dark"] .ba-tab.active { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.25); color: var(--forest); }
[data-theme="dark"] .ba-grid { border-color: var(--rule); }
[data-theme="dark"] .ba-vs { background: var(--cream3); border-color: var(--rule); }
[data-theme="dark"] .ba-vs-line { background: var(--rule); }
[data-theme="dark"] .ba-before .ba-col-header { background: rgba(240,106,87,.06); border-color: rgba(240,106,87,.18); }
[data-theme="dark"] .ba-after  .ba-col-header { background: rgba(74,222,128,.05); border-color: rgba(74,222,128,.18); }
[data-theme="dark"] .ba-before .ba-row { background: rgba(240,106,87,.025); border-bottom-color: var(--rule); }
[data-theme="dark"] .ba-after  .ba-row { background: rgba(74,222,128,.02);  border-bottom-color: var(--rule); }
[data-theme="dark"] .ba-before .ba-row:hover { background: rgba(240,106,87,.06); }
[data-theme="dark"] .ba-after  .ba-row:hover { background: rgba(74,222,128,.05); }
[data-theme="dark"] .ba-before .ba-row-total { background: rgba(240,106,87,.08) !important; border-top-color: rgba(240,106,87,.2) !important; }
[data-theme="dark"] .ba-after  .ba-row-total { background: rgba(74,222,128,.07) !important; border-top-color: rgba(74,222,128,.2) !important; }
[data-theme="dark"] .ba-saving-banner { background: rgba(74,222,128,.05); border-color: rgba(74,222,128,.15); border-top-color: var(--forest); }

/* Responsive — stay side-by-side until very small */
@media(max-width:900px) {
  .before-after { padding: 60px 20px; }
  .ba-saving-banner { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .ba-saving-num { font-size: 40px; }
}
@media(max-width:600px) {
  .ba-tabs { gap: 4px; }
  .ba-tab { padding: 9px 16px; font-size: 10px; }
  .ba-row { padding: 12px 16px; }
  .ba-col-header { padding: 13px 16px; }
  .ba-total-num { font-size: 22px; }
}

/* ═══════════════ COMPARISON TABLE ═══════════════ */
.compare-section { padding:100px 60px; position:relative; z-index:2; }
.compare-wrap { max-width:1100px; margin:60px auto 0; overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; min-width:700px; }
.compare-table thead tr { background:var(--rule2); }
.compare-table thead th {
  padding:18px 20px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  border-bottom:2px solid var(--rule);
  font-weight:400;
}
.compare-table thead th:first-child { text-align:left; color:var(--faint); }
.compare-table thead th.th-own360 {
  color:var(--forest); border-bottom-color:var(--forest);
  background:rgba(27,94,56,.04);
}
.compare-table tbody tr {
  border-bottom:1px solid var(--cream2);
  transition:background .15s;
}
.compare-table tbody tr:hover { background:var(--rule2); }
.compare-table td {
  padding:16px 20px; text-align:center;
  font-size:14px; color:var(--ink2);
}
.compare-table td:first-child {
  text-align:left; font-weight:600; color:var(--ink); font-size:14px;
}
.compare-table td.td-own360 { background:rgba(27,94,56,.02); }
.ct-yes { color:var(--forest); font-size:18px; }
.ct-no  { color:rgba(181,58,42,.4); font-size:18px; }
.ct-partial { color:var(--gold); font-size:12px; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; }
.ct-money { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; }
.ct-money.ct-green { color:var(--forest); }
.ct-money.ct-red   { color:rgba(181,58,42,.8); }
.ct-tag {
  display:inline-block; padding:3px 10px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.08em;
  border-radius:2px; text-transform:uppercase;
}
.ct-tag-own { background:rgba(27,94,56,.07); color:var(--forest); border:1px solid rgba(27,94,56,.15); }
.ct-tag-bad { background:rgba(181,58,42,.05); color:rgba(181,58,42,.7); border:1px solid rgba(181,58,42,.12); }
.compare-section .section-note {
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:var(--faint); margin-top:24px; letter-spacing:.06em;
}
@media(max-width:768px){ .compare-section { padding:60px 20px; } }

/* ═══════════════ ENHANCED HOW IT WORKS ═══════════════ */
/* ─── HOW IT WORKS — horizontal card track ─── */
.how-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1140px;
  margin: 64px auto 0;
  position: relative;
}
/* connecting line behind the number circles */
.how-track::before {
  content: '';
  position: absolute;
  top: 36px; /* centre of the number circle */
  left: calc(12.5%);   /* starts at centre of first card */
  right: calc(12.5%);  /* ends at centre of last card */
  height: 1px;
  background: linear-gradient(90deg, rgba(27,94,56,.15), rgba(27,94,56,.25) 50%, rgba(27,94,56,.15));
  z-index: 0;
}
.how-card-new {
  padding: 0 20px 36px;
  position: relative;
  text-align: left;
  border-right: 1px solid var(--rule2);
}
.how-card-new:last-child { border-right: none; }

/* Step number badge */
.how-num-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.how-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream2);
  border: 2px solid rgba(27,94,56,.28);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: 'Playfair Display', serif; font-size: 22px;
  color: var(--forest); line-height: 1;
  position: relative; z-index: 1;
}
.how-card-new:last-child .how-num {
  background: var(--flit);
  border-color: var(--forest);
  border-width: 2px;
}
.how-week-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--forest); opacity: .65;
  margin-left: 12px;
}

/* Card body */
.how-icon-new { font-size: 26px; margin-bottom: 14px; display: block; line-height: 1; }
.how-title-new {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 17px;
  font-weight: 800; color: var(--ink); margin-bottom: 10px; line-height: 1.25;
}
.how-desc-new {
  font-size: 13.5px; color: var(--faint); line-height: 1.75; margin-bottom: 16px;
}
.how-bullets-new {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.how-bullets-new li {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--faint); line-height: 1.5; letter-spacing: .01em;
}
.how-bullets-new li::before {
  content: '→'; color: rgba(27,94,56,.5); flex-shrink: 0; margin-top: 1px;
}

/* Dark theme */
[data-theme="dark"] .how-card-new { border-right-color: var(--rule); }
[data-theme="dark"] .how-num { background: var(--cream2); border-color: rgba(74,222,128,.3); }
[data-theme="dark"] .how-card-new:last-child .how-num { background: rgba(74,222,128,.1); border-color: var(--forest); }
[data-theme="dark"] .how-track::before { background: linear-gradient(90deg, rgba(74,222,128,.1), rgba(74,222,128,.22) 50%, rgba(74,222,128,.1)); }

/* Responsive */
@media(max-width:1024px) {
  .how-track { grid-template-columns: repeat(2, 1fr); }
  .how-track::before { display: none; }
  .how-card-new { border-right: none; border-bottom: 1px solid var(--rule2); padding: 28px 24px; }
  .how-card-new:nth-child(odd) { border-right: 1px solid var(--rule2); }
}
@media(max-width:580px) {
  .how-track { grid-template-columns: 1fr; }
  .how-card-new { border-right: none !important; padding: 24px 0; }
}


#cookieBanner {
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--cra99);border-top:2px solid var(--ink);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;padding:18px 48px;
  transform:translateY(100%);opacity:0;
  transition:transform .35s ease,opacity .35s ease;
}
#cookieBanner.visible{transform:translateY(0);opacity:1;}

.cb-text a{color:var(--forest);text-decoration:none;}
.cb-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;}
.cb-accept{background:var(--forest);color:var(--cream);border:none;font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:800;padding:10px 24px;cursor:pointer;transition:box-shadow .2s;}
.cb-accept:hover{box-shadow:0 0 20px rgba(27,94,56,.28);}
.cb-decline{background:transparent;border:1px solid var(--rule);color:var(--faint);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;padding:10px 20px;cursor:pointer;transition:border-color .2s;}
.cb-decline:hover{border-color:var(--inka22);color:var(--ink);}
@media(max-width:700px){#cookieBanner{padding:16px 20px;}.cb-actions{width:100%;}.cb-accept,.cb-decline{flex:1;text-align:center;}}


/* ═══════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — ALL VIEWPORTS
   Audited breakpoints: 1400 / 1200 / 1024 / 900 / 768 / 640 / 480 / 380 / 320
═══════════════════════════════════════ */

/* ── Large screens (1400px+): app store gets 5-col grid, prevent overflow ── */
@media(min-width:1400px){
  .appstore-grid{grid-template-columns:repeat(5,1fr);}
  .appstore-window{max-width:1280px;}
}

/* ── 1200px ── */
@media(max-width:1200px){
  .hero-illustration{display:none;}       /* stops bleeding into content */
  .appstore-grid{grid-template-columns:repeat(4,1fr);}
  .testi-card{padding:32px 28px;}
  .ba-saving-banner{padding:20px 24px;}
}

/* ── 1024px ── */
@media(max-width:1024px){
  .hero-illustration{display:none;}
  .appstore-grid{grid-template-columns:repeat(3,1fr);}
  .testi-card{padding:28px 24px;}
  .how-step-content{padding:28px 28px;}
  .roi-widget{padding:40px 44px;}
}

/* ── 900px: tablet portrait ── */
@media(max-width:900px){
  /* App store: sidebar gone, add horizontal scroll category pills */
  .as-topbar{flex-wrap:wrap;gap:8px;padding:12px 16px;}
  .as-cat-title{font-size:12px;}
  .as-search-wrap{display:none !important;}    /* hide titlebar search */
  .as-mobile-cats{display:flex !important;}    /* show pill row */
  .as-mobile-search{display:flex !important;}  /* show stacked search */

  /* App grid: 2-col, unlimited scroll */
  .appstore-grid{grid-template-columns:repeat(2,1fr);max-height:none;}

  /* Store stats: 2×2 grid on tablet */
  .store-stats{flex-wrap:wrap;}
  .store-stat{min-width:50%;}
  .store-stat-div{display:none;}

  /* Appstore section padding */
  .appstore-section{padding:70px 20px;}

  /* Before/after responsive handled in section CSS */

  /* Testimonials: 1×2 */
  .testi-grid{grid-template-columns:1fr 1fr;}
  .testi-card{padding:28px 24px;}
  .testi-quote{font-size:14px;}
  .testi-stat{font-size:36px;}
  .testimonials-section{padding:70px 20px;}

  /* ROI widget */
  .roi-widget{padding:32px 24px;}
  .roi-inputs{grid-template-columns:1fr 1fr;}
  .roi-results{grid-template-columns:1fr 1fr;}
  .roi-widget-title{font-size:28px;}
  .roi-widget-cta{flex-direction:column;align-items:flex-start;}

  /* Comparison table: allow horizontal scroll */
  .compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .compare-section{padding:70px 20px;}
  .before-after{padding:70px 20px;}

  /* How it works: responsive handled in section CSS */

  /* Trust bar: wrap items */
  .trust-bar{flex-wrap:wrap;gap:12px 20px;padding:12px 20px;}
  .trust-dot{display:none;}

  /* Success quote */
  .success-quote{padding:32px 24px;}
  .success-quote p{font-size:18px;}
  .success-quote::before{font-size:100px;}
}

/* ── 768px ── */
@media(max-width:768px){
  /* ROI widget inputs: single column */
  .roi-inputs{grid-template-columns:1fr;}

  /* BA tabs: allow wrap */
  .ba-tabs{flex-wrap:wrap;gap:4px;}
  .ba-tab{padding:8px 18px;font-size:10px;}

  /* Comparison section note */
  .compare-section{padding:60px 16px;}
  .compare-table th,.compare-table td{padding:12px 14px;font-size:13px;}

  /* Saving banner stack on phones */
  .ba-saving-banner{flex-direction:column;gap:8px;padding:16px 20px;}
  .ba-saving-num{font-size:36px;}

  /* Trust bar */
  .trust-bar{padding:12px 16px;}

  /* Mode picker on tablets */
  .mp-options{grid-template-columns:1fr 1fr;}
  .mp-option{padding:28px 20px;}
}

/* ── 640px: phone ── */
@media(max-width:640px){
  /* App store: 2-col still works at 640px, cards are ~160px */
  .appstore-grid{grid-template-columns:1fr 1fr;}
  .store-app{padding:14px 12px 12px;}
  .store-app-icon{width:40px;height:40px;}
  .store-app-name{font-size:12px;}
  .store-app-tagline{display:none;}
  .store-app-badges{display:none;}  /* too cramped at 2-col */
  .store-app-price{display:none;}   /* badge-only view */

  /* Testimonials: single column */
  .testi-grid{grid-template-columns:1fr;}
  .testi-card{padding:24px 20px;}
  .testi-stat{font-size:42px;}

  /* ROI results: 2×2 */
  .roi-results{grid-template-columns:1fr 1fr;}
  .roi-result-val{font-size:26px;}

  /* BA tabs: full width stack */
  .ba-tabs{flex-direction:column;align-items:center;}
  .ba-tab{width:100%;max-width:300px;text-align:center;}

  /* Saving banner */
  .ba-saving-banner{padding:16px;}
  .ba-saving-num{font-size:32px;}

  /* Section padding reduction */
  .testimonials-section,.before-after,.compare-section{padding:56px 16px;}
  .success-section{padding:56px 16px;}

  /* Store features pills: wrap tightly */
  .store-features{gap:6px;padding:0 4px;}
  .sf-pill{font-size:11px;padding:6px 10px;}

  /* Ticker: smaller */
  .ticker-item{font-size:11px;padding:0 16px;}

  /* Cookie banner */
  #cookieBanner{padding:14px 16px;gap:12px;}
  .cb-actions{width:100%;}
  .cb-accept,.cb-decline{flex:1;text-align:center;}

  /* Mode picker */
  .mp-options{grid-template-columns:1fr;}
  .mp-option{padding:24px 20px;}
  .mp-headline{font-size:clamp(24px,6vw,38px);}
}

/* ── 480px ── */
@media(max-width:480px){
  /* Footer */
  
  .how-step-content{padding:18px 14px;}

  /* ROI results: 2×2 */
  .roi-results{grid-template-columns:1fr 1fr;}
  .roi-result-val{font-size:24px;}

  /* Store stats: full row each */
  .store-stat{min-width:100%;}
  .store-stat-div{display:none;}

  /* Ba saving banner */
  .ba-saving-num{font-size:28px;}

  /* Trust bar: wrap onto 2 columns */
  .trust-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px;}
  .trust-item{justify-content:center;}
  .trust-dot{display:none;}

  /* Appstore titlebar: hide window title text on very small */
  .appstore-title{display:none;}
}

/* ── 380px: small phones (iPhone SE, etc.) ── */
@media(max-width:380px){
  /* Nav */
  nav{padding:12px 14px;}
  .logo{font-size:22px;}

  /* App store: single column */
  .appstore-grid{grid-template-columns:1fr;}
  .store-app{padding:14px 14px 12px;flex-direction:row;align-items:center;gap:12px;}
  .store-app-icon{width:36px;height:36px;margin-bottom:0;flex-shrink:0;}
  .store-app-name{font-size:13px;margin-bottom:2px;}
  .store-app-tagline{display:none;}
  .store-app-
  .store-app-owned-indicator{display:block;}

  /* ROI: single column results */
  .roi-results{grid-template-columns:1fr 1fr;}

  /* Mode picker */
  .mp-options{grid-template-columns:1fr;}
  .mp-option{padding:20px 16px;}
  .mp-option-icon{width:40px;height:40px;}
  .mode-picker-box{padding:0 8px;}

  /* Hero */
  .hero{padding:80px 14px 40px;}
  .logo-graveyard{grid-template-columns:repeat(2,1fr);}

  /* Footer nav */
  

  /* Saving banner */
  .ba-saving-banner{padding:14px 12px;}
  .ba-saving-num{font-size:26px;}

  /* Cookie banner */
  #cookieBanner{padding:12px 14px;}
  

  /* Comparison table font shrink */
  .compare-table th,.compare-table td{padding:10px 8px;font-size:12px;}
}


/* ═══════════════════════════════════════
   DESIGN UPGRADE — Stronger visual system
═══════════════════════════════════════ */

/* Bolder section headers */
.section-label,.section-tag,.eyebrow-label {
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--forest);
  border-bottom: none;
}

/* section-headline-placeholder */

/* Stronger card styling */
.card, .info-card {
  background: var(--cream2);
  border: 1.5px solid var(--rule);
  box-shadow: 0 1px 0 0 var(--rule2);
  padding: 32px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover, .info-card:hover {
  border-color: var(--forest);
  box-shadow: 4px 4px 0 0 var(--forest);
  transform: translate(-2px,-2px);
}
.card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
}

/* Page hero — stronger ink rule */
.page-hero {
  padding: 72px 60px 56px;
  border-bottom: 3px solid var(--ink);
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 60px;
  width: 80px;
  height: 3px;
  background: var(--forest);
}

/* Page title bolder */
.page-title {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .9;
  margin-bottom: 24px;
}

/* Pull-quote / highlight box */
.pull-quote {
  border-left: 4px solid var(--forest);
  padding: 24px 32px;
  margin: 40px 0;
  background: var(--flit);
}
.pull-quote p {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--forest);
}

/* Stat blocks */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 48px 0;
}
.stat-block {
  background: var(--cream2);
  border: 1.5px solid var(--rule);
  padding: 32px 28px;
  text-align: center;
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900;
  line-height: 1;
  color: var(--forest);
  letter-spacing: -.03em;
  display: block;
  margin-bottom: 8px;
}
.stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Two-column text+visual layout */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 56px 0;
  border: 1.5px solid var(--rule);
}
.split-text {
  padding: 52px 48px;
  border-right: 1.5px solid var(--rule);
}
.split-visual {
  padding: 52px 48px;
  background: var(--cream2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Content section titles */
.page-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -.025em;
  margin: 52px 0 18px;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--ink);
}
.page-body p {
  font-size: 16px;
  color: var(--ink2);
  line-height: 1.8;
  margin-bottom: 18px;
  max-width: 72ch;
}
.page-body strong { color: var(--ink); }

/* Numbered list style */
.numbered-list {
  counter-reset: nl;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: nl;
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule2);
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.65;
}
.numbered-list li::before {
  content: counter(nl, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--forest);
  letter-spacing: .1em;
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 24px;
}

/* Page CTA — bolder */


/* Divider — with center mark */
.divider {
  border: none;
  margin: 52px 0;
  position: relative;
  height: 1px;
  background: var(--rule);
}
.divider::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  padding: 0 12px;
  font-size: 10px;
  color: var(--rule);
}

/* Section backgrounds — alternating rhythm */
.section-alt {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-left: -60px;
  margin-right: -60px;
  padding-left: 60px;
  padding-right: 60px;
}

/* Responsive */
@media(max-width:768px) {
  .page-hero { padding: 48px 24px 40px; }
  .page-hero::after { left: 24px; }
  .page-body { padding: 40px 24px 60px !important; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .split-section { grid-template-columns: 1fr; }
  .split-text { border-right: none; border-bottom: 1.5px solid var(--rule); }
  
  
}
@media(max-width:480px) {
  .stat-row { grid-template-columns: 1fr; }
}


/* ─── Before/After: keep side-by-side down to small screens ── */
@media(max-width:640px) {
  .ba-grid { grid-template-columns: 1fr 40px 1fr; }
  .ba-row { padding: 10px 12px; }
  .ba-col-header { padding: 11px 12px; font-size: 9px; }
  .ba-header-sub { display: none; }
  .ba-total-num { font-size: 18px; }
  .ba-tool { font-size: 12px; }
  .ba-cost { font-size: 11px; }
}
@media(max-width:400px) {
  .ba-grid { grid-template-columns: 1fr 32px 1fr; }
  .ba-vs-badge { font-size: 8px; }
}


/* ─── FINAL section-headline rule (wins) ─── */
.section-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(42px, 6vw, 80px) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 20px !important;
  color: var(--ink) !important;
}

/* ─── Section visual rhythm ─── */

/* Light mode: use readable ink-based colors on cream3 background */
.graveyard .section-label { color: var(--forest); }
.graveyard .section-headline { color: var(--ink) !important; }
.graveyard .section-body { color: var(--ink2); }

.success-section {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.testimonials-section {
  background: var(--cream2);
  border-bottom: 1px solid var(--rule);
}

.appstore-section {
  background: var(--cream);
  border-top: 1px solid var(--rule);
}

.before-after {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.services-section {
  background: var(--cream);
}

.compare-section {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* capex section uses site light theme */
.capex-section {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cost-section {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.mission-section {
  background: var(--cream);
}

.how {
  background: var(--cream2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ══════════════════════════════════════════════
   COMPREHENSIVE DARK MODE FIXES
   All hardcoded / missing overrides in one place
   ═══════════════════════════════════════════════ */

/* ── Brief-mode text: use theme vars, not hardcoded ink ── */
[data-theme="dark"] body.brief-mode .hero-sub[data-brief],
[data-theme="dark"] body.brief-mode .section-body[data-brief],
[data-theme="dark"] body.brief-mode .mission-body[data-brief] {
  color: var(--ink2) !important;
}
[data-theme="dark"] body.brief-mode .success-desc[data-brief],
[data-theme="dark"] body.brief-mode .service-desc[data-brief],
[data-theme="dark"] body.brief-mode .how-desc[data-brief],
[data-theme="dark"] body.brief-mode .capex-desc[data-brief],
[data-theme="dark"] body.brief-mode .pillar-desc[data-brief],
[data-theme="dark"] body.brief-mode .truth-desc[data-brief] {
  color: var(--ink2) !important;
}
[data-theme="dark"] body.brief-mode [data-brief] strong {
  color: var(--ink) !important;
}

/* ── Sidebar section label: was var(--inka18) — invisible on dark ── */
[data-theme="dark"] .sidebar-section-label { color: rgba(232,228,216,.22); }

/* ── Page CTA ── */
[data-theme="dark"] 

/* ── Success cards ── */
[data-theme="dark"] .success-card {
  background: var(--cream2);
  border-color: var(--rule);
}
[data-theme="dark"] .success-card:hover { border-color: rgba(74,222,128,.18); }

/* ── Service cards ── */
[data-theme="dark"] .service-card {
  background: var(--cream2);
  border-color: var(--rule);
}
[data-theme="dark"] .service-card:hover { border-color: rgba(240,106,87,.2); }
[data-theme="dark"] .service-num { color: rgba(232,228,216,.12); }
[data-theme="dark"] .service-features { border-top-color: var(--rule); }
[data-theme="dark"] .sf { border-bottom-color: var(--rule2); }

/* ── Truths section ── */
[data-theme="dark"] .truth-item { border-bottom-color: var(--rule); }
[data-theme="dark"] .truth-title { color: var(--ink); }
[data-theme="dark"] .truth-desc { color: var(--ink2); }
[data-theme="dark"] .truth-desc strong { color: var(--ink); }

/* ── Capex / OpEx section ── */
[data-theme="dark"] .capex-section { background: var(--cream); border-color: var(--rule); }
[data-theme="dark"] .capex-side { border-color: var(--rule); }
[data-theme="dark"] .capex-side.opex  { background: rgba(240,106,87,.04); border-color: rgba(240,106,87,.15); }
[data-theme="dark"] .capex-side.capex { background: rgba(74,222,128,.03);  border-color: rgba(74,222,128,.12); }
[data-theme="dark"] .cl { color: var(--ink2); }
[data-theme="dark"] .capex-side.opex  .cl { border-bottom-color: rgba(240,106,87,.08); }
[data-theme="dark"] .capex-side.capex .cl { border-bottom-color: rgba(74,222,128,.08); }

/* Financial benefit cards (EBITDA+, TAX, EV) ── */
.fin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 3px;
}
.fin-card {
  background: var(--cream2);
  border: 1px solid var(--rule);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.fin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--forest), transparent);
  opacity: .4;
}
.fin-chart {
  width: 100%;
  height: 88px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule2);
  padding-bottom: 8px;
}
.fin-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Bar fills */
.fc-bar-bad  { fill: rgba(181,58,42,.18); }
.fc-bar-good { fill: rgba(27,94,56,.28); }
.fc-bar-gold { fill: rgba(154,98,0,.22); }
/* Line strokes */
.fc-line-bad  { fill: none; stroke: rgba(181,58,42,.5);  stroke-width: 1.5; stroke-linejoin: round; }
.fc-line-good { fill: none; stroke: rgba(27,94,56,.8);   stroke-width: 2;   stroke-linejoin: round; }
/* Area fills */
.fc-area-bad  { fill: rgba(181,58,42,.06); }
.fc-area-good { fill: rgba(27,94,56,.1); }
/* Dots */
.fc-dot-bad  { fill: rgba(181,58,42,.7); }
.fc-dot-good { fill: rgba(27,94,56,1); }
/* Text */
.fc-xlabel {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6px;
  fill: currentColor;
  opacity: .35;
  text-anchor: middle;
}
.fc-legend {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6px;
  fill: currentColor;
  opacity: .45;
}
.fc-annot {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  fill: rgba(27,94,56,.8);
  font-weight: 700;
}
.fin-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fin-value {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--forest);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.fin-desc {
  font-size: 13px;
  color: var(--faint);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}
@media(max-width:860px) {
  .fin-cards { grid-template-columns: 1fr; }
  .fin-chart { height: 72px; }
}

/* Dark mode fin-cards */
[data-theme="dark"] .fin-card { background: var(--cream2); border-color: var(--rule); }
[data-theme="dark"] .fc-bar-bad  { fill: rgba(240,106,87,.22); }
[data-theme="dark"] .fc-bar-good { fill: rgba(74,222,128,.2); }
[data-theme="dark"] .fc-bar-gold { fill: rgba(224,160,32,.22); }
[data-theme="dark"] .fc-line-bad  { stroke: rgba(240,106,87,.55); }
[data-theme="dark"] .fc-line-good { stroke: rgba(74,222,128,.8); }
[data-theme="dark"] .fc-area-bad  { fill: rgba(240,106,87,.06); }
[data-theme="dark"] .fc-area-good { fill: rgba(74,222,128,.1); }
[data-theme="dark"] .fc-dot-bad   { fill: rgba(240,106,87,.8); }
[data-theme="dark"] .fc-dot-good  { fill: rgba(74,222,128,1); }
[data-theme="dark"] .fin-value    { color: var(--forest); }
[data-theme="dark"] .fc-annot     { fill: rgba(74,222,128,.9); }
[data-theme="dark"] .capex-inner [style*="background:var(--cream2)"] {
  background: var(--cream2) !important;
  border-color: var(--rule) !important;
}

/* ── Compare table ── */
[data-theme="dark"] .compare-table thead tr { background: var(--cream3); }
[data-theme="dark"] .compare-table thead th { color: var(--ink2); border-bottom-color: var(--rule); }
[data-theme="dark"] .compare-table thead th.th-own360 { background: rgba(74,222,128,.06); border-bottom-color: var(--forest); }
[data-theme="dark"] .compare-table tbody tr { border-bottom-color: var(--rule); }
[data-theme="dark"] .compare-table tbody tr:hover { background: var(--cream3); }
[data-theme="dark"] .compare-table td { color: var(--ink2); }
[data-theme="dark"] .compare-table td:first-child { color: var(--ink); }
[data-theme="dark"] .compare-table td.td-own360 { background: rgba(74,222,128,.03); }
[data-theme="dark"] .compare-section .section-note { color: var(--faint); }
[data-theme="dark"] .ct-tag-own { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.2); }
[data-theme="dark"] .ct-tag-bad { background: rgba(240,106,87,.08); border-color: rgba(240,106,87,.18); color: var(--scarlet); }

/* ── ROI widget ── */
[data-theme="dark"] .roi-widget { background: var(--cream2); border-color: var(--rule); }
[data-theme="dark"] .roi-widget::before { background: linear-gradient(90deg, var(--scarlet), var(--forest)); }
[data-theme="dark"] .roi-widget-label { color: var(--faint); }
[data-theme="dark"] .roi-widget-title { color: var(--ink); }
[data-theme="dark"] .roi-field label { color: var(--faint); }
[data-theme="dark"] .roi-input-wrap { background: var(--cream3); border-color: var(--rule); }
[data-theme="dark"] .roi-prefix, [data-theme="dark"] .roi-suffix { color: var(--faint); background: var(--cream3); border-color: var(--rule); }
[data-theme="dark"] .roi-num-input { background: transparent; color: var(--ink); }
[data-theme="dark"] .roi-select { background: var(--cream3); color: var(--ink); border-color: var(--rule); }
[data-theme="dark"] .roi-results { border-color: var(--rule); background: var(--cream3); }
[data-theme="dark"] .roi-result-val { color: var(--forest); }
[data-theme="dark"] .roi-result-lbl { color: var(--faint); }
[data-theme="dark"] .roi-disclaimer { color: var(--faint); }

/* ── How-it-works cards ── */
[data-theme="dark"] .how-card-new { border-right-color: var(--rule); }
[data-theme="dark"] .how-title-new { color: var(--ink); }
[data-theme="dark"] .how-desc-new  { color: var(--faint); }
[data-theme="dark"] .how-bullets-new li { color: var(--faint); }

/* ── Cost section ── */
[data-theme="dark"] .cost-section { background: var(--cream2); border-color: var(--rule); }
[data-theme="dark"] .cost-display { color: var(--scarlet); }
[data-theme="dark"] .cost-label { color: var(--faint); }
[data-theme="dark"] .cost-pill { background: rgba(240,106,87,.07); border-color: rgba(240,106,87,.18); color: var(--scarlet); }

/* ── Services section ── */
[data-theme="dark"] .services-section { background: var(--cream); }
[data-theme="dark"] .section-label { color: var(--forest); }

/* ── Mission section ── */
[data-theme="dark"] .mission-section { background: var(--cream); }
[data-theme="dark"] .mission-headline { color: var(--ink); }
[data-theme="dark"] .mission-body { color: var(--ink2); }

/* ── Pillar cards ── */
[data-theme="dark"] .pillar-desc strong { color: var(--ink); }
[data-theme="dark"] .pillar-title { color: var(--ink); }

/* ── Success section ── */
[data-theme="dark"] .success-section { background: var(--cream); }
[data-theme="dark"] .success-title { color: var(--ink); }
[data-theme="dark"] .success-desc  { color: var(--ink2); }
[data-theme="dark"] .success-org   { color: var(--faint); }
[data-theme="dark"] .stl-text      { color: var(--faint); }
[data-theme="dark"] .stl-line      { background: var(--rule); }

/* ── Section headlines & bodies globally ── */
[data-theme="dark"] .section-headline { color: var(--ink) !important; }
[data-theme="dark"] .section-body     { color: var(--ink2); }

/* ── Generic cards ── */
[data-theme="dark"] .card, [data-theme="dark"] .info-card {
  background: var(--cream2);
  border-color: var(--rule);
}

/* ── Input fields ── */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=url],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--cream3);
  border-color: var(--rule);
  color: var(--ink);
}

/* ── Scroll progress & back-to-top ── */
[data-theme="dark"] #back-to-top {
  background: var(--cream2);
  border-color: var(--rule);
  color: var(--ink2);
}
[data-theme="dark"] #back-to-top:hover { background: var(--forest); color: #0e100d; }

/* ── BA saving banner text ── */
[data-theme="dark"] .ba-saving-desc { color: var(--ink2); }
[data-theme="dark"] .ba-total-label { color: var(--faint); }

/* ── Testimonials ── */
[data-theme="dark"] .testi-name   { color: var(--ink); }
[data-theme="dark"] .testi-role   { color: var(--faint); }
[data-theme="dark"] .testi-quote  { color: var(--ink2); }
[data-theme="dark"] .testi-person { border-top-color: var(--rule); }

/* ── Footer newsletter input ── */
[data-theme="dark"] 

/* ── How-it-works section bg ── */
[data-theme="dark"] .how {
  background: var(--cream2);
  border-color: var(--rule);
}

/* ── Capex chart fix ── */
[data-theme="dark"] .capex-chart { background: var(--cream3); border-color: var(--rule); }


/* ── Flywheel ── */
  .flywheel-wrap {
    max-width: 900px; margin: 0 auto 72px;
    padding: 0 20px;
  }
  .flywheel-eyebrow {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .35em; text-transform: uppercase;
    color: var(--forest); opacity: .7;
    text-align: center; margin-bottom: 36px;
  }
  .flywheel-stage {
    position: relative;
    width: 100%; aspect-ratio: 1 / 0.85;
    max-height: 600px;
  }
  .flywheel-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
  }

  /* Hub */
  .flywheel-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 148px; height: 148px;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
  }
  .flywheel-hub-pulse {
    position: absolute; inset: -16px;
    border-radius: 50%;
    border: 1.5px solid rgba(27,94,56,.2);
    animation: fw-pulse 3s ease-in-out infinite;
  }
  .flywheel-hub-pulse-2 {
    inset: -32px;
    border-color: rgba(27,94,56,.1);
    animation-delay: 1.5s;
  }
  @keyframes fw-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: .5; }
  }
  .flywheel-hub-inner {
    width: 148px; height: 148px; border-radius: 50%;
    background: var(--flit);
    border: 2px solid var(--forest);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    box-shadow: 0 0 0 6px rgba(27,94,56,.07), 0 8px 40px rgba(27,94,56,.15);
    position: relative; z-index: 1;
  }
  .fh-label {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--forest); opacity: .7;
  }
  .fh-word {
    font-family: 'Playfair Display', serif; font-size: 26px;
    font-weight: 900; color: var(--forest); line-height: 1;
    letter-spacing: -.02em;
  }

  /* Satellite nodes */
  .fw-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 128px;
    background: var(--cream2);
    border: 1.5px solid var(--rule);
    padding: 14px 14px 12px;
    text-align: center;
    cursor: default;
    transition: border-color .25s, box-shadow .25s, transform .25s, background .25s;
    z-index: 2;
    border-radius: 4px;
  }
  .fw-node:hover {
    border-color: var(--forest);
    background: var(--flit);
    box-shadow: 0 6px 28px rgba(27,94,56,.18);
    transform: translate(-50%, -52%) scale(1.06);
    z-index: 4;
  }
  .fw-node-icon { font-size: 22px; line-height: 1; margin-bottom: 7px; }
  .fw-node-title {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
    font-weight: 800; color: var(--forest);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 5px; line-height: 1.2;
  }
  .fw-node-desc {
    font-family: 'IBM Plex Sans', sans-serif; font-size: 11px;
    color: var(--faint); line-height: 1.5;
  }

  /* Staggered entrance animation */
  .fw-node { opacity: 0; }
  .fw-node.fw-visible {
    animation: fw-appear .5s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes fw-appear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .fw-node:hover { transform: translate(-50%, -52%) scale(1.06) !important; }

  /* Spoke animation */
  .fw-spoke {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset .6s ease;
  }
  .fw-spoke.fw-drawn { stroke-dashoffset: 0; }

  /* Dark theme */
  [data-theme="dark"] .flywheel-hub-inner {
    background: rgba(74,222,128,.08);
    border-color: var(--forest);
    box-shadow: 0 0 0 6px rgba(74,222,128,.06), 0 8px 40px rgba(74,222,128,.2);
  }
  [data-theme="dark"] .flywheel-hub-pulse { border-color: rgba(74,222,128,.2); }
  [data-theme="dark"] .flywheel-hub-pulse-2 { border-color: rgba(74,222,128,.1); }
  [data-theme="dark"] .fw-node {
    background: var(--cream2); border-color: var(--rule);
  }
  [data-theme="dark"] .fw-node:hover {
    border-color: var(--forest); background: rgba(74,222,128,.07);
    box-shadow: 0 6px 28px rgba(74,222,128,.2);
  }

  /* Responsive */
  @media(max-width:700px) {
    .flywheel-stage { aspect-ratio: auto; height: auto; min-height: 520px; }
    .fw-node { width: 108px; }
    .flywheel-hub { width: 120px; height: 120px; }
    .flywheel-hub-inner { width: 120px; height: 120px; }
    .fh-word { font-size: 20px; }
  }
  @media(max-width:460px) {
    .fw-node { width: 90px; padding: 10px 8px 8px; }
    .fw-node-desc { display: none; }
    .flywheel-hub { width: 100px; height: 100px; }
    .flywheel-hub-inner { width: 100px; height: 100px; }
    .fh-word { font-size: 17px; }
    .fh-label { font-size: 8px; }
  }

/* ═══════════════════════════════════════════════════════════════
   OWN360 — AUTHORITATIVE THEME CSS  (light + dark, single source)
   Always the last block in the style tag; wins all specificity battles.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV ──────────────────────────────────────────────────────── */
#sitenav {
  background: var(--cream);
  border-bottom: 1px solid var(--rule2);
}
#sitenav.scrolled { box-shadow: 0 2px 12px var(--sh); }
.nav-logo { color: var(--forest); }
.nav-link  { color: var(--ink2); }
.nav-link:hover { color: var(--ink); }
.nav-link.cta {
  background: var(--forest);
  color: var(--cream) !important;
}
.nav-link.cta:hover { background: var(--forest2); }
.nav-burger { border-color: var(--rule); color: var(--ink); }
.nav-drawer {
  background: var(--cream);
  border-left: 1px solid var(--rule);
}
.nav-drawer .nav-link { color: var(--ink2); border-bottom-color: var(--rule2); }
.nav-drawer .dcta {
  background: var(--forest);
  color: var(--cream) !important;
}
.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--rule);
  padding: 6px 12px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: normal;
  color: var(--ink2); transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--forest); color: var(--forest); }

/* ── SCROLL PROGRESS + BTT ────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--forest); z-index: 9999; transition: width .1s linear;
}
#back-to-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 40px; height: 40px; background: var(--cream2);
  border: 1px solid var(--rule); color: var(--ink);
  font-size: 18px; display: none; align-items: center;
  justify-content: center; cursor: pointer; z-index: 1000;
  transition: background .2s, color .2s;
}
#back-to-top:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }

/* ── PAGE HERO / BODY ─────────────────────────────────────────── */
body { background: var(--cream); color: var(--ink); }
.page-hero { border-bottom: 2px solid var(--rule); }
.page-title { color: var(--ink); }
.page-subtitle { color: var(--ink2); }
.section-headline { color: var(--ink); }
.section-note { color: var(--faint); }
.pull-quote { color: var(--ink2); border-color: var(--rule); background: var(--cream2); }

/* ── CARDS ────────────────────────────────────────────────────── */
[class*="-card"], .pillar, .step, .tier,
.faq-item, .info-card, .content-block,
.stat-block, .compare-wrap, .split-section {
  background: var(--cream2);
  border-color: var(--rule);
  color: var(--ink2);
}
[class*="-card"] h2, [class*="-card"] h3,
[class*="-card"] h4, .pillar h3, .stat-num { color: var(--forest); }
[class*="-card"] p, [class*="-card"] li,
.pillar p, .step p { color: var(--ink2); }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn-primary, .cta, .dcta, .btn-cta,
.cf-submit, .df-submit, .audit-form-submit {
  background: var(--forest);
  color: var(--cream) !important;
  border-color: var(--forest);
}
.btn-primary:hover, .cta:hover { background: var(--forest2); }
.btn-ghost, .btn-outline {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn-ghost:hover, .btn-outline:hover {
  background: var(--cream2);
  border-color: var(--ink);
  color: var(--ink);
}

/* ── FORMS ────────────────────────────────────────────────────── */
input, textarea, select,
.cf-input, .cf-select,
.audit-form-select, .audit-form-textarea,
.df-textarea, .faq-search, .money-wrap, .own-sel {
  background: var(--cream2);
  border-color: var(--rule);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
label, .cf-label, .df-label { color: var(--faint); }

/* ── TABLES ───────────────────────────────────────────────────── */
table { border-color: var(--rule); }
th { background: var(--cream3); color: var(--ink2); border-color: var(--rule); }
td { color: var(--ink2); border-color: var(--rule2); }
tr:hover td { background: var(--cream3); }

/* ── SECTIONS WITH DISTINCT BACKGROUNDS ──────────────────────── */
/* These all use token-based bg so they flip automatically: */
.graveyard { background: var(--cream3); color: var(--ink); text-align: center; padding-top: 100px; }
.graveyard .section-label, .graveyard .section-headline, .graveyard .section-body { text-align: center; }
.graveyard .section-label    { color: var(--forest); }
.graveyard .section-headline { color: var(--ink)    !important; }
.graveyard .section-body     { color: var(--ink2); }
.graveyard .app-logo-img, .graveyard .graveyard-logo { filter: none; }

.final-cta {
  background: var(--cream2);
  position: relative; z-index: 2;
  padding: 160px 60px; text-align: center; overflow: hidden;
}

.page-cta {
  background: var(--cream2) !important;
  border-top: 2px solid var(--rule) !important;
  padding: 72px 60px;
  text-align: center;
}
.page-cta h2, .page-cta h3 {
  color: var(--ink) !important;
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  margin-bottom: 16px;
}
.page-cta .btn-ghost { border-color: var(--rule) !important; color: var(--ink) !important; }
.page-cta .btn-ghost:hover {
  background: var(--flit) !important;
  border-color: var(--forest) !important;
  color: var(--forest) !important;
}

.section-alt-ink { background: var(--cream2); color: var(--ink); padding: 72px 60px; }

.api-code-block {
  background: var(--cream3);
  border: 1px solid var(--rule);
  color: var(--ink2);
}

/* ── FOOTER LAYOUT ────────────────────────────────────────────── */
/* ─── FOOTER LAYOUT (canonical, all pages) ────────────────────────────────── */
.site-


/* Footer responsive */
@media (max-width: 1200px) {
  
  
  
  
  
}
@media (max-width: 1024px) {
  
  
  
  
  
  
}
@media (max-width: 900px) {
  
  
  
  
  
  
  
  
  
}
@media (max-width: 600px) {
  
  
  
  
  
  
  
}
@media (max-width: 400px) {
  
  
}
/* ── FOOTER COLORS ─────────────────────────────────────────────── */
.site-

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES  [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body { background: var(--cream); color: var(--ink); }
[data-theme="dark"] #sitenav { background: rgba(14,16,13,.97) !important; border-bottom-color: var(--rule) !important; }
[data-theme="dark"] .nav-drawer { background: var(--cream2) !important; }
[data-theme="dark"] .nav-drawer .nav-link { border-bottom-color: var(--rule) !important; color: var(--ink2) !important; }
[data-theme="dark"] #back-to-top { background: var(--cream2); border-color: var(--rule); color: var(--ink); }
[data-theme="dark"] #back-to-top:hover { background: var(--forest); color: #0e100d; border-color: var(--forest); }

[data-theme="dark"] [class*="-card"],
[data-theme="dark"] .pillar,
[data-theme="dark"] .step,
[data-theme="dark"] .tier,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .info-card,
[data-theme="dark"] .content-block,
[data-theme="dark"] .stat-block,
[data-theme="dark"] .compare-wrap,
[data-theme="dark"] .split-section {
  background: var(--cream2) !important;
  border-color: var(--rule) !important;
}
[data-theme="dark"] [class*="-card"] h2,
[data-theme="dark"] [class*="-card"] h3,
[data-theme="dark"] [class*="-card"] h4,
[data-theme="dark"] .stat-num { color: var(--forest) !important; }
[data-theme="dark"] [class*="-card"] p,
[data-theme="dark"] [class*="-card"] li { color: var(--ink2) !important; }

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .cf-input,
[data-theme="dark"] .cf-select,
[data-theme="dark"] .audit-form-select,
[data-theme="dark"] .audit-form-textarea,
[data-theme="dark"] .df-textarea,
[data-theme="dark"] .faq-search,
[data-theme="dark"] .money-wrap,
[data-theme="dark"] .own-sel {
  background: var(--cream3) !important;
  border-color: var(--rule) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] th { background: var(--cream3) !important; color: var(--ink2) !important; }
[data-theme="dark"] td { color: var(--ink2) !important; }
[data-theme="dark"] tr:hover td { background: var(--cream3) !important; }

[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-outline {
  border-color: var(--rule) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-outline:hover {
  background: var(--cream3) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .api-code-block {
  background: #0a0c0a !important;
  color: var(--ink2) !important;
  border-color: var(--rule) !important;
}

/* Dark sections */
[data-theme="dark"] .graveyard { background: var(--cream3) !important; color: var(--ink) !important; }
[data-theme="dark"] .final-cta { background: var(--cream2) !important; }
[data-theme="dark"] .page-cta  { background: var(--cream2) !important; border-top-color: var(--rule) !important; }
[data-theme="dark"] .page-cta h2,
[data-theme="dark"] .page-cta h3 { color: var(--ink) !important; }
[data-theme="dark"] .page-cta p { color: var(--ink2) !important; }
[data-theme="dark"] .section-alt-ink { background: var(--cream2) !important; color: var(--ink) !important; }

/* Dark text/misc */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--ink); }
[data-theme="dark"] p, [data-theme="dark"] li { color: var(--ink2); }
[data-theme="dark"] a:not(.nav-logo):not(.social-link):not(.footer-link):not(.footer-micro-link):not(.footer-logo-mark):not(.fcta-btn-primary):not(.fcta-btn-ghost):not(.hiring-badge) { color: var(--ink2); }
[data-theme="dark"] .section-label  { color: var(--forest); }
[data-theme="dark"] .section-headline { color: var(--ink) !important; }
[data-theme="dark"] .page-tag { color: var(--forest) !important; border-color: var(--rule) !important; }

/* Inline hardcoded light colors → override to dark equivalents */
[data-theme="dark"] [style*="background:#f6f3ec"],
[data-theme="dark"] [style*="background: #f6f3ec"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] { background: var(--cream2) !important; }
[data-theme="dark"] [style*="color:#110f08"],
[data-theme="dark"] [style*="color: #110f08"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color:black"] { color: var(--ink) !important; }


/* ── Own360 section-specific light mode fixes ─────────────────── */
.graveyard .section-body { color: var(--ink2) !important; }
.hero-stat-num { color: var(--forest); }
.hero-stat-lbl { color: var(--faint); }

[data-theme="dark"] .graveyard .section-label { color: var(--forest); }
[data-theme="dark"] .graveyard .section-headline { color: var(--ink) !important; }
[data-theme="dark"] .graveyard .section-body { color: var(--faint) !important; }
/* ── Light mode text visibility fixes ─────────────────────────── */

/* Sidebar section labels — inka18 is nearly invisible in light */
.sidebar-section-label { color: var(--faint) !important; }

/* Hero subtitle — ensure strong contrast */
.hero-sub { color: var(--ink2); }

/* Section body text — boost readability */
.section-body { color: var(--ink2); }

/* Card body text */
.card-body { color: var(--ink2); }

/* Content block paragraphs */
.content-block p { color: var(--ink2); }

/* Service descriptions */
.service-desc { color: var(--ink2); }

/* How-it-works descriptions */
.how-desc { color: var(--ink2); }

/* Truth descriptions */
.truth-desc { color: var(--ink2); }

/* Pillar descriptions */
.pillar-desc { color: var(--ink2); }

/* Capex descriptions */
.capex-desc { color: var(--ink2); }

/* Success descriptions */
.success-desc { color: var(--ink2); }

/* Mission body */
.mission-body { color: var(--ink2); }

/* Footer tagline */
.footer-tagline { color: var(--ink2); }

/* FAQ answer text */
.pf-a { color: var(--ink2); }

/* ROI sub text */
.roi-sub { color: var(--ink2); }

/* Stack total description */
.stack-total-desc { color: var(--ink2); }

/* Page subtitle on sub-pages */
.page-subtitle { color: var(--ink2); }

/* Pricing tagline */
.pc-tagline { color: var(--ink2); }

/* Enterprise pricing description */
.pe-desc { color: var(--ink2); }

/* Financial card descriptions */
.fin-desc { color: var(--ink2); }

/* Legal page body text */
.legal-body .content-block p { color: var(--ink2); }
.legal-body .content-block li { color: var(--ink2); }

/* Section note text */
.section-note { color: var(--ink2); }

/* Newsletter subtitle */
.fn-sub { color: var(--ink2); }

/* Footer copy text */
.footer-copy { color: var(--ink2); }

/* Contact and form labels — keep readable */
.page-cta p { color: var(--ink2); }

/* Theme transition */
.theme-transitioning * {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ═══════════════════════════════════════════
   ECOSYSTEM SECTION
═══════════════════════════════════════════ */
.ecosystem-section {
  padding: 120px 48px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Stack of layers */
.eco-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 0 auto 48px;
  position: relative;
}

/* Each layer card */
.eco-layer {
  border: 1px solid var(--rule);
  background: var(--cream2);
  position: relative;
  transition: box-shadow .25s, border-color .25s;
}
.eco-layer:hover {
  box-shadow: 0 8px 32px var(--sh2);
}
[data-theme="dark"] .eco-layer {
  background: var(--cream2);
}

/* Layer accent bars on the left */
.eco-layer--agents { border-left: 4px solid var(--cobalt); }
.eco-layer--central { border-left: 4px solid var(--gold); }
.eco-layer--apps   { border-left: 4px solid var(--forest); }

.eco-layer-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 20px 0;
}

.eco-layer-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 16px 20px 24px;
}

.eco-layer-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule2);
  background: var(--cream);
}
.eco-layer--agents .eco-layer-icon { color: var(--cobalt); border-color: rgba(26,63,196,.2); }
.eco-layer--central .eco-layer-icon { color: var(--gold); border-color: rgba(154,98,0,.2); }
.eco-layer--apps   .eco-layer-icon { color: var(--forest); border-color: rgba(27,94,56,.2); }

.eco-layer-content { flex: 1; }

.eco-layer-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.eco-layer--agents .eco-layer-name { color: var(--cobalt); }
.eco-layer--central .eco-layer-name { color: var(--gold); }
.eco-layer--apps .eco-layer-name { color: var(--forest); }

.eco-layer-tagline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  margin-bottom: 10px;
}

.eco-layer-desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--faint);
  margin: 0 0 14px;
}

.eco-layer-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eco-feat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .05em;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  color: var(--faint);
  background: var(--cream);
}

/* Connector between layers */
.eco-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  position: relative;
}
.eco-connector-line {
  width: 1px;
  height: 28px;
  background: var(--rule);
  margin: 0 auto;
  display: block;
}
.eco-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eco-connector-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: .6;
  text-align: center;
  padding: 2px 0;
}

/* Callout box */
.eco-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid rgba(27,94,56,.2);
  background: var(--flit);
}
[data-theme="dark"] .eco-callout {
  background: rgba(74,222,128,.05);
  border-color: rgba(74,222,128,.15);
}
.eco-callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.eco-callout-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink2);
}
.eco-callout-text strong { color: var(--ink); }

@media (max-width: 640px) {
  .ecosystem-section { padding: 80px 20px; }
  .eco-layer-inner { flex-direction: column; gap: 16px; }
  .eco-layer-icon { width: 40px; height: 40px; }
  .eco-layer-name { font-size: 18px; }
  .eco-layer-preview { display: none; }
}

/* ── App Detail Screenshot ── */
.ad-screenshot {
  width: calc(100% + 48px);
  margin: -24px -24px 20px -24px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule2);
  max-height: 220px;
}
.ad-screenshot img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
}
[data-theme="dark"] .ad-screenshot { border-bottom-color: var(--rule); }

/* ── OwnCentral Layer Preview ── */
.eco-layer-preview {
  flex-shrink: 0;
  width: 280px;
}
.eco-preview-frame {
  border: 1px solid var(--rule2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream2);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="dark"] .eco-preview-frame {
  border-color: var(--rule);
  background: rgba(232,228,216,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.eco-preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cream3);
  border-bottom: 1px solid var(--rule2);
}
[data-theme="dark"] .eco-preview-bar {
  background: rgba(232,228,216,.04);
  border-bottom-color: var(--rule);
}
.eco-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
  display: inline-block;
}
.eco-preview-dot:nth-child(1) { background: #ff5f57; }
.eco-preview-dot:nth-child(2) { background: #febc2e; }
.eco-preview-dot:nth-child(3) { background: #28c840; }
.eco-preview-url {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--faint);
  text-align: center;
}
.eco-preview-frame img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ── Product Gallery Section ── */
.gallery-section {
  padding: 100px 40px;
  background: var(--cream);
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.gallery-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--rule2);
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  border-radius: 4px;
  transition: all .2s;
}
.gallery-tab:hover,
.gallery-tab.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
[data-theme="dark"] .gallery-tab {
  border-color: var(--rule);
  color: var(--faint);
}
[data-theme="dark"] .gallery-tab:hover,
[data-theme="dark"] .gallery-tab.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.gallery-viewport {
  max-width: 900px;
  margin: 0 auto;
}
.gallery-browser-frame {
  border: 1px solid var(--rule2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
  background: var(--cream2);
}
[data-theme="dark"] .gallery-browser-frame {
  border-color: var(--rule);
  background: rgba(232,228,216,.04);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.gallery-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cream3);
  border-bottom: 1px solid var(--rule2);
}
[data-theme="dark"] .gallery-browser-bar {
  background: rgba(232,228,216,.04);
  border-bottom-color: var(--rule);
}
.gallery-browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.gallery-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.gallery-browser-dots span:nth-child(1) { background: #ff5f57; }
.gallery-browser-dots span:nth-child(2) { background: #febc2e; }
.gallery-browser-dots span:nth-child(3) { background: #28c840; }
.gallery-browser-url {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--rule2);
  padding: 4px 12px;
  border-radius: 20px;
}
[data-theme="dark"] .gallery-browser-url {
  background: rgba(232,228,216,.04);
  border-color: var(--rule);
}
.gallery-browser-content img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: left top;
  display: block;
  transition: opacity .25s ease;
}
@media (max-width: 768px) {
  .gallery-section { padding: 80px 20px; }
  .gallery-browser-content img { height: 280px; }
  .gallery-tab { font-size: 10px; padding: 6px 12px; }
}