/* KinKeep landing site — layout only. Every value comes from tokens.css; no new colours. */

*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--brand-ink); }
a:hover { color: var(--brand); }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */
.kk-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5); }
.kk-wrap--read { max-width: 720px; }
.kk-section { padding-block: var(--space-8); }
.kk-section--raised { background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kk-section__head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; margin-bottom: var(--space-6); }
.kk-section__head p { margin: 0; color: var(--ink-muted); }
.kk-section h2 { margin: 0; }

/* ---------- Header ---------- */
.kk-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.kk-head__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); }
.kk-logo { display: inline-flex; align-items: center; gap: var(--space-3); font: 500 23px/30px var(--font-serif); color: var(--ink); text-decoration: none; }
.kk-logo__mark { display: block; width: 32px; height: 32px; flex: none; }
.kk-logo__mark--sm { width: 22px; height: 22px; }
.kk-head__nav { display: flex; gap: var(--space-2); align-items: center; }
a.kk-btn { text-decoration: none; }

/* ---------- Hero ---------- */
.kk-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; padding-block: var(--space-8) var(--space-7); }
@media (min-width: 1000px) { .kk-hero { grid-template-columns: 1fr 1.15fr; align-items: center; } }
.kk-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.kk-eyebrow { margin: 0; font: 700 15px/20px var(--font-sans); color: var(--accent-ink); }
.kk-hero h1 { margin: 0; font: 500 clamp(34px, 5vw, 50px)/1.12 var(--font-serif); letter-spacing: -0.01em; }
.kk-lede { margin: 0; font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 560px; }
.kk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }

/* ---------- App screen mockups (decorative; see the figcaption for the real text) ----------
   Nothing inside a .kk-shot is focusable — no inputs, links or buttons — because the whole
   subtree is aria-hidden, and a focusable element inside aria-hidden is a trap. */
.kk-shot { position: relative; min-width: 0; }
.kk-shot__behind { display: none; position: absolute; top: -14px; left: 28px; right: -14px; bottom: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.kk-screen { container: screen / inline-size; position: relative; z-index: 1; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden; }

/* Hero screen runs out to the edge of the viewport, so it reads as a real window
   continuing past the page rather than a picture sitting on it. */
@media (min-width: 1000px) {
  .kk-shot__behind { display: block; }
  .kk-shot--bleed { margin-right: calc(-1 * (max(0px, (100vw - 1040px) / 2) + var(--space-5))); }
  .kk-shot--bleed .kk-screen { border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}

/* Window chrome */
.kk-screen__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--sunken); border-bottom: 1px solid var(--line); }
.kk-screen__dots { display: flex; gap: 6px; flex: none; }
.kk-screen__dots i { display: block; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-strong); opacity: 0.45; }
.kk-screen__url { flex: 1 1 auto; min-width: 0; text-align: center; padding: 2px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--raised); font: 400 12px/18px var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar + main */
.kk-screen__app { display: grid; grid-template-columns: 184px minmax(0, 1fr); }
.kk-screen__nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3); background: var(--paper); border-right: 1px solid var(--line); }
.kk-screen__brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-4); font: 500 19px/24px var(--font-serif); }
.kk-nav-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.kk-nav-item .kk-ico { width: 16px; height: 16px; }
.kk-nav-item--on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.kk-screen__nav .kk-person { margin-top: auto; }
.kk-screen__main { container: pane / inline-size; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); min-width: 0; }
@container screen (max-width: 560px) {
  .kk-screen__app { grid-template-columns: minmax(0, 1fr); }
  .kk-screen__nav { display: none; }
}

/* Screen headings */
.kk-screen__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; justify-content: space-between; }
.kk-screen__title { margin: 0; font: 500 23px/30px var(--font-serif); }
.kk-screen__sub { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.kk-screen__section { margin: 0; font: 700 14px/20px var(--font-sans); color: var(--ink-muted); }

/* Summary tiles */
.kk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: var(--space-3); margin: 0; }
.kk-tile { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.kk-tile dt { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.kk-tile dd { margin: var(--space-1) 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 18px; line-height: 24px; }

/* Transaction table inside a screen */
.kk-screen .kk-txns { border: 0; border-radius: 0; }
.kk-screen .kk-txns th, .kk-screen .kk-txns td { padding: var(--space-2) var(--space-3); }
.kk-screen .kk-txns td { font-size: 14px; line-height: 20px; }
.kk-screen .kk-txns tr:hover td { background: transparent; }
.kk-txns--screen { table-layout: auto; }
@container pane (max-width: 560px) { .kk-screen .kk-txns .kk-col-date { display: none; } }

/* Below about 460px there is no honest way to fit five columns: the amount — the one
   column that matters most — gets squeezed out and clipped by the screen's overflow. So
   stop being a table and stack each payment the way a real app would on a phone:

     Severn Trent                  −£84.20
     Water
     ✓ Verified               Receipt.pdf

   Selectors are deliberately qualified with .kk-screen, because the generic
   ".kk-screen .kk-txns td" padding rule above would otherwise out-specify them. */
@container pane (max-width: 460px) {
  .kk-screen .kk-txns--screen thead { display: none; }
  .kk-screen .kk-txns--screen,
  .kk-screen .kk-txns--screen tbody,
  .kk-screen .kk-txns--screen tr { display: block; }
  .kk-screen .kk-txns--screen tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
  }
  .kk-screen .kk-txns--screen tbody tr:first-child { border-top: 0; }
  .kk-screen .kk-txns--screen td { display: block; padding: 0; border: 0; }
  .kk-screen .kk-txns--screen .kk-col-date { display: none; }
  .kk-screen .kk-txns--screen .kk-col-payee { grid-column: 1; grid-row: 1; }
  .kk-screen .kk-txns--screen .kk-col-amount { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .kk-screen .kk-txns--screen .kk-col-status { grid-column: 1; grid-row: 2; }
  .kk-screen .kk-txns--screen .kk-col-receipt { grid-column: 2; grid-row: 2; text-align: right; }

  .kk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-tile:last-child { grid-column: 1 / -1; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 1180px) { .kk-col-date { display: none; } }
  @media (max-width: 560px) { .kk-col-receipt { display: none; } .kk-screen__nav { display: none; } .kk-screen__app { grid-template-columns: minmax(0, 1fr); } }
}

/* A decision note, as it appears under an entry */
.kk-screen__note { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--sunken); font-size: 15px; line-height: 22px; }

/* Faux form controls — spans, not inputs, so nothing is focusable */
.kk-faux { display: flex; flex-direction: column; gap: var(--space-1); }
.kk-faux__label { font: 700 14px/20px var(--font-sans); }
.kk-faux__input { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--raised); font-size: 15px; line-height: 22px; }
.kk-faux__input--amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.kk-faux__input--long { min-height: 72px; align-items: flex-start; padding-top: var(--space-2); line-height: 22px; }
.kk-faux__caret { display: inline-block; width: 1px; height: 18px; margin-left: 1px; background: var(--ink); }
.kk-screen .kk-btn { min-height: 40px; cursor: default; }
.kk-screen .kk-notice { max-width: none; padding: var(--space-3) var(--space-4); }
.kk-screen .kk-trail { display: flex; flex-direction: column; }
.kk-screen .kk-entry { padding-bottom: var(--space-4); }
.kk-screen .kk-entry__body { padding: var(--space-3); }
.kk-screen .kk-entry__what { font-size: 15px; line-height: 22px; }

/* ---------- Screen showcase section ---------- */
.kk-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 940px) { .kk-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kk-shot-figure { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; min-width: 0; }
.kk-shot-figure figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.kk-shot-figure figcaption b { font: 700 18px/26px var(--font-sans); }
.kk-shot-figure figcaption span { color: var(--ink-muted); }

/* ---------- Feature columns ---------- */
.kk-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 760px) { .kk-cols { grid-template-columns: repeat(3, 1fr); } }
.kk-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.kk-col h3 { margin: 0; font: 700 18px/26px var(--font-sans); }
.kk-col p { margin: 0; color: var(--ink-muted); }
.kk-col__ico { color: var(--brand-ink); }
.kk-col__ico .kk-ico { width: 24px; height: 24px; }

/* ---------- Pricing ---------- */
.kk-plans { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: stretch; }
@media (min-width: 800px) { .kk-plans { grid-template-columns: repeat(2, 1fr); } }
.kk-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-5); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); min-width: 0; }
.kk-plan--featured { border: 2px solid var(--brand); padding: calc(var(--space-6) - 1px); }
.kk-plan__flag { position: absolute; top: -13px; left: var(--space-6); background: var(--brand); color: var(--on-brand); font: 700 13px/18px var(--font-sans); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
.kk-plan__name { margin: 0; font: 700 18px/26px var(--font-sans); }
.kk-plan__blurb { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.kk-plan__price b { font: 500 52px/56px var(--font-serif); font-variant-numeric: tabular-nums; }
.kk-plan__price span { color: var(--ink-muted); }
.kk-plan__sub { flex: 1 0 100%; margin-top: var(--space-1); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; }
.kk-ticks li { display: flex; gap: var(--space-3); font-size: 17px; line-height: 26px; }
.kk-ticks .kk-ico { width: 20px; height: 20px; margin-top: 3px; color: var(--brand-ink); }
.kk-plan .kk-btn { justify-content: center; width: 100%; }
.kk-plan__legal { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }

/* ---------- FAQ ---------- */
.kk-faq { display: flex; flex-direction: column; }
.kk-faq__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.kk-faq__item:first-child { border-top: 1px solid var(--line); }
.kk-faq__q { margin: 0; list-style: none; font: 700 18px/26px var(--font-sans); cursor: pointer; display: flex; gap: var(--space-3); align-items: baseline; justify-content: space-between; }
.kk-faq__q::-webkit-details-marker { display: none; }
.kk-faq__q::marker { content: ""; }
.kk-faq__q .kk-ico { width: 20px; height: 20px; flex: none; color: var(--ink-muted); transition: transform 120ms ease; }
.kk-faq__item[open] .kk-faq__q .kk-ico { transform: rotate(45deg); }
.kk-faq__item p { margin: var(--space-2) 0 0; color: var(--ink-muted); max-width: 640px; }

/* ---------- Footer ---------- */
.kk-foot { border-top: 1px solid var(--line); background: var(--paper); }
.kk-foot__inner { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; padding: var(--space-6) var(--space-5); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.kk-foot__legal { display: flex; flex-direction: column; gap: var(--space-1); max-width: 620px; }
.kk-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-start; }
.kk-foot__links a, .kk-foot__links button { font-size: 13px; line-height: 18px; color: var(--brand-ink); background: none; border: 0; padding: 0; font-family: var(--font-sans); cursor: pointer; text-decoration: underline; }

/* ---------- Order summary page ---------- */
.kk-order { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.kk-order h1 { margin: 0; }
.kk-order__steps { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-order__steps [aria-current="step"] { font-weight: 700; color: var(--ink); }

.kk-order__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.kk-order__plan { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; }
.kk-order__name { margin: 0; font: 500 23px/30px var(--font-serif); }
.kk-order__for { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

.kk-order__lines { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.kk-order__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.kk-order__line dt { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-order__line dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; line-height: 22px; text-align: right; }
.kk-order__line--total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.kk-order__line--total dt { color: var(--ink); font-weight: 700; }
.kk-order__line--total dd { font-size: 19px; line-height: 26px; font-weight: 500; }
.kk-order__renews { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

.kk-order__includes { display: flex; flex-direction: column; gap: var(--space-3); }
.kk-order__includes h2 { margin: 0; }

.kk-order__pay { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.kk-order__pay .kk-btn { justify-content: center; min-height: 48px; font-size: 17px; }
.kk-order__smallprint { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-order__back { margin: 0; font-size: 15px; line-height: 22px; }

/* ---------- Dialog ---------- */
.kk-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(29, 35, 31, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); overflow-y: auto; }
.kk-dialog { width: 100%; max-width: 480px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6); }
.kk-dialog__step { display: flex; flex-direction: column; gap: var(--space-5); }
.kk-dialog h2 { margin: 0; font: 500 28px/34px var(--font-serif); }
.kk-dialog p { margin: 0; color: var(--ink-muted); }
.kk-dialog .kk-field { max-width: none; }
.kk-dialog__tag { align-self: flex-start; display: inline-flex; gap: var(--space-1); align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font: 700 13px/18px var(--font-sans); }
.kk-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kk-fineprint { font-size: 15px; line-height: 22px; }

/* ---------- Cookie banner ---------- */
.kk-cookies { position: fixed; z-index: 30; inset: auto var(--space-4) var(--space-4); margin: 0 auto; max-width: 560px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.kk-cookies h2 { margin: 0; font: 700 17px/24px var(--font-sans); }
.kk-cookies p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kk-cookies__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kk-cookies__actions .kk-btn { flex: 1 1 auto; justify-content: center; }

/* ---------- Legal pages ---------- */
.kk-prose { max-width: 720px; }
.kk-prose h1 { margin: 0 0 var(--space-3); font: 500 30px/36px var(--font-serif); }
.kk-prose h2 { margin: var(--space-6) 0 var(--space-2); font: 500 23px/30px var(--font-serif); }
.kk-prose h3 { margin: var(--space-5) 0 var(--space-1); font: 700 18px/26px var(--font-sans); }
.kk-prose p, .kk-prose li { font-size: 17px; line-height: 26px; }
.kk-prose p { margin: 0 0 var(--space-3); }
.kk-prose ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.kk-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 15px; line-height: 22px; }
.kk-prose th, .kk-prose td { text-align: left; vertical-align: top; padding: var(--space-3); border: 1px solid var(--line); }
.kk-prose th { background: var(--sunken); font: 700 14px/20px var(--font-sans); }
.kk-prose__meta { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.kk-table-scroll { overflow-x: auto; }

/* ---------- Touch ---------- */
/* Phones and tablets fire :hover on tap and hold it until you tap something else, which
   leaves a button stuck in its hover state after you come back to the page. */
@media (hover: none) {
  .kk-btn--primary:hover { filter: none; }
  .kk-btn--secondary:hover { background: var(--raised); }
  .kk-btn--quiet:hover { background: none; }
  .kk-txns tr:hover td { background: transparent; }
  a:hover { color: var(--brand-ink); }
}

/* Where hover does exist, make the primary button's hover unmistakably darker — at
   brightness(0.92) it was too close to the brand green it sits next to on the featured
   plan card, so the state change barely read. */
@media (hover: hover) {
  .kk-btn--primary:hover { filter: brightness(0.85); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }