@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');

:root {
  --ink: #211d13;
  --muted: #6f695a;
  --canvas: #f1f1e5;
  --paper: #f8f7ed;
  --line: #9f9a89;
  --yellow: #f5c94f;
  --pink: #ef78cf;
  --blue: #6b88eb;
  --green: #68c9a3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--canvas); background-image: radial-gradient(rgba(32,28,18,.055) .7px, transparent .8px), radial-gradient(rgba(255,255,255,.5) .7px, transparent .8px); background-position: 0 0, 3px 3px; background-size: 6px 6px; color: var(--ink); font-family: Lexend, Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }

.nav { height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 23px; font-weight: 900; letter-spacing: -1px; }
.brand-blob { position: relative; width: 38px; height: 32px; border-radius: 45% 55% 58% 42%; background: var(--yellow); transform: rotate(-5deg); }
.brand-blob i, .tiny-blob i, .blob-character i { position: absolute; width: 4px; height: 7px; top: 11px; border-radius: 50%; background: var(--ink); }
.brand-blob i:first-child { left: 13px; }
.brand-blob i:last-child { left: 22px; }
.nav-links { display: flex; gap: 34px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.nav-links a:hover { opacity: .55; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 19px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; transition: transform .2s ease, opacity .2s ease; }
.pill:hover { transform: translateY(-2px); }
.pill-dark { justify-self: end; color: #fff; background: var(--ink); }
.pill.large { min-height: 54px; padding-inline: 26px; font-size: 14px; }

.hero { position: relative; min-height: calc(100vh - 82px); display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 28px; padding: 48px 44px 70px; overflow: hidden; border-inline: 1px solid var(--line); }
.hero::before, .hero::after { position: absolute; top: 50%; z-index: 5; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; writing-mode: vertical-rl; }
.hero::before { content: 'Quick notes · real life'; left: 13px; transform: translateY(-50%) rotate(180deg); }
.hero::after { content: 'No streaks · no guilt'; right: 13px; transform: translateY(-50%); }
.hero-copy { position: relative; z-index: 6; }
.kicker, .section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #444; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.15px; }
h1, h2, h3 { margin: 0; font-family: 'Freeman', Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -3px; }
h1 { max-width: 650px; font-size: clamp(64px, 6.6vw, 94px); line-height: .91; }
.hero-lede { max-width: 580px; margin: 31px 0; color: #545454; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.plain-link { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 800; }
.quiet-row { display: flex; gap: 20px; margin-top: 25px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.quiet-row span::before { content: '·'; margin-right: 7px; color: var(--ink); }

.product-stage { position: relative; min-height: 650px; display: grid; place-items: center; isolation: isolate; }
.product-stage::before { content: ''; position: absolute; z-index: -3; width: 575px; height: 575px; border: 1px solid var(--line); border-radius: 50%; background: rgba(248,247,237,.62); box-shadow: inset 0 0 80px rgba(50,44,28,.07); }
.product-stage::after { content: 'DAYBLOB / 2026'; position: absolute; bottom: 8px; left: 50%; z-index: 5; transform: translateX(-50%); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; white-space: nowrap; }
.app-shot { filter: drop-shadow(0 35px 40px rgba(0,0,0,.18)); }
.shot-main { position: relative; z-index: 2; width: 338px; transform: rotate(2.5deg); }
.stage-orbit { position: absolute; z-index: -2; border: 1px solid var(--line); border-radius: 50%; }
.orbit-one { width: 620px; height: 330px; transform: rotate(-24deg); }
.orbit-two { width: 500px; height: 500px; transform: rotate(18deg); }
.svg-mascot { position: absolute; z-index: 4; height: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.14)); }
.mascot-note { top: 82px; left: 2px; width: 112px; transform: rotate(-8deg); }
.mascot-star { right: 2px; bottom: 60px; width: 126px; transform: rotate(7deg); }
.thought-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 13px 30px rgba(0,0,0,.12); font-size: 12px; font-weight: 800; backdrop-filter: blur(8px); }
.chip-one { top: 92px; right: 15px; transform: rotate(3deg); }
.chip-two { bottom: 100px; left: 16px; transform: rotate(-3deg); }
.tiny-blob { position: relative; display: inline-block; flex: 0 0 auto; width: 28px; height: 23px; border-radius: 45% 55% 60% 40%; }
.tiny-blob i { top: 8px; width: 3px; height: 5px; }
.tiny-blob i:first-child { left: 9px; }
.tiny-blob i:last-child { left: 16px; }
.tiny-blob.yellow { background: var(--yellow); }
.tiny-blob.pink { background: var(--pink); border-radius: 40% 60% 45% 55%; }
.tiny-blob.blue { background: var(--blue); border-radius: 60% 40% 54% 46%; }
.tiny-blob.big { width: 54px; height: 43px; }
.tiny-blob.big i { top: 15px; width: 5px; height: 8px; }
.tiny-blob.big i:first-child { left: 18px; }
.tiny-blob.big i:last-child { left: 30px; }

.trust-bar { color: var(--ink); background: rgba(248,247,237,.42); border-block: 1px solid var(--line); }
.trust-grid { min-height: 130px; display: grid; grid-template-columns: 1.7fr repeat(3, .55fr); align-items: center; gap: 25px; }
.trust-grid > p { max-width: 430px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.trust-grid > div { display: flex; flex-direction: column; gap: 6px; padding-left: 25px; border-left: 1px solid var(--line); }
.trust-grid b { color: var(--muted); font-size: 10px; }
.trust-grid span { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: -.3px; }

.product-section { display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 105px; padding-block: 130px; border-bottom: 1px solid var(--line); }
.product-section h2, .section-head h2, .menu-copy h2, .faq h2, .final-cta h2 { font-size: clamp(54px, 6vw, 80px); line-height: .94; }
.product-copy > p:not(.section-label), .menu-copy > p:not(.section-label) { max-width: 560px; margin: 28px 0 39px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.check-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.check-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.check-list li > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: 10px; }
.check-list b { display: block; font-size: 14px; }
.check-list small { display: block; margin-top: 5px; color: #777; line-height: 1.5; }
.screen-card { position: relative; max-width: 430px; margin-inline: auto; padding: 28px 28px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: rgba(248,247,237,.75); box-shadow: 14px 14px 0 rgba(33,29,19,.08); }
.screen-card img { width: 315px; margin: 20px auto -115px; }
.screen-caption { display: block; font-size: 13px; font-weight: 900; }

.features-wrap { padding-block: 125px; background: transparent; }
.section-head { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 70px; margin-bottom: 55px; }
.section-head > p { max-width: 470px; margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.section-head.compact { grid-template-columns: 1.15fr .85fr; }
.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.bento { position: relative; min-height: 340px; padding: 30px; overflow: hidden; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: rgba(248,247,237,.38); }
.bento > span { color: #777; font-size: 10px; font-weight: 800; }
.bento h3 { max-width: 500px; margin: 72px 0 14px; font-size: 32px; letter-spacing: -1.6px; }
.bento p { max-width: 480px; margin: 0; color: #616161; font-size: 14px; line-height: 1.65; }
.bento.wide { min-height: 310px; }
.soft-yellow { background: #f6e39d; }
.soft-blue { background: #dfe7ff; }
.soft-pink { background: #f8dfef; }
.feature-mascot { position: absolute; top: 31px; right: 28px; width: 230px; height: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.12)); transform: rotate(2deg); }
.soft-yellow h3, .soft-yellow p { max-width: 300px; }
.dark-card { display: grid; grid-template-columns: 1fr 240px; align-items: center; color: #fff; background: var(--ink); }
.dark-card p { color: #bbb; }
.dark-card img { width: 205px; justify-self: end; border-radius: 24px; }
.blob-character { position: absolute; right: 35px; top: 29px; width: 120px; height: 95px; border-radius: 45% 55% 58% 42%; background: var(--yellow); transform: rotate(8deg); }
.blob-character i { top: 34px; width: 8px; height: 13px; }
.blob-character i:first-child { left: 42px; }
.blob-character i:nth-child(2) { left: 66px; }
.blob-character em { position: absolute; left: 49px; top: 55px; width: 25px; height: 10px; border-bottom: 3px solid var(--ink); border-radius: 50%; }
.mini-timeline { margin-top: 55px; display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.7); }
.mini-timeline b { font-size: 22px; }
.mini-timeline p { color: var(--ink); }
.photo-tile { height: 110px; margin-top: 50px; display: flex; align-items: center; justify-content: center; gap: 15px; border-radius: 20px; background: #fff; }
.photo-tile .tiny-blob { width: 58px; height: 46px; }
.photo-tile .tiny-blob i { top: 16px; width: 5px; height: 8px; }
.photo-tile .tiny-blob i:first-child { left: 19px; }
.photo-tile .tiny-blob i:last-child { left: 32px; }

.menu-section { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 120px; padding-block: 135px; border-block: 1px solid var(--line); }
.menu-stack { position: relative; min-height: 650px; }
.menu-stack::before { content: ''; position: absolute; inset: 50px 0 30px; border: 1px solid var(--line); border-radius: 50%; background: rgba(248,247,237,.55); }
.menu-stack img { position: absolute; width: 300px; filter: drop-shadow(0 24px 34px rgba(0,0,0,.16)); }
.menu-back { left: 15px; top: 0; transform: rotate(-5deg); }
.menu-front { right: 12px; bottom: 0; transform: rotate(5deg); }
.value-list { border-top: 1px solid var(--line); }
.value-list div { display: grid; grid-template-columns: 130px 1fr; gap: 30px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.value-list b { font-size: 14px; }
.value-list span { color: #777; font-size: 13px; line-height: 1.5; }

.stories-section { padding-block: 125px; background: #dddbca; border-bottom: 1px solid var(--ink); }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.story-grid article { min-height: 320px; display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: var(--paper); }
.story-grid article:nth-child(2) { background: #f5e3ee; }
.story-grid article:nth-child(3) { background: #e1e7f9; }
.story-grid blockquote { margin: auto 0; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -1px; }
.story-grid p { margin: 0; color: #777; font-size: 12px; }

.journal-guides { padding-block: 125px; }
.guide-list { border-top: 1px solid var(--line); }
.guide-list > a { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 35px; min-height: 145px; border-bottom: 1px solid var(--line); }
.guide-list span { color: #777; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.guide-list h3 { font-size: 28px; letter-spacing: -1.4px; }
.guide-list b { font-size: 11px; }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; padding-block: 120px; border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 23px 35px 23px 0; font-size: 18px; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; }
.faq details[open] summary::after { content: '−'; }
.faq details p { max-width: 620px; margin: -4px 0 25px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.final-cta { padding-block: 100px; color: var(--canvas); background: #2b2415; }
.final-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 90px; }
.final-cta .section-label { color: #aaa; }
.final-cta h2 { font-size: clamp(50px, 5.8vw, 76px); }
.cta-mascot { width: 76px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); transform: rotate(-5deg); }
.signup > p { max-width: 430px; font-size: 18px; font-weight: 800; line-height: 1.45; }
.waitlist-form { display: flex; padding: 5px; border: 1px solid var(--canvas); border-radius: 999px; background: var(--paper); }
.waitlist-form input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 15px; color: var(--ink); background: transparent; }
.waitlist-form button { border: 0; border-radius: 999px; padding: 14px 20px; color: var(--ink); background: var(--yellow); font-size: 12px; font-weight: 900; }
.signup small { display: block; margin: 11px 0 0 8px; color: #888; }
.success { padding: 16px 18px; border-radius: 14px; color: var(--ink); background: var(--yellow); font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.footer { min-height: 220px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 40px; }
.footer > p { color: #777; font-size: 13px; }
.footer > div { display: flex; gap: 20px; font-size: 12px; font-weight: 700; }
.footer > small { grid-column: 1 / -1; padding: 20px 0 26px; border-top: 1px solid var(--line); color: #999; }

/* Blog */
.blog-hero { padding-block: 95px 110px; }
.blog-hero h1 { font-size: clamp(64px, 8vw, 110px); }
.blog-hero > p:last-child { max-width: 600px; margin: 30px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: #666; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.eyebrow span { width: 28px; height: 2px; background: var(--ink); }
.blog-list { padding-bottom: 110px; border-top: 1px solid var(--line); }
.blog-list article { min-height: 190px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); }
.post-index { color: #999; font-size: 13px; font-weight: 800; }
.blog-list small { color: #666; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.blog-list h2 { margin: 12px 0 8px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -2px; }
.blog-list p { margin: 0; color: #777; font-size: 13px; }
.blog-list a { font-size: 11px; font-weight: 800; }
.article-shell { width: min(800px, calc(100% - 40px)); margin: 0 auto; padding-block: 72px 100px; }
.article-shell > header { margin-bottom: 32px; }
.article-shell h1 { font-size: clamp(45px, 5.7vw, 68px); line-height: 1; }
.article-deck { max-width: 690px; margin: 22px 0 18px; color: #5f5f5f; font-size: 18px; line-height: 1.6; }
.byline { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.article-illustration { margin: 0 0 28px; overflow: hidden; border-radius: 22px; background: #edf8f3; }
.article-shell > header .byline + .article-illustration { margin-top: 28px; }
.article-illustration img { width: 100%; height: auto; }
.answer-box { margin: 0 0 40px; padding: 22px 25px; border-radius: 16px; background: #f5f5f3; }
.answer-box b { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.answer-box p { margin: 7px 0 0; font-size: 17px; line-height: 1.6; }
.article-body { width: min(680px, 100%); margin: 0 auto; }
.article-body > p, .article-body li { color: #444; font-size: 17px; line-height: 1.75; }
.article-body > p { margin: 0 0 24px; }
.article-body h2 { margin: 52px 0 18px; font-size: 31px; line-height: 1.15; letter-spacing: -1px; }
.article-body ol, .article-body ul { margin: 0 0 28px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; padding-left: 8px; }
.article-body li:last-child { margin-bottom: 0; }
.template-box { padding: 18px 22px; border-radius: 15px; background: #fff; }
.article-body > .template-box { margin: 0 0 28px; }
.template-box p { margin: 11px 0; font-size: 17px; line-height: 1.6; }
.article-body blockquote { position: relative; margin: 0 0 28px; padding: 20px 23px 20px 48px; border-radius: 15px; background: #fff; font-size: 17px; font-weight: 700; line-height: 1.6; }
.article-body blockquote::before { content: '“'; position: absolute; top: 7px; left: 19px; color: var(--purple); font-size: 40px; font-weight: 900; line-height: 1; }
.article-body > :last-child { margin-bottom: 0; }
.journal-nudge { width: min(680px, 100%); margin: 58px auto 0; padding: 30px; border-radius: 22px; background: #e9f7f1; }
.journal-nudge-kicker { margin: 0 0 12px; color: #2b765a; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.journal-nudge h2 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -1px; }
.journal-nudge-intro { margin: 10px 0 22px; color: #486258; font-size: 15px; line-height: 1.55; }
.journal-nudge label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.journal-nudge textarea { width: 100%; display: block; padding: 15px 16px; resize: vertical; border: 0; border-radius: 14px; outline: 0; color: var(--ink); background: #fff; font: inherit; font-size: 16px; line-height: 1.55; }
.journal-nudge textarea:focus { box-shadow: 0 0 0 3px rgba(88, 220, 168, .42); }
.journal-nudge-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; }
.journal-nudge-actions button, .journal-nudge-done button { border: 0; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.journal-nudge-shuffle { padding: 10px 0; color: #357259; background: transparent; }
.journal-nudge-shuffle span { padding-left: 3px; font-size: 17px; }
.journal-nudge-submit { padding: 11px 15px; border-radius: 999px !important; color: #fff; background: var(--ink); }
.journal-nudge-submit:disabled { cursor: default; opacity: .42; }
.journal-nudge-done { padding: 20px; border-radius: 15px; background: #fff; }
.journal-nudge-done b { font-size: 20px; }
.journal-nudge-done p { margin: 5px 0 15px; color: #486258; font-size: 15px; }
.journal-nudge-done button { padding: 0; color: #357259; background: transparent; }
/* Section nav. Opt-in, for pages long enough that a reader arrives wanting one
   part of it rather than the whole thing. */
.article-toc { margin: 0 0 40px; padding: 20px 24px; border-radius: 16px; background: #f5f5f3; }
.article-toc b { display: block; margin-bottom: 12px; color: #888; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.article-toc ol { display: grid; gap: 7px; margin: 0; padding-left: 18px; }
.article-toc li { font-size: 14px; line-height: 1.45; }
.article-toc a { text-decoration: underline; text-decoration-color: rgba(33, 29, 19, .25); text-underline-offset: 3px; }
.article-toc a:hover { text-decoration-color: var(--ink); }
/* Anchor jumps otherwise land with the heading flush against the top edge. */
.article-body h2 { scroll-margin-top: 24px; }

/* Injected by the PromptCopy client component: one button per prompt, plus a
   quieter one for the whole list. */
.article-body li.has-prompt-copy { position: relative; padding-right: 30px; }
.prompt-copy-one { position: absolute; top: 2px; right: 0; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.prompt-copy-one:hover { background: rgba(33, 29, 19, .07); color: var(--ink); }
.prompt-copy-one.is-copied { color: #2f8f68; }
.prompt-copy-one:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Deliberately always visible rather than revealed on hover: a control nobody
   can see is a control nobody uses, and hover does not exist on touch or for
   keyboard users. `--muted` carries enough contrast to stay legible while the
   column of icons reads as quiet structure rather than noise. */


.article-related { margin-top: 58px; padding-top: 30px; border-top: 1px solid var(--line); }
.article-related h2 { margin: 0 0 18px; color: #888; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.article-related ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article-related a { display: block; padding: 18px 20px; border-radius: 16px; background: #f5f5f3; }
.article-related a:hover { background: #eeeeea; }
.article-related small { display: block; margin-bottom: 6px; color: #888; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.article-related span { display: block; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px; }
.article-related p { margin: 5px 0 0; color: #5f5f5f; font-size: 14px; line-height: 1.5; }
.article-cta { margin-top: 58px; padding: 36px; border-radius: 22px; text-align: center; color: #fff; background: var(--ink); }
.article-cta p { margin: 0 0 10px; color: #aaa; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.article-cta h2 { margin-bottom: 23px; font-size: 32px; letter-spacing: -1px; }
.article-cta .button.primary { color: var(--ink); background: var(--yellow); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 800; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero, .product-section, .menu-section, .faq, .final-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 65px; text-align: center; }
  .hero::before, .hero::after { display: none; }
  .hero-lede { margin-inline: auto; }
  .hero-actions, .kicker, .quiet-row { justify-content: center; }
  .product-stage { margin-top: 20px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); padding-block: 30px; }
  .trust-grid > p { grid-column: 1 / -1; max-width: 100%; text-align: center; }
  .section-head, .section-head.compact { grid-template-columns: 1fr; gap: 30px; }
  .menu-section { gap: 70px; }
  .menu-stack { width: min(600px, 100%); margin-inline: auto; }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid article { min-height: 260px; }
  .footer { grid-template-columns: 1fr 1fr; padding-block: 40px 20px; }
  .footer > div { justify-self: end; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 30px, 1180px); }
  .nav { height: 76px; }
  .brand { font-size: 20px; }
  .nav .pill { min-height: 40px; padding-inline: 14px; }
  .hero { min-height: auto; padding: 60px 24px 75px; text-align: left; }
  h1 { font-size: 57px; letter-spacing: -4px; }
  .hero-lede { margin-inline: 0; font-size: 16px; }
  .kicker, .hero-actions, .quiet-row { justify-content: flex-start; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .quiet-row { flex-wrap: wrap; gap: 8px 14px; }
  .product-stage { min-height: 540px; margin-inline: -15px; overflow: hidden; }
  .product-stage::before { width: 430px; height: 430px; }
  .shot-main { width: 285px; }
  .stage-orbit { display: none; }
  .mascot-note { top: 56px; left: 10px; width: 88px; }
  .mascot-star { right: 4px; bottom: 60px; width: 96px; }
  .trust-grid { grid-template-columns: 1fr; text-align: center; }
  .trust-grid > p { grid-column: auto; }
  .trust-grid > div { padding: 15px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .product-section, .features-wrap, .menu-section, .stories-section, .journal-guides, .faq { padding-block: 80px; }
  .product-section h2, .section-head h2, .menu-copy h2, .faq h2, .final-cta h2 { font-size: 49px; }
  .screen-card { max-width: 350px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento { min-height: 310px; }
  .feature-mascot { top: 22px; right: 18px; width: 150px; }
  .soft-yellow h3 { max-width: 210px; margin-top: 145px; }
  .dark-card { grid-template-columns: 1fr; gap: 30px; }
  .dark-card img { display: none; }
  .menu-stack { min-height: 520px; }
  .menu-stack img { width: 235px; }
  .value-list div { grid-template-columns: 1fr; gap: 6px; }
  .guide-list > a { grid-template-columns: 1fr; gap: 12px; padding-block: 24px; }
  .final-cta { padding-block: 75px; }
  .waitlist-form { flex-direction: column; gap: 5px; }
  .waitlist-form { border-radius: 18px; }
  .waitlist-form input { min-height: 48px; }
  .footer { grid-template-columns: 1fr; gap: 24px; }
  .footer > div { justify-self: start; flex-wrap: wrap; }
  .blog-hero { padding-block: 70px 85px; }
  .blog-hero h1 { font-size: 58px; }
  .blog-list article { grid-template-columns: 34px 1fr; gap: 12px; padding-block: 25px; }
  .blog-list article > a { grid-column: 2; }
  .article-shell { padding-block: 65px 90px; }
  .article-shell h1 { font-size: 48px; }
  .article-body > p, .article-body li { font-size: 17px; }
  .article-body h2 { font-size: 33px; }
  .journal-nudge { padding: 25px 21px; }
  .journal-nudge h2 { font-size: 29px; }
  .journal-nudge-actions { align-items: flex-start; flex-direction: column; }
  .journal-nudge-submit { width: 100%; justify-content: center; }
  .article-cta { padding: 35px 22px; }
}


/* Flat, colorful Dayblob system */
:root {
  --ink: #151515;
  --muted: #565656;
  --canvas: #fbfbfa;
  --paper: #ffffff;
  --line: #151515;
  --hero-blue: #b9e6f2;
  --yellow: #ffd84d;
  --pink: #ff72c7;
  --blue: #6f8cff;
  --green: #58dca8;
  --orange: #ff7847;
  --purple: #a681ff;
}

body { background: var(--canvas); }
.shell { width: min(1200px, calc(100% - 48px)); }
.nav { height: 90px; border: 0; }
.brand-blob { border: 2px solid var(--ink); background: var(--yellow); }
.nav-links { font-size: 12px; text-transform: none; letter-spacing: 0; }
.pill { min-height: 46px; border: 2px solid var(--ink); font-size: 13px; }
.pill-dark { color: #fff; background: var(--ink); }

.hero { min-height: 740px; grid-template-columns: .9fr 1.1fr; gap: 42px; margin-bottom: 24px; padding: 58px; overflow: hidden; border: 2px solid var(--ink); border-radius: 48px; background: var(--yellow); }
.hero::before { content: ''; display: block; top: auto; right: auto; bottom: -64px; left: -42px; z-index: 0; width: 180px; height: 180px; border: 2px solid var(--ink); border-radius: 50%; background: var(--pink); transform: none; writing-mode: initial; }
.hero::after { content: ''; display: block; top: 28px; right: 24px; bottom: auto; left: auto; z-index: 0; width: 116px; height: 116px; border: 2px solid var(--ink); border-radius: 30px; background: var(--green); transform: rotate(13deg); writing-mode: initial; }
.hero-copy { z-index: 6; }
.kicker { width: fit-content; margin-bottom: 24px; padding: 9px 13px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: #fff; }
h1 { font-size: clamp(64px, 6.5vw, 94px); line-height: .92; }
.hero-lede { color: var(--ink); }
.quiet-row { color: var(--ink); }

.product-stage { min-height: 620px; }
.product-stage::before { width: 500px; height: 500px; border: 2px solid var(--ink); border-radius: 42%; background: var(--blue); box-shadow: none; transform: rotate(-7deg); }
.product-stage::after { content: ''; right: 28px; bottom: 42px; left: auto; z-index: 1; width: 126px; height: 54px; border: 2px solid var(--ink); border-radius: 999px; background: var(--pink); transform: rotate(-10deg); }
.app-shot { filter: none; }
.shot-main { width: 350px; transform: rotate(2deg); }
.stage-orbit { border: 2px solid var(--ink); }
.orbit-one { width: 540px; height: 210px; border-radius: 999px; background: var(--pink); transform: rotate(-23deg); }
.orbit-two { width: 350px; height: 350px; border-radius: 34%; background: var(--purple); transform: rotate(19deg); }
.svg-mascot, .feature-mascot, .cta-mascot { filter: none; }

.trust-bar { width: min(1200px, calc(100% - 48px)); margin: 0 auto 24px; color: var(--ink); border: 2px solid var(--ink); border-radius: 40px; background: var(--blue); }
.trust-grid > p { color: var(--ink); }
.trust-grid > div { border-left: 2px solid var(--ink); }
.trust-grid b { color: var(--ink); }

.product-section { margin-bottom: 24px; padding: 90px 72px; border: 2px solid var(--ink); border-radius: 48px; background: #fff; }
.check-list, .check-list li { border-color: var(--ink); }
.screen-card { border: 2px solid var(--ink); border-radius: 34px; background: var(--pink); box-shadow: none; }

.features-wrap { margin-block: 24px; padding-block: 100px; border-block: 2px solid var(--ink); background: var(--green); }
.bento-grid { gap: 18px; border: 0; }
.bento { border: 2px solid var(--ink); border-radius: 36px; background: #fff; }
.soft-yellow { background: var(--yellow); }
.soft-blue { background: #b9c6ff; }
.soft-pink { background: #ffb8e3; }
.dark-card { color: #fff; background: var(--ink); }
.mini-timeline, .photo-tile { border: 2px solid var(--ink); border-radius: 22px; background: #fff; }

.menu-section { margin-bottom: 24px; padding: 90px 72px; border: 2px solid var(--ink); border-radius: 48px; background: #d4c2ff; }
.menu-stack::before { inset: 50px 0 30px; border: 2px solid var(--ink); border-radius: 42%; background: var(--yellow); }
.value-list, .value-list div { border-color: var(--ink); }

.stories-section { padding-block: 100px; border-block: 2px solid var(--ink); background: var(--pink); }
.story-grid { gap: 18px; border: 0; }
.story-grid article { border: 2px solid var(--ink); border-radius: 34px; background: var(--yellow); }
.story-grid article:nth-child(2) { background: var(--green); }
.story-grid article:nth-child(3) { background: #aebdff; }

.journal-guides { padding-block: 110px; }
.guide-list, .guide-list > a { border-color: var(--ink); }
.guide-list > a { padding-inline: 18px; transition: background .2s ease, border-radius .2s ease; }
.guide-list > a:hover { border-radius: 22px; background: var(--yellow); }

.faq { margin-block: 24px; padding: 84px 72px; border: 2px solid var(--ink); border-radius: 48px; background: #b9c6ff; }
.faq-list, .faq details { border-color: var(--ink); }

.final-cta { color: var(--ink); border-block: 2px solid var(--ink); background: var(--purple); }
.final-cta .section-label, .signup small { color: var(--ink); }
.waitlist-form { border: 2px solid var(--ink); border-radius: 24px; background: #fff; }
.waitlist-form button { border-left: 2px solid var(--ink); border-radius: 18px; background: var(--yellow); }
.success { border: 2px solid var(--ink); background: var(--yellow); }

.answer-box, .template-box, .article-body blockquote { border: 2px solid var(--ink); background: #fff; }
.article-cta { color: var(--ink); border: 0; background: var(--purple); box-shadow: 0 16px 32px rgba(71, 52, 114, .12); }
.article-cta p { color: rgba(20, 20, 24, .7); }
.article-cta h2 { color: var(--ink); }

@media (max-width: 900px) {
  .hero { padding: 56px 42px 72px; }
  .hero::before, .hero::after { display: block; }
  .product-section, .menu-section, .faq { padding: 72px 52px; }
}

@media (max-width: 620px) {
  .shell, .trust-bar { width: min(100% - 24px, 1200px); }
  .nav { height: 76px; }
  .hero { padding: 44px 20px 54px; border-radius: 30px; }
  .hero::before { bottom: -48px; left: -42px; width: 120px; height: 120px; }
  .hero::after { top: 22px; right: -24px; width: 76px; height: 76px; border-radius: 20px; }
  .product-stage { min-height: 500px; }
  .product-stage::before { width: 350px; height: 350px; }
  .shot-main { width: 270px; }
  .trust-bar { border-radius: 30px; }
  .trust-grid > div { border-left: 0; border-top: 2px solid var(--ink); }
  .product-section, .menu-section, .faq { padding: 58px 22px; border-radius: 30px; }
  .screen-card, .bento, .story-grid article { border-radius: 28px; }
  .features-wrap, .stories-section { padding-block: 76px; }
  .waitlist-form { border-radius: 20px; }
  .waitlist-form button { border-top: 2px solid var(--ink); border-left: 0; border-radius: 15px; }
}

/* Dayblob landing page — layout v2 */
.dayblob-v2 { overflow: clip; background: var(--canvas); }
.dayblob-v2 h1, .dayblob-v2 h2, .dayblob-v2 h3 { letter-spacing: -3.5px; }
.v2-nav { min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.v2-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 900; letter-spacing: -1.4px; }
.v2-brand > img { width: 31px; height: 31px; object-fit: contain; transform: rotate(-4deg); }
.v2-nav-links { display: flex; gap: 26px; font-size: 12px; font-weight: 800; }
.v2-nav-cta { justify-self: end; padding: 11px 15px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 900; }

.v2-hero { position: relative; min-height: 710px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 28px; padding: 54px 58px 75px; overflow: hidden; border: 2px solid var(--ink); border-radius: 48px; background: var(--hero-blue) !important; }
.v2-hero-copy { position: relative; z-index: 5; align-self: center; }
.v2-eyebrow { width: fit-content; margin: 0 0 19px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.v2-hero h1 { margin: 0; font-size: clamp(66px, 7.1vw, 104px); line-height: var(--leading-display); }
.v2-hero h1 em { font-style: normal; color: inherit; -webkit-text-stroke: 0; }
.v2-hero-copy > p:not(.v2-eyebrow) { max-width: 450px; margin: 31px 0 27px; font-size: 16px; font-weight: 600; line-height: 1.65; }
.v2-button { display: inline-flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 18px; color: #fff; background: var(--ink); font-size: 13px; font-weight: 900; }
.v2-button b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); }
.v2-hero-art { position: relative; min-height: 540px; display: grid; place-items: center; isolation: isolate; }
.v2-orbit { position: absolute; z-index: -1; border: 2px solid var(--ink); }
.v2-orbit-pink { width: 485px; height: 245px; border-radius: 999px; background: var(--pink); transform: translate(18px, -46px) rotate(-17deg); }
.v2-orbit-blue { width: 350px; height: 350px; border-radius: 39% 61% 42% 58%; background: var(--blue); transform: translate(-35px, -8px) rotate(18deg); }
.v2-orbit-green { right: 12px; bottom: 30px; width: 112px; height: 112px; border-radius: 28px; background: var(--green); transform: rotate(18deg); }
.v2-writing-loop { position: relative; z-index: 2; width: min(100%, 490px); min-height: 460px; }
.v2-memory-pile { position: relative; height: 310px; }
.v2-memory-card { position: absolute; inset: 0 0 auto; min-height: 134px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 29px; padding: 16px 20px; border-radius: 24px; background: #fff; box-shadow: 0 17px 38px rgba(22, 27, 30, .1); opacity: 0; will-change: transform, opacity; }
.v2-memory-date { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 400; }
.v2-memory-date b { font-size: 20px; font-weight: 400; line-height: 28px; }
.v2-memory-date span { font-size: 12px; line-height: 16px; }
.v2-memory-copy { display: flex; min-width: 0; flex-direction: column; justify-content: flex-start; gap: 16px; }
.v2-memory-copy p { max-width: 315px; margin: 0; font-size: 14px; line-height: 20px; }
.v2-memory-copy img { width: 33px; height: 27px; object-fit: contain; }
.v2-memory-card-one { z-index: 1; animation: v2-stack-one 12s cubic-bezier(.22,.8,.24,1) infinite; }
.v2-memory-card-two { z-index: 2; animation: v2-stack-two 12s cubic-bezier(.22,.8,.24,1) infinite; }
.v2-memory-card-three { z-index: 3; animation: v2-stack-three 12s cubic-bezier(.22,.8,.24,1) infinite; }
.v2-composer-shell { position: absolute; right: 12px; bottom: 0; left: 12px; min-height: 142px; padding: 25px 23px 20px; border-radius: 26px; background: #fff; box-shadow: 0 22px 50px rgba(22, 27, 30, .13); }
.v2-composer-label { display: block; margin-bottom: 17px; color: #85898a; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.v2-composer { position: absolute; right: 23px; bottom: 26px; left: 23px; display: flex; align-items: flex-end; gap: 3px; font-size: 14px; font-weight: 600; line-height: 20px; opacity: 0; }
.v2-composer span { display: inline-block; width: max-content; max-width: 0; overflow: hidden; max-height: 40px; white-space: nowrap; }
.v2-composer i { flex: 0 0 auto; width: 2px; height: 19px; background: var(--ink); }
.v2-composer-one { animation: v2-compose-one 12s linear infinite; }
.v2-composer-two { animation: v2-compose-two 12s linear infinite; }
.v2-composer-three { animation: v2-compose-three 12s linear infinite; }
.v2-composer-one span { animation: v2-type-one 12s steps(42, end) infinite; }
.v2-composer-two span { animation: v2-type-two 12s steps(48, end) infinite; }
.v2-composer-three span { animation: v2-type-three 12s steps(48, end) infinite; }
.v2-composer i { animation: v2-caret 1s steps(1) infinite; }
.v2-saved-chip { position: absolute; top: 18px; right: 19px; padding: 7px 10px; border-radius: 999px; color: #176648; background: #c6f2df; font-size: 9px; font-weight: 900; opacity: 0; animation: v2-saved 12s ease infinite; }
@keyframes v2-type-one { 0% { max-width: 0; } 16%, 100% { max-width: 100%; } }
@keyframes v2-type-two { 0%, 33% { max-width: 0; } 49%, 100% { max-width: 100%; } }
@keyframes v2-type-three { 0%, 66% { max-width: 0; } 82%, 100% { max-width: 100%; } }
@keyframes v2-compose-one { 0%, 23% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes v2-compose-two { 0%, 31% { opacity: 0; } 34%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes v2-compose-three { 0%, 64% { opacity: 0; } 67%, 89% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes v2-saved { 0%, 18%, 29%, 51%, 62%, 84%, 100% { opacity: 0; transform: translateY(4px) scale(.94); } 20%, 26%, 53%, 59%, 86%, 92% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes v2-stack-one { 0%, 20% { opacity: 0; transform: translateY(126px) scale(.94) rotate(0); } 27%, 95% { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); } 100% { opacity: 0; transform: translateY(-12px) scale(.98) rotate(-2deg); } }
@keyframes v2-stack-two { 0%, 53% { opacity: 0; transform: translateY(126px) scale(.94) rotate(0); } 60%, 95% { opacity: 1; transform: translateY(74px) translateX(14px) scale(.97) rotate(2.2deg); } 100% { opacity: 0; transform: translateY(62px) translateX(14px) scale(.95) rotate(2.2deg); } }
@keyframes v2-stack-three { 0%, 86% { opacity: 0; transform: translateY(126px) scale(.94) rotate(0); } 93%, 95% { opacity: 1; transform: translateY(148px) translateX(-8px) scale(.94) rotate(-1deg); } 100% { opacity: 0; transform: translateY(136px) translateX(-8px) scale(.92) rotate(-1deg); } }
@keyframes v2-caret { 50% { opacity: 0; } }
.v2-hero-meta { position: absolute; bottom: 23px; left: 58px; right: 58px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 900; letter-spacing: .8px; }

.v2-strip { margin: 24px 0 0; overflow: hidden; border-block: 2px solid var(--ink); background: var(--green); }
.v2-strip p { display: flex; width: max-content; margin: 0; padding: 16px 0; font-size: 12px; font-weight: 900; letter-spacing: .9px; white-space: nowrap; animation: v2-marquee 24s linear infinite; will-change: transform; }
.v2-strip p span { flex: 0 0 auto; padding-right: 42px; }
.v2-strip i { display: inline-block; margin: 0 12px; color: var(--ink); font-style: normal; font-size: 13px; vertical-align: 0; }
@keyframes v2-marquee { to { transform: translateX(calc(-100% / 6)); } }
@media (prefers-reduced-motion: reduce) { .v2-strip p { animation: none; } }

/* Keep the desktop ticker balanced instead of leaving an empty trailing half
   after the single line finishes its marquee cycle. */
@media (min-width: 621px) {
  .v2-strip p { width: 100%; justify-content: center; animation: none; }
}

.v2-reasons { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; padding-block: 125px; }
.v2-reasons > header { align-self: center; }.v2-reasons h2, .v2-steps h2, .v2-notes h2, .v2-plain h2, .v2-faq h2, .v2-final h2 { margin: 0; font-size: clamp(48px, 5vw, 76px); line-height: var(--leading-section); }
.v2-reasons > header > p:last-child { max-width: 380px; margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.v2-reason-grid { display: grid; gap: 15px; }
.v2-reason { position: relative; min-height: 180px; padding: 28px 175px 28px 30px; overflow: hidden; border: 2px solid var(--ink); border-radius: 32px; }
.v2-reason b { font-size: 11px; }.v2-reason h3 { margin: 39px 0 8px; font-size: 28px; line-height: var(--leading-card-title); letter-spacing: -1px; }.v2-reason p { max-width: 380px; margin: 0; font-size: 13px; line-height: 1.55; }
.v2-yellow { background: var(--yellow); }.v2-purple { background: var(--purple); }.v2-green { background: var(--green); }
.v2-reason-blob { position: absolute; object-fit: contain; pointer-events: none; }
.v2-blob-orange { top: 34px; right: 34px; width: 112px; transform: rotate(-8deg); }
.v2-blob-yellow { top: 22px; right: 31px; width: 94px; transform: rotate(7deg); }
.v2-blob-purple { right: 25px; bottom: 19px; width: 116px; transform: rotate(-5deg); }
/* Size and position live in `.v2-green > img` below, which outranks this. */
.v2-blob-blue { transform: rotate(8deg); }
.v2-mini-face { position: absolute; top: 34px; right: 42px; width: 100px; height: 100px; border: 2px solid var(--ink); border-radius: 45% 55% 58% 42%; background: var(--pink); transform: rotate(14deg); }
.v2-mini-face::before, .v2-mini-face::after { content: ''; position: absolute; top: 31px; width: 7px; height: 12px; border-radius: 99px; background: var(--ink); }.v2-mini-face::before { left: 32px; }.v2-mini-face::after { right: 31px; }
.v2-photo-note { position: absolute; top: 52px; right: 20px; width: 128px; padding: 18px 12px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; font-size: 12px; font-weight: 900; transform: rotate(8deg); }
/* Card 02 gives its art strip extra room so the blob can sit beside the note
   rather than on top of it — it was covering the caption it points at. */
.v2-purple { padding-right: 244px; }
.v2-blob-yellow { top: 36px; right: 166px; width: 74px; }
/* Card 03's blob was the largest of the three; matched to the other two. */
.v2-green > img { position: absolute; right: 32px; bottom: 30px; width: 88px; }

@media (max-width: 620px) {
  /* The art strip narrows to 130px, which cannot hold the blob beside the note
     — and behind it the caption is unreadable. The caption is the point. */
  .v2-blob-yellow { display: none; }
}

.v2-steps { padding-block: 105px; border-block: 2px solid var(--ink); background: var(--blue); }
.v2-steps-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 52px; }.v2-steps-head .v2-eyebrow { background: var(--yellow); }
.v2-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v2-step-grid > article, .v2-step-shot { min-height: 274px; margin: 0; padding: 26px; border: 2px solid var(--ink); border-radius: 32px; background: #fff; }
.v2-step-grid article { display: flex; flex-direction: column; }.v2-step-grid article > span { display: grid; width: 35px; height: 35px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 12px; font-weight: 900; }
.v2-step-grid h3 { margin: auto 0 10px; font-size: 27px; line-height: var(--leading-card-title); letter-spacing: -.8px; }.v2-step-grid p { margin: 0; font-size: 13px; line-height: 1.55; }
.v2-step-shot { position: relative; overflow: hidden; padding: 0; }.v2-step-shot img { position: absolute; left: 50%; width: 215px; transform: translateX(-50%) translateY(35px); }.v2-blue-card { background: var(--green); }.v2-pink-card { background: var(--pink); }.v2-yellow-card { background: var(--yellow); }
.v2-memory-map-card { display: grid; place-items: center; padding: 27px; }
.v2-memory-map { width: min(100%, 420px); display: grid; gap: 12px; padding: 16px 14px 14px; border-radius: 16px; background: #fff; }
.v2-memory-map > span { color: #888; font-size: 12px; line-height: 16px; }
.v2-memory-map > img { position: static; width: 100%; height: auto; transform: none; }

.v2-notes { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding-block: 128px; }.v2-notes-copy > p:not(.v2-eyebrow) { max-width: 390px; margin: 27px 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.v2-text-link { padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 900; }
.v2-note-stack { position: relative; min-height: 520px; }.v2-note-card { position: absolute; width: 335px; min-height: 245px; display: flex; flex-direction: column; padding: 27px; border: 2px solid var(--ink); border-radius: 28px; }.v2-card-one { top: 14px; left: 20px; z-index: 2; background: var(--yellow); transform: rotate(-6deg); }.v2-card-two { right: 18px; bottom: 0; background: #f3ddeb; transform: rotate(7deg); }.v2-note-card span, .v2-note-card small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }.v2-note-card blockquote { margin: auto 0; font-size: 23px; font-weight: 900; line-height: var(--leading-card-title); letter-spacing: -1.2px; }.v2-note-stack > img { position: absolute; z-index: 3; top: -12px; right: 42px; width: 128px; transform: rotate(5deg); }

.v2-plain { display: grid; grid-template-columns: 1fr .85fr; gap: 95px; align-items: center; padding: 70px; border: 2px solid var(--ink); border-radius: 44px; background: var(--purple); }.v2-plain-art { position: relative; min-height: 380px; display: grid; place-items: center; }.v2-plain-circle { position: absolute; width: 350px; height: 350px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }.v2-plain-art img:nth-child(2) { position: relative; z-index: 2; width: 220px; transform: rotate(-5deg); }.v2-plain-art img:last-child { position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 110px; transform: rotate(7deg); }.v2-plain ul { margin: 30px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }.v2-plain li { padding: 17px 0; border-bottom: 2px solid var(--ink); font-size: 14px; font-weight: 700; }.v2-plain li::before { content: '✦'; margin-right: 10px; }

.v2-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; margin-block: 24px; padding: 84px 70px; border: 2px solid var(--ink); border-radius: 44px; background: #fff; }.v2-faq details { border-top: 2px solid var(--ink); }.v2-faq details:last-child { border-bottom: 2px solid var(--ink); }.v2-faq summary { cursor: pointer; padding: 20px 30px 20px 0; font-size: 16px; font-weight: 900; list-style: none; }.v2-faq summary::after { content: '+'; float: right; }.v2-faq details[open] summary::after { content: '–'; }.v2-faq details p { margin: -4px 0 21px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.v2-final { margin-top: 90px; padding-block: 110px; border-block: 2px solid var(--ink); background: var(--green); }.v2-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(52px, 9vw, 150px); align-items: start; }.v2-final-heading { max-width: 650px; }.v2-final h2 { max-width: 620px; margin-top: 22px; }.v2-final .v2-eyebrow { background: var(--pink); }.v2-final-signup { width: min(100%, 620px); justify-self: end; padding-top: 6px; }.v2-final-signup > p { margin: 0 0 18px; font-size: 18px; font-weight: 800; line-height: 1.45; }.v2-final small { display: block; margin: 10px 0 0 5px; font-size: 11px; }
.v2-final .waitlist-form { border: 2px solid var(--ink); background: #fff; }.v2-final .waitlist-form button { border: 2px solid var(--ink); background: var(--yellow); }

.v2-footer { min-height: 155px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; }.v2-footer p { margin: 0; color: var(--muted); font-size: 13px; }.v2-footer div { display: flex; gap: 19px; font-size: 12px; font-weight: 800; }

@media (max-width: 900px) {
  .v2-hero { grid-template-columns: 1fr; padding: 55px 46px 70px; }.v2-hero-copy { text-align: center; }.v2-eyebrow { margin-inline: auto; }.v2-hero-copy > p:not(.v2-eyebrow) { margin-inline: auto; }.v2-hero-art { min-height: 535px; }.v2-writing-loop { width: min(490px, 88vw); }.v2-hero-meta { left: 46px; right: 46px; }.v2-reasons, .v2-notes, .v2-plain, .v2-faq, .v2-final-grid { grid-template-columns: 1fr; }.v2-reasons { gap: 42px; }.v2-steps-head { display: block; }.v2-steps-head .v2-eyebrow { margin-inline: 0; }.v2-step-grid { grid-template-columns: repeat(2, 1fr); }.v2-note-stack { width: min(520px, 100%); }.v2-final-grid { gap: 36px; }.v2-final-signup { justify-self: start; padding-top: 0; }.v2-footer { grid-template-columns: 1fr 1fr; }.v2-footer div { justify-self: end; }
}

@media (max-width: 620px) {
  .v2-nav { min-height: 72px; grid-template-columns: 1fr auto; }.v2-nav-links { display: none; }.v2-nav-cta { padding: 9px 11px; font-size: 11px; }.v2-brand { font-size: 20px; }.v2-hero { min-height: 0; padding: 43px 20px 60px; border-radius: 30px; }.v2-hero h1 { font-size: 58px; }.v2-hero-copy > p:not(.v2-eyebrow) { font-size: 15px; }.v2-hero-art { min-height: 420px; margin-inline: -18px; }.v2-orbit-pink { width: 355px; height: 175px; }.v2-orbit-blue { width: 260px; height: 260px; }.v2-orbit-green { width: 72px; height: 72px; right: 10px; bottom: 16px; }.v2-writing-loop { width: min(100%, 350px); min-height: 395px; }.v2-memory-pile { height: 264px; }.v2-memory-card { min-height: 116px; grid-template-columns: 23px minmax(0, 1fr); gap: 17px; padding: 14px 16px; border-radius: 20px; }.v2-memory-date b { font-size: 18px; line-height: 24px; }.v2-memory-copy { gap: 9px; }.v2-memory-copy p { font-size: 12px; line-height: 17px; }.v2-memory-copy img { width: 28px; height: 23px; }.v2-composer-shell { right: 5px; bottom: 0; left: 5px; min-height: 123px; padding: 20px 18px 16px; border-radius: 22px; }.v2-composer { right: 18px; bottom: 22px; left: 18px; font-size: 12px; line-height: 18px; }.v2-composer span { max-height: 36px; }.v2-hero-meta { left: 20px; right: 20px; bottom: 19px; font-size: 8px; }.v2-strip p { font-size: 10px; }.v2-reasons { padding-block: 78px; }.v2-reasons h2, .v2-steps h2, .v2-notes h2, .v2-plain h2, .v2-faq h2, .v2-final h2 { font-size: 48px; }.v2-reason { min-height: 205px; padding: 24px 130px 24px 23px; border-radius: 26px; }.v2-reason h3 { margin-top: 34px; font-size: 23px; }.v2-reason-blob { right: 17px; width: 88px; }.v2-blob-orange { top: 46px; }.v2-blob-yellow { top: 24px; }.v2-blob-purple { bottom: 18px; }.v2-mini-face { right: 22px; width: 76px; height: 76px; }.v2-mini-face::before, .v2-mini-face::after { top: 24px; width: 5px; height: 9px; }.v2-mini-face::before { left: 24px; }.v2-mini-face::after { right: 23px; }.v2-photo-note { right: 16px; width: 100px; font-size: 10px; }.v2-green > img { right: 17px; width: 95px; }.v2-steps { padding-block: 76px; }.v2-step-grid { grid-template-columns: 1fr; }.v2-step-grid > article, .v2-step-shot { min-height: 230px; border-radius: 26px; }.v2-step-grid h3 { margin-top: 35px; }.v2-notes { gap: 42px; padding-block: 80px; }.v2-note-stack { min-height: 370px; }.v2-note-card { width: 245px; min-height: 205px; padding: 20px; }.v2-note-card blockquote { font-size: 18px; }.v2-card-one { left: 0; }.v2-card-two { right: 0; }.v2-note-stack > img { right: 22px; width: 92px; }.v2-plain { gap: 44px; padding: 46px 22px; border-radius: 30px; }.v2-plain-art { min-height: 280px; }.v2-plain-circle { width: 255px; height: 255px; }.v2-plain-art img:nth-child(2) { width: 174px; }.v2-plain-art img:last-child { width: 80px; }.v2-faq { gap: 43px; padding: 52px 22px; border-radius: 30px; }.v2-final { margin-top: 72px; padding-block: 72px; }.v2-footer { min-height: 180px; grid-template-columns: 1fr; padding-block: 34px; }.v2-footer div { justify-self: start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-memory-card,
  .v2-composer,
  .v2-composer span,
  .v2-composer i,
  .v2-saved-chip { animation: none; }
  .v2-memory-card-one { opacity: 1; transform: rotate(-2deg); }
  .v2-memory-card-two { opacity: 1; transform: translateY(74px) translateX(14px) scale(.97) rotate(2.2deg); }
  .v2-memory-card-three { opacity: 1; transform: translateY(148px) translateX(-8px) scale(.94) rotate(-1deg); }
  .v2-composer-one { opacity: 1; }
  .v2-composer-one span { max-width: 100%; }
}

/* Softer v2 finish: keep the geometry, lose the heavy black outlines. */
.dayblob-v2 {
  --line-soft: #dfe4e8;
}
.dayblob-v2 > .v2-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: max(24px, calc((100vw - 1500px) / 2));
  background: var(--canvas);
}
.dayblob-v2 *,
.dayblob-v2 *::before,
.dayblob-v2 *::after {
  border: 0 !important;
}

/* 404 */
.not-found-page { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.not-found { display: flex; flex-direction: column; align-items: center; gap: 27px; width: min(100%, 620px); text-align: center; }
.not-found > img { width: clamp(100px, 17vw, 155px); height: auto; transform: rotate(-4deg); }
.not-found h1 { max-width: 560px; margin: 0; font-size: clamp(43px, 6vw, 74px); line-height: var(--leading-section); letter-spacing: var(--tracking-title); }
.not-found .v2-button { margin-top: 3px; }

/* Journal index — shares the landing page's soft, playful visual language. */
.journal-page { overflow: hidden; background: var(--canvas); }
.journal-page h1, .journal-page h2 { letter-spacing: -3.5px; }
.journal-page .v2-nav-links a[aria-current='page'] { opacity: .55; }
.journal-page .v2-nav-cta { border: 0; color: #fff; background: var(--ink); }

.journal-hero { position: relative; min-height: 610px; display: grid; grid-template-columns: .98fr 1.02fr; gap: 36px; padding: 62px 58px 70px; overflow: hidden; border-radius: 48px; background: var(--hero-blue); }
.journal-hero-copy { position: relative; z-index: 4; align-self: center; }
.journal-hero .v2-eyebrow { margin-inline: 0; background: #fff; }
.journal-hero h1 { margin: 0; font-size: clamp(62px, 6.7vw, 96px); line-height: .86; }
.journal-hero h1 em { font-style: normal; }
.journal-hero-copy > p:last-child { max-width: 490px; margin: 29px 0 0; font-size: 16px; font-weight: 600; line-height: 1.65; }
.journal-hero-art { position: relative; min-height: 440px; display: grid; place-items: center; isolation: isolate; }
.journal-hero-art > img { position: relative; z-index: 2; width: 245px; transform: rotate(4deg); }
.journal-shape { position: absolute; z-index: -1; }
.journal-shape-one { width: 450px; height: 280px; border-radius: 50%; background: var(--pink); transform: rotate(-15deg); }
.journal-shape-two { width: 270px; height: 270px; border-radius: 40% 60% 45% 55%; background: var(--yellow); transform: rotate(18deg); }
.journal-note { position: absolute; z-index: 3; top: 52px; right: 3px; padding: 12px 15px; border-radius: 17px; background: #fff; font-size: 11px; font-weight: 900; line-height: 1.2; transform: rotate(6deg); box-shadow: 0 12px 28px rgba(21,21,21,.08); }
.journal-hero-meta { position: absolute; right: 58px; bottom: 24px; left: 58px; display: flex; justify-content: space-between; font-size: 9px; font-weight: 900; letter-spacing: .8px; }

.journal-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 80px; padding-block: 116px 52px; }
.journal-intro .v2-eyebrow { margin-inline: 0; background: var(--yellow); }
.journal-intro h2, .journal-prompt h2 { margin: 0; font-size: clamp(48px, 5vw, 74px); line-height: .92; }
.journal-intro > p { max-width: 450px; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.journal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-bottom: 120px; }
.journal-card { position: relative; min-height: 330px; display: flex; flex-direction: column; padding: 29px; border-radius: 34px; transition: transform .2s ease, box-shadow .2s ease; }
a.journal-card:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 16px 35px rgba(21,21,21,.09); }
.journal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.journal-card-top > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.75); }
.journal-card-top small { font-size: 9px; }
.journal-card-copy { margin: auto 0 28px; }
.journal-card h2 { max-width: 540px; margin: 0 0 13px; font-size: clamp(31px, 3.2vw, 45px); line-height: 1.02; letter-spacing: -2px; }
.journal-card p { max-width: 500px; margin: 0; font-size: 13px; line-height: 1.6; }
.journal-card-link { width: fit-content; padding: 10px 13px; border-radius: 999px; background: rgba(255,255,255,.78); font-size: 11px; font-weight: 900; }
.journal-card.is-upcoming { min-height: 270px; }
.journal-card.is-upcoming .journal-card-link { color: var(--muted); }
.journal-yellow { background: var(--yellow); }
.journal-purple { background: #cbbaff; }
.journal-green { background: #a9ebd2; }
.journal-pink { background: #ffc1e7; }
.journal-blue { background: #bdc9ff; }
.journal-orange { background: #ffb69d; }

.journal-prompt { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; margin-bottom: 24px; padding: 76px 70px; border-radius: 44px; background: var(--green); }
.journal-prompt .v2-eyebrow { margin-inline: 0; background: var(--pink); }
.journal-prompt > div:last-child > p { max-width: 470px; margin: 0 0 24px; font-size: 16px; font-weight: 700; line-height: 1.65; }

@media (max-width: 900px) {
  .journal-hero { grid-template-columns: 1fr; padding: 54px 44px 70px; text-align: center; }
  .journal-hero .v2-eyebrow { margin-inline: auto; }
  .journal-hero-copy > p:last-child { margin-inline: auto; }
  .journal-hero-art { min-height: 390px; }
  .journal-intro, .journal-prompt { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 620px) {
  .journal-hero { min-height: 0; padding: 44px 20px 59px; border-radius: 30px; }
  .journal-hero h1 { font-size: 55px; }
  .journal-hero-art { min-height: 330px; margin-inline: -12px; }
  .journal-hero-art > img { width: 185px; }
  .journal-shape-one { width: 340px; height: 195px; }
  .journal-shape-two { width: 205px; height: 205px; }
  .journal-note { top: 30px; right: 0; font-size: 9px; }
  .journal-hero-meta { right: 20px; bottom: 18px; left: 20px; font-size: 7px; }
  .journal-intro { gap: 25px; padding-block: 78px 38px; }
  .journal-intro h2, .journal-prompt h2 { font-size: 47px; }
  .journal-grid { grid-template-columns: 1fr; padding-bottom: 78px; }
  .journal-card, .journal-card.is-upcoming { min-height: 285px; padding: 24px; border-radius: 28px; }
  .journal-card h2 { font-size: 34px; }
  .journal-prompt { gap: 32px; padding: 52px 22px; border-radius: 30px; }
}

/* Compact Journal direction: one thought, then the reading list. */
.journal-minimal-hero { width: min(1040px, calc(100% - 48px)); padding-block: 108px 82px; }
.journal-minimal-hero h1 { max-width: 940px; margin: 0; font-size: clamp(56px, 7.4vw, 96px); line-height: .94; letter-spacing: -4.5px; }

/* Narrower than the page shell: at full width the description ran to an 860px
   measure, which is far past comfortable reading length for 13px text. */
.journal-minimal-list { width: min(1040px, calc(100% - 48px)); display: grid; gap: 10px; padding-bottom: 105px; }
.journal-minimal-row { min-height: 168px; display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 26px; padding: 16px 24px 16px 16px; border: 0; border-radius: 24px; background: #f2f3f1; transition: background .2s ease; }
.journal-minimal-row.no-cover { grid-template-columns: minmax(0, 1fr); min-height: 140px; padding-left: 26px; }
a.journal-minimal-row:hover { background: #f5f0d9; }
/* The thumbnail is positioned out of flow so the row is sized by its text alone.
   Two covers are portrait phone shots; left in flow their aspect ratio dragged
   those rows to ~550px and broke the rhythm of the list. */
.journal-minimal-cover { position: relative; align-self: stretch; min-height: 136px; overflow: hidden; margin: 0; border-radius: 18px; background: #e7e9e8; }
.journal-minimal-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.journal-minimal-copy small { color: #737779; font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.journal-minimal-copy h2 { margin: 6px 0 5px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.18; letter-spacing: -.7px; }
.journal-minimal-copy p { max-width: 62ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.journal-minimal-row.is-upcoming { background: #f6f6f4; }

@media (max-width: 620px) {
  .journal-minimal-hero { padding-block: 72px 54px; }
  .journal-minimal-hero h1 { font-size: 50px; line-height: .96; letter-spacing: -3.3px; }
  .journal-minimal-row { min-height: 0; grid-template-columns: 1fr; gap: 16px; padding: 18px; border-radius: 22px; }
  .journal-minimal-row.no-cover { grid-template-columns: 1fr; min-height: 0; padding: 22px 18px; }
  .journal-minimal-cover { aspect-ratio: 16 / 8; min-height: 0; }
  .journal-minimal-cover img { min-height: 0; }
  .journal-minimal-copy h2 { font-size: 20px; }
  .journal-minimal-copy p { margin-top: 9px; }
  a.journal-minimal-row:hover { transform: none; }
}

/* Dayblob type system — shared scale for the live landing, journal index, and articles. */
:root {
  --type-label: 0.6875rem;
  --type-nav: 0.75rem;
  --type-body-sm: 0.875rem;
  --type-body: 1rem;
  --type-body-lg: 1.125rem;
  --type-title-sm: clamp(1.75rem, 3vw, 2.375rem);
  --type-title: clamp(2.5rem, 4vw, 3rem);
  --type-display: clamp(3.5rem, 6vw, 5rem);
  --leading-label: 1.25;
  --leading-display: .98;
  --leading-section: .98;
  --leading-card-title: 1.08;
  --leading-title: 1.02;
  --leading-body: 1.65;
  --tracking-label: 0.07em;
  --tracking-title: -0.045em;
  --tracking-subtitle: -0.025em;
  --tracking-body: -0.012em;
}

body { letter-spacing: var(--tracking-body); }
.v2-brand { font-size: 1.4375rem; letter-spacing: var(--tracking-subtitle); }
.v2-nav-links, .v2-nav-cta { font-size: var(--type-nav); letter-spacing: var(--tracking-body); }
.dayblob-v2 h1, .journal-page h1 { letter-spacing: var(--tracking-title); }
.dayblob-v2 h2, .journal-page h2 { letter-spacing: var(--tracking-subtitle); }
.dayblob-v2 h3 { line-height: var(--leading-card-title); }
.v2-hero h1 { font-size: var(--type-display); line-height: var(--leading-display); }
.journal-hero h1, .journal-minimal-hero h1 { font-size: var(--type-display); line-height: var(--leading-display); }
.v2-reasons h2, .v2-steps h2, .v2-notes h2, .v2-plain h2, .v2-faq h2, .v2-final h2,
.journal-intro h2, .journal-prompt h2 { font-size: var(--type-title); line-height: var(--leading-section); }
.dayblob-v2 :is(.v2-reasons, .v2-steps, .v2-notes, .v2-plain, .v2-faq, .v2-final) h2 {
  font-size: clamp(3.125rem, 3.4vw, 3.75rem);
}
@media (max-width: 620px) {
  .dayblob-v2 :is(.v2-reasons, .v2-steps, .v2-notes, .v2-plain, .v2-faq, .v2-final) h2 {
    font-size: clamp(2.625rem, 8vw, 3rem);
  }
}
.v2-eyebrow, .journal-minimal-copy small, .eyebrow, .byline, .article-cta p, .answer-box b, .journal-nudge-kicker { letter-spacing: var(--tracking-label); }

.article-shell h1 { font-size: var(--type-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.article-deck { color: #5d6264; font-size: var(--type-body-lg); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.byline { color: #757d80; font-size: var(--type-label); line-height: var(--leading-label); }
.answer-box b, .journal-nudge-kicker, .article-cta p { font-size: var(--type-label); line-height: var(--leading-label); }
.answer-box p, .article-body > p, .article-body li, .template-box p, .article-body blockquote { font-size: var(--type-body); line-height: 1.72; letter-spacing: var(--tracking-body); }
.article-body > p { margin-bottom: 1.5rem; }
.article-body h2 { margin: 3.5rem 0 1rem; font-size: var(--type-title-sm); line-height: 1.12; letter-spacing: var(--tracking-subtitle); }
.article-body h3 { margin: 2.25rem 0 .625rem; font-size: var(--type-body-lg); line-height: 1.35; letter-spacing: var(--tracking-subtitle); font-weight: 800; }
.article-app-icon { display: block; width: 64px; height: 64px; margin: 0 0 1rem; padding: 10px; object-fit: contain; border: 2px solid var(--ink); border-radius: 18px; background: #fff; }
.article-body table { display: block; width: 100%; margin: 0 0 2rem; overflow-x: auto; border: 2px solid var(--ink); border-radius: 16px; border-spacing: 0; background: #fff; }
.article-body th, .article-body td { min-width: 150px; padding: .8rem .9rem; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; text-align: left; vertical-align: top; font-size: .9rem; line-height: 1.45; }
.article-body th { background: var(--cream); font-weight: 800; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body th:last-child, .article-body td:last-child { border-right: 0; }
.policy-page { min-height: 100vh; }
.policy-shell { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 120px); padding-block: clamp(64px, 9vw, 120px); }
.policy-header { position: sticky; top: 48px; align-self: start; }
.policy-header .v2-eyebrow { margin-inline: 0; }
.policy-header h1 { max-width: 520px; font-size: clamp(58px, 7vw, 92px); line-height: 1; letter-spacing: -5px; }
.policy-header > p:not(.v2-eyebrow) { max-width: 430px; margin: 24px 0 34px; color: var(--muted); font-size: 19px; line-height: 1.55; }
.policy-header dl { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.policy-header dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0; }
.policy-header dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.policy-header dd { margin: 0; font-size: 13px; font-weight: 800; }
.policy-content { max-width: 700px; }
.policy-content > p:first-child { margin-top: 0; padding: 24px; border: 2px solid var(--ink); border-radius: 20px; background: var(--yellow); color: var(--ink); font-weight: 700; }
.policy-content section { padding: 36px 0; border-bottom: 1px solid var(--line); }
.policy-content section:first-of-type { padding-top: 48px; }
.policy-content h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -1.7px; }
.policy-content p, .policy-content li { color: #454137; font-size: 16px; line-height: 1.75; }
.policy-content p { margin: 0 0 18px; }
.policy-content p:last-child { margin-bottom: 0; }
.policy-content ul { margin: 0 0 20px; padding-left: 24px; }
.policy-content li { margin-bottom: 8px; padding-left: 5px; }
.policy-content a { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .policy-shell { grid-template-columns: 1fr; gap: 48px; padding-block: 50px 76px; }
  .policy-header { position: static; }
  .policy-header h1 { font-size: 54px; letter-spacing: -3px; }
  .policy-content > p:first-child { padding: 20px; }
}
.article-body li { margin-bottom: .625rem; }
.article-body blockquote { font-weight: 700; }
.article-shell { width: min(1200px, calc(100% - 40px)); }
.article-page { overflow: clip; }
.article-shell > header { width: min(800px, 100%); margin: 0 0 32px auto; }
.article-main-grid { display: grid; grid-template-columns: 190px minmax(0, 800px); justify-content: end; gap: clamp(32px, 5vw, 72px); }
.article-flow { min-width: 0; }
.article-flow .article-body { width: 100%; }
.article-main-grid .article-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); margin: 0; overflow-y: auto; }
@media (max-width: 900px) {
  .article-shell { width: min(800px, calc(100% - 40px)); }
  .article-shell > header { width: 100%; }
  .article-main-grid { display: block; }
  .article-main-grid .article-toc { position: static; max-height: none; margin: 0 0 40px; overflow: visible; }
}
.journal-nudge h2, .article-cta h2 { font-size: var(--type-title-sm); line-height: 1.12; letter-spacing: var(--tracking-subtitle); }
.journal-nudge-intro { font-size: var(--type-body-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.journal-minimal-hero h1 { font-size: var(--type-display); line-height: .94; letter-spacing: var(--tracking-title); }
.journal-minimal-copy h2 { letter-spacing: var(--tracking-subtitle); }

/* Internal UI kit */
.ui-kit-page { min-height: 100svh; padding-bottom: 110px; background: var(--canvas); }
.ui-kit-hero { padding-block: 104px 82px; }
.ui-kit-kicker, .ui-kit-heading > p { margin: 0 0 14px; color: #687075; font-size: var(--type-label); font-weight: 900; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ui-kit-hero h1 { max-width: 980px; margin: 0; font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-title); }
.ui-kit-hero > p:last-child { max-width: 570px; margin: 28px 0 0; color: var(--muted); font-size: var(--type-body-lg); line-height: var(--leading-body); }
.ui-kit-section { padding-block: 64px; border-top: 1px solid #dfe2dd; }
.ui-kit-heading { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 38px; align-items: start; margin-bottom: 35px; }
.ui-kit-heading > p { margin-top: 11px; }
.ui-kit-heading h2 { max-width: 790px; margin: 0; font-size: var(--type-title); line-height: var(--leading-section); letter-spacing: var(--tracking-subtitle); }
.ui-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ui-color { display: grid; gap: 8px; padding: 13px; border-radius: 18px; background: rgba(255,255,255,.65); }
.ui-color > span { display: block; height: 96px; border-radius: 12px; }
.ui-color b { margin-top: 3px; font-size: 13px; }.ui-color small { color: var(--muted); font-size: 11px; }
.ui-type-list { display: grid; gap: 8px; }
.ui-type-list article { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 28px; padding: 23px 24px; border-radius: 20px; background: rgba(255,255,255,.6); }
.ui-type-list article > div { display: grid; gap: 5px; }.ui-type-list b { font-size: 13px; }.ui-type-list small { color: var(--muted); font-size: 11px; }
.ui-type-list p { margin: 0; color: var(--ink); }.ui-type-label { font-size: var(--type-label); font-weight: 900; letter-spacing: var(--tracking-label); }.ui-type-nav { font-size: var(--type-nav); font-weight: 800; }.ui-type-body { font-size: var(--type-body); line-height: var(--leading-body); }.ui-type-card { font-size: var(--type-title-sm); font-weight: 900; line-height: var(--leading-card-title); letter-spacing: var(--tracking-subtitle); }.ui-type-section { font-size: var(--type-title); font-weight: 900; line-height: var(--leading-section); letter-spacing: var(--tracking-subtitle); }.ui-type-display { font-size: var(--type-display); font-weight: 900; line-height: var(--leading-display); letter-spacing: var(--tracking-title); }
.ui-spacing-row { display: flex; align-items: end; gap: 26px; min-height: 135px; padding: 24px; border-radius: 22px; background: #fff; }.ui-spacing-row article { display: grid; justify-items: center; gap: 10px; }.ui-spacing-row span { display: block; min-width: 8px; border-radius: 5px; background: var(--blue); }.ui-spacing-row b { font-size: 11px; white-space: nowrap; }
.ui-blob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.ui-blob-grid figure { margin: 0; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.65); }.ui-blob-grid figure > div { min-height: 185px; display: grid; place-items: center; padding: 24px; background: #eef0ed; }.ui-blob-grid img { width: min(100%, 128px); max-height: 128px; object-fit: contain; }.ui-blob-grid figcaption { padding: 13px 14px; font-size: 12px; font-weight: 800; }
.ui-blob-subhead { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 38px; align-items: start; margin: 0 0 18px; padding-top: 4px; }.ui-blob-subhead > div { display: grid; gap: 5px; }.ui-blob-subhead b { font-size: 14px; }.ui-blob-subhead span { color: #7a8082; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.ui-blob-subhead p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.ui-blob-library-heading { margin-top: 58px; }.ui-blob-library-grid figure > div { background: #f8f8f4; }.ui-blob-library-grid img { width: min(100%, 145px); max-height: 145px; }
@media (max-width: 760px) { .ui-kit-hero { padding-block: 72px 55px; }.ui-kit-heading, .ui-blob-subhead { grid-template-columns: 1fr; gap: 8px; }.ui-kit-heading > p { margin-top: 0; }.ui-color-grid, .ui-blob-grid { grid-template-columns: repeat(2, 1fr); }.ui-type-list article { grid-template-columns: 1fr; gap: 15px; }.ui-type-display { font-size: clamp(3.2rem, 13vw, 5rem); }.ui-type-section { font-size: clamp(2.5rem, 10vw, 4rem); }.ui-spacing-row { gap: 14px; overflow-x: auto; }.ui-blob-grid figure > div { min-height: 140px; } }

@media (max-width: 620px) {
  .article-shell h1 { font-size: clamp(2.625rem, 12vw, 3.25rem); }
  .article-body > p, .article-body li, .template-box p, .article-body blockquote { font-size: .975rem; line-height: 1.7; }
  .article-body h2, .journal-nudge h2, .article-cta h2 { font-size: 1.85rem; }
  .journal-minimal-hero h1 { font-size: clamp(3.125rem, 14vw, 4rem); letter-spacing: var(--tracking-title); }
}

@media (max-width: 960px) {
  .v2-footer {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 34px;
  }
  .v2-footer p,
  .v2-footer div { justify-self: start; }
  .v2-footer div { gap: 16px; flex-wrap: wrap; }
}

/* Reading mode — article HTML is shared by every post, so keep its visual
   hierarchy quiet and let the words, rather than hard card edges, lead. */
.article-page {
  --article-ink: #343938;
  --article-muted: #68706d;
  --article-surface: #f5f5ef;
  --article-tint: #ecefe9;
  background: var(--canvas);
}
.article-page .v2-nav { border-bottom-color: rgba(52, 57, 56, .12); }
.article-page .article-shell { padding-top: 88px; }
.article-page .article-deck,
.article-page .byline,
.article-page .article-body > p,
.article-page .article-body li { color: var(--article-muted); }
.article-page .article-shell h1,
.article-page .article-body h2,
.article-page .article-body h3 { color: var(--article-ink); }
.article-page .eyebrow { color: #78817d; }
.article-page .eyebrow span { background: #a2aaa5; }
.article-page .answer-box,
.article-page .article-toc,
.article-page .template-box,
.article-page .article-body blockquote {
  border: 1px solid rgba(52, 57, 56, .09);
  background: var(--article-surface);
  box-shadow: none;
}
.article-page .answer-box,
.article-page .article-toc { background: var(--article-tint); }
.article-page .article-body blockquote { color: var(--article-ink); font-weight: 600; }
.article-page .article-body blockquote::before { color: #9aa9a1; }
.article-page .article-body table { border: 1px solid rgba(52, 57, 56, .12); background: var(--article-surface); }
.article-page .article-body th { background: var(--article-tint); }
.article-page .article-body th,
.article-page .article-body td { border-color: rgba(52, 57, 56, .1); }
.article-page .article-toc a { text-decoration-color: rgba(52, 57, 56, .22); }
.article-page .article-cta {
  color: var(--article-ink);
  background: #e7eee8;
  box-shadow: none;
}
.article-page .article-cta p { color: var(--article-muted); }
.article-page .article-cta h2 { color: var(--article-ink); }
.article-page .article-cta .button.primary { color: #f8faf7; background: #5d7569; }

/* One quiet reading column: headers, body, supporting blocks, and the closing
   prompt now share the same edges instead of stepping in and out as one reads. */
.article-page .article-shell { width: min(720px, calc(100% - 40px)); }
.article-page .article-shell > header { margin-bottom: 40px; }
.article-page .article-body { width: 100%; }
.article-page .article-editorial-figure { margin: 32px 0; }
.article-page .article-editorial-figure img { width: 100%; height: auto; border-radius: 12px; }
.article-page .article-editorial-figure--small { width: 100%; }
.article-page .article-editorial-figure figcaption { margin-top: 10px; color: #68706d; font-size: 13px; line-height: 1.5; }
.article-page .article-shell h1 { font-size: clamp(3.25rem, 5.8vw, 4rem); }
.article-page .article-body h2 { font-size: clamp(36px, 4vw, 48px); }
.article-page .article-body h3 { font-size: clamp(26px, 2.5vw, 30px); }
.article-page .article-deck {
  color: #000 !important;
  font-size: 18px !important;
}
.article-page .article-body :is(p, li, td, th, blockquote, strong, em) {
  color: #000 !important;
  font-size: 18px !important;
}
.article-page .article-body a {
  color: #1565c0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-page .article-body a:is(:hover, :focus-visible) { color: #0d47a1; }
.article-page .article-body a :is(strong, em) { color: inherit !important; }
.article-page .article-deck,
.article-page .article-related h2,
.article-page .article-related small,
.article-page .article-related span,
.article-page .article-related p { color: #000; }
.article-page .article-related { border-top: 0; }
.article-page .article-shell > header { display: flex; flex-direction: column; }
.article-page .article-shell > header h1 { order: 0; }
.article-page .article-shell > header .byline {
  order: 1;
  margin-top: 16px;
  color: #757d80;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: none;
}
.article-page .article-shell > header .article-deck { order: 2; }
.article-page .article-illustration { margin-bottom: 36px; border-radius: 18px; }
.article-page .answer-box,
.article-page .article-toc { margin-bottom: 36px; }
.article-page .article-body h2 { margin-top: 3.75rem; margin-bottom: 1.8rem; }
.article-page .article-body h3 { margin-bottom: 1.2rem; }
.article-page .article-related,
.article-page .journal-nudge,
.article-page .article-cta { width: 100%; }

@media (max-width: 620px) {
  .article-page .article-shell { width: min(100% - 32px, 720px); padding-top: 64px; }
  .article-page .article-shell > header { margin-bottom: 32px; }
  .article-page .article-illustration { margin-bottom: 28px; border-radius: 15px; }
  .article-page .answer-box,
  .article-page .article-toc { margin-bottom: 28px; }
}

/* Keep article callouts in the reading flow rather than turning every idea
   into a separate card. */
.article-page .answer-box,
.article-page .article-toc,
.article-page .template-box,
.article-page .article-body blockquote {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.article-page .answer-box { margin-bottom: 2rem; }
.article-page .article-toc { margin-bottom: 2rem; }
.article-page .article-toc b { color: #000; }
.article-page .article-toc ol { list-style: none; padding-left: 0; }
.article-page .article-toc a { color: #929292; text-decoration: none; transition: color .15s ease; }
.article-page .article-toc a:is(.is-active, :hover, :focus-visible) { color: #000; }
.article-page .template-box p:first-child { margin-top: 0; }
.article-page .template-box p:last-child { margin-bottom: 0; }
.article-page .article-body blockquote { padding-left: 0; font-weight: 400; }
.article-page .article-body blockquote::before { display: none; }

/* Keep the article copy and sticky table of contents compact on desktop. */
@media (min-width: 901px) {
  .article-page .article-shell {
    --article-rail: 300px;
    --article-column-gap: 40px;
    width: min(1440px, calc(100% - 40px));
    position: relative;
    left: 80px;
  }
  .article-page .article-shell > header {
    width: min(640px, calc(100% - var(--article-rail) - var(--article-column-gap)));
    margin: 0 0 40px calc(var(--article-rail) + var(--article-column-gap));
  }
  .article-page .article-main-grid {
    grid-template-columns: var(--article-rail) minmax(0, 1fr);
    justify-content: start;
    gap: var(--article-column-gap);
  }
  .article-page .article-main-grid .article-toc { transform: none; }
  .article-page .article-flow { width: min(640px, 100%); }
  .article-page .article-main-grid .article-toc { max-width: 300px; }
  .article-page .article-flow .article-body { width: 100%; max-width: none; }
}
@media (max-width: 900px) {
  .article-page .article-shell { width: min(800px, calc(100% - 40px)); }
  .article-page .article-shell > header { width: 100%; margin: 0 0 32px; }
  .article-page .article-main-grid { display: block; }
  .article-page .article-main-grid .article-toc { position: static; max-height: none; margin: 0 0 40px; overflow: visible; }
}

/* Section labels repeat the heading without adding information. Keep the
   homepage focused on the actual title and supporting copy. */
.dayblob-v2 .v2-plain-art img:last-child[src="/dayblob-looking-back.webp"] {
  position: relative;
  z-index: 2;
  right: auto;
  bottom: auto;
  width: 220px;
  transform: rotate(-5deg);
}
.dayblob-v2 .v2-plain-art img[src="/dayblob-note-character.svg"] {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  width: 110px;
  transform: rotate(7deg);
}
@media (max-width: 1100px) {
  .dayblob-v2 .v2-plain-art img:last-child[src="/dayblob-looking-back.webp"] { width: 185px; }
}
@media (max-width: 620px) {
  .dayblob-v2 .v2-plain-art img:last-child[src="/dayblob-looking-back.webp"] { width: 174px; }
  .dayblob-v2 .v2-plain-art img[src="/dayblob-note-character.svg"] { width: 80px; }
}
.dayblob-v2 .v2-eyebrow { display: none; }
.dayblob-v2 .v2-final h2 { margin-top: 0; }

/* At tablet widths the original two columns had too little room, leaving the
   product visual stranded above the heading. Read the promise first, then see
   the screen, with a deliberately compact art area. */
@media (max-width: 1100px) {
  .dayblob-v2 .v2-plain { grid-template-columns: 1fr; gap: 34px; padding: 48px; }
  .dayblob-v2 .v2-plain > div:last-child { order: -1; }
  .dayblob-v2 .v2-plain-art { min-height: 315px; }
  .dayblob-v2 .v2-plain-circle { width: 290px; height: 290px; }
  .dayblob-v2 .v2-plain-art img:nth-child(2) { width: 185px; }
}

@media (max-width: 620px) {
  .dayblob-v2 .v2-plain { gap: 28px; padding: 38px 22px; }
  .dayblob-v2 .v2-plain-art { min-height: 270px; }
}

/* Give long-form articles a persistent, out-of-the-way section menu on wide
   screens. It returns to the reading column before the side rail gets tight. */
@media (min-width: 1240px) {
  .article-page .article-toc {
    position: sticky;
    top: 32px;
    z-index: 2;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .article-page .article-toc ol { gap: 9px; padding-left: 0; }
  .article-page .article-toc li { font-size: 15px; line-height: 1.5; }
}

/* Dropbox Work in Progress–inspired homepage: bold editorial color fields,
   sharper edges, and product stories instead of a blog-card feed. */
.dayblob-v2 {
  --canvas: #f7f5eb;
  --paper: #fffdf6;
  --ink: #123d42;
  --muted: #4b686b;
  --yellow: #ffcf4a;
  --pink: #f5a99d;
  --blue: #b7dce6;
  --green: #46d4a8;
  --purple: #c2afe9;
  background: var(--canvas);
  color: var(--ink);
}
.dayblob-v2 h1 { letter-spacing: -1.4px; }
.dayblob-v2 h2 { letter-spacing: -1.1px; }
.dayblob-v2 h3 { letter-spacing: -.45px; }
.v2-nav { min-height: 76px; }
.v2-nav-links { gap: 30px; }
.v2-nav-cta {
  border: 0 !important;
  border-radius: 0;
  color: #fff;
  background: var(--ink);
}
.dayblob-v2 .v2-eyebrow {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: #087a83;
  background: transparent;
  font-size: 10px;
  letter-spacing: 1.25px;
}
.v2-hero.shell {
  width: 100%;
  max-width: none;
  min-height: 650px;
  margin: 0;
  padding: 64px max(24px, calc((100vw - 1180px) / 2)) 76px;
  border: 0 !important;
  border-radius: 0;
  background: #087e87 !important;
  color: #fff;
  grid-template-columns: minmax(300px, .88fr) minmax(400px, 1.12fr);
  gap: clamp(28px, 5vw, 76px);
}
.v2-hero .v2-eyebrow { color: #a9f1df; }
.v2-hero h1 { max-width: 600px; font-size: clamp(68px, 6.2vw, 86px); }
.v2-hero-copy > p:not(.v2-eyebrow) { max-width: 460px; color: #e8f6f2; font-size: 17px; }
.v2-button {
  border: 0 !important;
  border-radius: 0;
  color: var(--ink);
  background: var(--yellow);
}
.v2-button b { color: #fff; background: var(--ink); }
.v2-hero-art { min-height: 490px; }
.v2-writing-loop { width: min(100%, 510px); }
.v2-memory-card,
.v2-composer-shell { border-radius: 20px; box-shadow: 0 18px 36px rgba(4, 38, 42, .2); }
.v2-memory-card { color: var(--ink); background: #fffdf6; }
.v2-memory-copy p { color: var(--ink); }
.v2-composer-shell { color: var(--ink); background: #fffdf6; }
.v2-composer { color: var(--ink); }
.v2-composer-label { color: #687477; }
.v2-saved-chip { color: #14573e; }
.v2-composer-one span { animation-delay: -2s; }
.v2-hero-meta { color: #d7f2eb; }
.v2-strip { margin: 0; border: 0 !important; background: var(--green); color: var(--ink); }
.v2-strip p { padding-block: 14px; }
.v2-reasons { grid-template-columns: 1fr; gap: 42px; padding-block: 104px 112px; }
.v2-reasons > header { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, .7fr); align-items: end; column-gap: 60px; }
.v2-reasons > header .v2-eyebrow { grid-column: 1 / -1; }
.v2-reasons > header h2 { grid-column: 1; grid-row: 2 / span 2; }
.v2-reasons > header > p:last-child { margin: 0 0 5px; }
.v2-reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-reason {
  min-height: 258px;
  padding: 26px 24px;
  border: 0 !important;
  border-radius: 24px;
}
.v2-reason h3 { max-width: 270px; margin: 63px 0 12px; font-size: 30px; }
.v2-reason p { max-width: 270px; font-size: 14px; }
.v2-purple { padding-right: 120px; }
.v2-blob-yellow { top: auto; right: 14px; bottom: 16px; width: 66px; }
.v2-blob-orange { top: auto; right: 16px; bottom: 18px; width: 78px; }
.v2-green > img { right: 17px; bottom: 14px; width: 72px; }
.v2-steps { padding-block: 96px 104px; border: 0 !important; background: #b7dce6; }
.v2-steps .shell { width: min(1180px, calc(100% - 48px)); }
.v2-steps-head { display: block; margin-bottom: 42px; }
.v2-steps-head .v2-eyebrow { margin-bottom: 12px; }
.v2-steps-head h2 { max-width: 640px; }
.v2-step-grid { gap: 8px; }
.v2-step-grid > article,
.v2-step-shot { min-height: 290px; border: 0 !important; border-radius: 24px; }
.v2-step-grid > article { padding: 25px; background: #fffdf6; }
.v2-step-grid article > span { border: 0 !important; background: var(--yellow); }
.v2-step-grid h3 { margin-top: auto; font-size: 29px; }
.v2-step-grid p { max-width: 300px; font-size: 14px; }
.v2-step-shot img { width: min(78%, 250px); transform: translateX(-50%) translateY(35px); }
.v2-memory-map-card { background: #f5a99d; }
.v2-notes.shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 106px max(24px, calc((100vw - 1180px) / 2));
  background: #f5b99f;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 100px);
}
.v2-notes-copy > p:not(.v2-eyebrow) { max-width: 420px; color: #36585b; font-size: 16px; }
.v2-text-link { border-bottom: 1px solid var(--ink) !important; }
.v2-note-stack { min-height: 420px; }
.v2-note-card { border: 0 !important; border-radius: 26px; box-shadow: 0 18px 35px rgba(20, 44, 43, .13); }
.v2-card-one { background: var(--yellow); }
.v2-card-two { background: #eadcf6; }
.v2-plain.shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px max(24px, calc((100vw - 1180px) / 2));
  border: 0 !important;
  border-radius: 0;
  background: #c7b6eb;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  gap: clamp(40px, 8vw, 110px);
}
.v2-plain-art { min-height: 390px; border-radius: 28px; background: #a7dce4; }
.v2-plain-circle { border: 0 !important; border-radius: 0; background: var(--yellow); transform: rotate(-7deg); }
.v2-plain ul { border-top: 1px solid rgba(18, 61, 66, .4) !important; }
.v2-plain li { border-bottom: 1px solid rgba(18, 61, 66, .4) !important; font-size: 15px; }
.v2-faq.shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 92px max(24px, calc((100vw - 1180px) / 2));
  border: 0 !important;
  border-radius: 0;
  background: #f7f5eb;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 8vw, 112px);
}
.v2-faq details { border-top: 1px solid rgba(18, 61, 66, .36) !important; }
.v2-faq details:last-child { border-bottom: 1px solid rgba(18, 61, 66, .36) !important; }
.v2-faq summary { font-size: 17px; }
.v2-faq details p { color: var(--muted); font-size: 15px; }
.v2-final { margin: 0; padding-block: 94px; border: 0 !important; background: #087e87; color: #fff; }
.v2-final .v2-eyebrow { color: #a9f1df; }
.v2-final-signup > p { color: #e8f6f2; }
.v2-final .waitlist-form { border: 0 !important; border-radius: 0; }
.v2-final .waitlist-form button { border: 0 !important; border-radius: 0; color: var(--ink); background: var(--yellow); }
.v2-final small { color: #d7f2eb; }
.v2-footer.shell { width: 100%; padding: 32px max(24px, calc((100vw - 1180px) / 2)); background: #123d42; color: #fff; }
.v2-footer p { color: #c1d8d5; }
.v2-footer div { color: #f1f6f4; }

@media (max-width: 900px) {
  .v2-hero.shell { grid-template-columns: 1fr; padding: 58px 24px 72px; }
  .v2-hero-copy { text-align: center; }
  .v2-hero-copy > p:not(.v2-eyebrow) { margin-inline: auto; }
  .v2-hero-art { min-height: 470px; width: min(100%, 590px); margin-inline: auto; }
  .v2-hero-meta { left: 24px; right: 24px; }
  .v2-reasons > header { grid-template-columns: 1fr; }
  .v2-reasons > header h2 { grid-row: auto; }
  .v2-reasons > header > p:last-child { margin-top: 22px; }
  .v2-reason-grid { grid-template-columns: 1fr; }
  .v2-reason { min-height: 220px; padding: 24px; }
  .v2-reason h3 { margin-top: 46px; }
  .v2-notes.shell { grid-template-columns: 1fr; padding-block: 78px; }
  .v2-note-stack { width: min(560px, 100%); margin-inline: auto; }
  .v2-plain.shell { grid-template-columns: 1fr; padding-block: 78px; }
  .v2-plain > div:last-child { order: -1; }
  .v2-faq.shell { grid-template-columns: 1fr; padding-block: 78px; }
}
@media (max-width: 620px) {
  .v2-nav { min-height: 68px; }
  .v2-hero.shell { padding: 44px 18px 58px; }
  .v2-hero h1 { font-size: clamp(56px, 14vw, 72px); }
  .v2-hero-copy > p:not(.v2-eyebrow) { font-size: 15px; }
  .v2-hero-art { min-height: 385px; margin-inline: -10px; }
  .v2-writing-loop { width: min(100%, 360px); min-height: 350px; }
  .v2-memory-pile { height: 250px; }
  .v2-memory-card { min-height: 116px; gap: 15px; padding: 13px 14px; }
  .v2-memory-copy p { font-size: 12px; }
  .v2-composer-shell { right: 4px; left: 4px; min-height: 120px; padding: 18px; }
  .v2-composer { right: 18px; bottom: 22px; left: 18px; font-size: 12px; }
  .v2-hero-meta { left: 18px; right: 18px; bottom: 16px; font-size: 8px; }
  .v2-reasons { padding-block: 70px; }
  .v2-reasons h2, .v2-steps h2, .v2-notes h2, .v2-plain h2, .v2-faq h2, .v2-final h2 { font-size: 48px; }
  .v2-steps { padding-block: 70px; }
  .v2-step-grid { grid-template-columns: 1fr; }
  .v2-step-grid > article, .v2-step-shot { min-height: 245px; }
  .v2-notes.shell, .v2-plain.shell, .v2-faq.shell { padding-inline: 20px; }
  .v2-note-stack { min-height: 360px; }
  .v2-note-card { width: min(70vw, 260px); min-height: 205px; padding: 20px; }
  .v2-card-one { left: 0; }
  .v2-card-two { right: 0; }
  .v2-plain-art { min-height: 280px; }
  .v2-plain-circle { width: 245px; height: 245px; }
  .v2-final { padding-block: 70px; }
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* Editorial redesign: bold type, hard edges, generous space. */
:root { --db-cream:#f3f2e9; --db-ink:#242420; --db-yellow:#ffc629; --db-blue:#2522a8; }
body { background:var(--db-cream); background-image:none; color:var(--db-ink); }
.db-site { background:var(--db-cream); }
.db-site h1,.db-site h2,.db-site h3,.db-site h4 { font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif; font-weight:900; font-stretch:condensed; letter-spacing:-.018em; text-transform:uppercase; }
.db-nav { height:80px; padding:0 clamp(20px,3vw,48px); display:flex; align-items:center; gap:42px; background:var(--db-cream); border-bottom:1px solid var(--db-ink); position:relative; z-index:20; }
.db-brand { display:inline-flex; align-items:center; white-space:nowrap; font-family:'Barlow Condensed',Impact,sans-serif; font-size:32px; font-weight:900; letter-spacing:-.045em; line-height:1; }
.db-brand-mark { font-family:Arial,sans-serif; font-size:22px; letter-spacing:-.33em; margin-right:17px; transform:rotate(-18deg); }
.db-brand-period { color:#f19036; }
.db-nav-links { display:flex; align-items:center; gap:28px; font-size:12px; font-weight:800; letter-spacing:.09em; }
.db-nav-links a:hover,.db-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.db-pill { min-height:43px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:24px; border:1px solid currentColor; border-radius:100px; font-size:12px; font-weight:800; letter-spacing:.05em; white-space:nowrap; transition:background .2s,color .2s,transform .2s; }
.db-pill:hover { background:var(--db-ink); color:var(--db-cream); transform:translateY(-2px); }
.db-nav-action { margin-left:auto; }
.db-pill-dark { background:var(--db-ink); color:var(--db-cream); }
.db-pill-dark:hover { background:var(--db-cream); color:var(--db-ink); }
.db-hero { min-height:calc(100svh - 80px); display:flex; flex-direction:column; justify-content:space-between; background:var(--db-yellow); padding:clamp(42px,5.4vw,86px) clamp(20px,5vw,80px) 26px; }
.db-hero-inner { max-width:1350px; width:100%; margin:auto; text-align:center; }
.db-kicker,.db-section-label { font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.db-hero h1 { max-width:none; font-size:clamp(76px,11.4vw,172px); line-height:.88; margin:28px 0 34px; }
.db-hero h1 em { font-style:normal; color:var(--db-blue); }
.db-hero-deck { max-width:660px; margin:0 auto 28px; font-size:clamp(16px,1.45vw,20px); line-height:1.45; }
.db-hero-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:35px; font-size:11px; font-weight:800; letter-spacing:.12em; }
.db-manifesto { padding:130px clamp(20px,5vw,80px) 160px; }
.db-manifesto-grid { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:7vw; max-width:1500px; margin:auto; }
.db-manifesto h2,.db-showcase h2,.db-featured h2,.db-stories h2,.db-close h2 { font-size:clamp(54px,6.8vw,112px); line-height:.91; }
.db-manifesto-grid > div { max-width:410px; padding-bottom:10px; }
.db-manifesto-grid p { font-size:18px; line-height:1.5; }
.db-text-link { display:inline-block; margin-top:24px; padding-bottom:6px; border-bottom:1px solid; font-size:12px; font-weight:800; letter-spacing:.08em; }
.db-showcase { padding:90px clamp(20px,5vw,80px) 120px; background:var(--db-ink); color:var(--db-cream); }
.db-showcase-heading { max-width:1500px; margin:auto; }
.db-showcase h2 { max-width:1000px; margin:30px 0 75px; }
.db-showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:7vw; max-width:1500px; margin:auto; align-items:center; }
.db-showcase-image { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:30px; padding:50px 30px 22px; background:var(--db-blue); }
.db-showcase-image img { max-height:475px; width:auto; object-fit:contain; filter:drop-shadow(14px 20px 16px #0005); }
.db-showcase-image span { align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.1em; }
.db-showcase-copy h3 { max-width:550px; font-size:clamp(44px,4.3vw,70px); line-height:.94; }
.db-showcase-copy > p { max-width:560px; margin:28px 0 50px; font-size:18px; line-height:1.5; }
.db-feature-lines > div { display:flex; align-items:center; gap:28px; padding:19px 0; border-top:1px solid #f3f2e973; font-size:14px; font-weight:800; letter-spacing:.06em; }
.db-feature-lines > div:last-child { border-bottom:1px solid #f3f2e973; }
.db-feature-lines b { font-size:12px; }
.db-featured { display:grid; grid-template-columns:1fr 1fr; min-height:690px; background:#f1a9be; }
.db-featured-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:80px clamp(20px,5vw,80px); }
.db-featured-copy h2 { margin:38px 0 22px; }
.db-featured-copy > p:not(.db-section-label) { max-width:480px; font-size:18px; line-height:1.5; }
.db-featured-copy .db-pill { margin-top:20px; }
.db-featured-image { display:flex; align-items:center; justify-content:center; padding:70px 40px; background:#efaa6e; overflow:hidden; }
.db-featured-image img { max-height:580px; width:auto; filter:drop-shadow(14px 20px 17px #0005); transform:rotate(-6deg); }
.db-stories { padding:120px clamp(20px,5vw,80px) 145px; }
.db-stories header { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:48px; }
.db-stories h2 { margin-top:28px; }
.db-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--db-ink); border-left:1px solid var(--db-ink); }
.db-story-card { display:flex; flex-direction:column; min-width:0; padding:22px; border-right:1px solid var(--db-ink); border-bottom:1px solid var(--db-ink); }
.db-story-image { aspect-ratio:1.24; overflow:hidden; background:#dddbcf; }
.db-story-image img { width:100%; height:100%; object-fit:cover; }
.db-story-meta { display:flex; justify-content:space-between; gap:20px; margin:22px 0 18px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.db-story-card h3 { font-size:clamp(30px,2.7vw,44px); line-height:1; }
.db-story-read { margin-top:auto; padding-top:36px; font-size:11px; font-weight:800; letter-spacing:.08em; }
.db-close { min-height:660px; padding:30px clamp(20px,5vw,80px) 70px; background:var(--db-yellow); display:flex; flex-direction:column; }
.db-close-top { display:flex; justify-content:space-between; gap:20px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.db-close h2 { margin:auto; text-align:center; font-size:clamp(82px,11.8vw,180px); line-height:.88; }
.db-close-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:25px; }
.db-close-bottom > p { max-width:290px; font-size:17px; line-height:1.4; }
.db-signup { display:flex; gap:0; border-bottom:1px solid var(--db-ink); min-width:min(100%,540px); }
.db-signup input { width:100%; padding:15px 6px; border:0; outline:0; background:transparent; color:var(--db-ink); }
.db-signup button { border:0; background:transparent; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.db-footer { min-height:260px; padding:45px clamp(20px,5vw,80px); display:grid; grid-template-columns:1fr auto; gap:30px; background:var(--db-ink); color:var(--db-cream); }
.db-footer p { margin:20px 0 0; }
.db-footer nav { display:flex; gap:25px; align-items:start; font-size:12px; font-weight:800; letter-spacing:.08em; }
.db-footer small { grid-column:1/-1; align-self:end; font-size:11px; letter-spacing:.1em; }

/* Shared editorial system for listing, stories, and policy. */
.journal-page,.article-page,.policy-page { background:var(--db-cream); }
.journal-minimal-hero { max-width:none; width:auto; min-height:480px; padding:105px clamp(20px,5vw,80px) 70px; border-bottom:1px solid var(--db-ink); }
.journal-minimal-hero h1 { max-width:1100px; margin:30px 0 25px; font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(68px,8.5vw,132px); font-weight:900; line-height:.96; text-transform:uppercase; letter-spacing:-.02em; }
.journal-minimal-hero > p:last-child { max-width:550px; font-size:18px; line-height:1.5; }
.journal-minimal-list { width:auto; max-width:none; margin:0; padding:50px clamp(20px,5vw,80px) 120px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.journal-minimal-row { display:flex; flex-direction:column; padding:20px; border:1px solid var(--db-ink); margin:-1px 0 0 -1px; min-height:540px; background:transparent; }
.journal-minimal-cover { width:100%; height:auto; aspect-ratio:1.2; margin:0 0 25px; overflow:hidden; background:#e5e1d2; }
.journal-minimal-cover img { width:100%; height:100%; object-fit:cover; }
.journal-minimal-row.no-cover::before { content:'DAYBLOB / JOURNAL'; display:grid; place-items:center; aspect-ratio:1.2; margin-bottom:25px; background:var(--db-yellow); font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(26px,3vw,44px); font-weight:900; }
.journal-minimal-copy { padding:0; }
.journal-minimal-copy small { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.journal-minimal-copy h2 { margin:18px 0; font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(32px,2.7vw,44px); font-weight:900; line-height:1; text-transform:uppercase; letter-spacing:-.015em; }
.journal-minimal-copy p { font-size:14px; line-height:1.5; }
.article-shell { width:auto; max-width:none; padding:80px clamp(20px,5vw,80px) 130px; }
.article-shell > header { max-width:1450px; margin:0 auto 35px; padding-bottom:50px; border-bottom:1px solid var(--db-ink); }
.article-shell > header h1 { max-width:1350px; margin:24px 0; font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(56px,6.6vw,102px); font-weight:900; line-height:.95; text-transform:uppercase; letter-spacing:-.02em; }
.article-shell .article-deck { max-width:750px; font-size:19px; line-height:1.5; }
.article-shell .byline { margin-top:25px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.article-main-grid { max-width:1450px; margin:auto; grid-template-columns:minmax(180px,250px) minmax(0,1fr); gap:clamp(35px,5vw,90px); }
.article-flow { max-width:960px; }
.article-illustration { margin:0 0 70px; }
.article-illustration img { width:100%; height:auto; }
.article-toc { border-top:1px solid var(--db-ink); padding-top:18px; }
.article-toc b { font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.article-toc a { font-size:13px; line-height:1.4; }
.article-body { max-width:760px; font-size:18px; line-height:1.7; }
.article-body h2,.article-related h2,.article-cta h2,.policy-header h1,.policy-content h2 { font-family:'Barlow Condensed',Impact,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.015em; }
.article-body h2 { font-size:clamp(38px,4vw,62px); line-height:.96; margin-top:60px; }
.article-related { border-top:1px solid var(--db-ink); }
.article-related h2 { font-size:60px; }
.article-cta { background:var(--db-yellow); border:0; border-radius:0; }
.article-cta h2 { font-size:clamp(50px,6vw,90px); line-height:.9; }
/* Dirt-inspired split story opening: title + image, then the reading surface. */
.article-page .article-shell { width:auto; max-width:none; position:static; left:auto; padding:42px clamp(18px,3vw,50px) 0; background:#1c2925; }
.article-page .article-shell > header.article-feature { width:100%; max-width:1500px; margin:0 auto; padding:0; border:0; display:grid; grid-template-columns:45% 55%; min-height:510px; overflow:hidden; border-radius:46px 46px 0 0; background:#dcbfd7; }
.article-feature-copy { display:flex; flex-direction:column; justify-content:space-between; padding:clamp(30px,4vw,62px); min-width:0; }
.article-feature-copy .db-section-label { margin:0; }
.article-feature-heading time { display:block; margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.article-shell > .article-feature .article-feature-heading h1 { max-width:none; margin:0 0 18px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(39px,4.1vw,68px); font-weight:500; line-height:1.12; letter-spacing:-.055em; text-transform:none; overflow-wrap:anywhere; }
.article-feature-heading .article-deck { max-width:580px; margin:0; font-size:clamp(17px,1.35vw,21px); line-height:1.45; }
.article-feature-image { width:100%; height:100%; min-height:510px; margin:0; overflow:hidden; background:#f692b1; }
.article-feature-image img { width:100%; height:100%; object-fit:cover; }
.article-feature-fallback { display:grid; place-items:center; background:#fabd52; }
.article-feature-fallback img { width:min(76%,540px); height:auto; object-fit:contain; }
.article-author-strip { max-width:1500px; margin:0 auto; min-height:116px; padding:26px clamp(30px,4vw,62px); display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--db-cream); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.article-page .article-main-grid { max-width:1500px; padding:45px clamp(30px,4vw,62px) 130px; border-radius:0 0 76px 76px; background:var(--db-cream); }
.article-page .article-toc { position:sticky; top:25px; align-self:start; }
.article-page .article-body { max-width:720px; margin:auto; }
.article-page .article-flow { width:auto; max-width:none; }
.article-page .article-flow .article-body { width:min(100%,720px); max-width:720px; margin-inline:auto; }
.article-page .journal-nudge { max-width:720px; margin-left:auto; margin-right:auto; }
.article-next-read { max-width:1500px; margin:0 auto; padding:90px 0 0; color:#eef18a; background:#1c2925; }
.article-next-read > h2 { margin:0 0 28px; padding-inline:clamp(30px,4vw,62px); font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(30px,3vw,44px); font-weight:500; letter-spacing:-.05em; text-transform:none; }
.article-next-card { display:grid; grid-template-columns:1fr 1fr; gap:38px; padding:clamp(22px,3vw,50px); min-height:430px; border-radius:0 100px 0 0; background:#dcbfd7; color:#202923; }
.article-next-image { min-height:310px; overflow:hidden; background:#f3b65b; }
.article-next-image img { width:100%; height:100%; object-fit:cover; }
.article-next-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.article-next-copy time { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.article-next-copy h3 { max-width:520px; margin:28px 0 18px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(32px,3.6vw,60px); font-weight:500; line-height:1.13; letter-spacing:-.055em; text-transform:none; }
.article-next-copy p { max-width:470px; font-size:17px; line-height:1.5; }
.article-next-button { display:inline-flex; align-items:center; gap:3px; margin-top:22px; color:#e0c0d9; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:18px; font-weight:500; line-height:1; letter-spacing:.015em; }
.article-next-button-label { display:grid; place-items:center; min-height:50px; padding:0 21px; border-radius:55px; background:#764135; transition:transform .5s cubic-bezier(.77,0,.175,1),background-color .35s ease,color .35s ease; }
.article-next-button-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#764135; font-size:26px; font-weight:400; transition:transform .5s cubic-bezier(.77,0,.175,1),background-color .35s ease,color .35s ease; }
.article-next-card:hover .article-next-button-label,.article-next-card:focus-visible .article-next-button-label { transform:translateX(5px); background:#54352d; }
.article-next-card:hover .article-next-button-icon,.article-next-card:focus-visible .article-next-button-icon { transform:translateX(10px) rotate(-35deg); background:#54352d; }
.article-next-card:focus-visible { outline:3px solid #eef18a; outline-offset:5px; }
@media(prefers-reduced-motion:reduce) { .article-next-button-label,.article-next-button-icon { transition:none; } }
.article-page .article-shell > .article-cta { width:auto; max-width:1500px; margin:0 auto; padding:70px clamp(24px,4vw,62px); border-radius:0; background:#1c2925; color:var(--db-cream); }
.article-page .article-shell > .article-cta h2 { max-width:680px; color:var(--db-cream); }
.article-page .article-shell > .article-cta p { color:#eef18a; }
@media(max-width:760px) { .article-page .article-shell { padding:18px 18px 0; } .article-page .article-shell > header.article-feature { display:flex; flex-direction:column-reverse; border-radius:28px 28px 0 0; } .article-feature-image { min-height:0; height:280px; } .article-feature-copy { min-height:390px; padding:28px; } .article-shell > .article-feature .article-feature-heading h1 { font-size:clamp(37px,8vw,56px); } .article-author-strip { min-height:90px; padding:20px 28px; flex-wrap:wrap; gap:8px; font-size:10px; } .article-page .article-main-grid { padding:30px 28px 90px; border-radius:0 0 34px 34px; } .article-page .article-toc { position:static; } .article-next-read { padding-top:65px; } .article-next-read > h2 { padding-inline:22px; } .article-next-card { grid-template-columns:1fr; gap:0; padding:0; border-radius:0 65px 0 0; overflow:hidden; } .article-next-image { min-height:0; height:250px; } .article-next-copy { padding:30px; } .article-next-copy h3 { font-size:36px; } }
.policy-shell { padding-top:75px; }
.policy-header h1 { font-size:clamp(75px,10vw,150px); line-height:.85; }
.policy-content h2 { font-size:clamp(40px,5vw,66px); }
@media(max-width:900px) { .db-nav { gap:20px; } .db-nav-links { gap:13px; } .db-manifesto-grid,.db-showcase-grid { grid-template-columns:1fr; } .db-story-grid,.journal-minimal-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .db-featured { min-height:0; } }
@media(max-width:650px) { .db-nav { height:66px; padding-inline:18px; } .db-brand { font-size:27px; } .db-nav-links { display:none; } .db-nav-action { min-height:36px; padding-inline:12px; font-size:10px; gap:5px; } .db-hero { min-height:650px; } .db-hero h1 { font-size:clamp(65px,14vw,98px); } .db-hero-bottom { font-size:9px; } .db-manifesto,.db-showcase,.db-stories { padding-block:75px; } .db-manifesto h2,.db-showcase h2,.db-featured h2,.db-stories h2 { font-size:clamp(54px,12vw,82px); } .db-showcase-image { min-height:400px; } .db-showcase-image img { max-height:360px; } .db-featured { grid-template-columns:1fr; } .db-featured-image { min-height:450px; } .db-story-grid,.journal-minimal-list { grid-template-columns:1fr; } .db-stories header { align-items:start; flex-direction:column; } .db-close { min-height:560px; } .db-close h2 { font-size:clamp(72px,16vw,112px); } .db-close-bottom { display:block; } .db-signup { min-width:0; width:100%; } .db-footer { grid-template-columns:1fr; } .db-footer nav { flex-wrap:wrap; } .db-footer small { grid-column:1; } .journal-minimal-hero { min-height:340px; padding-top:70px; } .journal-minimal-hero h1 { font-size:clamp(58px,12vw,86px); } .journal-minimal-row { min-height:0; } .article-shell { padding-top:55px; } .article-main-grid { display:block; } .article-toc { margin-bottom:35px; } }

/* Carry the split editorial story language from articles onto the home page. */
.db-site:has(.db-hero) { background:#1c2925; }
.db-hero { min-height:0; padding:42px clamp(18px,3vw,50px) 0; background:#1c2925; }
.db-hero-inner { position:relative; isolation:isolate; width:100%; max-width:1500px; min-height:610px; margin:0 auto; padding:72px 54% 72px clamp(34px,4.5vw,72px); overflow:hidden; border-radius:64px 64px 0 0; background:#dcbfd7; text-align:left; }
.db-hero-inner::after { content:''; position:absolute; z-index:-1; inset:0 0 0 50%; background:#f6aa83 url('/dayblob-writing.webp') center 58% / auto 82% no-repeat; }
.db-hero .db-kicker { max-width:450px; margin:0 0 100px; }
.db-hero h1 { max-width:580px; margin:0 0 22px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(47px,4.8vw,74px); font-weight:500; line-height:1.06; letter-spacing:-.065em; }
.db-hero h1 em { color:#1c2925; }
.db-hero-deck { max-width:530px; margin:0 0 28px; font-size:clamp(16px,1.35vw,19px); line-height:1.48; }
.db-hero-bottom { width:100%; max-width:1500px; margin:0 auto; padding:28px 0 64px; color:#eef18a; }
.db-hero .db-pill,.db-featured .db-pill,.db-stories .db-pill { border:0; padding:6px 6px 6px 21px; gap:14px; background:#764135; color:#e0c0d9; min-height:50px; }
.db-hero .db-pill span,.db-featured .db-pill span,.db-stories .db-pill span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#5f3a32; font-size:20px; transition:transform .5s cubic-bezier(.77,0,.175,1),background-color .35s; }
.db-hero .db-pill:hover,.db-featured .db-pill:hover,.db-stories .db-pill:hover { transform:none; background:#54352d; color:#e0c0d9; }
.db-hero .db-pill:hover span,.db-featured .db-pill:hover span,.db-stories .db-pill:hover span { transform:translateX(4px) rotate(-35deg); background:#462a24; }
.db-hero .db-pill:focus-visible,.db-featured .db-pill:focus-visible,.db-stories .db-pill:focus-visible { outline:3px solid #eef18a; outline-offset:4px; }
.db-stories .db-pill:hover { background:#764135; color:#e0c0d9; }
.db-stories .db-pill:hover span { transform:none; background:#5f3a32; }
.db-manifesto { max-width:1500px; margin:0 clamp(18px,3vw,50px) 56px; border-radius:0 0 76px 76px; background:var(--db-cream); }
.db-showcase { margin:0 clamp(18px,3vw,50px) 56px; border-radius:76px; background:#2422a5; }
.db-showcase-image { border-radius:0 76px 0 0; }
.db-featured { margin:0 clamp(18px,3vw,50px) 56px; border-radius:0 76px 76px 0; overflow:hidden; }
.db-stories { margin:0 clamp(18px,3vw,50px) 56px; border-radius:76px; background:var(--db-cream); }
.db-story-grid { display:grid; grid-template-columns:1fr; gap:20px; border:0; }
.db-story-card { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto 1fr; min-height:390px; gap:0; margin:0; padding:0; border:0; border-radius:0 85px 0 0; overflow:hidden; background:#dcbfd7; transition:border-radius .25s ease; }
.db-story-card:hover { border-radius:85px; }
.db-story-card:nth-child(2) { background:#f6bb61; }
.db-story-card:nth-child(3) { background:#bbe3d8; }
.db-story-image { grid-column:1; grid-row:1/4; width:100%; height:100%; aspect-ratio:auto; }
.db-story-meta { grid-column:2; grid-row:1; align-self:end; margin:0 38px 20px; }
.db-story-card h3 { grid-column:2; grid-row:2; margin:0 38px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(31px,3vw,50px); font-weight:500; line-height:1.1; letter-spacing:-.05em; text-transform:none; }
.db-story-read { grid-column:2; grid-row:3; align-self:start; width:max-content; margin:25px 38px 0; padding:13px 19px; border-radius:99px; background:#764135; color:#e0c0d9; font-size:12px; }
.db-close { margin:0 clamp(18px,3vw,50px); border-radius:76px 76px 0 0; }
@media(max-width:900px) { .db-hero-inner { min-height:550px; padding-right:53%; } .db-hero .db-kicker { margin-bottom:65px; } .db-hero h1 { font-size:clamp(40px,5.2vw,56px); } }
@media(max-width:650px) { .db-hero { min-height:0; padding:18px 18px 0; } .db-hero-inner { display:flex; flex-direction:column; min-height:0; padding:0 0 34px; border-radius:30px 30px 0 0; } .db-hero-inner::after { position:relative; order:-1; inset:auto; z-index:auto; display:block; width:100%; height:310px; background-size:auto 88%; } .db-hero .db-kicker,.db-hero h1,.db-hero-deck,.db-hero .db-pill { margin-left:28px; margin-right:28px; } .db-hero .db-kicker { margin-top:28px; margin-bottom:35px; } .db-hero h1 { font-size:clamp(38px,10vw,55px); } .db-hero-bottom { padding-bottom:45px; } .db-manifesto,.db-showcase,.db-featured,.db-stories,.db-close { margin-left:18px; margin-right:18px; border-radius:34px; } .db-manifesto { border-radius:0 0 34px 34px; } .db-showcase-image { border-radius:0 34px 0 0; } .db-story-card { grid-template-columns:1fr; grid-template-rows:auto auto auto auto; border-radius:0 50px 0 0; } .db-story-card:hover { border-radius:50px; } .db-story-image { grid-column:1; grid-row:1; height:250px; } .db-story-meta { grid-column:1; grid-row:2; margin:23px 25px 13px; } .db-story-card h3 { grid-column:1; grid-row:3; margin:0 25px; } .db-story-read { grid-column:1; grid-row:4; margin:24px 25px 30px; } .db-close { border-radius:34px 34px 0 0; } }
@media(prefers-reduced-motion:reduce) { .db-hero .db-pill span,.db-featured .db-pill span,.db-stories .db-pill span { transition:none; } }

/* The original write-and-save demo, framed inside the new split opening. */
.db-hero-inner::after { display:none; }
.db-hero-art { position:absolute; inset:0 0 0 50%; display:grid; place-items:center; overflow:hidden; background:#f6aa83; }
.db-hero-art .v2-writing-loop { width:min(78%,490px); min-height:460px; }
.db-hero-art .v2-memory-card { color:#202923; }
.db-hero-art .v2-composer-shell { color:#202923; }
@media(max-width:650px) {
  .db-hero-inner::after { display:none; }
  .db-hero-art { position:relative; order:-1; inset:auto; height:390px; width:100%; }
  .db-hero-art .v2-writing-loop { width:min(86%,350px); min-height:395px; }
}
@media(prefers-reduced-motion:reduce) {
  .db-hero-art .v2-memory-card,.db-hero-art .v2-composer,.db-hero-art .v2-composer span,.db-hero-art .v2-saved-chip,.db-hero-art .v2-composer i { animation:none; }
  .db-hero-art .v2-memory-card-one,.db-hero-art .v2-composer-one { opacity:1; }
  .db-hero-art .v2-composer-one span { max-width:100%; }
}

/* Journal index: the same dark surround and split editorial cards as the stories. */
.journal-page.db-site { background:#1c2925; }
.journal-page .journal-minimal-hero { width:auto; max-width:1500px; min-height:550px; display:grid; grid-template-columns:52% 48%; gap:0; margin:42px clamp(18px,3vw,50px) 0; padding:0; overflow:hidden; border:0; border-radius:64px 64px 0 0; background:#dcbfd7; }
.journal-minimal-hero-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(35px,5vw,78px); }
.journal-page .journal-minimal-hero h1 { margin:70px 0 24px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(47px,5vw,80px); font-weight:500; line-height:1.08; letter-spacing:-.06em; text-transform:none; }
.journal-page .journal-minimal-hero-copy > p:last-child { max-width:540px; font-size:clamp(17px,1.35vw,21px); line-height:1.5; }
.journal-minimal-hero-art { display:grid; place-items:center; padding:50px; background:#f6aa83; }
.journal-minimal-hero-art span { color:#1c2925; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(62px,7vw,115px); font-weight:500; line-height:1; letter-spacing:-.085em; transform:rotate(-8deg); }
.journal-page .journal-minimal-list { width:auto; max-width:1500px; display:grid; grid-template-columns:1fr; gap:22px; margin:0 clamp(18px,3vw,50px) 70px; padding:60px clamp(28px,4vw,62px) 80px; border-radius:0 0 64px 64px; background:var(--db-cream); }
.journal-page .journal-minimal-row,.journal-page .journal-minimal-row.no-cover { min-height:350px; display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; padding:0; border:0; border-radius:0 80px 0 0; overflow:hidden; background:#dcbfd7; transition:border-radius .25s ease; }
.journal-page .journal-minimal-row:nth-child(3n+2) { background:#f6bb61; }
.journal-page .journal-minimal-row:nth-child(3n+3) { background:#bbe3d8; }
.journal-page .journal-minimal-row:hover { border-radius:80px; }
.journal-page .journal-minimal-row:nth-child(3n+1):hover { background:#dcbfd7; }
.journal-page .journal-minimal-row:nth-child(3n+2):hover { background:#f6bb61; }
.journal-page .journal-minimal-row:nth-child(3n+3):hover { background:#bbe3d8; }
.journal-page .journal-minimal-row.no-cover::before { display:none; }
.journal-page .journal-minimal-cover { width:100%; height:100%; min-height:350px; margin:0; border-radius:0; aspect-ratio:auto; background:#f1ae8a; }
.journal-page .journal-minimal-cover img { position:static; width:100%; height:100%; object-fit:cover; }
.journal-page .journal-cover-fallback { display:grid; place-items:center; background:#f5c863; }
.journal-page .journal-minimal-row:nth-child(3n+2) .journal-cover-fallback { background:#b7d8ce; }
.journal-page .journal-minimal-row:nth-child(3n+3) .journal-cover-fallback { background:#edb2ca; }
.journal-cover-fallback span { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(65px,7vw,112px); font-weight:900; line-height:.83; text-align:center; transform:rotate(-7deg); }
.journal-page .journal-minimal-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(28px,4vw,60px); }
.journal-page .journal-minimal-copy small { color:#1c2925; font-size:11px; letter-spacing:.1em; }
.journal-page .journal-minimal-copy h2 { margin:24px 0 13px; font-family:var(--font-lexend),Lexend,Arial,sans-serif; font-size:clamp(29px,3.2vw,52px); font-weight:500; line-height:1.12; letter-spacing:-.055em; text-transform:none; }
.journal-page .journal-minimal-copy p { max-width:500px; color:#1c2925; font-size:16px; line-height:1.5; }
.journal-minimal-read { display:inline-flex; align-items:center; gap:16px; margin-top:22px; padding:6px 6px 6px 21px; border-radius:99px; background:#764135; color:#e0c0d9; font-size:11px; font-weight:800; letter-spacing:.05em; }
.journal-minimal-read span { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#5f3a32; font-size:18px; }
.journal-minimal-row:focus-visible { outline:3px solid #eef18a; outline-offset:4px; }
@media(max-width:760px) {
  .journal-page .journal-minimal-hero { display:flex; flex-direction:column-reverse; min-height:0; margin:18px 18px 0; border-radius:30px 30px 0 0; }
  .journal-minimal-hero-art { min-height:245px; }
  .journal-minimal-hero-art span { font-size:clamp(55px,13vw,80px); }
  .journal-minimal-hero-copy { padding:33px 28px 45px; }
  .journal-page .journal-minimal-hero h1 { margin:42px 0 20px; font-size:clamp(42px,10vw,62px); }
  .journal-page .journal-minimal-list { margin:0 18px 35px; padding:32px 18px 55px; border-radius:0 0 34px 34px; }
  .journal-page .journal-minimal-row,.journal-page .journal-minimal-row.no-cover { display:flex; flex-direction:column; min-height:0; padding:20px; border-radius:0 50px 0 0; }
  .journal-page .journal-minimal-row:hover { border-radius:50px; }
  .journal-page .journal-minimal-cover { height:235px; min-height:235px; }
  .journal-page .journal-minimal-copy { padding:26px 0 8px; }
  .journal-page .journal-minimal-copy h2 { font-size:clamp(29px,7vw,40px); }
}
@media(prefers-reduced-motion:reduce) { .journal-page .journal-minimal-row,.journal-page .journal-minimal-cover img,.journal-minimal-read span { transition:none; } }

/* Hero CTA: a quiet text pill that releases its arrow on interaction. */
.db-hero .db-pill { position:relative; isolation:isolate; align-self:flex-start; width:max-content; gap:0; min-height:50px; padding:0 26px; }
.db-hero .db-pill::after { content:''; position:absolute; z-index:-1; top:16px; right:-20px; width:28px; height:18px; border-radius:50%; background:#764135; opacity:0; transform:scaleX(.1); transform-origin:left center; pointer-events:none; }
.db-hero .db-pill span { position:absolute; top:0; right:-57px; width:50px; height:50px; background:#764135; opacity:0; transform:translateX(-23px) scale(.35); pointer-events:none; }
.db-hero .db-pill:hover,.db-hero .db-pill:focus-visible { background:#764135; color:#e0c0d9; }
.db-hero .db-pill:hover::after,.db-hero .db-pill:focus-visible::after { animation:db-liquid-bridge .55s ease-out both; }
.db-hero .db-pill:hover span,.db-hero .db-pill:focus-visible span { opacity:1; animation:db-liquid-pop .68s cubic-bezier(.2,.9,.25,1) both; }
@keyframes db-liquid-bridge { 0% { opacity:0; transform:scaleX(.1); } 28% { opacity:1; transform:scaleX(1.15); } 70% { opacity:.75; transform:scaleX(.85); } 100% { opacity:0; transform:scaleX(.1); } }
@keyframes db-liquid-pop { 0% { opacity:0; transform:translateX(-23px) scale(.35); border-radius:44% 56% 50% 50%; } 48% { opacity:1; transform:translateX(8px) scale(1.13,.88); border-radius:44% 56% 48% 52%; } 72% { transform:translateX(-3px) scale(.93,1.09); } 100% { opacity:1; transform:translateX(0) scale(1); border-radius:50%; } }
@media(prefers-reduced-motion:reduce) { .db-hero .db-pill:hover::after,.db-hero .db-pill:focus-visible::after,.db-hero .db-pill:hover span,.db-hero .db-pill:focus-visible span { animation:none; } .db-hero .db-pill:hover span,.db-hero .db-pill:focus-visible span { opacity:1; transform:none; } }

/* Lucide ArrowRight replaces font glyphs so every circular arrow is optically centered. */
.db-hero .db-pill span,.db-featured .db-pill span,.db-stories .db-pill span,.journal-minimal-read span,.article-next-button-icon { font-size:0; line-height:0; }
.db-hero .db-pill span::before,.db-featured .db-pill span::before,.db-stories .db-pill span::before,.journal-minimal-read span::before,.article-next-button-icon::before { content:''; display:block; width:23px; height:23px; background:currentColor; -webkit-mask:url('/icons/arrow-right.svg') center / contain no-repeat; mask:url('/icons/arrow-right.svg') center / contain no-repeat; }
.db-hero .db-pill span::before { width:27px; height:27px; transform:translate(-2px,1px); }

/* Filter only the colored surfaces; label and icon stay crisp and independently centered. */
.db-liquid-button { position:relative; display:inline-flex; align-self:flex-start; align-items:center; justify-content:center; width:max-content; height:50px; padding:0 26px; color:#e0c0d9; isolation:isolate; margin-right:74px; }
.db-liquid-filter { position:absolute; width:0; height:0; pointer-events:none; }
.db-liquid-surface { position:absolute; inset:0; z-index:-1; filter:url('#db-liquid-goo'); pointer-events:none; }
.db-liquid-body { position:absolute; inset:0; border-radius:999px; background:#764135; }
.db-liquid-drop { position:absolute; top:0; left:calc(100% - 25px); width:50px; height:50px; border-radius:50%; background:#764135; transform:translateX(-18px) scale(.35); transition:transform 850ms cubic-bezier(.34,1.45,.45,1); }
.db-liquid-label { font-size:12px; line-height:1; letter-spacing:.05em; font-weight:800; }
.db-liquid-arrow { position:absolute; top:0; left:calc(100% - 25px); display:flex; align-items:center; justify-content:center; width:50px; height:50px; opacity:0; transform:translateX(-18px) scale(.35); transition:transform 850ms cubic-bezier(.34,1.45,.45,1),opacity 180ms ease; }
.db-liquid-arrow svg { display:block; flex:none; width:24px; height:24px; }
.db-liquid-button:is(:hover,:focus-visible) .db-liquid-drop,.db-liquid-button:is(:hover,:focus-visible) .db-liquid-arrow { transform:translateX(35px) scale(1); }
.db-liquid-button:is(:hover,:focus-visible) .db-liquid-arrow { opacity:1; transition-delay:0ms,180ms; }
.db-liquid-button:focus-visible { outline:3px solid #eef18a; outline-offset:5px; border-radius:999px; }
@media(max-width:650px) { .db-liquid-button { margin-left:28px; } }
@media(prefers-reduced-motion:reduce) { .db-liquid-drop,.db-liquid-arrow { transition:none; } }
.db-card-button { margin:24px 70px 0 0; flex:none; }
.db-story-card > .db-card-button { grid-column:2; grid-row:3; align-self:start; margin:25px 100px 32px 38px; }
:is(.db-story-card,.journal-minimal-row,.article-next-card):is(:hover,:focus-visible) .db-liquid-drop,
:is(.db-story-card,.journal-minimal-row,.article-next-card):is(:hover,:focus-visible) .db-liquid-arrow { transform:translateX(35px) scale(1); }
:is(.db-story-card,.journal-minimal-row,.article-next-card):is(:hover,:focus-visible) .db-liquid-arrow { opacity:1; transition-delay:0ms,180ms; }
@media(max-width:650px) { .db-story-card > .db-card-button { grid-column:1; grid-row:4; margin:24px 80px 30px 25px; } }