:root { --ink:#13100d; --paper:#f5f1e8; --acid:#d7ff3f; --orange:#ff5a36; --line:rgba(19,16,13,.16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans SC",sans-serif; } .grain { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.site-header { position:fixed; inset:0 0 auto; z-index:10; padding:22px clamp(20px,4vw,64px); display:flex; justify-content:space-between; mix-blend-mode:multiply; } .brand { color:inherit; text-decoration:none; font-size:18px; font-weight:800; letter-spacing:-.05em; } .brand span,.progress-label,.eyebrow,.slide-index,.scroll-cue,.back-top { font-family:"DM Mono",monospace; letter-spacing:.06em; } .brand span { margin-left:10px; font-size:9px; letter-spacing:.05em; font-weight:500; } .progress-label { margin:4px 0; font-size:10px; } .progress-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--orange); }
.slide { min-height:100svh; position:relative; padding:clamp(110px,15vh,160px) clamp(20px,9vw,150px) clamp(54px,8vh,100px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line); } .slide-index { position:absolute; top:110px; left:clamp(20px,4vw,64px); font-size:10px; color:rgba(19,16,13,.55); } .eyebrow { margin:0 0 22px; font-size:11px; color:rgba(19,16,13,.6); } h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.07em; line-height:.94; } h1 { margin-bottom:28px; font-size:clamp(78px,15vw,230px); } h1 span { color:var(--orange); } h2 { margin-bottom:0; max-width:900px; font-size:clamp(44px,8vw,126px); font-weight:800; } h2 em { font-style:normal; color:var(--orange); } .hero { min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); align-items:center; gap:clamp(32px,7vw,120px); background:var(--ink); color:var(--paper); isolation:isolate; } .hero::after { content:"01"; position:absolute; right:2vw; bottom:-.23em; z-index:-1; color:rgba(245,241,232,.045); font:700 clamp(180px,29vw,500px)/.7 "DM Mono",monospace; letter-spacing:-.12em; } .hero .eyebrow { color:var(--acid); } .hero-copy { position:relative; z-index:1; max-width:820px; } .hero-title { margin:0; font-size:clamp(88px,12.3vw,210px); white-space:nowrap; } .hero-claim { margin:clamp(26px,4vh,46px) 0 18px; max-width:640px; font-size:clamp(27px,3vw,50px); font-weight:700; line-height:1.12; letter-spacing:-.06em; } .hero-description { max-width:485px; margin:0; color:rgba(245,241,232,.7); font-size:15px; line-height:1.95; } .phone-stage { position:relative; z-index:1; justify-self:center; width:min(100%,460px); } .phone-mockup { position:relative; aspect-ratio:9/18.5; padding:11px; overflow:hidden; border:1px solid rgba(245,241,232,.7); border-radius:clamp(35px,4vw,58px); background:#211d19; box-shadow:22px 30px 0 rgba(215,255,63,.92), 0 35px 80px rgba(0,0,0,.38); } .phone-speaker { position:absolute; top:20px; left:50%; z-index:2; width:28%; height:23px; border-radius:18px; background:#211d19; transform:translateX(-50%); } .phone-screen { display:block; width:100%; height:100%; object-fit:cover; border-radius:clamp(26px,3vw,47px); background:linear-gradient(145deg,#d7ff3f 0%,#d7ff3f 45%,#ff5a36 45%,#ff5a36 100%); } .scroll-cue { position:absolute; bottom:38px; left:clamp(20px,4vw,64px); color:inherit; font-size:10px; text-decoration:none; } .scroll-cue i { margin-left:8px; color:var(--acid); font-style:normal; }
.problem { background:var(--orange); } .statement-card { align-self:flex-end; width:min(100%,500px); margin-top:50px; padding:32px; border:1px solid var(--ink); background:var(--paper); } .card-number,.feature-card span,.iteration-rail small { font-family:"DM Mono",monospace; font-size:11px; } .statement-card p { margin:56px 0 0; font-size:clamp(27px,3.4vw,48px); font-weight:700; line-height:1.25; letter-spacing:-.05em; }.insight { background:var(--acid); } .insight-line { margin-top:clamp(54px,11vh,150px); font-size:clamp(25px,4.5vw,70px); line-height:1.08; letter-spacing:-.06em; } .insight-line strong { display:block; color:var(--orange); }.features { background:#ddd7cb; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:50px; }.feature-card { min-height:255px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--ink); }.feature-card h3 { margin:auto 0 8px; font-size:27px; letter-spacing:-.05em; }.feature-card p { margin:0; font-size:14px; line-height:1.65; }.iteration { background:var(--ink); color:var(--paper); }.iteration .eyebrow { color:var(--acid); }.iteration-rail { display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; border-top:1px solid rgba(245,241,232,.35); }.iteration-rail div { padding:20px 15px 0 0; border-right:1px solid rgba(245,241,232,.35); }.iteration-rail div:last-child { border:0; padding-left:15px; }.iteration-rail .active { color:var(--acid); }.iteration-rail p { font-size:clamp(18px,2.2vw,30px); letter-spacing:-.04em; }.feedback { background:#ccd5e0; }.feedback-quote { max-width:770px; margin:60px 0 0; font-size:clamp(34px,5vw,76px); font-weight:700; line-height:1.15; letter-spacing:-.06em; }.feedback-quote cite { display:block; margin-top:26px; font-family:"DM Mono",monospace; font-size:11px; font-weight:400; letter-spacing:.04em; font-style:normal; }.reflection { background:var(--paper); }.closing-note { margin-top:60px; font-size:clamp(20px,3vw,42px); line-height:1.25; letter-spacing:-.05em; }.closing-note p { margin-bottom:7px; }.back-top { position:absolute; right:clamp(20px,4vw,64px); bottom:38px; color:inherit; font-size:10px; text-decoration:none; }
@media (max-width:700px) { .site-header { padding:18px 20px; }.brand span,.progress-label { display:none; }.slide-index { top:82px; left:20px; }.hero { grid-template-columns:1fr; align-content:center; gap:36px; padding-top:108px; padding-bottom:76px; }.hero-title { font-size:clamp(70px,19vw,126px); white-space:normal; }.hero-claim { margin-top:24px; font-size:clamp(27px,8vw,43px); }.hero-description { font-size:14px; line-height:1.8; }.phone-stage { width:min(68vw,310px); justify-self:end; }.phone-mockup { box-shadow:14px 18px 0 rgba(215,255,63,.92),0 25px 55px rgba(0,0,0,.32); }.feature-grid,.iteration-rail { grid-template-columns:1fr; }.feature-card { min-height:180px; }.iteration-rail div,.iteration-rail div:last-child { padding:16px 0; border-right:0; border-bottom:1px solid rgba(245,241,232,.35); }.iteration-rail div:last-child { border-bottom:0; }.feedback-quote { margin-top:38px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } }

/* 06B — Live Product Data: editorial scroll states, never a dashboard grid. */
.live-product-data { display:block; min-height:100svh; padding:0; overflow:visible; border-bottom:0; background:var(--ink); color:var(--paper); }.live-product-frame { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:100svh; padding:clamp(112px,15vh,160px) clamp(24px,7vw,128px) clamp(58px,9vh,100px); }.live-state { display:flex; flex-direction:column; justify-content:center; min-height:90svh; }.live-label { margin:0 0 22px; color:var(--acid); font:500 clamp(12px,.9vw,14px)/1 "DM Mono",monospace; letter-spacing:.1em; }.live-product-data .eyebrow { color:var(--acid); }.live-product-data h2 { max-width:1050px; color:var(--paper); font-size:clamp(54px,7vw,124px); }.live-date { margin:26px 0 0; color:rgba(245,241,232,.6); font-size:clamp(15px,1.2vw,19px); }.live-number-sequence { display:grid; grid-template-columns:1.35fr 1fr .84fr; gap:clamp(24px,5vw,92px); max-width:1200px; margin-top:clamp(50px,9vh,96px); }.live-number-sequence p,.group-number-sequence p,.pause-comparison p { position:relative; display:flex; flex-direction:column; gap:9px; margin:0; padding-top:15px; border-top:1px solid rgba(245,241,232,.3); }.live-number-sequence p:nth-child(2) { margin-top:clamp(28px,8vh,90px); }.live-number-sequence p:nth-child(3) { margin-top:clamp(56px,16vh,180px); }.live-count { color:var(--acid); font-size:clamp(62px,8vw,132px); font-weight:800; line-height:.82; letter-spacing:-.1em; font-variant-numeric:tabular-nums; }.live-number-sequence span,.group-number-sequence span,.pause-comparison span { color:rgba(245,241,232,.7); font-size:clamp(16px,1.45vw,23px); font-weight:600; line-height:1.35; }.live-backdrop { position:absolute; top:50%; right:-.04em; z-index:-1; margin:0; color:rgba(245,241,232,.045); font:700 clamp(160px,25vw,430px)/.74 "DM Mono",monospace; letter-spacing:-.14em; transform:translateY(-50%); }.pause-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(260px,.55fr); align-items:end; gap:clamp(32px,8vw,130px); margin-top:clamp(38px,7vh,74px); }.live-count-pause { display:block; color:var(--acid); font-size:clamp(7rem,18vw,18rem); line-height:.76; white-space:nowrap; }.pause-layout > div:first-child > p { margin:22px 0 0; font-size:clamp(23px,2.3vw,42px); font-weight:700; line-height:1.13; letter-spacing:-.06em; }.pause-context { max-width:330px; margin-bottom:8px; }.pause-context p { margin:0 0 15px; color:rgba(245,241,232,.7); font-size:clamp(16px,1.38vw,21px); line-height:1.55; }.pause-context strong,.pause-comparison strong { color:var(--paper); }.pause-comparison { display:flex; gap:clamp(32px,5vw,74px); margin-top:clamp(38px,6vh,72px); }.pause-comparison p { min-width:min(28vw,205px); }.pause-comparison strong { font-size:clamp(44px,4.5vw,76px); line-height:.9; letter-spacing:-.08em; }.pause-thesis { max-width:660px; margin:clamp(38px,7vh,70px) 0 0; font-size:clamp(22px,2.25vw,38px); font-weight:700; line-height:1.22; letter-spacing:-.06em; }.pause-thesis em,.live-conclusion-accent { color:var(--orange); font-style:normal; }.live-copy { max-width:500px; margin:clamp(30px,5vh,54px) 0 0; color:rgba(245,241,232,.72); font-size:clamp(18px,1.6vw,25px); line-height:1.55; }.group-number-sequence { display:flex; flex-direction:column; width:min(100%,620px); margin-top:clamp(34px,6vh,68px); }.group-number-sequence p { display:grid; grid-template-columns:minmax(150px,.8fr) 1fr; align-items:baseline; gap:clamp(20px,4vw,64px); padding:clamp(17px,2.5vh,28px) 0; }.group-number-sequence p:not(:last-child)::after { content:"↓"; position:absolute; right:0; bottom:-.45em; color:var(--orange); font:400 clamp(22px,2vw,32px)/1 "DM Mono",monospace; }.group-number-sequence .live-count { font-size:clamp(52px,6.2vw,104px); }.live-state-conclusion { align-items:flex-start; }.live-state-conclusion > p:not(.live-label) { margin:clamp(34px,6vh,64px) 0 0; font-size:clamp(28px,3vw,52px); font-weight:700; line-height:1.14; letter-spacing:-.065em; }.live-conclusion-accent { margin-top:clamp(54px,10vh,110px) !important; font-size:clamp(35px,4.1vw,72px) !important; }.live-data-source { margin:0; padding:clamp(26px,4vh,48px) clamp(24px,7vw,128px) clamp(42px,6vh,70px); color:rgba(245,241,232,.42); font:400 clamp(10px,.8vw,12px)/1.65 "DM Mono",monospace; letter-spacing:.035em; }
.has-gsap .live-product-data { min-height:100svh; }.has-gsap .live-product-frame { height:100svh; min-height:0; }.has-gsap .live-state { position:absolute; inset:0; min-height:0; opacity:0; visibility:hidden; pointer-events:none; }.has-gsap .live-state.is-active { visibility:visible; pointer-events:auto; }
.has-gsap .live-number-sequence > p,.has-gsap .group-number-sequence > p { opacity:0; visibility:hidden; }
@media (max-width:700px) { .live-product-frame { padding:108px 24px 76px; }.live-state { min-height:auto; padding:46px 0; }.live-product-data h2 { font-size:clamp(50px,13vw,76px); }.live-number-sequence { grid-template-columns:1fr; gap:26px; margin-top:48px; }.live-number-sequence p:nth-child(n) { margin-top:0; }.live-count { font-size:clamp(66px,18vw,112px); }.pause-layout { grid-template-columns:1fr; gap:34px; }.live-count-pause { font-size:clamp(6.4rem,27vw,10rem); }.pause-comparison { gap:24px; }.pause-comparison p { min-width:0; flex:1; }.group-number-sequence p { grid-template-columns:minmax(130px,.85fr) 1fr; gap:20px; }.group-number-sequence .live-count { font-size:clamp(51px,14vw,78px); }.live-data-source { padding:26px 24px 48px; }.has-gsap .live-product-frame { height:100svh; }.has-gsap .live-state { padding:108px 24px 76px; }.live-backdrop { right:-.14em; font-size:clamp(130px,34vw,190px); } }

/* 04B — Wallet Groups: one persistent device, three long-term collaboration states. */
.wallet-groups { display:block; min-height:100svh; padding:0; overflow:visible; border-bottom:0; background:#d8d0c3; color:var(--ink); }.wallet-groups-frame { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.72fr); align-items:center; gap:clamp(44px,9vw,160px); min-height:100svh; padding:clamp(112px,15vh,160px) clamp(24px,7vw,128px) clamp(58px,9vh,100px); }.wallet-groups-copy { position:relative; min-width:0; }.wallet-step { display:flex; flex-direction:column; justify-content:center; min-height:82svh; }.wallet-label,.wallet-step-index { margin:0; color:var(--orange); font:500 clamp(12px,.9vw,14px)/1 "DM Mono",monospace; letter-spacing:.1em; }.wallet-step .eyebrow { margin-top:18px; }.wallet-step h2 { max-width:960px; margin:28px 0 0; font-size:clamp(54px,6.6vw,118px); }.wallet-opening-copy { max-width:620px; margin:clamp(38px,7vh,72px) 0 0; font-size:clamp(18px,1.55vw,25px); line-height:1.62; }.wallet-opening-accent { margin:28px 0 0; color:var(--orange); font-size:clamp(25px,2.45vw,42px); font-weight:800; line-height:1.15; letter-spacing:-.06em; }.wallet-step-index { margin-top:clamp(44px,8vh,92px); color:var(--ink); font-size:clamp(22px,2vw,34px); }.wallet-step h3 { max-width:680px; margin:18px 0 0; font-size:clamp(46px,5.2vw,92px); font-weight:800; line-height:.96; letter-spacing:-.085em; }.wallet-step > p:not(.wallet-label):not(.eyebrow):not(.wallet-step-index):not(.wallet-opening-copy):not(.wallet-opening-accent):not(.wallet-note):not(.wallet-closing-statement) { max-width:500px; margin:26px 0 0; font-size:var(--type-body,clamp(18px,1.55vw,24px)); line-height:1.58; }.wallet-note { max-width:410px; margin:28px 0 0; color:rgba(19,16,13,.62); font-size:clamp(15px,1.25vw,20px); font-weight:600; line-height:1.5; }.wallet-closing-statement { margin:clamp(44px,8vh,84px) 0 0; font-size:clamp(28px,3.1vw,54px); font-weight:800; line-height:1.08; letter-spacing:-.07em; }.wallet-closing-statement em { color:var(--orange); font-style:normal; }.wallet-device { justify-self:center; width:min(100%,420px); }.wallet-phone { position:relative; aspect-ratio:9/18.5; padding:10px; overflow:hidden; border:2px solid var(--acid); border-radius:clamp(34px,4vw,56px); background:var(--ink); box-shadow:18px 22px 0 rgba(255,90,54,.7); }.wallet-phone-speaker { position:absolute; top:19px; left:50%; z-index:4; width:28%; height:22px; border-radius:16px; background:var(--ink); transform:translateX(-50%); }.wallet-screen { position:absolute; inset:10px; z-index:1; display:block; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:clamp(25px,3vw,45px); object-fit:contain; opacity:0; }.wallet-screen.is-active { z-index:2; opacity:1; }.has-gsap .wallet-groups-frame { height:100svh; min-height:0; }.has-gsap .wallet-step { position:absolute; inset:0; min-height:0; opacity:0; visibility:hidden; pointer-events:none; }.has-gsap .wallet-step.is-active { visibility:visible; pointer-events:auto; }
.wallet-step.is-active .wallet-step-index { color:var(--orange); font-weight:700; }
@media (max-width:700px) { .wallet-groups-frame { grid-template-columns:1fr; gap:32px; padding:108px 24px 76px; }.wallet-device { order:-1; width:min(74vw,350px); }.wallet-step { min-height:68svh; }.wallet-step h2 { font-size:clamp(50px,13vw,74px); }.wallet-step h3 { font-size:clamp(43px,11vw,64px); }.has-gsap .wallet-groups-frame { height:100svh; }.has-gsap .wallet-step { padding:108px 24px 76px; }.has-gsap .wallet-device { position:absolute; right:24px; bottom:68px; z-index:2; width:min(42vw,230px); opacity:.98; }.has-gsap .wallet-step { padding-right:min(48vw,300px); }.has-gsap .wallet-step:first-child { padding-right:24px; }.has-gsap .wallet-step h2 { font-size:clamp(46px,11vw,68px); }.has-gsap .wallet-step h3 { font-size:clamp(41px,10vw,59px); }.has-gsap .wallet-opening-copy { font-size:16px; }.has-gsap .wallet-opening-accent { font-size:25px; } }
@media (prefers-reduced-motion: reduce) { .wallet-screen { position:relative; inset:auto; width:100%; height:auto; margin-top:22px; border-radius:0; opacity:1; }.wallet-phone { display:flex; flex-direction:column; height:auto; aspect-ratio:auto; }.wallet-phone-speaker { display:none; } }

/* Case navigation stays legible over every existing slide. */
.site-header { z-index:100; align-items:center; gap:24px; padding:12px clamp(20px,4vw,64px); background:#17120f; color:#f3efe5; mix-blend-mode:normal; }
.case-nav { display:flex; align-items:center; gap:clamp(14px,1.5vw,28px); min-width:0; }
.case-nav a { position:relative; display:inline-flex; align-items:center; min-height:44px; color:rgba(243,239,229,.75); font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; }
.case-nav a:hover,.case-nav a[aria-current="location"] { color:#d7ff3f; }
.case-nav a:focus-visible,.brand:focus-visible { outline:2px solid #d7ff3f; outline-offset:4px; }
section[id] { scroll-margin-top:70px; }

/* Public square: an editorial product decision, not another pinned story. */
.square-story { display:grid; align-content:center; gap:clamp(28px,4vh,48px); min-height:100svh; padding:clamp(112px,14vh,150px) clamp(24px,7vw,128px) clamp(70px,9vh,100px); background:#d4dfe5; color:#17120f; }
.square-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.5fr); gap:10px 48px; align-items:end; }
.square-kicker { grid-column:1 / -1; margin:0; color:#bd3a21; font:600 13px/1.4 "DM Mono",monospace; letter-spacing:.1em; }
.square-intro h2 { margin:0; font-size:clamp(50px,5.6vw,100px); line-height:1.05; letter-spacing:-.065em; }
.square-intro h2 em { font-style:normal; color:#bd3a21; }
.square-lead { max-width:330px; margin:0; font-size:clamp(17px,1.3vw,22px); line-height:1.6; font-weight:600; }
.square-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,70px); }
.square-journey article { min-width:0; padding-top:16px; border-top:1px solid rgba(23,18,15,.4); }
.square-journey span { font:600 12px/1.4 "DM Mono",monospace; color:#a23521; letter-spacing:.06em; }
.square-journey h3 { margin:14px 0; font-size:clamp(23px,2vw,34px); line-height:1.17; letter-spacing:-.04em; }
.square-journey p { max-width:380px; margin:0; font-size:clamp(15px,1.05vw,18px); line-height:1.6; }
.square-evidence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,70px); }
.square-evidence p { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin:0; }
.square-evidence strong { font-size:clamp(38px,4.5vw,76px); line-height:1; letter-spacing:-.06em; }
.square-evidence span { font-size:14px; line-height:1.4; }
.square-caveat { max-width:850px; margin:0; color:#4a5151; font-size:13px; line-height:1.6; }
@media(max-width:900px) { .site-header { flex-wrap:wrap; gap:0; padding:8px 20px; }.case-nav { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }.case-nav a { min-height:38px; }.square-intro { grid-template-columns:1fr; }.square-journey { gap:22px; }.square-evidence strong { font-size:clamp(34px,5.5vw,60px); } }
@media(max-width:700px) { .site-header .brand span { display:inline; }.case-nav { gap:22px; }.square-story { padding:125px 24px 78px; gap:32px; }.square-intro h2 { font-size:clamp(42px,10vw,62px); }.square-journey,.square-evidence { grid-template-columns:1fr; gap:24px; }.square-evidence p { border-top:1px solid rgba(23,18,15,.3); padding-top:14px; }.square-evidence strong { min-width:140px; }.square-caveat { font-size:13px; } section[id] { scroll-margin-top:100px; } }