/* The two typefaces, served from this deployment's /fonts/ folder. build.mjs puts this file, then frame.css,
   at the top of each page's stylesheet, so every page loads one stylesheet. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/nunito-sans.woff2") format("woff2");
}

/* The Typoz frame, friendly inside: everything the offer page, the questions and the concept gallery share,
   so the three pages are one product. This file is the one place it is written.
     - lib/gallery.mjs puts it at the top of every gallery.css.
     - intake/src/frame.css is a generated copy (intake/sync-frame.mjs; Vercel uploads intake/ only), which
       intake/build.mjs puts at the top of each intake stylesheet. That build refuses a stale copy, and tests on
       both sides fail when the copy drifts.
   Each page puts its two font faces above this file (the font files sit at different addresses) and its own
   rules below it. A page's own stylesheet lays out what only that page has; it does not restyle what is here.
   From Typoz: the paper ground, ink text and buttons, the hairline, the red squiggle, small mono labels.
   Kept friendly: white rounded cards, Fraunces and Nunito Sans, pill buttons, hand-drawn corners, drawn ticks.
   The red is decoration only (about 3:1 on paper): it is never text and never the only sign of a state.
   No dark theme. No inline styles anywhere; nothing is loaded from another address.
   Text sizes are in rem (18px body, 17px small print, 13px mono labels at the browser's usual setting), so a reader
   who has set larger text in their browser gets all of it larger, not only the headings. */

:root {
  --paper: #F7F5F0;
  --card: #FFFFFF;
  --ink: #0E1116;
  --ink-soft: #2A2E36;
  --on-ink: #F7F5F0;
  --muted: #65686B;
  --hairline: #D3D1CB;
  --edge: #84868A;
  --red: #FF4D4D;
  --blush: #FCE9E4;
  --blush-deep: #F8D8CF;
  --error: #9C2F1B;
  --error-soft: #FCEEE9;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Nunito Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  /* A soft spring that overshoots by about 6 percent. Browsers without linear() keep the plain curve. */
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Slightly uneven corners, so pills and boxes look drawn by hand. */
  --hand-a: 26px 34px 28px 36px / 34px 26px 36px 24px;
  --hand-b: 36px 26px 34px 24px / 26px 36px 24px 34px;
  --hand-c: 24px 36px 26px 32px / 36px 24px 32px 28px;
  --hand-wide: 22px 30px 24px 32px / 30px 22px 32px 24px;
  --hand-wide-b: 30px 22px 32px 24px / 24px 32px 22px 30px;
  --shadow: 0 1px 0 rgba(14, 17, 22, 0.03), 0 14px 34px -26px rgba(14, 17, 22, 0.3);
  /* The spacing scale: between two cards in a stack, and between two parts of a page (and above the footer). */
  --space-card: 26px;
  --space-part: 52px;
  color-scheme: light;
  accent-color: var(--ink);
}
@media (min-width: 640px) {
  :root { --space-card: 32px; }
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.004 1%, 0.032 2.7%, 0.097 5%, 0.202 7.8%, 0.339 10.8%, 0.496 14.2%, 0.653 17.9%, 0.795 21.9%, 0.91 26.2%, 0.992 30.6%, 1.04 35.4%, 1.061 40.3%, 1.062 45.4%, 1.05 50.8%, 1.034 56.3%, 1.019 62%, 1.007 67.9%, 1 74%, 0.997 80.3%, 0.996 86.7%, 0.997 93.3%, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  overflow-wrap: break-word;
}

/* The column. 43rem suits a page that is read top to bottom; the gallery widens it for three cards side by side. */
.wrap {
  max-width: 43rem;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}

.vh, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -90px; z-index: 5; padding: 12px 18px; background: var(--ink); color: var(--on-ink); border-radius: 999px; }
.skip:focus { top: 8px; }

h1, h2, h3 { font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 560; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 9.4vw, 3.5rem); margin: 0 0 18px; }
h2 { font-size: 1.6rem; margin: 0 0 20px; }
h3 { font-size: 1.25rem; margin: 0 0 6px; }
p { margin: 0 0 16px; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
strong { font-weight: 800; }
.nb { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- the small mono label: eyebrows, step numbers, option numbers; and the tag ("needed", "Draft") ---------- */
.label { margin: 0; font: 500 0.8125rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* A tag says what it means in words, in ink; the blush behind it is only a tint. */
.tag { display: inline-block; padding: 1px 9px 0; font: 600 0.8125rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--blush); border-radius: 7px 9px 6px 8px / 8px 6px 9px 7px; white-space: nowrap; }

/* ---------- the header: the wordmark as drawn, a label beside it, one hairline under both ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: calc(20px + env(safe-area-inset-top, 0px)) 0 16px; border-bottom: 1px solid var(--hairline); }
/* The wordmark keeps its own proportions (height follows width) and is never under 120px wide. */
.top-mark { flex: none; display: block; width: 132px; height: auto; }
.top .label { text-align: right; }
@media (min-width: 640px) {
  .top { padding-top: 30px; padding-bottom: 20px; }
  .top-mark { width: 156px; }
}

/* ---------- the hello: a label, the heading with its squiggle, a sentence or two ---------- */
.hello { position: relative; padding: 30px 0 6px; }
.hello > * { position: relative; }
/* One soft shape behind the greeting. The box clips it at the screen's edge, so it can never make the page
   scroll sideways. On a phone it is a small corner under the rule, clear of the heading and its squiggle. */
.hello > .hello-art { position: absolute; inset: 0 -16px; overflow: hidden; pointer-events: none; }
.hello-blob { position: absolute; top: -44px; right: -92px; width: 200px; height: 172px; background: var(--blush); border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; }
.hello .label { margin-bottom: 14px; }
.hello .label .tag { margin-left: 6px; }
.hello h1 { margin-bottom: 26px; }
.lede { max-width: 34rem; font-size: 1.25rem; line-height: 1.5; }
.aside { color: var(--muted); font-size: 1.0625rem; }
.opt { color: var(--muted); font-weight: 400; }
@media (min-width: 640px) {
  .hello { padding-top: 48px; }
  .hello-blob { top: 14px; right: -70px; width: 320px; height: 280px; }
}
/* Wider than the column (43rem), the shape stays inside it until there is room beside it. These two steps are in
   em, so they follow the reader's own text size as the column does: with larger text the column is wider, and the
   shape waits for a wider screen before it leans out past the column's edge. */
@media (min-width: 43em) {
  .hello-blob { right: 0; }
}
@media (min-width: 60em) {
  .hello > .hello-art { overflow: visible; }
  .hello-blob { right: -130px; }
}

/* ---------- the squiggle: the wordmark's own zig-zag, repeated, under one phrase per hello ---------- */
/* It sits just under the baseline, behind the letters, so a descender crosses in front of it. */
.squig { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.squiggle { position: absolute; z-index: -1; left: 0; top: 100%; width: 100%; height: auto; margin-top: -0.16em; overflow: visible; pointer-events: none; }
.squiggle path { fill: none; stroke: var(--red); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 28px 20px 30px; margin: var(--space-card) 0; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
@media (min-width: 640px) { .card { padding: 38px 40px 42px; } }
@media (max-width: 359px) { .card { padding-inline: 14px; } }

/* ---------- buttons and links ---------- */
/* One button: an ink pill with a paper-colored label. Full width on a phone. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 14px 30px; font: inherit; font-size: 1.15rem; font-weight: 800; line-height: 1.25; text-align: center; color: var(--on-ink); background: var(--ink); border: 2px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 0.2s ease, scale 0.5s var(--spring); }
/* Never wider than what holds it: a narrow card, or a reader with large text, gets the full-width button. */
@media (min-width: 600px) { .button { width: auto; min-width: min(17rem, 100%); } }
/* As wide as what holds it, however narrow that is. */
.button--wide { width: 100%; min-width: 0; }
/* The small one, for a lesser action beside text ("Copy"). Still 44px tall. */
.button--small { width: auto; min-width: 0; min-height: 44px; padding: 8px 24px; font-size: 1.125rem; }
@media (hover: hover) { .button:hover { background: var(--ink-soft); } }
.button:active { scale: 0.97; transition-duration: 0.09s; }
.button:focus-visible { outline-offset: 4px; }
/* A link or a plain button that stands by itself: bold, underlined, 44px tall. */
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 0; font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }

/* A drawn tick, used by chips, stepping stones and lists. */
.tick { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- chips: real checkboxes and radios under hand-drawn pills ---------- */
.picks { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: block; margin: 0; font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-body { display: flex; align-items: center; gap: 9px; height: 100%; min-height: 50px; padding: 9px 18px 9px 13px; background: var(--card); border: 1.75px solid var(--edge); border-radius: var(--hand-a); line-height: 1.3; transition: scale 0.5s var(--spring), background-color 0.25s ease, border-color 0.25s ease; }
.chip:nth-child(3n + 2) .chip-body { border-radius: var(--hand-b); }
.chip:nth-child(3n) .chip-body { border-radius: var(--hand-c); }
.chip .tick { flex: none; width: 24px; height: 23px; padding: 3px; color: var(--on-ink); background: var(--card); border: 1.5px solid var(--edge); border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.3s ease 0.05s, background-color 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) { .chip:hover .chip-body { border-color: var(--ink); } }
.chip:active .chip-body { scale: 0.96; transition-duration: 0.09s; transition-timing-function: ease-out; }
/* One fixed fill for every chosen chip: a pale blush, an ink edge and a filled tick. Three signs, none of them
   the red, so the choice never rests on a tint alone. */
.chip input:checked + .chip-body { background: var(--blush); border-color: var(--ink); }
/* "Pick several" chips carry a small drawn box; "pick one" chips keep the round marker. */
.chip input[type="checkbox"] + .chip-body .tick { border-radius: 7px 9px 6px 8px / 8px 6px 9px 7px; }
.chip input:checked + .chip-body .tick { background: var(--ink); border-color: var(--ink); stroke-dashoffset: 0; }
.chip input:focus-visible + .chip-body { outline: 3px solid var(--ink); outline-offset: 3px; }
/* A palette's colors as overlapping dots. The colors themselves are written by each page's build. */
.swatch { display: flex; flex: none; }
.swatch i { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(14, 17, 22, 0.18); }
.swatch i + i { margin-left: -9px; }

/* ---------- fields ---------- */
.field { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
label, legend { display: block; padding: 0; font-weight: 700; margin-bottom: 6px; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  font: inherit;
  font-size: 1.125rem;
  color: inherit;
  background: var(--card);
  border: 1.5px solid var(--edge);
  border-radius: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
textarea { resize: vertical; line-height: 1.5; min-height: 5.6rem; }
/* Grows with what is typed or pasted. Browsers without field-sizing keep the height they were given. */
textarea.grow { field-sizing: content; min-block-size: 5.6rem; max-block-size: 60vh; max-block-size: 60svh; }

/* ---------- the footer: one hairline, the wordmark again, small, the company's name, then the small print ---------- */
.foot { display: grid; gap: 14px; justify-items: start; margin-top: var(--space-part); padding: 26px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); }
.foot-mark { display: block; width: 120px; height: auto; }
.foot p { max-width: 46rem; margin: 0; }
.foot .label a { display: inline-block; padding-block: 12px; color: inherit; }
.foot-note { color: var(--muted); font-size: 1.0625rem; }
/* A link in the footer stands on a line of its own, so its 44px height does not push two lines of text apart. */
.foot .link { display: flex; width: fit-content; }

/* ---------- motion that happens once, only for people who have not asked for less ---------- */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* The one thing that moves by itself: the squiggle draws once when the page opens, then stays. */
  .squiggle path { animation: draw 0.35s ease-out 0.45s 1 backwards; }
}

/* Everything is instant for people who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Forced colors (Windows High Contrast): the button keeps an edge through its transparent border, which the
   system paints; the decoration steps aside; the color swatches keep their own colors, because they are the content.
   The wordmark is a picture with ink letters, so on a dark system palette it stands on a small paper plate: the
   mark itself is shown as drawn. A chip's marker takes the system's colors, so an empty one never looks filled. */
@media (forced-colors: active) {
  .hello-blob, .squiggle { display: none; }
  .top-mark, .foot-mark { box-sizing: content-box; padding: 6px 8px; background: var(--paper); border-radius: 6px; forced-color-adjust: none; }
  .chip .tick { background: Canvas; border-color: CanvasText; color: Canvas; }
  .chip input:checked + .chip-body { outline: 3px solid Highlight; }
  .chip input:checked + .chip-body .tick { background: Highlight; border-color: Highlight; color: HighlightText; }
  .swatch i { forced-color-adjust: none; }
}

/* The offer page: what an invitation link opens, and what only it has. Plain HTML and CSS, no script; phone first.
   build.mjs puts fonts.css and frame.css above this file (the look the offer page, the questions and the concept
   gallery share: tokens, header, hello, cards, buttons, footer, the squiggle). Nothing here restyles the frame. */

/* ---------- the hello ---------- */
.hello h1 { max-width: 11.5em; }
.terms { max-width: 34rem; margin: 0; }
.cta { margin: 26px 0 12px; }
.fine { margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }

/* ---------- sections: a mono label, then a soft heading. Each part, card or not, stands a part's space
   from the one before it. ---------- */
.part, .card { margin-top: var(--space-part); margin-bottom: 0; }
.part > .label, .card > .label { margin-bottom: 8px; }

/* The product itself: two gallery screenshots of the sample, drawn as a laptop and a phone. The phone stands in
   front of the laptop's corner. Plain boxes in ink; the pictures keep their own proportions. */
.showcase { position: relative; margin: 40px 0 0; padding: 0 0 18px; }
.laptop { width: 84%; }
.laptop__screen { padding: 2.4% 2.4% 3.2%; background: var(--ink); border-radius: 16px 16px 4px 4px; }
.laptop__screen img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--card); }
.laptop::after { content: ""; display: block; height: 12px; margin: 0 -7%; background: var(--hairline); border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px; box-shadow: 0 18px 30px -24px rgba(14, 17, 22, 0.6); }
.phone { position: absolute; right: 0; bottom: 0; width: 27%; padding: 2.2%; background: var(--ink); border-radius: 22px; box-shadow: 0 16px 30px -18px rgba(14, 17, 22, 0.6); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: 15px; background: var(--card); }
.showcase figcaption { margin-top: 14px; max-width: 70%; }
@media (min-width: 640px) {
  .showcase { margin-top: 48px; }
  .phone { border-radius: 28px; }
  .phone img { border-radius: 20px; }
}

/* "My job, not yours": things already ticked off, as a plain list on the paper. */
.mine { margin-top: var(--space-part); }
.done { list-style: none; display: grid; gap: 10px 24px; margin: 14px 0 0; padding: 0; }
.done li { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1.3; }
@media (min-width: 560px) { .done { grid-template-columns: 1fr 1fr; } }
.done .tick, .ticks .tick { flex: none; width: 26px; height: 25px; padding: 4px; color: var(--on-ink); background: var(--ink); border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; }

/* ---------- how it works: a numbered row on the paper, no boxes ---------- */
.steps { list-style: none; display: grid; gap: 22px; margin: 6px 0 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; align-content: start; padding-top: 16px; border-top: 1px solid var(--hairline); counter-increment: step; }
.steps li::before { content: counter(step); grid-row: span 2; font: 560 2.25rem/1 var(--display); font-variation-settings: "SOFT" 100; }
.steps h3 { margin: 4px 0 0; }
.steps .fine { margin-top: 6px; }
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .steps li { grid-template-columns: 1fr; }
  .steps li::before { grid-row: auto; margin-bottom: 10px; }
}

/* ---------- the price: the one card on the page. The two figures side by side, the extras one quiet line. ---------- */
.costs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.amount { display: grid; align-content: start; gap: 6px; margin: 4px 0 18px; }
.figure { font: 560 2.6rem/1 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -0.02em; }
.cost { grid-column: 1 / -1; }
.cost > p:last-child { margin-bottom: 0; }
.cost--monthly { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
@media (min-width: 640px) {
  .costs { gap: 0 36px; }
  .figure { font-size: 3.1rem; }
  .cost { grid-column: auto; grid-row: 2; }
  .cost--monthly { margin-top: 0; padding-top: 0; border-top: 0; }
}
.halves { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }
.halves li { padding: 12px 16px; background: var(--paper); border-radius: var(--hand-wide); }
.halves li:nth-child(2n) { border-radius: var(--hand-wide-b); }
.extras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.extras__lead { margin: 0; color: var(--ink); }
.extras__lead .label { margin-left: 6px; }
.rough { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; }
.rough li { margin: 0; }
.rough li + li::before { content: "\00B7"; margin-right: 14px; }
.rough .about { font-weight: 800; white-space: nowrap; }
.extras .fine { flex-basis: 100%; margin-top: 4px; }
/* The spread plan: one quiet line on the paper, just under the card. */
.spread { margin-top: 14px; padding: 0 4px; }

/* ---------- what you get: on the paper, ticks and a quiet "not included" ---------- */
.ticks { list-style: none; display: grid; gap: 12px; margin: 0 0 30px; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.ticks .tick { margin-top: 1px; }
.part > h3.label { margin: 0 0 6px; }
.not { margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }

/* ---------- questions people ask ---------- */
.qa { margin: 0; border-bottom: 1px solid var(--hairline); }
.qa div { padding: 18px 0 20px; border-top: 1px solid var(--hairline); }
.qa dt { margin: 0 0 6px; font: 560 1.25rem/1.25 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -0.01em; }
.qa dd { margin: 0; }

/* ---------- the end: the same button again, on the paper under one rule ---------- */
.last { padding-top: var(--space-part); border-top: 1px solid var(--hairline); text-align: center; }
.last h2 { margin-bottom: 0; }
.last .cta { margin-top: 22px; }