/* colorphrase.ptk.fyi — the product site. The look comes from /design/tokens.css and /design/fire.css
   (the monorepo's shared design, ../../../design/README.md), linked before this file; here only the
   layout. Nothing loads from another host, and there are no scripts. */

html { -webkit-text-size-adjust: 100%; }
body { font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: 20px; }
.prose { max-width: 42rem; }

/* ── Header ── */
.top nav { display: flex; align-items: center; gap: 22px; padding-block: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; font: 750 1.3rem/1 var(--fire-display); letter-spacing: -.01em; }
.brand img { width: 32px; height: 32px; }
.top nav a:not(.brand) { color: var(--fire-ink); text-decoration: none; font-size: 15px; font-weight: 600; border-bottom: 2px solid transparent; }
.top nav a:not(.brand):hover { border-bottom-color: var(--fire-lime); }

/* ── Hero ── */
.hero { padding-block: 28px 64px; }
.hero h1 { margin: 0 0 18px; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; max-width: 15ch; }
/* The words on marker strokes, as Colorphrase marks them. */
.hero h1 mark { color: inherit; padding-inline: .06em; border-radius: 4px; }
.hero h1 .m1 { background: color-mix(in srgb, var(--fire-lime) 85%, transparent); }
.hero h1 .m2 { background: color-mix(in srgb, var(--fire-teal-soft) 80%, transparent); }
.lede { margin: 0 0 26px; max-width: 34rem; font-size: 1.2rem; line-height: 1.5; color: var(--fire-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: var(--fire-radius); font: 650 16px var(--fire-body); text-decoration: none; color: var(--fire-deep); background: var(--fire-surface); border: 2px solid var(--fire-edge); box-shadow: 4px 4px 0 var(--fire-shadow); }
.button.primary { background: var(--fire-lime); }
.button[aria-disabled="true"] { box-shadow: none; opacity: .75; cursor: default; }
.note { margin: 12px 0 0; font-size: 14px; color: var(--fire-muted); }
.picture { margin: 40px 0 0; border: 3px solid var(--fire-edge); border-radius: 26px; box-shadow: 8px 8px 0 var(--fire-shadow); overflow: hidden; background: var(--fire-teal-soft); }
.picture img { display: block; width: 100%; }

/* ── Sections ── */
section { padding-block: 44px; border-top: 2px solid var(--fire-line); }
.eyebrow { margin: 0 0 10px; }
section h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.intro { margin: 0 0 26px; max-width: 40rem; color: var(--fire-muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.grid li { padding: 18px 20px; }
.grid h3 { margin: 0 0 6px; font-size: 1.15rem; }
.grid p { margin: 0; font-size: 15.5px; color: var(--fire-muted); }
.dots { display: flex; gap: 4px; margin-bottom: 10px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fire-edge); }
ol.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 42rem; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
ol.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 16px/1 var(--fire-display); background: var(--fire-lime); color: var(--fire-deep); border: 2px solid var(--fire-edge); }

/* ── The privacy policy ── */
.doc { padding-block: 16px 64px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 6px; }
.doc .date { margin: 0 0 26px; color: var(--fire-muted); font-size: 15px; }
.doc h2 { margin: 34px 0 10px; font-size: 1.45rem; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 2px solid var(--fire-line); }
.doc code { font: 14px var(--fire-mono); background: var(--fire-fill); padding: 1px 5px; border-radius: 6px; }

footer.bottom { padding-block: 28px 44px; border-top: 2px solid var(--fire-line); font-size: 14.5px; color: var(--fire-muted); }
footer.bottom .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
footer.bottom .links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* The palettes' colours (classes: the CSP allows no inline styles). */
.dots .cff5252 { background: #ff5252; }
.dots .c7c4dff { background: #7c4dff; }
.dots .cffd600 { background: #ffd600; }
.dots .cff9100 { background: #ff9100; }
.dots .c66bb6a { background: #66bb6a; }
.dots .cffa726 { background: #ffa726; }
.dots .cab47bc { background: #ab47bc; }
.dots .cef5350 { background: #ef5350; }
.dots .c5c6bc0 { background: #5c6bc0; }
.dots .ca5d6a7 { background: #a5d6a7; }
.dots .cff8a80 { background: #ff8a80; }
.dots .c90caf9 { background: #90caf9; }