/* POWR — Product of War Room LLC · https://duesdayx.com
   Copyright (c) 2026 War Room LLC. All rights reserved.

   No webfonts. A site whose whole argument is that nothing leaves your
   machine should not open by fetching a typeface from Google. Georgia is
   on every machine that matters and is close enough to Lora to feel like
   the same product. */

:root {
  --paper: #15101E;
  --lift: #231B31;
  --rule: #332942;
  --ink: #E4DAEE;
  --soft: #94849F;
  --accent: #E8748C;
  --display: #F0A86A;
  --dot: #7FBF8F;
  --wrap: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 72px; }

header.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--display);
  text-decoration: none;
}

.wordmark { color: var(--display); font-weight: 400; letter-spacing: 0.08em; }
.wordmark .var { color: var(--soft); letter-spacing: 0.06em; }
nav.top-nav { display: flex; gap: 18px; font-size: 0.85rem; }
nav.top-nav a { color: var(--soft); text-decoration: none; }
nav.top-nav a:hover, nav.top-nav a[aria-current] { color: var(--display); }

h1 {
  margin: 44px 0 10px;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  margin: 44px 0 10px;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--display);
}

h3 { margin: 26px 0 6px; font-size: 1rem; font-weight: 400; color: var(--ink); }
p { margin: 0 0 16px; }
.lede { font-size: 1.15rem; color: var(--soft); font-style: italic; }
a { color: var(--display); }
strong { font-weight: 400; color: var(--display); }
ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 6px; }
hr { margin: 40px 0; border: none; border-top: 1px solid var(--rule); }

.cta {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 11px 22px;
  font-size: 0.95rem;
  color: var(--paper);
  background: var(--display);
  border-radius: 999px;
  text-decoration: none;
}

.cta:hover { background: var(--ink); }
.cta.quiet { color: var(--display); background: none; border: 1px solid var(--rule); }
.cta.quiet:hover { border-color: var(--display); }

.surfaces { display: grid; gap: 12px; margin: 22px 0 8px; }

.surface {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 6px;
}

.surface.now { border-left-color: var(--dot); }
.surface.next { border-left-color: var(--display); }
.surface.later { border-left-color: var(--rule); }
.surface h3 { margin: 0; }
.surface p { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; color: var(--soft); }

.tag {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  white-space: nowrap;
}

.surface.now .tag { color: var(--dot); }
.surface.next .tag { color: var(--display); }

.plain { background: var(--lift); border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px; }
.plain p:last-child { margin-bottom: 0; }

footer.foot {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--soft);
  text-align: center;
}

footer.foot a { color: var(--soft); }
footer.foot a:hover { color: var(--display); }
.foot-line { margin: 0 0 6px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  .wrap { padding: 28px 18px 56px; }
}

/* the last thing on the page is the thing it stands for */
.closer {
  margin-top: 26px;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--display);
}

.price { margin-top: -4px; font-size: 0.85rem; color: var(--soft); }

/* the line the page is willing to be judged on */
.big {
  margin: 4px 0 20px;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
}

@media (max-width: 560px) { .big { font-size: 1.25rem; } }

/* the fifteen-second read: is this for me or not */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px 28px;
  margin: 18px 0 8px;
  padding: 0;
  list-style: none;
}

.features li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 22px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--soft);
  border-top: 1px solid var(--rule);
}

.features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--display);
}

.features b { font-weight: 400; color: var(--ink); }
.features li { color: var(--soft); }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }

/* --- screenshots --- */
/* A screenshot is the one thing on this page that should not be held to
   the reading column. Shown inside 720px the calendar renders at about
   half size and none of it can be read. */
.shot {
  --shot-w: min(1200px, calc(100vw - 40px));
  width: var(--shot-w);
  margin: 30px 0 10px calc((100% - var(--shot-w)) / 2);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--lift);
}

.shot.lead img { border-color: color-mix(in srgb, var(--display) 35%, var(--rule)); }

.shot figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--soft);
}

body .shot figcaption { font-style: italic; }

/* the popup is a narrow thing and should be shown at its own size */
.shot img { cursor: zoom-in; }
.shot a { display: block; }

/* the popup is a narrow thing; showing it at its own size is the point */
.shot.side { --shot-w: min(512px, calc(100vw - 40px)); }
.shot.side img { border-radius: 6px; }

.shot figcaption {
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.shot-note { margin: 30px 0 0; font-size: 0.9rem; color: var(--soft); }
.shot figcaption b { font-weight: 400; color: var(--ink); }


.more { margin: 30px 0 0; font-size: 1.05rem; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* the key to the marks */
.lexicon { list-style: none; margin: 20px 0 16px; padding: 0; }

.lexicon li {
  padding: 8px 0;
  font-size: 0.94rem;
  color: var(--soft);
  border-top: 1px solid var(--rule);
}

.lexicon b { font-weight: 400; color: var(--ink); }

/* --- the five figures, as the app shows them ---
   The business page quotes its own screenshot, so the numbers are set the
   way the app sets them: the label quiet, the figure the thing you read. */
.figures {
  display: grid;
  /* five across the reading column, or one each on a phone — never a ragged
     three-and-two, which is what 170px gave */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin: 22px 0 20px;
  padding: 0;
  list-style: none;
}

.figures li {
  margin: 0;
  padding: 13px 13px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--display);
  border-radius: 6px;
}

.figures b {
  display: block;
  font-size: 0.66rem;
  font-weight: 400;
  /* tight enough that "Still to come" stays on one line in a fifth of the
     column, which is what keeps the five cards the same height */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--soft);
}

.figures span {
  display: block;
  margin-top: 3px;
  font-size: 1.35rem;
  color: var(--ink);
}

.figures li:nth-child(2) { border-left-color: var(--dot); }
.figures li:nth-child(3) { border-left-color: var(--dot); }
.figures li:nth-child(4) { border-left-color: #A3A6E4; }
.figures li:nth-child(5) { border-left-color: var(--accent); }

/* --- plans: the free app and Business, side by side ---
   Wider than the reading column so two plans can sit next to each other,
   and stacked on a phone. */
.plans {
  --plans-w: min(980px, calc(100vw - 48px));
  width: var(--plans-w);
  margin: 30px 0 8px calc(50% - var(--plans-w) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--dot);
  border-radius: 8px;
}
.plan.is-business { border-top-color: var(--display); }
.plan h2 { margin: 0 0 6px; }
.plan-price { margin: 0 0 6px; font-size: 1.05rem; color: var(--soft); }
.plan-price b { font-size: 2rem; font-weight: 400; color: var(--ink); }
.plan-price span { margin: 0 4px; }
.plan-note { font-size: 0.92rem; color: var(--soft); }
.plan .features { margin-top: 8px; flex: 1; }
.plan-go { margin: 12px 0 0; }
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; --plans-w: calc(100vw - 32px); }
  .plan { padding: 18px 18px 20px; }
}

/* --- the front page ---
   One promise, then the product, large enough to read. */
.hero h1 { margin-top: 56px; font-size: 3rem; letter-spacing: -0.02em; line-height: 1.05; }
.hero-sub { margin: 4px 0 22px; font-size: 1.45rem; font-style: italic; color: var(--display); }
.hero p { max-width: 36em; }
.hero-go { margin: 26px 0 8px; }
@media (max-width: 560px) {
  .hero h1 { margin-top: 36px; font-size: 2.25rem; }
  .hero-sub { font-size: 1.2rem; }
}

/* the dashboard, wider than the reading column */
.shot.showcase {
  --show-w: min(1100px, calc(100vw - 48px));
  width: var(--show-w);
  margin: 40px 0 8px calc(50% - var(--show-w) / 2);
}
.shot.showcase img { width: 100%; height: auto; border-radius: 10px; }
.shot.showcase figcaption { text-align: center; font-size: 1.05rem; }
@media (max-width: 560px) { .shot.showcase { --show-w: calc(100vw - 24px); } }

/* four things it handles, readable in seconds */
.benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 34px 0 6px;
}
.benefits section {
  padding: 18px 20px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--display);
  border-radius: 6px;
}
.benefits section:nth-child(2) { border-left-color: var(--accent); }
.benefits section:nth-child(3) { border-left-color: var(--dot); }
.benefits section:nth-child(4) { border-left-color: #A3A6E4; }
.benefits h3 { margin: 0 0 6px; font-size: 1.08rem; }
.benefits p { margin: 0; font-size: 0.94rem; color: var(--soft); }
@media (max-width: 620px) { .benefits { grid-template-columns: 1fr; } }

/* the questions somebody asks before giving up their new tab */
.qa { margin: 18px 0 0; }
.qa dt { margin: 20px 0 4px; color: var(--ink); font-size: 1.05rem; }
.qa dd { margin: 0; color: var(--soft); font-size: 0.96rem; }

/* the second audience, introduced and sent on */
.biz-teaser {
  margin: 48px 0 0;
  padding: 22px 24px 6px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--display);
  border-radius: 8px;
}
.biz-teaser h2 { margin-top: 2px; }
.biz-teaser .more { margin-top: 10px; }
.eyebrow { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }

/* the web app, in plain view on every page */
nav.top-nav a.nav-app {
  color: var(--paper);
  background: var(--display);
  padding: 2px 12px;
  border-radius: 999px;
}
nav.top-nav a.nav-app:hover { color: var(--paper); background: var(--ink); }
nav.top-nav { flex-wrap: wrap; align-items: center; row-gap: 8px; }

/* --- the two apps, side by side ---
   The reason to install the extension, said right under the product. */
.ways { margin-top: 56px; }
.ways-lede { color: var(--soft); font-size: 1.05rem; }
.ways-grid {
  --ways-w: min(980px, calc(100vw - 48px));
  width: var(--ways-w);
  margin: 22px 0 10px calc(50% - var(--ways-w) / 2);
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: 16px;
}
.way {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--display);
  border-radius: 8px;
}
.way.is-web { border-top-color: var(--dot); }
.way h3 { margin: 4px 0 2px; font-size: 1.35rem; }
.way-best { margin: 0 0 12px; color: var(--display); font-style: italic; }
.way.is-web .way-best { color: var(--dot); }
.way ul { margin: 0 0 14px; padding-left: 18px; flex: 1; }
.way li { margin-bottom: 8px; color: var(--soft); font-size: 0.95rem; line-height: 1.45; }
.way li b { font-weight: 400; color: var(--ink); }
.way-go { margin: 4px 0 0; }
.way-note { margin: 8px 0 0; font-size: 0.82rem; color: var(--soft); }
.ways-foot { margin-top: 14px; text-align: center; color: var(--soft); font-style: italic; }
@media (max-width: 760px) {
  .ways-grid { grid-template-columns: 1fr; --ways-w: calc(100vw - 32px); }
  .way { padding: 18px 18px 20px; }
}

.way-plain { margin: 0 0 14px; color: var(--ink); font-size: 1rem; line-height: 1.55; }

/* the extension leads; the web app supports it */
.way.is-extension { border-width: 1px 1px 1px 1px; border-top-width: 4px; box-shadow: 0 10px 30px color-mix(in srgb, #000 35%, transparent); }
.way-rec { margin: 0 0 10px; font-size: 0.8rem; color: var(--display); letter-spacing: 0.02em; }
.way-sub { margin: 6px 0 8px; color: var(--ink); font-size: 1rem; }
.ways-foot b { font-weight: 400; color: var(--ink); font-style: normal; }

/* a plain browser frame, so the screenshot reads as a new tab in a browser */
.browser {
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #0E0B15;
  overflow: hidden;
}
.browser-tabs { display: flex; align-items: flex-end; gap: 6px; padding: 8px 12px 0; }
.browser-dots { display: flex; gap: 6px; padding: 0 10px 9px 2px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3A3048; display: block; }
.browser-tab { padding: 6px 16px; border-radius: 8px 8px 0 0; background: #1B1527; color: var(--ink); font-size: 0.8rem; }
.browser-tab.is-other { background: none; color: var(--soft); padding: 6px 8px; }
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 7px 14px 9px; background: #1B1527; }
.browser-nav { color: var(--soft); font-size: 0.85rem; letter-spacing: 0.2em; }
.browser-address { flex: 1; padding: 5px 14px; border-radius: 999px; background: #0E0B15; color: var(--soft); font-size: 0.8rem; }
.shot.showcase .browser + a img { border-radius: 0 0 10px 10px; }
@media (max-width: 560px) { .browser-nav { display: none; } .browser-tab { padding: 5px 10px; } }

/* --- the extension as the Duesday experience, the web app as its companion --- */
.star { margin-top: 64px; }
.star-title { margin: 6px 0 8px; font-size: 1.9rem; line-height: 1.2; color: var(--ink); }
.star-sub { margin: 0 0 24px; font-size: 1.2rem; font-style: italic; color: var(--display); }
.star-body {
  --star-w: min(980px, calc(100vw - 48px));
  width: var(--star-w);
  margin-left: calc(50% - var(--star-w) / 2);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.star-words p { font-size: 1.05rem; }
.star-words p.big { margin: 6px 0 14px; font-size: 1.45rem; color: var(--ink); }
.star-card {
  padding: 22px 24px;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--display);
  border-radius: 8px;
  box-shadow: 0 10px 30px color-mix(in srgb, #000 35%, transparent);
}
.star-card-title { margin: 0 0 10px; color: var(--ink); font-size: 1.05rem; }
.star-card ul { margin: 0 0 16px; padding-left: 18px; }
.star-card li { margin-bottom: 8px; color: var(--soft); font-size: 0.95rem; line-height: 1.45; }
.star-card li b { font-weight: 400; color: var(--ink); }
.companion {
  margin: 44px 0 0;
  padding: 20px 24px 8px;
  border-left: 3px solid var(--dot);
  background: color-mix(in srgb, var(--lift) 60%, transparent);
  border-radius: 0 8px 8px 0;
}
.companion h2 { margin-top: 2px; }
@media (max-width: 760px) {
  .star-body { grid-template-columns: 1fr; --star-w: calc(100vw - 32px); gap: 18px; }
  .star-title { font-size: 1.5rem; }
}

/* --- hierarchy, the quiet nudge, and the questions as separate rows --- */
.hero h1 { font-size: 3.4rem; }
@media (max-width: 560px) { .hero h1 { font-size: 2.4rem; } }
.star-title { font-size: 1.6rem; }
@media (max-width: 760px) { .star-title { font-size: 1.35rem; } }
.star-words p.big { font-size: 1.25rem; }
.nudge { margin: 22px 0 0; color: var(--soft); font-size: 1.05rem; }
.nudge a { text-decoration: none; }
.nudge a:hover { text-decoration: underline; }
.qa { margin: 18px 0 0; display: grid; gap: 10px; }
.qa dt { margin: 0; padding: 14px 18px 0; background: var(--lift); border: 1px solid var(--rule); border-bottom: none; border-radius: 8px 8px 0 0; }
.qa dd { margin: -10px 0 0; padding: 4px 18px 14px; background: var(--lift); border: 1px solid var(--rule); border-top: none; border-radius: 0 0 8px 8px; }
/* the product, a little larger */
.shot.showcase { --show-w: min(1240px, calc(100vw - 48px)); }
/* What it does: a tour stop is a small label, then its headline */
.eyebrow.tour { margin: 64px 0 0; color: var(--display); }
.eyebrow.tour + h2 { margin-top: 6px; font-size: 1.6rem; color: var(--ink); }
@media (max-width: 760px) { .eyebrow.tour + h2 { font-size: 1.35rem; } }
.tour-go { margin: 26px 0 0; }
.features.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .features.three { grid-template-columns: 1fr; } }

/* The privacy page: its lists are sentences, not short labels, so they read
   at full width and full size, and each section is ruled off for scanning. */
.policy .features { grid-template-columns: 1fr; gap: 0; }
.policy .features li { font-size: 1em; line-height: 1.6; padding: 9px 0 9px 22px; }
.policy .features li::before { top: 19px; }
.policy h2 { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rule); }

/* Support: the groups, listed once at the top, so nobody scrolls past the
   calendar marks to find the sign-in answer. */
.jump { margin: 26px 0 0; font-size: 0.94rem; color: var(--soft); line-height: 1.9; }
.jump a { text-decoration: none; white-space: nowrap; }
.jump a:hover { text-decoration: underline; }