/* Hallmark · shape: tool page · genre: playful · theme: Hum (deal 1/3, seed focus-room-browser-where-dc74·62ad8614·2026-11-09·r0) · redesign: full
 * hero: the tool itself on an ink sheet · nav: torn paper strip · footer: one line · imagery: the product · signature: card-stock controls on ink
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
@font-face { font-family: "Chillax"; src: url("/fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("/fonts/chillax-600.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
:root{ --ink-edge: oklch(10% 0.01 255); --ink-raised: oklch(26% 0.014 255);
  --paper: oklch(97% 0.012 95); --paper-2: oklch(94.5% 0.018 95); --paper-3: oklch(91% 0.022 95); --card: oklch(98.8% 0.007 95);
  --ink: oklch(20% 0.014 255); --ink-2: oklch(29% 0.014 255); --ink-soft: oklch(40% 0.014 255); --muted: oklch(45% 0.014 255);
  --pear: oklch(87% 0.175 96); --pear-deep: oklch(72% 0.16 92); --blue: oklch(50% 0.17 250); --mint: oklch(82% 0.15 152);
  --line: oklch(87% 0.016 95); --edge: oklch(83% 0.04 88);
  --on-dark: oklch(97% 0.012 95); --on-dark-2: oklch(86% 0.012 95); --dark-label: oklch(80% 0.02 95); --dark-line: oklch(97% 0.012 95 / .2);
  --font: "Chillax", ui-rounded, system-ui, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ background:var(--grain), var(--paper); color:var(--ink); font-family:var(--font); font-weight:500; font-size:1.0625rem; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; }
b, strong{ font-weight:600; }
a{ color:var(--blue); text-underline-offset:.16em; }
.wrap{ max-width:780px; margin:0 auto; padding:0 20px; }
h1,h2,h3{ font-weight:600; letter-spacing:-.03em; line-height:1.06; text-wrap:balance; overflow-wrap:break-word; min-width:0; }
header{ background:var(--grain), var(--paper-2); clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),92% calc(100% - 2px),83% calc(100% - 6px),71% calc(100% - 3px),60% calc(100% - 6px),49% calc(100% - 2px),37% calc(100% - 5px),26% calc(100% - 3px),14% calc(100% - 6px),5% calc(100% - 2px),0 calc(100% - 4px)); padding-bottom:6px; }
.nav{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ font-size:1.4rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); text-decoration:none; }

/* card stock */
.btn{ --edge-h:5px; --edge-c:var(--edge); display:inline-flex; align-items:center; justify-content:center; min-height:50px; margin-bottom:5px; padding:0 22px; border:0; border-radius:16px; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; color:var(--ink);
  background:var(--grain), var(--card); box-shadow:inset 0 0 0 1px var(--line), 0 var(--edge-h) 0 0 var(--edge-c);
  transition:translate 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap); }
.btn:hover{ --edge-h:7px; translate:0 -2px; }
.btn:active{ --edge-h:1px; translate:0 4px; }
.btn-solid{ --edge-c:var(--pear-deep); background:var(--grain), var(--pear); box-shadow:0 var(--edge-h) 0 0 var(--edge-c); transition-timing-function:var(--ease-spring); }
.btn-line{ background:var(--grain), var(--card); }
.btn:disabled{ opacity:.55; cursor:not-allowed; translate:none; }
a:focus-visible, .btn:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.tool :focus-visible{ outline-color:var(--pear); }

.intro{ padding:48px 0 8px; text-align:center; }
.intro h1{ font-size:clamp(2.3rem,6vw,3.4rem); margin:0 auto 12px; max-width:16ch; }
.intro p{ color:var(--ink-2); font-size:1.15rem; max-width:50ch; margin:0 auto; }

/* the tool: an ink sheet */
.tool{ background:var(--grain), var(--ink); color:var(--on-dark); border-radius:28px; padding:32px 22px 28px; margin:30px 0 14px; text-align:center; box-shadow:0 2px 2px color-mix(in oklab, var(--ink) 20%, transparent), 0 22px 40px -20px color-mix(in oklab, var(--ink) 50%, transparent); }
.phase{ font-size:1rem; font-weight:500; color:var(--dark-label); min-height:1.5em; }
.clock{ font-size:clamp(4.2rem,17vw,7rem); font-weight:600; letter-spacing:-.04em; line-height:1; margin:10px 0 8px; font-variant-numeric:tabular-nums; }
.sublabel{ color:var(--on-dark-2); font-size:1rem; min-height:1.5em; }
.controls{ display:flex; gap:12px; justify-content:center; margin:20px 0 6px; flex-wrap:wrap; }
.controls .btn{ min-width:130px; }
.tool .btn-line{ --edge-c:var(--ink-edge); color:var(--on-dark); background:var(--grain), var(--ink-2); box-shadow:inset 0 0 0 1px var(--dark-line), 0 var(--edge-h) 0 0 var(--edge-c); }
.lbl{ display:block; font-size:.95rem; font-weight:500; color:var(--dark-label); margin:20px 0 10px; }
.seg{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.seg button{ font:inherit; font-size:.95rem; font-weight:600; padding:0 16px; min-height:42px; border-radius:999px; border:0; background:var(--ink-2); color:var(--on-dark-2); box-shadow:inset 0 0 0 1px var(--dark-line), 0 3px 0 0 var(--ink-edge); cursor:pointer; white-space:nowrap; margin-bottom:3px; transition:background-color 120ms var(--ease-snap), translate 120ms var(--ease-snap); }
.seg button:hover{ translate:0 -1px; }
.seg button:active{ translate:0 2px; }
.seg button.sel{ background:var(--pear); color:var(--ink); box-shadow:0 3px 0 0 var(--pear-deep); }
.vol{ width:min(320px,100%); accent-color:var(--pear); }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.dots span{ width:12px; height:12px; border-radius:50%; background:var(--dark-line); }
.dots span.on{ background:var(--mint); }
.check{ display:inline-flex; gap:8px; align-items:center; color:var(--on-dark-2); font-size:.95rem; margin-top:14px; cursor:pointer; }

/* the pitch under the tool: a pear sheet */
.cta{ background:var(--grain), var(--pear); border-radius:24px; padding:22px 24px; margin:26px 0 8px; display:flex; gap:18px; align-items:center; box-shadow:0 2px 2px color-mix(in oklab, var(--ink) 12%, transparent), 0 14px 26px -16px color-mix(in oklab, var(--ink) 40%, transparent); }
.cta b{ font-size:1.25rem; letter-spacing:-.02em; }
.cta p{ color:var(--ink-2); font-size:1rem; margin-top:4px; }
.cta .btn{ white-space:nowrap; }
.cta .btn-solid{ --edge-c:var(--ink-edge); background:var(--grain), var(--ink); color:var(--paper); }
@media (max-width:600px){ .cta{ flex-direction:column; align-items:stretch; text-align:center; } }

article{ padding:30px 0 10px; }
article h2{ font-size:1.9rem; margin:36px 0 12px; }
article h3{ font-size:1.2rem; margin:18px 0 6px; }
article p, article li{ color:var(--ink-2); font-size:1.06rem; }
article p + p{ margin-top:10px; }
article ul, article ol{ padding-left:1.2em; margin:8px 0; }
article li{ margin:6px 0; }
.faq{ display:grid; gap:10px; }
.faq details{ border-radius:16px; background:var(--grain), var(--card); box-shadow:inset 0 0 0 1px var(--line), 0 4px 0 0 var(--edge); padding:14px 18px; }
.faq summary{ cursor:pointer; font-weight:600; }
.faq p{ margin-top:8px; }
.more{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:14px 0 0; }
.more a{ display:block; background:var(--grain), var(--card); box-shadow:inset 0 0 0 1px var(--line), 0 4px 0 0 var(--edge); border-radius:16px; padding:15px 18px; text-decoration:none; color:var(--ink); font-weight:600; transition:translate 120ms var(--ease-snap); }
.more a:hover{ translate:0 -2px; }
footer{ margin-top:48px; padding:26px 0 36px; color:var(--muted); font-size:.95rem; border-top:1px dashed var(--edge); }
footer a{ color:var(--ink-2); }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }