/* The public site: home (/about/), pricing, privacy and terms. The Ohayo look from logo/board.html:
   rice paper, a light orange sun over an indigo line, Klee One headings, Mulish text, washi tape on notes,
   and highlighter buttons, with only the main action highlighted. Always light, like the other pages strangers see. */
:root {
  --bg: #f2ede4; --paper: #fbf9f4; --ink: #231b17; --muted: #675d55; --line: #e2dacd;
  --indigo: #3d4c7a; --sun: #f59a4a; --sky: #bcc8e8;
  --peach: #f9c8a4; --sakura: #f3c6cf; --matcha: #cadbb4; --butter: #f6e2a2;
  --head: 'Klee One', 'Klee One Fallback', system-ui, sans-serif;
  --body: Mulish, 'Mulish Fallback', system-ui, sans-serif;
  color-scheme: light;
}
/* Fallbacks sized like the web fonts, so the page doesn't jump when they arrive. */
@font-face { font-family: 'Mulish Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Klee One Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 103%; ascent-override: 86%; descent-override: 26%; line-gap-override: 0%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--paper); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 680px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 25px/1 var(--head); letter-spacing: .02em; }
.brand svg { width: 40px; height: 27px; flex: none; }
@media (max-width: 380px) { .brand { font-size: 22px; } .top nav a { padding-inline: 6px; } }
.top nav { display: flex; align-items: center; gap: 2px; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 10px 8px; white-space: nowrap; }
@media (max-width: 399px) { .top nav .signin { display: none; } }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; }
.top nav .wide { display: none; }
@media (min-width: 720px) { .top { padding-block: 22px; } .top nav { gap: 8px; } .top nav .wide { display: inline-block; } }

/* Highlighter buttons. .hl is the main action (sky); .hl.soft is a quieter one (butter). */
.hl { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
  font: 600 17px/1.2 var(--body); color: var(--indigo); text-decoration: none; background: none; border: 0; cursor: pointer; }
.hl::before { content: ""; position: absolute; z-index: -1; left: 4px; right: 2px; top: 20%; bottom: 14%; background: var(--hl, var(--sky)); opacity: .9; mix-blend-mode: multiply;
  border-radius: 3px 10px 4px 12px / 10px 4px 12px 3px; transform: rotate(-1.4deg) skewX(-9deg);
  clip-path: polygon(1.5% 8%, 98.5% 0, 100% 30%, 97.5% 62%, 99% 100%, 2.5% 94%, 0 70%, 1.5% 38%); transition: opacity .15s; }
.hl:hover::before { opacity: 1; }
.hl.big { font-size: 19px; padding: 12px 24px; }
.hl.soft { --hl: var(--butter); color: var(--ink); }
.top nav .hl { font-size: 15px; padding: 8px 12px; margin-left: 4px; }
.plain { font-weight: 600; color: var(--ink); }

/* Notes on rice paper, with washi tape */
.note { position: relative; background: var(--paper) url(/img/rice-paper.jpg) center / 420px; border-radius: 6px; padding: 30px 22px 22px;
  box-shadow: 0 1px 2px rgba(35,27,23,.05), 0 8px 22px rgba(35,27,23,.07); }
.tape { position: absolute; top: -11px; left: var(--x, 40%); width: 92px; height: 24px; background-color: var(--c, var(--peach)); opacity: .85; mix-blend-mode: multiply; transform: rotate(var(--r, -2.5deg));
  clip-path: polygon(0 0, 3px 11%, 0 22%, 4px 33%, 1px 44%, 4px 56%, 0 67%, 3px 78%, 0 89%, 2px 100%, calc(100% - 3px) 100%, 100% 89%, calc(100% - 4px) 78%, 100% 67%, calc(100% - 2px) 56%, 100% 44%, calc(100% - 4px) 33%, 100% 22%, calc(100% - 2px) 11%, 100% 0); }
.tape.dots { background-image: radial-gradient(rgba(255,255,255,.75) 1.5px, transparent 1.8px); background-size: 9px 9px; }
.tape.stripes { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 4px, transparent 4px 11px); }
.tape.check { background-image: linear-gradient(90deg, rgba(255,255,255,.45) 50%, transparent 50%), linear-gradient(rgba(255,255,255,.45) 50%, transparent 50%); background-size: 12px 12px; }
.tape.suns { background-image: radial-gradient(circle at 50% 55%, rgba(245,154,74,.55) 2.6px, transparent 3px); background-size: 15px 20px; }

/* Sections */
section { padding: 56px 0; }
.kicker { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.sec-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 6.5vw, 40px); }
.sec-head p { color: var(--muted); margin: 12px 0 0; }
@media (min-width: 720px) { section { padding: 88px 0; } }

/* Hero */
.hero { padding-block: 28px 40px; display: grid; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(38px, 10vw, 64px); line-height: 1.12; }
.hero .lede { font-size: 19px; color: var(--muted); margin: 18px 0 26px; max-width: 30em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fine { font-size: 14px; color: var(--muted); }
.hero .fine { margin: 14px 0 0; }
.hero-art { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 420 / 520; }
.hero-art .phone { position: absolute; right: 0; top: 0; width: 64%; }
.hero-art .mail { position: absolute; left: 0; bottom: 0; width: 58%; transform: rotate(-3deg); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; padding-block: 48px 72px; } }

/* A phone frame around a screenshot */
.phone { border-radius: 30px; padding: 8px; background: #231b17; box-shadow: 0 18px 44px rgba(35,27,23,.22); }
.phone img { border-radius: 23px; width: 100%; background: #fff; }
.shot { border-radius: 14px; box-shadow: 0 1px 2px rgba(35,27,23,.06), 0 14px 34px rgba(35,27,23,.14); background: #fff; overflow: hidden; }
.shot img { width: 100%; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 44px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps .note { height: 100%; display: flex; flex-direction: column; }
.steps h3 { font-size: 23px; margin-bottom: 6px; }
.steps h3::before { content: counter(step); display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 600 18px/1 var(--body); vertical-align: 3px; }
.steps p { color: var(--muted); }
.steps figure { margin: auto 0 0; padding-top: 10px; }
.steps .phone { width: min(78%, 260px); margin: 0 auto; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* Features: one row each, text beside a screenshot, alternating sides on wide screens */
.feature { display: grid; gap: 28px; align-items: center; margin-bottom: 64px; }
.feature:last-child { margin-bottom: 0; }
.feature h3 { font-size: clamp(24px, 5.5vw, 30px); margin-bottom: 12px; }
.feature-text p { color: var(--muted); }
.feature code { font: 600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--indigo); background: #e4e7f0; padding: 2px 6px; border-radius: 4px; }
.feature-art { margin: 0; }
.feature-art .shot { width: min(100%, 360px); margin: 0 auto; }
.feature-art .phone.small { width: min(70%, 250px); margin: 0 auto; }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg); }
.effects { margin: 0 0 1em; }
.effects dt { font: 600 19px/1.3 var(--head); }
.effects dt::before { content: ""; display: inline-block; width: 14px; height: 7px; margin-right: 10px; border-radius: 7px 7px 0 0; background: var(--sun); box-shadow: 0 3px 0 -1px var(--indigo); vertical-align: 3px; }
.effects dd { margin: 2px 0 16px 24px; color: var(--muted); }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1.1fr .9fr; gap: 56px; margin-bottom: 96px; }
  .feature.flip .feature-text { order: 2; }
}

/* A call to action at the end of each section: the main action highlighted, a quieter link beside it */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 44px; }
.letter + .cta-row { margin-top: 32px; }

/* Two phones side by side (the brand feature) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 420px); margin: 0 auto; }
.pair .phone { border-radius: 22px; padding: 6px; }
.pair .phone img { border-radius: 17px; }

/* What they see */
.see { display: grid; gap: 28px; align-items: start; }
.see figure { margin: 0; }
.see figcaption { font-size: 15px; color: var(--muted); margin-top: 14px; text-align: center; }
.see figcaption b { display: block; color: var(--ink); font: 600 20px/1.3 var(--head); margin-bottom: 2px; }
.see .shot, .see .phone { width: min(100%, 330px); margin: 0 auto; }
.see .arrow { display: none; }
@media (min-width: 820px) {
  .see { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  /* The email screenshot is a little taller than the watch page, so the phone is a touch wider and both end on the same line. */
  .see .phone { width: min(100%, 354px); }
  .see .arrow { display: block; align-self: center; width: 70px; color: var(--sun); }
}
.points { list-style: none; padding: 0; margin: 36px auto 0; max-width: 820px; display: grid; gap: 12px 28px; }
.points li { position: relative; padding-left: 28px; color: var(--muted); }
.points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 7px; border-radius: 7px 7px 0 0; background: var(--sun); box-shadow: 0 3px 0 -1px var(--indigo); }
.points b { color: var(--ink); font-weight: 600; }
@media (min-width: 720px) { .points { grid-template-columns: 1fr 1fr; } }

/* Who it's for */
.who { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.who .note { height: 100%; }
.who h3 { font-size: 21px; margin-bottom: 6px; }
.who p { color: var(--muted); margin: 0; }
@media (min-width: 720px) { .who { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (min-width: 1000px) { .who { grid-template-columns: repeat(4, 1fr); } }
.sources { text-align: center; color: var(--muted); max-width: 640px; margin: 36px auto 0; }

/* The short price summary on the home page */
.mini-plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.mini-plans .note { height: 100%; text-align: center; padding: 32px 22px 22px; }
.mini-plans .featured { outline: 2px solid var(--sun); outline-offset: -2px; }
.mini-plans h3 { font-size: 22px; }
.mini-price { font: 600 40px/1.1 var(--head); margin: 8px 0 6px; }
.mini-price small { font: 15px var(--body); color: var(--muted); }
.mini-plans p:last-child { color: var(--muted); margin: 0; }
@media (min-width: 760px) { .mini-plans { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Founder note */
.letter { max-width: 640px; margin: 0 auto; padding: 40px 24px 30px; }
.letter .face { width: 76px; height: 76px; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; font: 600 34px/1 var(--head); margin: 0 0 18px; }
.letter h2 { font-size: clamp(26px, 6vw, 34px); margin-bottom: 18px; }
.letter p { color: #3b3430; }
.sig { font: 600 30px/1 var(--head); color: var(--ink); margin: 22px 0 4px; }
.letter .fine { margin: 0; }
@media (min-width: 720px) { .letter { padding: 52px 56px 40px; } }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px dashed var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font: 600 19px/1.4 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 400 26px/1 var(--body); color: var(--sun); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 14px; color: var(--muted); }

/* The "Get a hello from me" form */
.ask { text-align: center; padding: 40px 22px 30px; max-width: 560px; margin: 0 auto; }
.ask h2 { font-size: clamp(26px, 6vw, 32px); margin-bottom: 8px; }
.ask > p { max-width: 28em; margin: 0 auto 22px; color: var(--muted); }
#interest { display: grid; gap: 12px; max-width: 360px; margin: 0 auto; text-align: left; }
#interest label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
#interest em { font-style: normal; opacity: .85; }
#interest input, #interest textarea { width: 100%; border: 1px solid #d8cfc1; background: #fff; border-radius: 6px; padding: 11px 12px; font: 16px/1.4 var(--body); color: var(--ink); }
#interest textarea { min-height: 72px; resize: vertical; }
#interest input:focus, #interest textarea:focus { border-color: var(--indigo); }
#interest .hl { justify-self: center; margin-top: 6px; }
#interest .hl:disabled { opacity: .5; cursor: default; }
.sent { text-align: center; padding: 6px 0 4px; }
.sent svg { width: 84px; height: 84px; display: block; margin: 0 auto 10px; overflow: visible; }
.sent .loop { stroke: var(--sun); stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw .7s ease-out forwards; }
.sent .tick { stroke: var(--indigo); stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s .55s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sent .loop, .sent .tick { animation: none; stroke-dashoffset: 0; } }
.sent h3 { font-size: 24px; margin: 0 0 6px; }
.sent p { margin: 0 auto; max-width: 24em; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.4em; margin: 0; text-align: center; font-size: 15px; }
.msg.err { color: #a63d28; }
.ask .fine { margin: 18px 0 0; }

/* The closing call to action */
.end { text-align: center; }
.end h2 { font-size: clamp(30px, 7vw, 46px); margin-bottom: 12px; }
.end p { color: var(--muted); max-width: 30em; margin: 0 auto 24px; }
.sunline { display: block; width: 120px; height: 66px; margin: 0 auto 20px; }

/* Pricing */
.switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); margin: 0 auto 12px; }
.switch button { border: 0; background: none; padding: 9px 18px; min-height: 40px; border-radius: 999px; font: 600 15px var(--body); color: var(--muted); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--indigo); color: #fff; }
.switch small { font-weight: 600; color: #8a4a17; margin-left: 4px; }
.switch button[aria-pressed="true"] small { color: var(--peach); }
.period-note { font-size: 15px; color: var(--muted); max-width: 30em; margin: 0 auto 36px; min-height: 3em; }
.plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; min-height: 1500px; }
.plans .note { height: 100%; display: flex; flex-direction: column; padding: 34px 24px 26px; }
.plans h2 { font-size: 26px; }
.plans .blurb { color: var(--muted); font-size: 15px; margin: 4px 0 18px; min-height: 3em; }
.plans .amount { font: 600 44px/1 var(--head); }
.plans .per { color: var(--muted); font-size: 15px; margin: 6px 0 2px; }
.plans .bill { font-size: 14px; color: var(--muted); margin: 0 0 20px; min-height: 1.5em; }
.plans ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; }
.plans li li, .plans ul li { position: relative; padding-left: 24px; font-size: 16px; }
.plans ul li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg); }
.plans .go { margin-top: auto; text-align: center; }
.plans .featured { outline: 2px solid var(--sun); outline-offset: -2px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; min-height: 520px; } }
.every { max-width: 820px; margin: 48px auto 0; text-align: left; }
.every h2 { font-size: 22px; text-align: center; margin-bottom: 14px; }
.every ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px 28px; }
.every li { position: relative; padding-left: 24px; }
.every li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg); }
@media (min-width: 720px) { .every ul { grid-template-columns: 1fr 1fr; } }
.founding { max-width: 560px; margin: 56px auto 0; text-align: center; padding: 36px 24px 26px; }
.founding h2 { font-size: 26px; margin-bottom: 8px; }
.founding p { color: var(--muted); }
.placeholder { max-width: 640px; margin: 0 auto 28px; text-align: center; font-size: 15px; background: #fdf3d6; border: 1px dashed #e4c56f; border-radius: 6px; padding: 10px 14px; }

/* Legal pages */
.legal { padding-block: 24px 72px; }
.legal h1 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 8px; }
.legal h2 { font-size: 24px; margin: 40px 0 10px; }
.legal h3 { font-size: 19px; margin: 24px 0 6px; }
.legal p, .legal li { color: #3b3430; }
.legal ul { padding-left: 22px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 1em; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.legal .tbl { overflow-x: auto; }
.draft { background: #fdf3d6; border: 1px dashed #e4c56f; border-radius: 6px; padding: 14px 16px; margin: 18px 0 8px; font-size: 15px; }
.draft p { margin: 0; color: var(--ink); }
.lawyer { border-left: 4px solid var(--sun); background: #fff5ec; padding: 10px 14px; margin: 0 0 1em; font-size: 15px; border-radius: 0 6px 6px 0; }
.lawyer::before { content: "For the lawyer: "; font-weight: 600; color: #8a4a17; }
.todo { padding: 0; }
/* The notes for Mel's lawyer, the draft banner and the gaps to fill only show with ?review in the address
   (and in the PDFs made from it). The public pages read as finished text. */
.lawyer, .review-only { display: none; }
html.review .lawyer, html.review div.review-only { display: block; }
html.review span.review-only { display: inline; }
html.review .todo { background: #fdf3d6; padding: 0 4px; border-radius: 3px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 15px; color: var(--muted); }
.foot .wrap { display: grid; gap: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot a { color: var(--ink); }
.foot nav a { display: inline-block; padding: 6px 0; }
@media (min-width: 720px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: center; } }