/* Care Hand-Off, Kitchen Table (products/care-handoff/07-brand.md, direction 1, approved
   2026-09-10). This file is the page's own composition and it belongs to this product only:
   `site/assets/shared.css` stays the shared stylesheet and nothing here is loaded by any other
   product. It is linked from `site/templates/care-handoff/landing.html`, which extends
   `base.html`, so the head, the tracking, the mark and the footer are still the common ones.

   Every colour is a token the brand record already carries, so the record stays the source of
   truth: --bg paper #fbf6ec, --card fresh sheet #fffdf8, --line crease #e5dcca, --ink #21201c,
   --accent and --signature ink navy #1d3a5c, --flag marmalade #a4560f, --muted pencil #5a5449.
   The three nevers hold: no radius over 4px, no second warm colour, no Fraunces under 17px. */

body.brand {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  --kt-page: 66rem;            /* the measure the whole page lines up with */
  --kt-gutter: 1.5rem;
  --kt-ear: 1.15rem;           /* the folded corner on a card */
  --kt-tint: color-mix(in srgb, var(--ink) 4%, var(--bg));
  --kt-flap: color-mix(in srgb, var(--ink) 9%, var(--card));
}

/* --- the masthead: the lockup and the ink rule under it -------------------------------- */

body.brand .site-header {
  max-width: none;
  margin: 0;
  padding: 1.15rem var(--kt-gutter) .95rem;
  border-bottom: 2px solid var(--ink);
}
body.brand .site-header .lockup {
  width: min(100%, var(--kt-page));
  margin: 0 auto;
  gap: .65rem;
  align-items: center;
}
/* The lockup is the app icon and the wordmark. Felipe, 2026-09-10: the page did not say it was
   an app. The icon is the same mark on its navy tile, which is what a phone shows on a home
   screen, so it says app in the first second and the inline mark beside it would only be a
   second picture of the same page. The 9px radius is the one rounded object the brand allows:
   the never is about cards and buttons, and this is the icon itself, drawn as iOS and Android
   draw it. */
body.brand .site-header .site-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 0;
  margin: 0;
}
body.brand .site-header .brand-mark { display: none; }
body.brand .site-header .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.012em;
  color: var(--ink);
}

/* --- the page: full-bleed sections, one measure inside every one of them ---------------- */

.kt > section {
  max-width: none;
  margin: 0;
  padding: 2.7rem var(--kt-gutter);
}
.kt-in { width: min(100%, var(--kt-page)); margin: 0 auto; }
.kt figure { margin: 0; min-width: 0; }
.kt img { margin: 0; border: 0; border-radius: 0; display: block; width: 100%; max-width: 100%; height: auto; }
.kt h1, .kt h2, .kt h3 { font-family: var(--font-display); letter-spacing: -.012em; }
.kt p { margin: 0 0 .9rem; }

/* a band is a tinted strip across the window with a 2px ink rule top and bottom, the way a
   printed sheet divides itself. Everything else is divided by a crease hairline at the measure. */
.kt-band {
  background: var(--kt-tint);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.kt-ruled > .kt-in { border-bottom: 1px solid var(--line); padding-bottom: 2.6rem; }
.kt-ruled { padding-bottom: 0; }

/* a sheet: fresh paper, a crease hairline, and the corner turned back. The notch is cut out of
   the card so the page shows through it, and the flap inside the cut is the card's own ink. */
.kt-sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--kt-ear)) 0, 100% var(--kt-ear), 100% 100%, 0 100%);
}
.kt-sheet::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--kt-ear); height: var(--kt-ear);
  background: linear-gradient(225deg, transparent 50%, var(--kt-flap) 50%);
}

/* --- hero ------------------------------------------------------------------------------- */

.kt-hero { padding-top: 3.4rem; padding-bottom: 3.4rem; }
.kt-hero .kt-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  gap: 3rem;
  align-items: start;
}
/* the eyebrow: what the thing is, in the small caps the page already uses for its labels, above
   the promise. It is the first line a visitor reads and it names the two platforms. */
.kt-eyebrow {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 .7rem;
}
.kt-hero h1 {
  font-size: 47px;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--ink);
  max-width: 15ch;
}
.kt-hero .subhead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 41ch;
  margin: 0;
}

/* the five uneven rules, one for each thing a handoff says, the fifth in marmalade */
.kt .five-line {
  width: 6.5rem;
  height: 34px;
  margin: 1.4rem 0 1.5rem;
  background-size: 100% 2px, 74% 2px, 88% 2px, 52% 2px, 36% 2px;
  background-position: 0 0, 0 8px, 0 16px, 0 24px, 0 32px;
}

/* The hero object: the app on a phone, with the printable sheet showing behind it. The phone is
   a flat matte outline, 2px Ink Navy on the page's own paper, square to 4px, with one thin
   speaker line and no other hardware. The imagery rule refuses a glossy bezel and a photograph;
   a line-drawn outline is a flat drawing of a household object, and it is the one thing that
   says app in the first second. */
.kt-hero-note { position: relative; display: flex; justify-content: flex-end; }
.kt-phone {
  position: relative;
  z-index: 1;
  width: min(100%, 16rem);
  padding: 1.25rem .45rem 1rem;
  background: var(--bg);
  border: 2px solid var(--signature);
  border-radius: 4px;
}
.kt-phone-speaker {
  position: absolute;
  top: .58rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.1rem;
  height: 2px;
  background: color-mix(in srgb, var(--signature) 55%, transparent);
}
.kt-phone-screen { border: 1px solid var(--line); }

/* the second sheet, lying behind the phone as if pulled off a pad: the kit's delivery file,
   `hero/care-handoff-hero-note-paper.png`, taken down to the page's own paper so it lies on the
   page instead of sitting in a plate. The page's woven grain runs over it as well, at the same
   phase, so the two papers are one paper and the edge of the file does not show. */
.kt-hero-sheet {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 3.6rem;
  width: 74%;
}
.kt-hero-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) var(--grain, 2%), transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) calc(var(--grain, 2%) * .75), transparent) 0 1px, transparent 1px 4px);
  background-attachment: fixed;
}

/* --- the email form, on its own sheet ---------------------------------------------------- */

.kt-form-sheet { padding: 1.1rem 1.15rem 1.15rem; --kt-ear: 1.35rem; }
.kt .cta-form { gap: .55rem; }
.kt .cta-form input {
  flex: 1 1 12rem;
  font-family: var(--font-text);
  font-size: 17px;
  padding: .8rem .85rem;
  min-height: 46px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, var(--card));
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
}
.kt .cta-form input::placeholder { color: color-mix(in srgb, var(--muted) 72%, var(--card)); }
/* the ring stands off the field by 3px so the paper shows between the field's own edge and the
   ring: at 1px the two navy lines read as one thick border rather than as focus. */
.kt .cta-form input:focus-visible {
  outline: 2px solid var(--signature);
  outline-offset: 3px;
  border-color: var(--accent);
}
.kt .cta-form button.cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 700;
  padding: .8rem 1.25rem;
  min-height: 46px;
  border-radius: 2px;
}
/* the store line under the first ask: when it opens, where it opens, and what is free today.
   Plain text in Source Sans 3 600, never a store badge: the app is not in either store yet and
   Apple and Google both refuse the badge before it is. */
.kt .kt-store {
  margin: .7rem 0 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.kt .privacy { margin: .6rem 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.kt .form-message { margin: .6rem 0 0; font-size: 15.5px; }
.kt .refund { margin: .5rem 0 0; font-size: 14.5px; color: var(--muted); }

/* --- who is it for: four folded cards on a tinted band ----------------------------------- */

.kt-who { padding-top: 2.4rem; padding-bottom: 2.6rem; }
.kt-label {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.kt-who-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kt-who-cards li { padding: .95rem 1.05rem 1.05rem; }
.kt-who-cards h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .35rem;
  color: var(--accent);
}
.kt-who-cards p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); }

/* --- the four steps, the heading beside them, the filled note under the heading ----------- */

.kt-steps .kt-in {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1.05fr) minmax(0, .92fr);
  gap: 2.2rem;
  align-items: start;
}
.kt-steps h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.14;
  margin: -.2rem 0 0;
  color: var(--ink);
}
.kt-note-shot { margin: 0; }
.kt-note-shot img { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--ink) 13%, transparent)); }
.kt-step-list { list-style: none; margin: 0; padding: 0; }
.kt-step-list li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .2rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.kt-step-list li:first-child { padding-top: 0; }
.kt-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--signature);
}
.kt-step-list p { margin: 0; font-size: 17px; line-height: 1.45; max-width: 46ch; }
.kt-steps-note {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 2px solid var(--ink);
  font-size: 15px;
  color: var(--muted);
}

/* --- the objections, as short cards with real rhythm ------------------------------------- */

.kt-objections .kt-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
}
.kt-objections .kt-sheet { padding: 1.05rem 1.2rem 1.15rem; }
.kt-objections .kt-sheet:last-child { grid-column: 1 / -1; }
.kt-objections h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .35rem;
  color: var(--ink);
}
.kt-objections p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); max-width: 62ch; }

/* --- the price, one folded sheet across the measure -------------------------------------- */

.kt-pricing h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 1.3rem;
  color: var(--ink);
}
.kt-price-card {
  --kt-ear: 2.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.6rem 0;
  padding: 1.5rem 1.7rem 1.6rem;
  align-items: start;
}
.kt-price-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--muted);
}
.kt .price { margin: 0 0 .5rem; }
.kt .price s { color: var(--muted); font-size: 17px; }
.kt .price strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.kt .total { margin: 0 0 .3rem; font-size: 17px; font-weight: 600; color: var(--ink); }
.kt .renews, .kt .offer-end { margin: 0; font-size: 15px; color: var(--muted); }
.kt .offer-end { margin-top: .35rem; }
.kt-price-ask { padding-left: 2.6rem; border-left: 1px solid var(--line); }
.kt .badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 .9rem;
  padding: 0;
}
.kt .badges li {
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  padding: .28rem .6rem;
  line-height: 1.3;
}
.kt .access { margin: 1rem 0 0; font-size: 15px; color: var(--muted); max-width: 62ch; }

/* --- the questions ------------------------------------------------------------------------ */

.kt-faq .kt-in {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 3.2rem;
  align-items: start;
}
.kt-faq h2 { font-size: 32px; font-weight: 700; margin: 0; color: var(--ink); }
.kt-faq details {
  border-bottom: 1px solid var(--line);
  border-top: 0;
  padding: 0;
}
.kt-faq details:first-child { border-top: 1px solid var(--line); }
.kt-faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  padding: .85rem 2rem .85rem 0;
}
.kt-faq summary::-webkit-details-marker { display: none; }
.kt-faq summary::after {
  content: "+";
  position: absolute;
  right: .1rem;
  top: .72rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 19px;
  color: var(--accent);
}
.kt-faq details[open] summary::after { content: "\2013"; }
.kt-faq details p {
  margin: 0;
  padding: 0 2rem .95rem 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* --- the founder's note, written on a second sheet ---------------------------------------- */

.kt-founder .kt-in {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 3.2rem;
  align-items: start;
}
.kt-founder-stack { position: relative; }
/* the sheet showing behind, as if pulled off a pad */
.kt-founder-stack::before {
  content: "";
  position: absolute;
  inset: .9rem -0.8rem -0.8rem .9rem;
  background: color-mix(in srgb, var(--ink) 5%, var(--bg));
  border: 1px solid var(--line);
  transform: rotate(-1deg);
  z-index: 0;
}
.kt-founder-sheet {
  position: relative;
  z-index: 1;
  --kt-ear: 1.9rem;
  padding: 1.5rem 1.7rem 1.6rem;
}
.kt-founder h2 { font-size: 28px; font-weight: 700; margin: 0; max-width: 10ch; color: var(--ink); }
.kt-founder p { font-size: 17px; line-height: 1.62; max-width: 66ch; }
.kt-founder .sig {
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}

/* --- reading ------------------------------------------------------------------------------ */

.kt-reading h2 { font-size: 22px; font-weight: 600; margin: 0 0 .6rem; color: var(--ink); }
.kt-reading ul { list-style: none; margin: 0; padding: 0; }
.kt-reading li { border-bottom: 1px solid var(--line); }
.kt-reading li:first-child { border-top: 1px solid var(--line); }
.kt-reading a {
  display: block;
  padding: .8rem 1.6rem .8rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--accent);
  text-decoration: none;
}
.kt-reading a::after { content: "\2192"; position: absolute; right: .2rem; top: .8rem; color: var(--accent); }
/* gated: a tap on a phone fires :hover and leaves the underline stuck under the last thing
   touched, which reads as a selected row that is not selected */
@media (hover: hover) and (pointer: fine) {
  .kt-reading a:hover { text-decoration: underline; }
}

/* --- the last ask -------------------------------------------------------------------------- */

.kt-final { padding-top: 2.8rem; padding-bottom: 3rem; }
.kt-final .kt-in { max-width: 46rem; text-align: center; }
.kt-final h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 auto 1.3rem;
  max-width: 22ch;
  color: var(--ink);
}
.kt-final .kt-form-sheet { max-width: 32rem; margin: 0 auto; text-align: left; }

/* --- the footer ----------------------------------------------------------------------------- */

body.brand .site-footer {
  max-width: none;
  padding: 1.4rem var(--kt-gutter) 2.4rem;
  border-top: 0;
  font-size: 15px;
  color: var(--muted);
}
body.brand .site-footer p { width: min(100%, var(--kt-page)); margin: 0 auto; }
body.brand .site-footer .brand-mark svg { height: 1.05rem; }

/* --- the press, the focus and the one entrance -----------------------------------------------
   The craft bar is Emil Kowalski's (`.agents/skills/emil-design-eng`), applied 2026-09-11. Paper
   does not bounce and it does not slide in from the side, so this page moves in three places and
   nowhere else: a button under a thumb, a field taking focus, and the hero object being set down
   once. Nothing animates on scroll. Every transition names the property it animates; none of
   them is `all`, and only `transform` and `opacity` are animated, which skips layout and paint.
   The curve is the strong ease-out the bar asks for, because the built-in one is too weak to
   read as intentional at these durations. */

body.brand { --kt-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* the press. 140ms sits inside the 100 to 160ms the bar allows for button feedback, and 0.98 is
   the quiet end of its 0.95 to 0.98 range: a paper button presses, it does not squash. */
.kt .cta-form button.cta { transition: transform 140ms var(--kt-ease-out); }
.kt .cta-form button.cta:active { transform: scale(.98); }
/* the field's border is a colour change, so it takes `ease` and 120ms, not the entrance curve */
.kt .cta-form input { transition: border-color 120ms ease; }

/* focus, in the brand's own Ink Navy rather than the shared stylesheet's near-black. Every
   focusable thing on the page is listed: the two CTAs above, the lockup, the questions, the
   reading list and the address in the footer. */
.kt-faq summary:focus-visible,
.kt-reading a:focus-visible,
.kt .cta-form button.cta:focus-visible,
body.brand .site-header .lockup:focus-visible,
body.brand .site-footer a:focus-visible {
  outline: 2px solid var(--signature);
  outline-offset: 3px;
  border-radius: 2px;
}

/* the lockup is a 40px icon, which is under the 44px a thumb needs */
body.brand .site-header .lockup { min-height: 44px; }

/* the one entrance: the hero object, once, 180ms, four pixels. That is a sheet being set down on
   a table, which is the only motion this brand has any use for. It is deliberately the last
   thing to arrive and the only thing that moves. */
@keyframes kt-set-down {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kt-hero-note { animation: kt-set-down 180ms var(--kt-ease-out) both; }

/* the waitlist answer arrives the same way, because a line that appears from nothing under a
   button the reader just pressed reads as a page fault rather than as an answer */
@keyframes kt-say {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kt .form-message:not([hidden]) { animation: kt-say 160ms var(--kt-ease-out) both; }

/* gentler, not zero. The fades stay, because they are what says a thing arrived; the movement
   goes, because movement is what makes people ill. The press keeps its feedback as opacity, so
   the button still answers the thumb. */
@keyframes kt-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kt-hero-note { animation: kt-appear 180ms var(--kt-ease-out) both; }
  .kt .form-message:not([hidden]) { animation: kt-appear 160ms var(--kt-ease-out) both; }
  .kt .cta-form button.cta { transition: opacity 140ms ease; }
  .kt .cta-form button.cta:active { transform: none; opacity: .86; }
}

/* --- the phone: one column, the note under the headline, full-width taps --------------------- */

@media (max-width: 900px) {
  .kt > section { padding: 2.3rem var(--kt-gutter); }
  .kt-hero .kt-in, .kt-steps .kt-in, .kt-faq .kt-in, .kt-founder .kt-in { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .kt-hero h1 { font-size: 33px; max-width: none; }
  .kt-hero .subhead { font-size: 18px; max-width: none; }
  .kt-hero { padding-top: 2.2rem; }
  /* on the phone the object is the phone: it stands in the middle of the column and the sheet
     leans out from behind its right shoulder */
  .kt-phone { width: min(70%, 14rem); }
  .kt-hero-sheet { width: 64%; top: 4rem; }
  .kt-steps h2, .kt-pricing h2, .kt-faq h2, .kt-founder h2 { font-size: 26px; max-width: none; }
  .kt-note-shot { max-width: 26rem; }
  .kt-who-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kt-objections .kt-in { grid-template-columns: minmax(0, 1fr); }
  .kt-price-card { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.25rem 1.3rem; }
  .kt-price-ask { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 1.1rem; }
  .kt .price strong { font-size: 27px; }
  .kt-founder-stack::before { inset: .7rem -0.45rem -0.5rem .7rem; }
  .kt-founder-sheet { padding: 1.2rem 1.25rem 1.3rem; }
  .kt-final h2 { font-size: 25px; }
  .kt .cta-form input, .kt .cta-form button.cta { flex: 1 1 100%; min-height: 48px; }
  .kt .cta-form button.cta { width: 100%; }
}
@media (max-width: 560px) {
  .kt-who-cards { grid-template-columns: minmax(0, 1fr); }
}