/* Hallmark · shape: feature stack, kept sequence · genre: editorial · theme: brand · redesign: full · hero: Stage · nav: edge-aligned, the mark and three links · footer: statement on the aubergine field · signature: the real Today screen, on a computer and a phone, following the visitor's light or dark setting · job: try · imagery: screenshots 6 (app test run), photographs 2 (the app's own cyanotypes)
 * paper: #eef4f7 · accent: #64313e · display: Poppins Light · body: Poppins Medium
 * axes: pale blue/light geometric sans/burgundy · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, the section order is the old page's; kept on purpose, the compositions changed and the screens are the app's own */
/* Hallmark · waive 1 · Poppins ships in assets as the brand's own face · Manifesso's wordmark and app are set in Poppins Light */
/* Hallmark · waive 47b · an iPhone and a MacBook, real Manifesso screens inside · the owner asked for the screens in real devices */
/* Hallmark · reworded the hero "Become more you." to "A little closer to yourself." · the owner chose it as the slogan; the closing head is now "Imagine your own daily ritual." */
/* Hallmark · waive 8 · the order of the content is kept from the old page · a redesign of Manifesso keeps its sequence, in new compositions */
/* Hallmark · dropped five eyebrow lines, four prompt captions and the hero status line, the last at the owner's request · 54 names the eyebrow; the module names became the headings */
/* Hallmark · reworded "My Compass", "My Growth", "four spaces" to "Compass", "Growth", "five spaces" and added Explore · the app's own screens now name five spaces */
@font-face{font-family:Poppins;src:url('assets/Poppins-Light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/Poppins-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}

:root {
  color-scheme: light dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(3rem, 5vw + 1rem, 5.5rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.25rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.0625rem, 0.35vw + 1rem, 1.3125rem);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --nav-height: 72px;
  --z-raised: 10; --z-dropdown: 100; --z-sticky-nav: 300;

  --color-paper: #eef4f7; --color-paper-2: #dde9f0; --color-paper-3: #cbdfe9;
  --color-ink: #2a1a26; --color-ink-2: #5a5360; --color-muted: #6f6975;
  --color-rule: rgba(48, 23, 40, 0.14);
  --color-accent: #64313e; --color-accent-ink: #f5f3f1; --color-focus: #64313e;
  --color-field: #301728; --color-field-ink: #f5f3f1; --color-field-muted: #cdbfc8; --color-field-rule: rgba(245, 243, 241, 0.16); --color-field-accent: #c1dbe8;
  --shadow-screen: 0 1px 2px rgba(48, 23, 40, 0.06), 0 24px 56px -24px rgba(48, 23, 40, 0.32);
  --outline-screen: rgba(48, 23, 40, 0.1);
  --color-device: #17111a; --color-device-edge: #4a4350; --color-device-base: #c5c8ce; --color-device-base-2: #8d9097; --color-device-screen: #0b080c;
  --font-display: Poppins, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: Poppins, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-control: 14px; --radius-card: 20px; --radius-hero: 28px; --radius-pill: 999px;
  --tracking-display: -0.035em; --display-weight: 300;
}
/* Dark follows the device, unless the visitor chose light. A choice (the button in the
   navigation, kept by theme.js) wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #1e0f1a; --color-paper-2: #301728; --color-paper-3: #3e2032;
    --color-ink: #f5f3f1; --color-ink-2: #cdbfc8; --color-muted: #b3a2ac;
    --color-rule: rgba(245, 243, 241, 0.14);
    --color-accent: #c1dbe8; --color-accent-ink: #301728; --color-focus: #c1dbe8;
    --color-field: #301728;
    --shadow-screen: 0 24px 56px -24px rgba(0, 0, 0, 0.7);
    --outline-screen: rgba(245, 243, 241, 0.12);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #1e0f1a; --color-paper-2: #301728; --color-paper-3: #3e2032;
  --color-ink: #f5f3f1; --color-ink-2: #cdbfc8; --color-muted: #b3a2ac;
  --color-rule: rgba(245, 243, 241, 0.14);
  --color-accent: #c1dbe8; --color-accent-ink: #301728; --color-focus: #c1dbe8;
  --color-field: #301728;
  --shadow-screen: 0 24px 56px -24px rgba(0, 0, 0, 0.7);
  --outline-screen: rgba(245, 243, 241, 0.12);
}
:root[data-theme="light"] { color-scheme: light; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 20px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; --nav-height: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-lg); scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--space-2xs); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.08; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); line-height: 1.04; }
h2 { max-width: 30ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.02em; }
p, figure { margin: 0; }
p { text-wrap: pretty; }
.lead { font-size: var(--text-lead); line-height: 1.55; max-width: 46ch; color: var(--color-ink-2); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
small { font-size: var(--text-sm); }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; top: var(--space-sm); left: var(--space-sm); transform: translateY(-200%); z-index: var(--z-sticky-nav); padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-control); }
.skip:focus { transform: none; }

/* Navigation */
.navigation-row { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; flex-shrink: 0; }
.brand-icon { width: 32px; height: 32px; flex-shrink: 0; }
.navigation .brand picture img { width: 132px; }
.navigation nav { display: flex; gap: var(--space-xl); }
.navigation nav a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.navigation nav a:hover { color: var(--color-ink); }
.navigation nav a:active { color: var(--color-accent); }
.mobile-menu { display: none; }
/* Light or dark: one quiet button, the moon in light and the sun in dark. */
.navigation .brand { margin-right: auto; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.theme-toggle:hover { color: var(--color-ink); background: var(--color-paper-2); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* When the choice changes, colours move together instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
  .theme-shift, .theme-shift *, .theme-shift *::before, .theme-shift *::after { transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), outline-color var(--dur-long) var(--ease-out) !important; }
}

/* Hero */
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; min-height: min(calc(100svh - var(--nav-height)), 52rem); padding-block: var(--space-xl) var(--space-3xl); }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-lg); }
.hero-copy h1 { font-size: clamp(2.75rem, 4.4vw, 4.25rem); max-width: none; }
.hero-copy .lead { max-width: 30ch; }
.hero-art { min-width: 0; }
.hero-stage { position: relative; padding-bottom: 5%; padding-left: 5%; }
.screen { border-radius: var(--radius-card); box-shadow: var(--shadow-screen); outline: 1px solid var(--outline-screen); outline-offset: -1px; background: var(--color-paper-2); }
.screen-wide { width: 100%; }
.hero-phone { position: absolute; left: 0; bottom: 0; width: 23%; z-index: var(--z-raised); }
/* Devices: an iPhone and a MacBook around the real screens */
.device { container-type: inline-size; display: block; }
.device .screen { width: 100%; box-shadow: none; outline: 0; background: var(--color-device-screen); }
.iphone-body { position: relative; padding: 3.4cqw; border-radius: 16cqw; background: var(--color-device); box-shadow: inset 0 0 0 0.7cqw var(--color-device-edge), var(--shadow-screen); }
.iphone-body .screen { border-radius: 12.8cqw; }
.iphone-body::after { content: ""; position: absolute; top: 6cqw; left: 36cqw; width: 28cqw; height: 8cqw; border-radius: var(--radius-pill); background: var(--color-device-screen); }
.macbook-lid { margin-inline: 8cqw; padding: 1.4cqw 1.4cqw 1.8cqw; border-radius: 2cqw 2cqw 0 0; background: var(--color-device); box-shadow: inset 0 0 0 0.25cqw var(--color-device-edge), var(--shadow-screen); }
.macbook-lid .screen { border-radius: 0.7cqw; }
.macbook-base { height: 2.2cqw; border-radius: 0.4cqw 0.4cqw 2cqw 2cqw; background: linear-gradient(var(--color-device-base), var(--color-device-base-2)); }
.hero-copy > *, .hero-art { animation: settle var(--dur-long) var(--ease-out) backwards; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-art { animation-delay: 120ms; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* Sections */
.section { padding-block: var(--section-gap-s); }
.introduction { padding-top: var(--space-2xl); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.split-reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split-copy { display: flex; flex-direction: column; gap: var(--space-lg); }
.plate { overflow: hidden; border-radius: var(--radius-hero); outline: 1px solid var(--outline-screen); outline-offset: -1px; background: var(--color-paper-2); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate-wide { aspect-ratio: 4 / 3; }
.plate-tall { aspect-ratio: 1 / 1; }
.statement { font-size: var(--text-display-s); max-width: 18ch; }

.band { background: var(--color-paper-2); color: var(--color-ink); }
.modules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); border-radius: var(--radius-card); }
.module { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; scroll-margin-top: var(--space-lg); }
.module picture { margin-bottom: var(--space-md); }
.module .screen { width: 100%; }
.module p { font-size: var(--text-sm); color: var(--color-ink-2); }
.module .prompt { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink); min-height: calc(2lh + var(--space-md)); }

.ritual { padding-block: var(--section-gap); }
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; }
.steps { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: step; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 300; font-size: var(--text-display-s); line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; margin-bottom: var(--space-lg); }
.steps p { color: var(--color-ink-2); max-width: 32ch; }

.approach { padding-block: 0 var(--section-gap); }
.questions { padding-block: 0 var(--section-gap); }
.questions-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq { display: grid; }
.faq article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.faq article:last-child { border-bottom: 1px solid var(--color-rule); }
.faq h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.faq p { color: var(--color-ink-2); }

/* Footer: the closing line on the aubergine field */
.footer { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--section-gap-s) var(--space-xl); }
.footer :focus-visible { outline-color: var(--color-field-accent); }
.invitation { display: flex; flex-direction: column; gap: var(--space-lg); padding-bottom: var(--section-gap-s); }
.invitation h2 { font-size: var(--text-display); color: var(--color-field-accent); }
.invitation .lead { color: var(--color-field-ink); }
.footer-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); padding-block: var(--space-2xl); border-top: 1px solid var(--color-field-rule); }
.footer-brand p { margin-top: var(--space-md); color: var(--color-field-muted); }
.footer-brand img { width: 168px; }
.footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer nav h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; line-height: 1.6; color: var(--color-field-muted); margin-bottom: var(--space-xs); }
.footer nav a { display: flex; align-items: center; min-height: 40px; color: var(--color-field-ink); text-decoration: underline transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.footer nav a:hover { text-decoration-color: currentColor; }
.footer nav a:active { color: var(--color-field-accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); color: var(--color-field-muted); }

/* 404 */
.notfound { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-lg); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); white-space: nowrap; transition: opacity var(--dur-micro) var(--ease-out); }
.button:hover { opacity: 0.9; }
.button:active { opacity: 0.8; }

@media (max-width: 75rem) {
  .modules { grid-template-columns: repeat(5, minmax(13.75rem, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); border-radius: 0; }
  .module { scroll-snap-align: start; }
}
@media (max-width: 60rem) {
  .hero-grid, .split, .split-reverse, .head-split, .questions-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .split, .split-reverse { gap: var(--space-xl); }
  .split-reverse .plate { order: 2; }
  .plate-tall { aspect-ratio: 4 / 3; }
  .head-split { gap: var(--space-md); align-items: start; }
  .questions-grid { gap: var(--space-xl); }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-xl); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 47.5rem) {
  .navigation nav { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding-left: var(--space-lg); font-size: var(--text-sm); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] nav { position: absolute; right: 0; top: 48px; display: flex; flex-direction: column; gap: 0; min-width: 13.75rem; padding: var(--space-xs) var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-screen); z-index: var(--z-dropdown); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .steps li::before { margin-bottom: var(--space-xs); }
  .faq article { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .navigation .brand picture img { width: 116px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media (prefers-contrast: more) { :root { --color-ink-2: var(--color-ink); --color-muted: var(--color-ink); --color-rule: var(--color-ink); } }