@font-face{font-family:Inter;src:url('/assets/charles-page/assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#030504;--text:#f4f4ee;--muted:#a9b2af;--line:#29302c;--lime:#d4ff65;--cyan:#78ece4;--gold:#e6bd76;--header:48px}*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:6px}button:disabled{cursor:default}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.06;font-weight:500;letter-spacing:-.05em}h1{font-size:clamp(42px,5.2vw,72px)}h2{font-size:clamp(38px,5.5vw,76px)}h3{font-size:30px}p{color:var(--muted)}.skip-link{position:fixed;z-index:20000;top:-80px;left:20px;padding:12px;background:#fff;color:#000}.skip-link:focus{top:12px}.button{display:inline-flex;gap:30px;align-items:center;justify-content:center;font-size:15px;line-height:1.2;font-weight:600;padding:17px 25px;border-radius:6px;min-height:50px}.primary{background:var(--lime);color:#0c1208}.button:hover{background:#e4ff9b;text-decoration:none}.story{height:auto;position:relative}.enhanced-story .story{height:calc(100svh - var(--header))}.story-stage{position:relative;height:calc(100svh - var(--header));min-height:0;overflow:hidden;background:#000}.hero-copy{position:absolute;z-index:4;top:14px;left:20px;right:20px;text-align:center;pointer-events:none}.hero-copy p{font-size:clamp(16px,1.5vw,21px);margin:12px auto 19px;color:#d0d7d2;max-width:650px}.hero-copy a{pointer-events:auto}.scene{position:absolute;inset:0;overflow:hidden}.plate,.ambient,#transform{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.phone-screen{position:absolute;left:50%;top:48%;height:46%;aspect-ratio:522/1172;transform:translateX(-50%);border:4px solid #424a45;border-radius:22px;background:#101310;overflow:hidden;box-shadow:0 10px 60px #33573444}.phone-screen.measured{transform:none;border:0;border-radius:var(--screen-radius,14px);box-shadow:none}.phone-screen video{display:block;width:100%;height:100%;object-fit:contain;background:#080a09}.story-controls{position:absolute;z-index:5;bottom:14px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#d3d9d4}.story-controls button{border:1px solid #4d5650;border-radius:30px;background:#030504b3;min-height:40px;padding:6px 16px;font-size:12px}.story-controls a{padding:10px 0}.story-controls span{color:#a8b3ac}.section{max-width:1280px;margin:auto;padding:128px 56px;border-bottom:1px solid var(--line)}.section-label{font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--cyan);margin-bottom:26px}.founder,.personality,.charles{display:grid;grid-template-columns:1fr 1fr;gap:90px}.prose p+p{margin-top:22px}.lead{font-size:clamp(21px,2.1vw,29px);line-height:1.5;color:#e0e6e1;letter-spacing:-.025em}.section-intro{max-width:830px}.section-intro>p:last-child,.section-deck{max-width:600px;margin-top:26px;font-size:18px}.work-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px;margin-top:65px}.capture{max-width:300px;justify-self:center}.capture img{width:100%;border-radius:18px;border:1px solid #3a433b}.capture figcaption{color:var(--muted);font-size:12px;text-align:center;margin-top:18px}.explain-list details{border-top:1px solid var(--line);padding:25px 0}.explain-list summary{font-size:23px;cursor:pointer;letter-spacing:-.03em}.explain-list details p{padding-top:16px;max-width:400px}.team-list{margin-top:55px}.team-list article{display:grid;grid-template-columns:50px 1fr 1fr;gap:20px;align-items:center;border-top:1px solid var(--line);padding:28px 0}.team-list article>span{font-size:11px;color:var(--gold);font-variant-numeric:tabular-nums}.team-list h3 small{display:block;font-size:13px;letter-spacing:0;color:var(--muted);margin-top:9px;font-weight:400}.team-list p{max-width:400px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:55px}.text-link{display:inline-block;color:var(--lime);font-size:16px;margin-top:28px}.text-link span{margin-left:24px}.desktop-proof{margin-top:55px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.desktop-proof img{width:100%;display:block}.trust-list{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:55px}.trust-list h3{font-size:20px;letter-spacing:-.02em;margin-bottom:18px}.install{text-align:center;border:0;padding-bottom:140px}.install h2{font-size:clamp(52px,7.8vw,110px)}.install>p:not(.section-label){margin:30px 0}.steps{list-style:none;padding:0;display:flex;justify-content:center;gap:35px;counter-reset:steps;margin:45px 0 0;color:var(--muted);font-size:13px}.steps li:before{counter-increment:steps;content:counter(steps) ' / ';color:var(--gold)}footer{border-top:1px solid var(--line);padding:36px 5vw;display:flex;justify-content:space-between;gap:30px;font-size:12px;letter-spacing:.05em}footer nav{display:flex;gap:24px;letter-spacing:0}.download-page{max-width:1150px;padding:80px 40px;margin:auto}.download-page h1{font-size:clamp(45px,6vw,80px)}.download-page>.intro{max-width:590px;font-size:20px;margin:25px 0 50px}.downloads{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.download-choice{border:1px solid var(--line);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:20px}.download-choice:first-child{border-color:#8cab49}.download-choice h2{font-size:32px}.download-choice .button{margin-top:auto;gap:10px;padding:16px}.release-meta{font-size:12px;color:var(--muted)}.release-note{font-size:13px;color:var(--gold)}.download-help{max-width:750px;margin-top:70px}.download-help h2{font-size:32px;margin-bottom:25px}.download-help li{margin:18px 0}.download-help a{text-decoration:underline}.static-story .story{height:auto}.static-story .story-stage{position:relative;top:0;height:850px;min-height:0}.static-story #pause{display:none}[hidden]{display:none!important}
@media(min-width:1800px){:root{--header:56px}}
@media(max-width:700px){:root{--header:80px}.story-stage{min-height:600px}.hero-copy{top:20px;left:16px;right:16px}.hero-copy h1{font-size:40px}.hero-copy p{font-size:16px;max-width:310px;margin:12px auto 17px;line-height:1.5}.hero-copy .button{padding:13px 21px;min-height:44px;font-size:14px}.phone-screen{height:48%;top:44%}.story-controls{left:16px;right:16px;bottom:12px;font-size:11px}.story-controls>span{display:none}.story-controls button{font-size:11px}.section{padding:80px 24px}.founder,.personality,.charles,.columns,.work-layout{grid-template-columns:1fr;gap:35px}.work-layout{margin-top:40px}.capture{max-width:270px}.section-label{margin-bottom:20px}.section-intro>p:last-child,.section-deck{font-size:16px}.team-list article{grid-template-columns:25px 1fr;gap:18px}.team-list article p{grid-column:2;font-size:15px}.team-list h3{font-size:29px}.trust-list{grid-template-columns:1fr;gap:32px}.steps{flex-wrap:wrap;gap:15px 22px;max-width:310px;margin:35px auto 0}footer{padding:30px 24px;flex-direction:column}footer nav{flex-wrap:wrap;gap:18px}.download-page{padding:55px 24px}.downloads{grid-template-columns:1fr}.download-choice{padding:26px}.static-story .story-stage{height:760px}.desktop-proof{margin-top:36px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-stage{position:relative;top:0;height:850px;min-height:0}}

body.static-story .story-stage{height:calc(100svh - var(--header));min-height:680px}
.story-result{max-width:1280px;margin:0 auto;padding:40px 24px 70px;text-align:center}.story-result img{width:100%;display:block;border-radius:12px}.story-result figcaption{font-size:13px;color:var(--muted);margin-top:15px}.enhanced-story.has-transform .story-result{display:none}#pool{filter:brightness(calc(1 + var(--voice-strength,0)*.08));transition:filter .18s linear}


html[data-canonical-theme=light] body{--bg:#f3f5ef;--text:#152018;--muted:#4c5950;--line:#ccd3c9;--cyan:#236756;--gold:#7e5923;background:var(--bg);color:var(--text)}
html[data-canonical-theme=light] .lead{color:#26372a}html[data-canonical-theme=light] .text-link{color:#345a10}.story-stage{color:#f4f4ee;--muted:#a9b2af}.hero-copy{color:#f4f4ee}
/* The real conversation is always available at a readable size. */
.demo-link{display:block;margin:12px auto 0;padding:5px 12px;border:0;background:transparent;color:#c3ccc6;font-size:12px;pointer-events:auto;text-decoration:underline;text-underline-offset:4px}.demo-link:hover{color:var(--lime)}.hero-copy p{margin-bottom:16px}.motion-controls{display:flex;gap:8px}.story-controls button{min-width:84px}.capture img{height:auto;display:block}.capture button.text-link{border:0;background:transparent;font:inherit;padding:7px;margin-top:5px}.prose button.text-link{border:0;background:transparent;padding:0;text-align:left;cursor:pointer}.connection-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:30px;margin-top:55px;padding:28px 0;border-block:1px solid var(--line)}.connection-path>div>span{font-size:10px;letter-spacing:.12em;color:var(--gold)}.connection-path strong{display:block;font-size:25px;font-weight:500;letter-spacing:-.04em;margin:9px 0}.connection-path p{font-size:13px}.path-arrow{color:var(--cyan)}#demo-dialog{color:var(--text);background:#090d0b;border:1px solid var(--line);border-radius:12px;max-width:min(94vw,680px);width:680px;max-height:94svh;padding:22px;overflow:auto}#demo-dialog::backdrop{background:#000d;backdrop-filter:blur(12px)}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:18px}.dialog-bar h2{font-size:22px;letter-spacing:-.03em}.dialog-bar button{background:transparent;border:1px solid #465249;border-radius:6px;padding:8px 13px}.demo-note{font-size:12px;margin:12px 0 18px}#full-demo{display:block;max-height:73svh;max-width:100%;width:auto;margin:auto;background:#000}.story-result img{aspect-ratio:16/9}.founder{padding-top:100px}.founder .lead{color:var(--text)}
@media(min-width:701px) and (max-height:750px){.hero-copy h1{font-size:44px}.hero-copy p{font-size:16px;margin:8px auto 12px}.hero-copy .button{padding:12px 20px;min-height:42px}.hero-copy .demo-link{margin-top:5px}.story-controls{bottom:8px}}
@media(max-width:700px){.story-stage{min-height:0}.hero-copy{top:16px}.hero-copy h1{font-size:36px}.hero-copy p{font-size:14px;max-width:320px;margin:9px auto 13px}.demo-link{font-size:11px;margin-top:6px}.story-controls{gap:8px;bottom:7px}.story-controls button{padding:5px 10px;min-width:0;min-height:36px}.motion-controls{gap:6px}.connection-path{grid-template-columns:1fr;gap:15px}.path-arrow{transform:rotate(90deg);justify-self:start}.connection-path strong{margin:5px 0}#demo-dialog{padding:16px}.dialog-bar h2{font-size:20px}.founder{padding-top:70px}.static-story .story-stage,body.static-story .story-stage{min-height:620px}}
@media(max-height:600px) and (min-width:701px){.story-stage{min-height:490px}.hero-copy{top:8px}.hero-copy h1{font-size:34px}.hero-copy p{font-size:14px}}


@media(max-width:700px){.story-controls button,.story-controls a{min-height:44px;display:inline-flex;align-items:center}}
.static-story #sound{display:none}

/* Keep the source UI large and let readers inspect it at its native pixel size. */
.scene-content{position:absolute;inset:0;transform:scale(var(--phone-zoom,1));transform-origin:50% 43%;will-change:transform}.phone-screen{cursor:zoom-in}#full-demo{width:522px;max-width:100%;max-height:none;height:auto;margin-inline:auto}#demo-dialog{max-height:94svh}.phone-screen:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

#demo-dialog .dialog-bar{position:sticky;top:-22px;z-index:2;background:#090d0b;padding-block:12px}#demo-dialog{overflow:auto}@media(max-width:700px){#demo-dialog{padding:14px}#demo-dialog .dialog-bar{top:-14px}.scene-content{transform-origin:50% 43%}}
/* One approved timeline, with an independent water pass. */
#story-poster,#story-water,#story-screen{position:absolute;left:50%;top:var(--vt,0);width:var(--vw,100%);height:var(--vh,100%);margin-left:calc(var(--vw,100%)/-2);object-fit:fill;transform:translateX(calc(var(--story-dx,0)*var(--vw,100%)*var(--story-zoom,1))) scale(var(--story-zoom,1));transform-origin:50% var(--vo,100%)}

.scene-content{transform:none}.scene{background:#000}.enhanced-story .story-result{display:none}
@media(prefers-reduced-motion:reduce){.enhanced-story .story{height:calc(100svh - var(--header))}.story-stage{height:calc(100svh - var(--header))}}

/* Keep story controls clear of the site's persistent Frank chat button. */
.story-controls{right:120px}
@media(max-width:700px){.story-controls{right:16px;bottom:84px}}

/* Live tuning 2026-09-29: the story is full-bleed. Video and water share one cover crop so they stay aligned;
   the copy and controls overlay the dark areas around the phone. */
.story-stage{min-height:0;background:#000}
.hero-copy{text-shadow:0 1px 18px #000;transition:opacity .8s ease,visibility .8s}
.story[data-copy=off] .hero-copy{opacity:0;visibility:hidden}
.story-controls{left:clamp(24px,4vw,72px);right:120px;justify-content:flex-start;text-shadow:0 1px 10px #000}
#story-caption{color:#e6ebe7!important;position:absolute;left:0;bottom:56px;max-width:min(40vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#skip-story{margin-left:6px}
@media(min-aspect-ratio:13/10) and (min-width:701px){
 .hero-copy{left:clamp(24px,4vw,72px);right:auto;top:clamp(16px,4vh,48px);width:min(36vw,470px);text-align:left}
 .hero-copy p{margin:12px 0 16px;max-width:none}
 .hero-copy .demo-link{margin:10px 0 0;padding:5px 0}
 .hero-copy .demo-link{display:block}
}
@media(max-aspect-ratio:13/10) and (min-width:701px){.scene{inset:250px 0 0}}
@media(max-width:700px){.scene{inset:205px 0 0}.story-controls{left:16px;right:84px;bottom:10px}}

/* While the story owns scroll input the page must not overscroll or pull to refresh; touch is claimed per gesture in story.js. */
html:has(.story.locked){overscroll-behavior-y:none}
#story-poster{transition:opacity .25s linear}
#story-debug{position:fixed;z-index:9000;top:calc(var(--header) + 34px);right:8px;margin:0;max-width:min(92vw,560px);padding:8px 10px;background:#000c;color:#9fe;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;pointer-events:none;border:1px solid #2a4}

/* Conversation bubbles (live11): driven by the story timeline in bubbles.js. Desktop: Dan left, Frank right, vertically centred, clear of the
   controls (bottom) and the Frank launcher; phone widths: one bubble in the black above the device. The hero copy fades out just before the first. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}
.bub-col{position:absolute;top:0;bottom:112px;width:min(26vw,380px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.bub-left{left:clamp(24px,3vw,56px);align-items:flex-start}.bub-right{right:clamp(24px,3vw,56px);align-items:flex-end}
.bub{max-width:100%;padding:16px 20px 17px;border-radius:18px;font-size:clamp(15px,1.15vw,19px);line-height:1.45;letter-spacing:-.005em;color:#f2f2f0;
 background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);
 box-shadow:0 18px 60px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
 opacity:0;transform:translateY(14px) scale(.97);filter:blur(8px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .7s}
.bub.on{opacity:1;transform:none;filter:none}
.bub.old{opacity:.38;filter:blur(.6px);transform:translateY(-4px) scale(.985)}
.bub.gone{opacity:0;transform:translateY(-26px) scale(.96);filter:blur(10px);transition-duration:1.1s}
.bub-who{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#a4a6aa;margin-bottom:8px}
.bub-who img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.bub[data-who=frank]{border-color:rgba(120,236,228,.22);box-shadow:0 18px 60px -20px rgba(0,0,0,.9),0 0 40px -18px rgba(120,236,228,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.bub-w{opacity:0;transition:opacity .35s}.bub-w.on{opacity:1}
@media(max-width:760px),(max-aspect-ratio:1/1){
 .bub-col{left:14px;right:14px;top:0;bottom:auto;width:auto;justify-content:flex-start;height:calc(var(--bub-mid,90px)*2)}
 .bub-left,.bub-right{left:14px;right:14px}
 .bub{position:absolute;top:0;bottom:0;margin:auto 0;height:fit-content;max-width:min(86%,440px);font-size:14px;padding:11px 14px}.bub-who{margin-bottom:5px;font-size:11px}
 .bub-left .bub{left:0}.bub-right .bub{right:0}
 .bub.old{opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .bub,.bub.old,.bub.gone{transform:none;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .5s linear}
 .bub-w{transition:none}
 .bub.old{opacity:.38}.bub.gone{opacity:0}
}

/* Portrait framing (live11): the story fills the whole stage and the device is the subject. story.js sets --story-zoom and --story-ty from the timeline
   (phone about 66% of the stage height during the phone phase, easing out until the laptop fits the width); the hero copy overlays the top of the frame. */
@media(max-aspect-ratio:1/1){
 .scene{inset:0}
 #story-poster,#story-water,#story-screen{transform:translate(calc(var(--story-dx,0)*var(--vw,100%)*var(--story-zoom,1)),var(--story-ty,0px)) scale(var(--story-zoom,1));-webkit-mask-image:linear-gradient(#000 90%,transparent);mask-image:linear-gradient(#000 90%,transparent)}
}
/* Landscape phones (about 400px tall): one bubble per side so a column never outgrows the stage. */
@media(max-height:520px) and (min-aspect-ratio:1/1){.bub.old{display:none}}

/* Sharp phone screen (live13): Dan's original recording, drawn over the phone screen in the same transformed box as the water. The canvas sits at the
   screen's measured place in the 1920x1080 master (x 805.5, y 219, 271.9 x 612.8, corner radius 6), so it follows the cover crop and zoom exactly. */
#story-screen{pointer-events:none}
#story-screen canvas{position:absolute;left:41.953125%;top:20.277778%;width:14.161458%;height:56.740741%;border-radius:2.207% / .979%;background:#000}

.founder-media{margin:28px 0 0}.founder-media img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}.founder-media figcaption{font-size:13px;color:var(--muted);margin-top:12px}