/* =====================================================================
   KEN PROPERTY TOOLS — SHARED STYLES (kpt.css)  ·  Design v2
   Clean, spacious, product-style interface.
   Change the brand here once and every page updates.
   Mobile-first: base styles are for phones, @media blocks widen them.
   ===================================================================== */

/* ---------- 1. Brand tokens ---------- */
:root {
  /* Neutrals do most of the work */
  --bg: #F5F5F7;           /* soft neutral page background */
  --surface: #FFFFFF;      /* cards */
  --fill: #EEEEF1;         /* input wells, tracks, segmented controls */
  --fill-2: #E4E4E9;       /* hover on fills */
  --ink: #111A2B;          /* main text: near-black navy */
  --ink-2: #4B5362;        /* secondary text */
  --muted: #868B95;        /* captions, dates, labels */
  --line: rgba(17, 26, 43, .08);   /* the few hairlines we keep */

  /* Brand accents, used sparingly */
  --navy: #13243B;         /* selected states, key numbers, primary buttons */
  --navy-soft: #E8ECF2;    /* navy tint for badges */
  --gold: #B08A4A;         /* reserved: the K monogram letter only */
  --gold-ink: #7F622F;     /* reserved; avoid in new components */
  --mono-k: #E6CF9F;       /* letter colour inside the navy K mark */

  /* Meaning */
  --good: #1F7A4F;
  --bad: #B3432F;
  --wa: #1A9A55;           /* WhatsApp */

  /* Depth: soft, layered, never heavy */
  --shadow-1: 0 1px 2px rgba(17,26,43,.04), 0 4px 18px rgba(17,26,43,.05);
  --shadow-2: 0 2px 6px rgba(17,26,43,.06), 0 16px 40px rgba(17,26,43,.09);
  --ring: 0 0 0 4px rgba(19,36,59,.14);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-lg: 24px;            /* large cards, panels */
  --r: 18px;               /* standard cards */
  --r-sm: 14px;            /* inputs */
  --pill: 999px;           /* buttons, badges */

  --wrap: 1200px;
  --gutter: 20px;
  --gap: 16px;
  --ease: cubic-bezier(.25,.1,.25,1);
}
@media (min-width: 900px) { :root { --gutter: 40px; --gap: 20px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  letter-spacing: -0.011em;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0 0 .45em; letter-spacing: -0.028em; }
:focus-visible { outline: 3px solid rgba(19,36,59,.35); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
::selection { background: var(--navy-soft); }

.kpt-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.kpt-main { padding-bottom: 64px; }
.kpt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kpt-eyebrow { font: 600 15px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink-2); margin: 0 0 12px; }
.kpt-h1 { font-size: clamp(36px, 8.5vw, 72px); }
.kpt-h2 { font-size: clamp(26px, 5vw, 40px); }
.kpt-lead { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.45; color: var(--ink-2); max-width: 34em; letter-spacing: -0.015em; }
.kpt-muted { color: var(--muted); font-size: 15px; }

/* ---------- 3. Header ---------- */
.kpt-header { position: sticky; top: 0; z-index: 20; background: rgba(245,245,247,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.kpt-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; }
.kpt-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kpt-logo__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: var(--mono-k); display: grid; place-items: center; font: 700 15px/1 var(--font-display); }
.kpt-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.kpt-logo__name { font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
.kpt-logo__by { font-size: 12px; color: var(--muted); letter-spacing: 0; }
.kpt-menu-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; }
.kpt-menu-btn:hover { background: var(--fill); }
.kpt-menu-btn span { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
.kpt-header.is-open .kpt-menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
.kpt-header.is-open .kpt-menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.kpt-nav { display: none; width: 100%; flex-direction: column; padding: 8px 0 20px; }
.kpt-header.is-open .kpt-nav { display: flex; animation: kpt-in .3s var(--ease); }
.kpt-nav a { text-decoration: none; padding: 12px 0; font: 600 24px/1.2 var(--font-display); letter-spacing: -0.02em; }
.kpt-nav a[aria-current] { color: var(--navy); }

@media (min-width: 760px) {
  .kpt-header__in { min-height: 60px; }
  .kpt-menu-btn { display: none; }
  .kpt-nav { display: flex; flex-direction: row; width: auto; padding: 0; gap: 2px; }
  .kpt-nav a { padding: 7px 14px; border-radius: var(--pill); font: 500 14px/1 var(--font); letter-spacing: -0.01em; color: var(--ink-2); transition: background .2s, color .2s; }
  .kpt-nav a:hover { background: rgba(17,26,43,.05); color: var(--ink); }
  .kpt-nav a[aria-current] { background: rgba(17,26,43,.06); color: var(--ink); }
}

/* ---------- 4. Breadcrumb ---------- */
.kpt-breadcrumb { font-size: 13px; color: var(--muted); padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kpt-breadcrumb a { text-decoration: none; }
.kpt-breadcrumb a:hover { color: var(--ink); }
.kpt-crumb-sep { color: #C3C6CC; }

/* ---------- 5. Page sections ---------- */
.kpt-hero { padding: 48px 0 28px; }
.kpt-section { padding: 56px 0 0; }
.kpt-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kpt-section__head h2 { margin: 0; }
.kpt-section__head a { font-size: 15px; color: var(--navy); text-decoration: none; white-space: nowrap; font-weight: 500; }
.kpt-section__head a:hover { text-decoration: underline; }
.kpt-section__sub { color: var(--ink-2); font-size: 17px; margin: -8px 0 24px; max-width: 40em; }
.kpt-band { padding: 80px 0 16px; }

@media (min-width: 900px) {
  .kpt-hero { padding: 88px 0 40px; }
  .kpt-section { padding: 96px 0 0; }
  .kpt-section__head { margin-bottom: 28px; }
  .kpt-band { padding: 140px 0 40px; }
}

/* Homepage hero with Ken's portrait.
   Phones: a small round head-and-shoulders photo + name, so the tools stay high.
   Desktop: text left, waist-up portrait right in a quiet white frame
   (the photo has a white studio background, so the frame blends with it).
   Photos are cropped originals only — never retouched or regenerated. */
.kpt-hero__grid { display: grid; gap: 22px; }
.kpt-hero__text .kpt-h1 { max-width: 11em; }
.kpt-hero__text .kpt-lead { margin-bottom: 0; }
.kpt-hero__ken { margin: 0; display: flex; align-items: center; gap: 12px; }
.kpt-hero__ken img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.kpt-hero__ken figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.kpt-hero__name { font-weight: 650; font-size: 15px; }
.kpt-hero__role { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) {
  .kpt-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; align-items: end; }
  .kpt-hero__text { padding-bottom: 72px; }
  body[data-page-type="home"] .kpt-hero { padding-top: 56px; }
  .kpt-hero__ken { flex-direction: column; align-items: stretch; gap: 0; background: transparent; }
  /* No frame. The portrait sits in a soft pool of white light: a large
     radial glow (pure white where the photo is, fading into the page grey)
     makes the photo's white studio background disappear, so Ken stands in
     the hero's whitespace rather than inside a card. The photo itself is
     untouched — no masks, filters or recolouring. */
  .kpt-hero__ken picture { display: block; position: relative; z-index: 0; }
  /* feather only the outer white edges of the studio background into the glow */
  .kpt-hero__ken img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 0, #000 7%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-composite: intersect; }
  .kpt-hero__ken picture::before { content: ""; position: absolute; inset: -130px -150px -170px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, #fff 66%, rgba(255,255,255,0) 100%); }
  .kpt-hero__ken img { width: 100%; height: auto; aspect-ratio: 400 / 500; border-radius: 0; box-shadow: none; object-fit: cover; object-position: center top; }
  .kpt-hero__ken figcaption { position: relative; z-index: 1; padding: 6px 0 0; text-align: center; }
  .kpt-hero__text { position: relative; z-index: 1; }
  .kpt-hero__name { font-size: 16px; }
  .kpt-hero__role { font-size: 14px; }
}
@media (min-width: 1100px) { .kpt-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: 72px; } }

/* ---------- 6. Journey cards (homepage) ---------- */
.kpt-journeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.kpt-journey { text-align: left; font: inherit; color: inherit; background: var(--surface); border: 0; border-radius: var(--r); padding: 18px 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 140px; box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.kpt-journey:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.kpt-journey:active { transform: scale(.985); }
.kpt-journey__n { font: 600 13px/1 var(--font); color: var(--muted); margin-bottom: auto; padding-bottom: 18px; letter-spacing: 0; }
.kpt-journey__label { font: 650 18px/1.15 var(--font-display); letter-spacing: -0.022em; }
.kpt-journey__hint { font-size: 13px; color: var(--muted); line-height: 1.35; letter-spacing: -0.005em; }
.kpt-journey.is-on { box-shadow: 0 0 0 2px var(--navy), var(--shadow-2); }
@media (min-width: 760px) {
  .kpt-journeys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 56px; }
  .kpt-journey { min-height: 200px; padding: 28px 26px; border-radius: var(--r-lg); }
  .kpt-journey__label { font-size: 26px; }
  .kpt-journey__hint { font-size: 15px; }
}

.kpt-path { margin-top: var(--gap); background: var(--surface); border-radius: var(--r-lg); padding: 24px 20px; box-shadow: var(--shadow-1); scroll-margin-top: 80px; animation: kpt-in .45s var(--ease); }
.kpt-path__eyebrow { font: 600 15px/1.3 var(--font); color: var(--muted); margin: 0 0 4px; }
.kpt-path__h { font-size: clamp(26px, 4vw, 36px); margin-bottom: 20px; }
.kpt-path__steps { display: grid; gap: 0; }
.kpt-path__steps .kpt-card { box-shadow: none; background: transparent; border-radius: 0; padding: 18px 0; border-top: 1px solid var(--line); transform: none; }
.kpt-path__steps a.kpt-card:hover .kpt-card__title { color: var(--navy); }
.kpt-path__help { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.kpt-path__help a { color: var(--wa); font-weight: 600; text-decoration: none; }
.kpt-path__help a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .kpt-path { padding: 40px 44px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
  .kpt-path__eyebrow, .kpt-path__h { grid-column: 1; }
  .kpt-path__steps { grid-column: 2; grid-row: 1 / span 3; }
  .kpt-path__help { grid-column: 1; grid-row: 3; margin-top: 0; }
}
@keyframes kpt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 7. Tool cards ---------- */
.kpt-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .kpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1000px) { .kpt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kpt-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 80%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 20px; margin: 0 calc(var(--gutter) * -1); scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.kpt-scroller::-webkit-scrollbar { display: none; }
.kpt-scroller > * { scroll-snap-align: start; }
@media (min-width: 900px) { .kpt-scroller { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: var(--gap); } }

.kpt-card { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border-radius: var(--r); padding: 22px 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.kpt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.kpt-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.kpt-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kpt-card__cat { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: -0.005em; }
.kpt-card__date { font-size: 13px; color: var(--muted); }
.kpt-card__title { font: 650 20px/1.2 var(--font-display); letter-spacing: -0.022em; transition: color .2s; }
.kpt-card__short { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.kpt-card__arrow { color: var(--muted); font-size: 18px; line-height: 1; padding-top: 4px; transition: transform .3s var(--ease), color .3s; }
a.kpt-card:hover .kpt-card__arrow { transform: translateX(3px); color: var(--navy); }
.kpt-card__step { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.kpt-card.is-soon { background: rgba(255,255,255,.5); box-shadow: none; }
.kpt-card.is-soon .kpt-card__title { color: var(--ink-2); }
.kpt-card.is-soon .kpt-card__short { color: var(--muted); }
.kpt-badge { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--pill); background: var(--fill); color: var(--ink-2); letter-spacing: 0; }
.kpt-badge--out { background: var(--navy-soft); color: var(--navy); }
.kpt-empty { color: var(--muted); font-size: 16px; }
@media (min-width: 900px) { .kpt-card { padding: 28px 26px; border-radius: var(--r-lg); } .kpt-card__title { font-size: 22px; } }

/* Lists: for long sets of tools. Rows separated by space and a hairline,
   not cards. Use .kpt-list (1 column) or .kpt-list--2 (2 columns on desktop). */
.kpt-list { display: grid; border-bottom: 1px solid var(--line); }
.kpt-list .kpt-card { background: transparent; box-shadow: none; border-radius: 0; padding: 20px 0; border-top: 1px solid var(--line); gap: 16px; }
.kpt-list a.kpt-card:hover { transform: none; box-shadow: none; }
.kpt-list a.kpt-card:hover .kpt-card__title { color: var(--navy); }
.kpt-list .kpt-card__title { font-size: 19px; }
.kpt-list .kpt-card.is-soon { background: transparent; }
@media (min-width: 900px) {
  .kpt-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-bottom: 0; }
  .kpt-list--2 .kpt-card { padding: 26px 0; }
  .kpt-list--2 .kpt-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kpt-list .kpt-card__title { font-size: 21px; }
}

/* ---------- 8. Key-number tiles ---------- */
.kpt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .kpt-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } }
.kpt-tile { background: var(--surface); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-1); }
.kpt-tile__label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpt-tile__value { font: 700 26px/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--navy); }
.kpt-tile__note { font-size: 13px; color: var(--ink-2); }
@media (min-width: 900px) { .kpt-tile { padding: 24px; border-radius: var(--r-lg); } .kpt-tile__value { font-size: 34px; } }

/* ---------- 9. Result (calculators) ----------
   The number is the hero: very large, navy, lots of air around it. */
.kpt-result { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 28px 22px 10px; box-shadow: var(--shadow-1); }
.kpt-result__label { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 10px; }
.kpt-result__value { font: 700 clamp(56px, 16vw, 104px)/.95 var(--font-display); letter-spacing: -0.05em; color: var(--navy); margin: 0 0 16px; transition: opacity .2s; }
.kpt-result__note { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 28em; }
.kpt-result__rows { margin-top: 28px; }
.kpt-result__row { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 16px; }
.kpt-result__row span:first-child { color: var(--ink-2); }
.kpt-result__row span:last-child { font-weight: 600; }

/* ---------- 10. Inputs: simple, roomy, product-like ---------- */
.kpt-form { background: var(--surface); border-radius: var(--r-lg); padding: 24px 20px; display: grid; gap: 28px; box-shadow: var(--shadow-1); margin: 0; }
.kpt-field { display: grid; gap: 10px; }
.kpt-field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.kpt-field__help { font-size: 14px; color: var(--muted); font-weight: 400; }
.kpt-field__help output { color: var(--navy); font-weight: 600; font-size: 17px; }
.kpt-input, .kpt-select { width: 100%; height: 58px; padding: 0 18px; font: 600 22px var(--font-display); letter-spacing: -0.02em; color: var(--ink); background: var(--fill); border: 0; border-radius: var(--r-sm); -webkit-appearance: none; appearance: none; transition: background .2s, box-shadow .2s; }
.kpt-input:hover, .kpt-select:hover { background: var(--fill-2); }
.kpt-input:focus, .kpt-select:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--navy), var(--ring); }
.kpt-money { position: relative; }
.kpt-money::before { content: "$"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 600 22px var(--font-display); }
.kpt-money .kpt-input { padding-left: 36px; }

/* Segmented control */
.kpt-segment { display: flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: var(--r-sm); }
.kpt-segment label { flex: 1; position: relative; }
.kpt-segment input { position: absolute; opacity: 0; pointer-events: none; }
.kpt-segment span { display: block; text-align: center; padding: 11px 8px; border-radius: 11px; font-size: 16px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.kpt-segment span:hover { color: var(--ink); }
.kpt-segment input:checked + span { background: var(--surface); color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(17,26,43,.08), 0 3px 8px rgba(17,26,43,.08); }
.kpt-segment input:focus-visible + span { box-shadow: var(--ring); }

/* Slider */
.kpt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; }
.kpt-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: var(--fill); }
.kpt-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--fill); }
.kpt-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--navy); }
.kpt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 6px rgba(17,26,43,.2); transition: transform .2s var(--ease); }
.kpt-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 6px rgba(17,26,43,.2); }
.kpt-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.kpt-range:focus-visible { outline: none; }
.kpt-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(19,36,59,.18), 0 2px 6px rgba(17,26,43,.2); }

/* Calculator layout: ONE instrument panel.
   Inputs and result live together in a single white surface, divided by a
   hairline, so the tool reads as one product rather than a stack of cards.
   The CTA sits quietly under the result, inside the panel. */
.kpt-tool { display: grid; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.kpt-tool .kpt-form { background: transparent; box-shadow: none; border-radius: 0; padding: 26px 20px 30px; align-content: start; }
.kpt-tool__out { border-top: 1px solid var(--line); padding: 30px 20px 26px; }
.kpt-tool .kpt-result { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }

/* The CTA inside a tool: present, calm, secondary to the result */
.kpt-tool .kpt-cta { background: transparent; box-shadow: none; border-radius: 0; padding: 22px 0 0; margin-top: 8px; border-top: 1px solid var(--line); }
.kpt-tool .kpt-cta__h { font-size: 17px; letter-spacing: -0.015em; margin-bottom: 4px; }
.kpt-tool .kpt-cta__p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.kpt-tool .kpt-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.kpt-tool .kpt-btn--ghost { background: transparent; color: var(--ink-2); padding: 0 6px; }
.kpt-tool .kpt-btn--ghost:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .kpt-tool .kpt-cta__actions .kpt-btn--wa { flex: 1 1 100%; }
  .kpt-tool .kpt-cta__actions .kpt-btn--ghost { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .kpt-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .kpt-tool .kpt-form { padding: 48px 44px; gap: 36px; }
  .kpt-tool__out { border-top: 0; border-left: 1px solid var(--line); padding: 48px 44px 40px; display: flex; flex-direction: column; }
  .kpt-tool .kpt-cta { margin-top: auto; padding-top: 24px; }
  .kpt-tool .kpt-result { margin-bottom: 32px; }
}
@media (min-width: 1100px) { .kpt-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* Calculator pages: a modest hero so the tool is the first big thing */
body[data-page-type="calculator"] .kpt-hero { padding: 32px 0 24px; }
body[data-page-type="calculator"] .kpt-hero .kpt-h1 { font-size: clamp(32px, 6.5vw, 52px); }
body[data-page-type="calculator"] .kpt-hero .kpt-lead { font-size: clamp(17px, 2vw, 20px); }
@media (min-width: 900px) { body[data-page-type="calculator"] .kpt-hero { padding: 56px 0 36px; } }

/* ---------- 11. Tables & bars ---------- */
.kpt-table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.kpt-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.kpt-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.kpt-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.kpt-table tr:last-child td { border-bottom: 0; }
.kpt-table td:first-child { white-space: nowrap; font-weight: 500; }
.kpt-table .num { text-align: right; white-space: nowrap; }
.kpt-table--compare th:not(:first-child), .kpt-table--compare td:not(:first-child) { text-align: right; }
.kpt-table--compare td:first-child { color: var(--ink-2); }
@media (min-width: 900px) { .kpt-table-wrap { border-radius: var(--r-lg); } .kpt-table th, .kpt-table td { padding-left: 26px; padding-right: 26px; } }

.kpt-bars { display: grid; gap: 18px; background: var(--surface); border-radius: var(--r); padding: 22px 20px; box-shadow: var(--shadow-1); }
.kpt-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.kpt-bar__name { font-size: 15px; font-weight: 500; }
.kpt-bar__note { color: var(--muted); font-weight: 400; font-size: 13px; }
.kpt-bar__val { font-size: 15px; font-weight: 600; grid-row: 1; grid-column: 2; }
.kpt-bar__track { grid-column: 1 / -1; height: 8px; background: var(--fill); border-radius: 8px; overflow: hidden; }
.kpt-bar__fill { display: block; height: 100%; background: #C6CBD3; border-radius: 8px; }
.kpt-bar.is-self .kpt-bar__fill { background: var(--navy); }
.kpt-bar.is-self .kpt-bar__name, .kpt-bar.is-self .kpt-bar__val { color: var(--navy); font-weight: 650; }
@media (min-width: 900px) { .kpt-bars { padding: 32px 30px; border-radius: var(--r-lg); } }

.kpt-up { color: var(--good); }
.kpt-down { color: var(--bad); }

/* ---------- 12. Trust components ---------- */
/* KEN'S TAKE — signature component.
   Editorial, not a card: a strong navy rule, a byline column, and the
   insight set in large type. Use once per page, after the main result/content.
   Markup:
   <aside class="kpt-take">
     <div class="kpt-take__head">
       <img class="kpt-take__photo" src="../../assets/images/brand/ken-headshot.jpg" alt="Ken Tan">
       <p class="kpt-take__label">Ken's take</p>
       <p class="kpt-take__by">Ken Tan · Property agent since 2007</p>
     </div>
     <p>The insight. One to three short paragraphs.</p>
   </aside> */
.kpt-take { display: grid; gap: 18px; padding: 26px 0 0; border-top: 2px solid var(--navy); margin: 0; }
.kpt-take__head { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; align-content: start; }
.kpt-take__photo { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.kpt-take__label { font-weight: 650; font-size: 15px; color: var(--ink); margin: 0; line-height: 1.3; }
.kpt-take__by { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; }
/* older markup without a head: label directly inside .kpt-take */
.kpt-take > .kpt-take__label { display: flex; align-items: center; gap: 12px; }
.kpt-take > .kpt-take__label::before { content: "K"; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--mono-k); display: grid; place-items: center; font: 700 17px/1 var(--font-display); }
.kpt-take > p:not([class]) { font: 500 clamp(21px, 3vw, 30px)/1.38 var(--font-display); letter-spacing: -0.025em; color: var(--ink); margin: 0; max-width: 30em; text-wrap: pretty; }
@media (min-width: 900px) {
  .kpt-take { grid-template-columns: 300px minmax(0, 1fr); column-gap: 56px; row-gap: 0; padding-top: 36px; }
  .kpt-take > p:not([class]) + p:not([class]) { margin-top: 20px; }
  .kpt-take__head, .kpt-take > .kpt-take__label { grid-column: 1; grid-row: 1 / span 20; align-self: start; }
  .kpt-take > p:not([class]) { grid-column: 2; }
}

.kpt-asof { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.kpt-asof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.kpt-sources { font-size: 13px; color: var(--muted); margin-top: 14px; }
.kpt-disclaimer { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 40px; max-width: 48em; }

/* ---------- 13. CTA + buttons ---------- */
.kpt-cta { background: var(--surface); border-radius: var(--r-lg); padding: 26px 22px; margin-top: 16px; box-shadow: var(--shadow-1); }
.kpt-cta__h { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.025em; margin: 0 0 8px; }
.kpt-cta__p { color: var(--ink-2); font-size: 16px; margin: 0 0 20px; max-width: 34em; }
.kpt-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The homepage band: a large, quiet, centred panel */
.kpt-band .kpt-cta { text-align: center; padding: 0; margin: 0; background: transparent; box-shadow: none; border-radius: 0; }
.kpt-band .kpt-cta__h { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.035em; max-width: 14em; margin: 0 auto 14px; }
.kpt-band .kpt-cta__p { font-size: clamp(17px, 2vw, 20px); margin: 0 auto 28px; }
.kpt-band .kpt-cta__actions { justify-content: center; }


.kpt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: var(--pill); font: 600 16px var(--font); letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--ease), background .2s, filter .2s; }
.kpt-btn:active { transform: scale(.97); }
.kpt-btn--wa { background: var(--wa); color: #fff; }
.kpt-btn--wa:hover { filter: brightness(1.07); }
.kpt-btn--primary { background: var(--navy); color: #fff; }
.kpt-btn--primary:hover { filter: brightness(1.2); }
.kpt-btn--ghost { background: var(--fill); color: var(--ink); }
.kpt-btn--ghost:hover { background: var(--fill-2); }
@media (max-width: 480px) { .kpt-cta__actions .kpt-btn { flex: 1 1 100%; } }

/* ---------- 14. Guides (long reading) ---------- */
.kpt-prose { max-width: 720px; }
.kpt-prose h2 { font-size: clamp(26px, 4vw, 34px); margin-top: 1.6em; }
.kpt-prose h3 { font-size: 22px; margin-top: 1.4em; }
.kpt-prose p, .kpt-prose li { font-size: 18px; line-height: 1.7; color: #2A3242; letter-spacing: -0.012em; }
.kpt-prose a { color: var(--navy); text-underline-offset: 3px; }
.kpt-toc { background: var(--surface); border-radius: var(--r); padding: 20px 24px; font-size: 16px; box-shadow: var(--shadow-1); }
.kpt-toc p { font-weight: 600; margin: 0 0 8px; }
.kpt-toc ol { margin: 0; padding-left: 20px; }
.kpt-toc a { color: var(--ink-2); }

/* ---------- 15. Footer ---------- */
.kpt-footer { border-top: 1px solid var(--line); padding: 48px 0 56px; margin-top: 80px; font-size: 15px; background: var(--bg); }
.kpt-main--flush { padding-bottom: 0; }
.kpt-main--flush + .kpt-footer { margin-top: 64px; }
.kpt-footer__top { display: grid; gap: 28px; padding-bottom: 28px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.kpt-footer__name { font: 700 20px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0 0 8px; }
.kpt-footer__by { color: var(--ink-2); margin: 0; max-width: 30em; font-size: 15px; line-height: 1.5; }
.kpt-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.kpt-footer__links a { text-decoration: none; color: var(--ink); font-size: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.kpt-footer__links a:hover { color: var(--navy); }
.kpt-footer__legal { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.6; max-width: 60em; }
.kpt-footer__legal:first-of-type { color: var(--ink-2); font-weight: 500; }
.kpt-footer__legal a { color: var(--ink-2); }
@media (min-width: 760px) {
  .kpt-footer { padding: 56px 0 64px; }
  .kpt-footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 48px; }
  .kpt-footer__links { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: flex-end; }
  .kpt-footer__links a { border-top: 0; padding: 0; font-size: 15px; color: var(--ink-2); }
}

/* ---------- 16. Template-only notice ---------- */
.kpt-template-note { background: #FFF7E6; color: #6B4E14; border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; margin-top: 20px; max-width: 48em; }

/* ---------- 17. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}