/* Blackledger: warm paper, ink, and the app's red ribbon. */
.bl-page { --bl-paper:#f3f0e7; --bl-ink:#252b28; --bl-muted:#62665f; --bl-ribbon:#9c402e; background:var(--bl-paper); color:var(--bl-ink); padding:0 0 1px; overflow:clip; }
.bl-page *, .bl-page *::before, .bl-page *::after { box-sizing:border-box; }
.bl-page h1,.bl-page h2,.bl-page h3,.bl-page p { color:inherit; }
.bl-page a { color:inherit; }
.bl-page a:focus-visible,.bl-page summary:focus-visible { outline:3px solid var(--bl-ribbon); outline-offset:6px; border-radius:4px; }
.bl-hero,.bl-hero-image,.bl-workflow,.bl-stories,.bl-private,.bl-extras,.bl-faq,.bl-closing { width:min(1240px,calc(100% - 80px)); margin-left:auto; margin-right:auto; }
.bl-hero { display:grid; grid-template-columns:1fr 1fr; gap:24px 80px; padding:64px 0 52px; align-items:end; }
.bl-brand { display:flex; align-items:center; gap:14px; grid-column:1/-1; margin-bottom:22px; }
.bl-brand .sr-product-icon { width:48px; height:48px; border-radius:12px; }
.bl-brand h1 { font-size:23px; font-weight:700; letter-spacing:-.6px; margin:0; }
.bl-brand > span { margin-left:auto; font:11px var(--sr-mono); letter-spacing:2px; }
.bl-headline { font-size:clamp(64px,8.5vw,116px); font-weight:750; letter-spacing:-.065em; line-height:.96; margin:0; }
.bl-headline em { color:var(--bl-ribbon); font-style:normal; }
.bl-hero-description { padding-bottom:4px; max-width:470px; }
.bl-hero-description > p:first-child { font-size:clamp(22px,2.3vw,31px); line-height:1.25; letter-spacing:-.7px; font-weight:550; margin:0 0 22px; }
.bl-hero-description .bl-intro { font-size:17px; line-height:1.65; color:var(--bl-muted); margin:0 0 28px; }
.bl-hero-actions { display:flex; align-items:flex-start; flex-direction:column; gap:17px; }
.bl-coming { display:inline-block; background:#e8e0d2; color:#693f2a!important; padding:12px 17px; border:1px solid #d7cbb8; border-radius:7px; font-size:13px; line-height:1.5; font-weight:650; }
.bl-explore { font-size:15px; font-weight:650; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:4px; }
.bl-explore span { margin-left:20px; }
.bl-requirements { color:var(--bl-muted)!important; font-size:11px; line-height:1.6; margin:20px 0 0; }
.bl-hero-image { margin-top:0; margin-bottom:0; }
.bl-hero-image img { display:block; width:100%; height:auto; border:1px solid #dbd6ca; border-radius:14px; box-shadow:0 22px 60px #443a2915; }
.bl-hero-image figcaption { color:var(--bl-muted); font-size:12px; text-align:center; margin-top:18px; }
.bl-workflow { display:flex; justify-content:center; align-items:center; gap:30px; padding:34px 0 52px; font-size:13px; font-weight:600; }
.bl-workflow a { text-decoration:none; }.bl-workflow a:hover { color:var(--bl-ribbon); }.bl-workflow span { color:#aaa291; }
.bl-stories { scroll-margin-top:90px; }
.bl-story { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:56px; align-items:center; padding:70px 0; border-top:1px solid #dcd6ca; }
.bl-story:nth-child(even) { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); }.bl-story:nth-child(even) .bl-story-copy { order:2; }
.bl-eyebrow { color:var(--bl-ribbon)!important; font:11px var(--sr-mono); letter-spacing:1.5px; font-weight:700; margin:0 0 20px; }
.bl-page h2 { font-size:clamp(29px,3.1vw,44px); letter-spacing:-.045em; line-height:1.1; margin:0 0 24px; }
.bl-story-copy > p:not(.bl-eyebrow) { font-size:16px; line-height:1.7; margin:0 0 16px; color:var(--bl-muted); }
.bl-story-copy > p.bl-detail { font-size:13px; line-height:1.65; }
.bl-shot { display:block; border-radius:12px; transition:transform .2s ease,box-shadow .2s ease; }
.bl-shot:hover { transform:translateY(-3px); box-shadow:0 18px 35px #443a2914; }
.bl-shot img { width:100%; height:auto; display:block; border:1px solid #dbd6ca; border-radius:12px; }
.bl-private { background:#252b28; color:#f3f0e7; padding:clamp(30px,5vw,70px); border-radius:18px; margin-top:36px; margin-bottom:90px; }
.bl-private .bl-eyebrow { color:#e4aa87!important; }.bl-private h2 { font-size:clamp(34px,4.5vw,60px); }
.bl-lede { max-width:720px; font-size:20px; line-height:1.65; color:#c6cdc5!important; }
.bl-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:44px; padding-top:32px; border-top:1px solid #566057; }
.bl-page h3 { font-size:19px; line-height:1.3; letter-spacing:-.4px; margin:0 0 14px; }
.bl-principles p { color:#c6cdc5; font-size:14px; line-height:1.7; margin:0; }
.bl-extras { margin-bottom:90px; }.bl-extras > div:first-child { max-width:540px; }.bl-extra-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; margin-top:36px; }
.bl-extra-grid h3 { margin-top:25px; }.bl-extra-grid p { color:var(--bl-muted); font-size:15px; line-height:1.75; max-width:540px; }
.bl-faq { max-width:860px; padding:52px 0 65px; border-top:1px solid #dcd6ca; scroll-margin-top:100px; }
.bl-faq details { border-bottom:1px solid #dcd6ca; padding:22px 0; }.bl-faq summary { cursor:pointer; font-size:17px; font-weight:650; padding-right:18px; }.bl-faq details p { font-size:15px; color:var(--bl-muted); line-height:1.75; margin:18px 0 0; max-width:750px; }
.bl-closing { text-align:center; padding:64px 0 80px; }.bl-closing .sr-product-icon { width:76px; height:76px; border-radius:18px; display:block; margin:0 auto 26px; }.bl-closing h2 { font-size:clamp(40px,5vw,66px); }.bl-closing > p:not(.bl-eyebrow):not(.bl-coming) { color:var(--bl-muted); font-size:13px; }.bl-cta { display:inline-flex; gap:20px; align-items:center; background:#252b28; color:#fff!important; padding:16px 23px; border-radius:8px; text-decoration:none; font-weight:600; font-size:14px; }
.bl-footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:28px; font-size:13px; }
@media(max-width:900px) { .bl-hero { gap:25px 40px; }.bl-story,.bl-story:nth-child(even) { gap:28px; grid-template-columns:1fr; padding:48px 0; }.bl-story:nth-child(even) .bl-story-copy { order:0; }.bl-story-copy { max-width:650px; }.bl-principles { gap:24px; }.bl-workflow { gap:18px; font-size:11px; } }
@media(max-width:600px) { .bl-hero,.bl-hero-image,.bl-workflow,.bl-stories,.bl-private,.bl-extras,.bl-faq,.bl-closing { width:calc(100% - 36px); }.bl-hero { grid-template-columns:1fr; padding:32px 0; gap:30px; }.bl-brand { margin:0; }.bl-brand h1 { font-size:21px; }.bl-brand > span { font-size:10px; }.bl-headline { font-size:78px; }.bl-hero-description { max-width:none; }.bl-hero-description > p:first-child { font-size:24px; }.bl-hero-description .bl-intro { font-size:16px; }.bl-coming { font-size:12px; }.bl-workflow { flex-wrap:wrap; gap:12px; padding:24px 0 30px; }.bl-workflow span { display:none; }.bl-workflow a { padding:6px 9px; border:1px solid #dcd6ca; border-radius:4px; }.bl-private { padding:28px 24px; margin-bottom:60px; }.bl-principles,.bl-extra-grid { grid-template-columns:1fr; gap:26px; }.bl-lede { font-size:17px; }.bl-extras { margin-bottom:48px; }.bl-faq { padding-top:32px; }.bl-faq summary { font-size:16px; }.bl-closing { padding:32px 0 60px; }.bl-footer-links { gap:18px; } }
@media(prefers-reduced-motion:reduce) { .bl-shot { transition:none; }.bl-shot:hover { transform:none; } }
.bl-laptop { position:relative; width:100%; padding:0 4.5% 2%; filter:drop-shadow(0 22px 22px #382d291c); }
.bl-display { position:relative; border:7px solid #252628; border-bottom-width:13px; padding-top:2.4%; background:#141719; border-radius:19px 19px 7px 7px; box-shadow:0 0 0 2px #85878a,0 0 0 3px #494b4e; overflow:hidden; }
.bl-display img.bl-screen-capture { display:block; width:100%; height:auto; border:0; border-radius:0 0 2px 2px; box-shadow:none; }
.bl-notch { position:absolute; z-index:2; top:0; left:44%; width:12%; height:4%; background:#101113; border-radius:0 0 9px 9px; }
.bl-notch::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#283943; border:1px solid #444c51; top:35%; left:50%; }
.bl-laptop-base { position:absolute; bottom:0; left:0; width:100%; height:3.5%; border-radius:2px 2px 50% 50% / 2px 2px 90% 90%; background:linear-gradient(#dddfe1 0%,#9c9ea0 30%,#55575b 85%,#77797b); box-shadow:0 4px 4px #0002; }
.bl-laptop-base::after { content:""; position:absolute; left:43%; top:0; width:14%; height:35%; border-radius:0 0 8px 8px; background:#8c8e91; box-shadow:inset 0 -1px 2px #e0e0e0; }
.bl-notch-feature { width:min(1240px,calc(100% - 80px)); margin:10px auto 45px; border-radius:18px; padding:48px; background:#e7e1d5; display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; gap:42px; scroll-margin-top:100px; }
.bl-notch-copy > p:not(.bl-eyebrow) { color:var(--bl-muted); font-size:16px; line-height:1.7; }.bl-notch-copy .bl-detail { font-size:13px!important; }
.bl-notch-demo { margin:0; }.bl-notch-demo figcaption { font-size:10px; line-height:1.5; color:var(--bl-muted); text-align:center; margin-top:16px; }
.bl-display img.bl-prompt-overlay { position:absolute; z-index:1; left:20%; top:3.6%; width:60%; height:auto; border-radius:0 0 8px 8px; box-shadow:0 7px 18px #0006; }
.bl-prompt-detail { margin-top:32px; }.bl-prompt-detail .bl-eyebrow { font-size:9px; margin-bottom:12px; }.bl-prompt-detail img { display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 8px 22px #0002; }
@media(max-width:900px) { .bl-notch-feature { grid-template-columns:1fr; gap:25px; padding:32px; }.bl-notch-copy { max-width:600px; } }
@media(max-width:600px) { .bl-notch-feature { width:calc(100% - 36px); padding:26px 16px; margin-top:0; }.bl-display { border-width:4px; border-bottom-width:7px; border-radius:10px 10px 4px 4px; box-shadow:0 0 0 1px #85878a; }.bl-notch { border-radius:0 0 4px 4px; }.bl-notch::after { width:3px; height:3px; }.bl-hero-image figcaption { font-size:10px; line-height:1.5; }.bl-prompt-detail { margin-top:24px; } }
