/* Jean's site. One editorial system: paper and ink, a light geometric display face (Manrope, as in the
   app) for headlines, Plus Jakarta Sans for everything else, thin rules, 4px buttons, one dark section,
   one card style (pricing). Pink appears only where the butler's photo lives; green only on ticks and
   "Recommended". Tokens below; .dark re-points them for the ink section. */

:root {
  --paper: #FAFAF9;
  --paper-2: #F2F1F0;
  --ink: #0F0E0D;
  --ink-2: #4A4842;
  --ink-3: #8F8B85;
  --line: #E4E2DE;
  --rule: #CFCBC5;
  --night: #0F0E0D;
  --night-2: #1A1917;
  --night-ink: #FAFAF9;
  --night-ink-2: #B9B5AE;
  --night-line: #2E2C29;
  --studio: #DD8D8B;
  --accent: #3A5A40;
  --accent-2: #9DBF9E;
  --display: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
  --sans: "Plus Jakarta Sans", "Inter", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 32px;
  --wrap: 1200px;
  --head-h: 56px;
  --shadow: 0 40px 80px -40px rgba(15, 14, 13, 0.35);

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --ln: var(--line);
  --btn: var(--ink);
  --on-btn: var(--paper);
  color-scheme: light;
}

.dark { --bg: var(--night); --fg: var(--night-ink); --fg-2: var(--night-ink-2); --fg-3: #7D7973; --ln: var(--night-line); --btn: var(--night-ink); --on-btn: var(--night); background: var(--bg); color: var(--fg); }
.grey { --bg: var(--paper-2); background: var(--bg); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
code { font: 500 0.88em/1 var(--mono); background: var(--paper-2); border: 1px solid var(--ln); border-radius: 4px; padding: 2px 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 4px; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* type */
h1, h2, h3 { font-family: var(--display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(44px, 5.6vw, 72px); }
h2 { font-size: clamp(34px, 4vw, 52px); max-width: 18ch; }
h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 500; }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.lede { font-size: 19px; line-height: 1.45; color: var(--fg-2); max-width: 54ch; }
.fine { font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.link:hover { text-decoration-color: currentColor; }
p + p { margin-top: 12px; }

/* buttons: 4px corners, filled ink on paper, filled paper on ink, outline for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 4px; font: 500 15px/1 var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { border-color: var(--fg); color: var(--fg); background: transparent; }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-row .fine { margin: 0; }

/* header: 56px, name and four links, one button; dark over dark sections (site.js sets .is-dark) */
.head { position: sticky; top: 0; z-index: 40; background: rgba(250, 250, 249, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); color: var(--ink); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.head.on-cover { background: rgba(221, 141, 139, 0.8); border-color: rgba(15, 14, 13, 0.12); }
.head.is-dark { background: rgba(15, 14, 13, 0.86); color: var(--night-ink); border-color: var(--night-line); }
.head .wrap { display: flex; align-items: center; gap: 36px; height: var(--head-h); }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 500 17px/1 var(--display); letter-spacing: -0.02em; flex-shrink: 0; }
.face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.menu { display: flex; align-items: center; gap: 28px; font: 500 14px/1 var(--sans); }
.menu a { opacity: 0.78; }
.menu a:hover, .menu a[aria-current="page"] { opacity: 1; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.head .btn-ghost { border-color: currentColor; color: inherit; }
.head.is-dark .btn-primary { background: var(--night-ink); color: var(--night); }
.mmenu { display: none; }
.mmenu > summary { list-style: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.mmenu > summary::-webkit-details-marker { display: none; }
.mmenu > summary span, .mmenu > summary span::before, .mmenu > summary span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.mmenu > summary span { background: transparent; }
.mmenu > summary span::before, .mmenu > summary span::after { content: ""; position: absolute; left: 0; }
.mmenu > summary span::before { top: -4px; } .mmenu > summary span::after { top: 4px; }
.mmenu .sheet { position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; background: var(--paper); color: var(--ink); padding: 24px var(--gutter); display: grid; align-content: start; gap: 4px; border-top: 1px solid var(--line); }
.mmenu .sheet a { font: 500 20px/1.2 var(--display); letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }

/* hero: the app's first screen. Text on the left, the butler on the right, on his studio wall. */
.cover { position: relative; overflow: hidden; background: var(--studio); color: var(--ink); }
.cover .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: end; min-height: 720px; }
.cover-text { padding: 96px 0 80px; position: relative; z-index: 2; }
.bonjour { font: 600 12px/1 var(--sans); letter-spacing: 0.3em; color: rgba(15, 14, 13, 0.7); }
.cover h1 { font-size: clamp(120px, 16vw, 200px); line-height: 0.9; letter-spacing: -0.05em; margin: 10px 0 18px -6px; }
.cover .tag { font: 300 clamp(26px, 2.8vw, 34px)/1.2 var(--display); letter-spacing: -0.02em; color: rgba(15, 14, 13, 0.85); max-width: 20ch; }
.cover .btn-row { margin-top: 32px; }
.cover .btn-row .fine { color: rgba(15, 14, 13, 0.7); font-weight: 500; font-size: 14px; }
.cover .also { margin-top: 18px; font-size: 13.5px; color: rgba(15, 14, 13, 0.7); }
.cover .also a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 14, 13, 0.3); }
.cover-art { position: relative; align-self: stretch; min-height: 600px; }
.cover-art img { position: absolute; right: -4%; bottom: 0; height: 100%; width: auto; max-width: none; object-fit: cover; object-position: top; }
.cover-art::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 30%; background: linear-gradient(90deg, var(--studio), rgba(221, 141, 139, 0)); z-index: 1; }

/* sections and rhythm */
.sec { padding: 128px 0; }
.sec-sm { padding: 80px 0; }
.sec-head { margin-bottom: 56px; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head .lede { margin-top: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split > * { min-width: 0; }
.rule { border: 0; border-top: 1px solid var(--ln); }

/* works with: one quiet row */
.works { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.works .eyebrow { margin-bottom: 18px; text-align: center; }
.runner { overflow: hidden; }
.runner .track { display: flex; width: max-content; }
.runner .set { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; width: 100%; }
.runner .set li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font: 500 13px/1 var(--sans); white-space: nowrap; }
.runner .lg { width: 15px; height: 15px; }
.runner-more { display: none; }

/* the team: a typographic row */
.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.member { padding: 28px 24px 32px 0; border-bottom: 1px solid var(--line); }
.member + .member { padding-left: 24px; border-left: 1px solid var(--line); }
.member img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; background: var(--studio); }
.member h3 { font: 500 17px/1.2 var(--sans); letter-spacing: -0.01em; }
.member .role { font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 6px 0 12px; }
.member p { color: var(--fg-2); font-size: 14px; line-height: 1.5; }

/* how it works: four numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { border-top: 1px solid var(--rule); padding-top: 20px; }
.step .n { display: block; font: 300 32px/1 var(--display); letter-spacing: -0.03em; margin-bottom: 18px; }
.step h3 { font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; margin-bottom: 8px; }
.step p { color: var(--fg-2); font-size: 15px; }

/* ask and approve: a transcript, set in type */
.transcript { border-top: 1px solid var(--rule); }
.line { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line .who { font: 600 11px/1.7 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
.line p { font-size: 16px; line-height: 1.5; color: var(--fg); }
.line .tick { display: inline-block; margin-left: 6px; }
.points { margin-top: 28px; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15px; color: var(--fg-2); }
.points li::before { content: ""; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); margin-top: 7px; }
.points b { color: var(--fg); font-weight: 500; }

/* framed product shots: a quiet panel, the window with its own shadow */
.frame { margin: 0; background-color: var(--paper-2); background-image: radial-gradient(rgba(15, 14, 13, 0.045) 1px, transparent 1px); background-size: 6px 6px; border: 1px solid var(--line); border-radius: 8px; padding: 48px; overflow: hidden; }
.grey .frame { background-color: var(--paper); }
.frame.shot-after { margin-top: 64px; }
.frame img { border-radius: 10px; box-shadow: var(--shadow); border: 1px solid rgba(15, 14, 13, 0.08); }
.frame.tight { padding: 32px; }
.frame-cap { margin-top: 16px; font-size: 13px; color: var(--fg-3); }

/* security: the one dark section */
.dark .eyebrow { color: var(--fg-3); }
.dark .lede { color: var(--fg-2); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
.trio li { border-top: 1px solid var(--night-line); padding-top: 22px; }
.trio h3 { font: 500 18px/1.3 var(--sans); letter-spacing: -0.01em; margin-bottom: 10px; }
.trio p { color: var(--fg-2); font-size: 15px; }
.wit { font: 300 italic 20px/1.4 var(--display); color: var(--fg-2); margin-top: 24px; }

/* pricing: the one card style */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.plan.pick { border-color: var(--ink); }
.plan .eyebrow { color: var(--fg); display: flex; justify-content: space-between; }
.plan.pick .eyebrow::after { content: "Recommended"; color: var(--accent); }
.price { font: 300 48px/1 var(--display); letter-spacing: -0.04em; margin: 22px 0 10px; }
.price small { font: 500 14px/1 var(--sans); color: var(--fg-3); letter-spacing: 0; margin-left: 4px; }
.plan .blurb { color: var(--fg-2); font-size: 15px; margin-bottom: 22px; }
.plan ul { display: grid; gap: 9px; margin-bottom: 28px; }
.plan li { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--fg-2); }
.plan li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; width: 100%; }
.plan .fine { margin-top: 10px; text-align: center; }
.addon { margin-top: 16px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.addon h3 { font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; margin: 6px 0; }
.addon h3 small { font-weight: 400; color: var(--fg-3); margin-left: 8px; font-size: 14px; }
.addon p { color: var(--fg-2); font-size: 14.5px; max-width: 64ch; }
.claude-note { margin-top: 24px; font-size: 13.5px; color: var(--fg-3); }

/* faq */
.faq { max-width: 760px; border-top: 1px solid var(--rule); }
.q { border-bottom: 1px solid var(--line); }
.q summary { list-style: none; cursor: pointer; padding: 20px 0; font: 500 17px/1.4 var(--sans); letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; font: 300 24px/1 var(--display); color: var(--fg-3); flex: none; }
.q[open] summary::after { content: "–"; }
.q p { padding: 0 0 22px; color: var(--fg-2); font-size: 15.5px; max-width: 64ch; }

/* closing */
.merci { padding: 112px 0; border-top: 1px solid var(--line); }
.merci .wrap { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.merci img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.merci h2 { font-size: clamp(56px, 8vw, 96px); letter-spacing: -0.05em; max-width: none; }
.merci .lede { margin: 12px 0 28px; }

/* footer */
.site { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 14px; }
.site .cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.site .brand p { color: var(--fg-3); font-size: 13.5px; max-width: 28ch; margin-top: 12px; }
.site h4 { font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.site li { margin: 8px 0; }
.site li a { color: var(--fg-2); }
.site li a:hover { color: var(--fg); }
.site .small { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }

/* inner pages */
.page-hero { padding: 96px 0 56px; border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero .lede { margin-top: 20px; }
.page { padding: 64px 0 128px; }
.page .sec-head { margin-bottom: 32px; }
.page section + section { margin-top: 80px; }
.prose { max-width: 720px; }
.prose h2 { font: 500 22px/1.3 var(--sans); letter-spacing: -0.01em; margin: 40px 0 12px; max-width: none; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.prose ul { list-style: disc; padding-left: 22px; margin: 10px 0; }
.prose ul ul { list-style: circle; }
.prose li { margin: 6px 0; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.prose strong { color: var(--fg); font-weight: 500; }
.prose .meta { font-size: 13px; color: var(--fg-3); margin-bottom: 24px; }
.prose .ph { background: #FFF4D6; color: #5B4A14; padding: 0 5px; border-radius: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.prose th { color: var(--fg); font-weight: 500; }
.draft-banner { text-align: center; font: 500 13px/1.4 var(--sans); color: #5B4A14; background: #FFF4D6; border-bottom: 1px solid #E8D9A8; padding: 9px 16px; }
.reqs { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 720px; }
.reqs li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--fg-2); }
.reqs li b { color: var(--fg); font-weight: 500; }
.reqs li i { font: 300 22px/1.2 var(--display); font-style: normal; color: var(--fg-3); }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; }
.dl-hero .tray { width: 320px; height: 320px; border-radius: 8px; object-fit: cover; object-position: top; background: var(--studio); }
.dl-hero .btn-row { margin-top: 28px; }
.fixes { max-width: 760px; border-top: 1px solid var(--rule); }
.fixes details { border-bottom: 1px solid var(--line); }
.fixes summary { list-style: none; cursor: pointer; padding: 18px 0; font: 500 16px/1.4 var(--sans); }
.fixes summary::-webkit-details-marker { display: none; }
.fixes p { padding: 0 0 20px; color: var(--fg-2); font-size: 15px; max-width: 64ch; }
.contact { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.contact h3 { font: 500 18px/1.3 var(--sans); letter-spacing: -0.01em; margin-bottom: 6px; }
.contact p { color: var(--fg-2); font-size: 15px; max-width: 60ch; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; max-width: 960px; }
.twocol h3 { font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; margin-bottom: 8px; }
.twocol p { color: var(--fg-2); font-size: 15px; }
.twocol > div { border-top: 1px solid var(--rule); padding-top: 18px; }
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.notfound .num { font: 300 140px/1 var(--display); letter-spacing: -0.06em; color: var(--fg-3); }
.notfound .lede { margin: 12px auto 28px; }

/* responsive */
@media (max-width: 1040px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member:nth-child(4) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .trio { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .site .cols { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .frame { padding: 32px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .menu { display: none; }
  .mmenu { display: block; }
  .nav-end .btn-primary { display: none; }
  .sec { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; }
  .cover .wrap { grid-template-columns: 1fr; min-height: 0; }
  .cover-art { order: -1; min-height: 380px; margin: 0 calc(-1 * var(--gutter)); }
  .cover-art img { right: 50%; transform: translateX(50%); height: 100%; }
  .cover-art::before { display: none; }
  .cover-text { padding: 24px 0 56px; }
  .cover h1 { font-size: clamp(96px, 30vw, 140px); }
  .team { grid-template-columns: 1fr; border-top: 0; }
  .member, .member + .member { padding: 20px 0; padding-left: 0; border-left: 0; }
  .member img { margin-bottom: 14px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .line { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .frame, .frame.tight { padding: 16px; }
  .merci .wrap { grid-template-columns: 1fr; gap: 24px; }
  .merci img { width: 96px; height: 96px; }
  .addon, .contact { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
  .dl-hero { grid-template-columns: 1fr; gap: 32px; }
  .dl-hero .tray { width: 100%; height: 280px; }
  .site .cols { grid-template-columns: 1fr; gap: 24px; }
  .twocol { grid-template-columns: 1fr; }
  .page-hero { padding: 64px 0 40px; }
  .page { padding: 48px 0 80px; }
  .page section + section { margin-top: 56px; }
  .notfound .num { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page-hero em { font-style: normal; }