/* Habit site: one stylesheet for every page. It is the Daily Journal landing page's own style (palette, radius, type, header, buttons, cards,
   footer), light only, so every page reads as part of the same site. Edit here and rebuild. */
:root{--paper:#fff;--card:#fff;--card2:#f1f5f9;--ink:#111827;--soft:#475569;--faint:#94a3b8;--rule:#e2e8f0;--accent:#7c5cff;--accent-d:#5b3fe0;--accent-soft:#f0edff;--good:#15803d;--good-soft:#eaf6ee;--warn:#92400e;--warn-soft:#fef3e2;--r:14px;--f:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-d)}img,svg{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}.sr{position:absolute;left:-9999px}
h1,h2,h3{letter-spacing:-.025em;margin:0;line-height:1.1}
h1{font-size:clamp(34px,4.8vw,56px);font-weight:800}h2{font-size:clamp(26px,3.4vw,38px);font-weight:800}h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:34px 0 12px}

/* buttons and tags */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:99px;font-weight:700;font-size:16px;border:2px solid transparent;cursor:pointer;font-family:inherit;text-decoration:none}
.btn.p{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(124,92,255,.35)}.btn.p:hover{background:var(--accent-d);color:#fff}
.btn.s{background:var(--card);color:var(--ink);border-color:var(--rule)}.btn.s:hover{border-color:var(--accent);color:var(--accent)}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--accent-d);background:var(--accent-soft);padding:6px 12px;border-radius:99px;margin:0 0 18px}

/* the header: the landing page's header, unchanged */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{white-space:nowrap;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:9px}.brand:hover{color:var(--ink)}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7c5cff,#c026d3);display:inline-block;position:relative}
.brand i:after{content:"";position:absolute;left:11px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(40deg)}
.nav{margin-left:auto;display:flex;gap:24px}.nav a{color:var(--soft);font-weight:600;font-size:15px}.nav a:hover{color:var(--accent)}
.top .btn{min-height:42px;padding:0 20px;font-size:14px}

/* hero */
.hero{position:relative;overflow:hidden;padding:26px 0 64px}
.hero:before{content:"";position:absolute;inset:-200px -10% auto -10%;height:640px;background:radial-gradient(600px 360px at 80% 24%,rgba(124,92,255,.10),transparent 70%),radial-gradient(500px 300px at 12% 6%,rgba(249,115,22,.05),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.crumbs{font-size:13px;color:var(--faint);padding:0 0 30px}.crumbs a{color:var(--soft);font-weight:600}.crumbs a:hover{color:var(--accent)}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:start}
.lede{font-size:19.5px;color:var(--soft);max-width:540px;margin:20px 0 24px}
.hero-t .ticks,.dots{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.dots li,.ticks li{display:flex;gap:11px;font-size:16px;font-weight:500;color:var(--ink)}
.dots li:before,.ticks li:before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;background:var(--good-soft);color:var(--good);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.hero.plain{padding-bottom:20px}.hero.plain .wrap{max-width:820px}.hero.plain .lede{max-width:none}
.heroart{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px;box-shadow:0 24px 50px -18px rgba(30,20,80,.22);position:relative;overflow:hidden}
.heroart:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,#7c5cff,#c026d3)}
.heroart svg{display:block;width:100%;margin-top:6px}

/* the tool card, in the hero beside the answer */
.toolcard{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:26px;box-shadow:0 30px 60px -22px rgba(30,20,80,.28);position:relative;overflow:hidden}
.toolcard:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,#7c5cff,#c026d3)}
.toolcard h2{font-size:24px;margin:0 0 4px}.toolcard .tsub{margin:0 0 18px;color:var(--soft);font-size:15px}
.toolcard .tool.card{border:0;padding:0;box-shadow:none;background:transparent;border-radius:0}
.tool{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.tool .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool .row>*,.tool label{min-width:0}
.tool label{display:grid;gap:6px;font-size:13.5px;font-weight:700;color:var(--soft)}
.tool input,.tool select,.tool textarea{width:100%;min-width:0;min-height:50px;border-radius:12px;border:2px solid var(--rule);padding:0 14px;font:inherit;font-weight:500;background:#fff;color:var(--ink);text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s}
.tool input:focus,.tool select:focus,.wl input:focus,.wl select:focus,.wl textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(124,92,255,.15)}
.tool .btn{width:100%}
.units{display:inline-flex;background:var(--card2);border-radius:99px;padding:4px;width:max-content}
.units button{border:0;background:transparent;color:var(--soft);padding:8px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:99px}
.units button[aria-pressed=true]{background:#fff;color:var(--accent-d);box-shadow:0 2px 8px rgba(30,20,80,.14)}
.result{display:none;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;padding:18px 20px}
.result.show{display:block}
.result .big{font-size:clamp(28px,3.4vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(100deg,#7c5cff,#c026d3 70%,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.result p{margin:8px 0 0;color:#3b2f8f;font-size:15px}.result p+p{color:#6b63a8;font-size:13.5px}
.tool-err{color:#b42318;font-size:14px;min-height:0}.tool-err:empty{display:none}
.limits{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:12px 14px;font-size:13.5px}

/* sign up forms */
.wl{display:grid;gap:10px;max-width:460px;margin:18px 0}
.wl input,.wl select,.wl textarea{min-height:52px;border-radius:12px;border:2px solid var(--rule);padding:0 14px;font:inherit;background:#fff;color:var(--ink);width:100%}
.wl textarea{padding:12px 14px;min-height:130px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-err{display:none;color:#b42318;font-size:14px}.wl-note{font-size:13px;color:var(--soft);margin:0}
.wl-thanks{padding:18px;border-radius:12px;background:var(--good-soft);color:var(--good);font-weight:700;max-width:460px;margin:18px 0}
.strip{padding:0}.stripcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:34px 38px;box-shadow:0 24px 50px -24px rgba(30,20,80,.22);margin-top:-30px;z-index:3}
.stripcard h2{font-size:clamp(22px,2.6vw,30px)}.stripcard p{margin:8px 0 0;color:var(--soft)}
.stripcard .wl{max-width:none;margin:0}
.callout{padding:0}.callout .box{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--accent-soft);border:1px solid #ddd6fe;border-radius:var(--r);padding:24px 28px;margin-top:28px;position:relative;z-index:3}
.callout h2{font-size:24px}.callout p{margin:6px 0 0;color:#3b2f8f}

/* sections */
.sec{padding:76px 0 0}.sec.soft{background:#f8fafc;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:64px 0;margin-top:76px}
.sec h2{margin-bottom:18px}.sec p{font-size:17.5px;color:var(--soft);margin:0 0 14px}
.sec .wrap>p,.sec .wrap>.dots,.sec .wrap>.sources,.sec .wrap>.draftnote{max-width:780px}
.sec .dots{margin:16px 0}
.sources{font-size:13.5px;color:var(--soft);border-left:3px solid var(--rule);padding-left:14px;margin-top:20px!important}
.draftnote{font-size:13px;color:var(--good);font-weight:700;margin-top:14px!important}.draftnote:before{content:"\2713  "}
.scroll{overflow-x:auto;border-radius:var(--r);border:1px solid var(--rule);background:var(--card);box-shadow:0 20px 40px -26px rgba(30,20,80,.2)}
table.num{border-collapse:collapse;width:100%;font-size:15.5px;background:var(--card)}
table.num th,table.num td{border-top:1px solid var(--rule);padding:13px 18px;text-align:left}
table.num thead th{border-top:0;background:var(--card2);font-weight:800}
table.num tbody tr:hover td{background:rgba(124,92,255,.04)}
.faq{max-width:820px}
.faq details{border:1px solid var(--rule);border-radius:var(--r);margin:10px 0;background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--accent);flex:none}
.faq details[open] summary:after{content:"\2212"}.faq details[open]{border-color:#ddd6fe}
.faq p{margin:0;padding:0 22px 20px;color:var(--soft);font-size:16.5px}

/* tiles and related links: the landing page's .fl cards */
.tiles,.fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:6px}
.tile,.fl a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover,.fl a:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(30,20,80,.3);border-color:var(--accent);color:var(--ink)}
.tile b,.fl b{display:block;font-size:17px;margin-bottom:4px}.tile span,.fl span{display:block;font-size:14.5px;color:var(--soft)}
.tile.soon{opacity:.62;box-shadow:none}.tile.soon:hover{transform:none;border-color:var(--rule);box-shadow:none}
.tile em{display:inline-block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:800;color:var(--accent-d);background:var(--accent-soft);padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.06em}
.related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.related a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:16px 20px;font-weight:700;color:var(--ink)}.related a:hover{border-color:var(--accent);color:var(--accent)}
.pv{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}

/* printable preview in the hero */
.sheet{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:10px;box-shadow:0 30px 60px -22px rgba(30,20,80,.3);max-width:430px;margin-left:auto}
.sheet img{display:block;width:100%;height:auto;border-radius:6px}

/* closing call to action: the landing page's band */
.cta{margin:80px 0 0;padding:84px 0;text-align:center;background:linear-gradient(135deg,#5b3fe0,#a21456);color:#fff}
.cta h2{color:#fff;max-width:760px;margin:0 auto 14px}.cta p{font-size:19px;color:#e9ddff;margin:0 auto 26px;max-width:560px}
.cta .wl{margin-inline:auto;text-align:left}.cta .wl-note,.cta .wl-thanks{text-align:center;margin-inline:auto;color:#e9ddff}.cta .wl-note a{color:#fff;text-decoration:underline}
.cta .btn.p{background:#fff;color:var(--accent-d);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sec.soft+.cta,.sec+.cta{margin-top:0}

/* the footer: the landing page's footer */
footer{background:#0b0d12;color:#94a3b8;padding:36px 0;font-size:14px;margin-top:0}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}footer a{color:#cbd5e1}footer a:hover{color:#fff}

@media (max-width:960px){
  .hero-g{grid-template-columns:minmax(0,1fr);gap:30px}.sheet{margin:0 auto}
  .stripcard{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 24px}
  .nav{display:none}.top .btn{margin-left:auto}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .top .wrap{height:58px;gap:12px}.brand{font-size:18px}.brand i{width:26px;height:26px}.brand i:after{left:9px;top:5px;width:6px;height:11px}
  .top .btn{min-height:38px;padding:0 16px;font-size:13.5px;width:auto}
  .hero{padding:18px 0 48px}.crumbs{padding-bottom:20px}
  .lede{font-size:17px;margin:14px 0 18px}.eyebrow{font-size:12px;margin-bottom:12px}
  .toolcard{padding:20px}.tool .row{grid-template-columns:minmax(0,1fr)}
  .sec{padding-top:56px}.sec.soft{padding:48px 0;margin-top:56px}
  .sec p{font-size:16.5px}.btn{width:100%}.top .btn{width:auto}
  .callout .box{padding:20px}table.num th,table.num td{padding:10px 12px;font-size:14.5px}
  .cta{padding:60px 0}.cta p{font-size:16.5px}
}
[hidden]{display:none!important}input::placeholder,textarea::placeholder{color:#a3adbf;opacity:1}
@media (max-width:620px){.hero-g:has(.toolcard) .hero-t .ticks{display:none}}

.grad{background:linear-gradient(100deg,#7c5cff,#c026d3 70%,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.ticker{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff}
.ticker .wrap{display:flex;gap:10px 34px;flex-wrap:wrap;justify-content:center;padding-top:16px;padding-bottom:16px;font-weight:700;color:var(--soft);font-size:15px}
.ticker span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:9px}
.hero{padding-bottom:56px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:center;padding:20px 0}
.tag{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.txt p{font-size:18px;color:var(--soft);margin:14px 0 20px}
.vis{display:flex;justify-content:center;align-items:flex-start;position:relative;padding:12px 0}
.vis:before{content:"";position:absolute;inset:3% 2%;border-radius:40px;background:var(--accent-soft);z-index:0;transform:rotate(-2deg)}
.ph{border-radius:38px;background:#0f1220;padding:8px;box-shadow:0 30px 60px -12px rgba(30,20,80,.35),0 0 0 1px rgba(15,18,32,.5)}
.ph img{display:block;width:100%;height:auto;border-radius:31px;background:var(--paper)}
.vis .ph{position:relative;z-index:1;width:min(270px,48%)}.vis .ph.two{margin-left:-34px;margin-top:64px}
.sec .row .wl{max-width:none}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}.ticks li{display:flex;gap:11px;font-size:16px;font-weight:500}

/* the footer: four columns and a bottom bar, the same on every page */
footer.ft{background:#0b0d12;color:#94a3b8;padding:64px 0 28px;font-size:14.5px;margin-top:0}
.ft-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px;padding-bottom:44px;border-bottom:1px solid #1d2230}
.ft .brand{color:#fff;margin-bottom:14px}.ft .brand:hover{color:#fff}
.ft-brand p{color:#94a3b8;margin:0 0 20px;max-width:300px;font-size:14.5px;line-height:1.6}
.ft-col h4{margin:0 0 14px;color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.ft-col a{display:block;color:#cbd5e1;padding:5px 0;font-size:14.5px}.ft-col a:hover{color:#fff}
.ft-bot{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;padding-top:24px;font-size:13px;color:#7f8aa3}
@media (max-width:960px){.row{grid-template-columns:minmax(0,1fr);gap:30px}.ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-brand{grid-column:1/-1}}
@media (max-width:620px){.ticker .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:22px;padding:14px 20px;font-size:13.5px;white-space:nowrap;scrollbar-width:none}.ticker .wrap::-webkit-scrollbar{display:none}.vis .ph{width:calc(50% - 10px);max-width:210px}.vis .ph.two{margin-left:12px;margin-top:26px}.ph{border-radius:22px;padding:4px}.ph img{border-radius:18px}footer.ft{padding:48px 0 24px}.ft-top{gap:28px}.row{padding:0}}
.tool .row{padding:0;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}@media (max-width:620px){.tool .row{grid-template-columns:minmax(0,1fr);padding:0}}

/* result sign up button */
.rcta{margin-top:16px}.rcta .btn{width:100%;min-height:46px;font-size:15px}
/* keep going: cards with a kind, a title and an arrow, and room before the closing band */
.related a{display:flex;flex-direction:column;gap:4px;padding:20px 22px;min-height:112px}
.related a small{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.related a b{font-size:18px;line-height:1.25;color:var(--ink)}
.related a span{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent-d)}
.related a:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(30,20,80,.3)}
.sec:has(+ .cta){padding-bottom:88px}

.updated{margin:-10px 0 18px;font-size:13px;color:var(--faint);font-weight:600}