/*
 * /keyro — Keyro, Properkey's AI real estate assistant.
 *
 * Built on service_pages.css (section skeleton, .svc-h2, .svc-btn) and
 * home_page.css (the navy-band service cards, .home-svc-*), both loaded
 * before this file by keyro/index. This file adds the light hero, the card
 * grid and its calls to action, the two steps, the disclaimer, the roadmap
 * and the print rules. Everything is scoped under .keyro-page except three
 * rules keyed off it with :has(): the scroll padding on html, and the two
 * print rules that reach the navbar and the chat button.
 *
 * Nothing on this page uses [data-reveal]: the page is captured as a
 * full-page PDF, and reveal content stays at opacity 0 until it scrolls into
 * view, with no print rule to bring it back.
 *
 * Colours follow .claude/skills/brand: flat #FF4F00 on the primary buttons
 * (19px/700, the only size white on that orange passes), #C23A00 for orange
 * text on light, navy #14306e for the small chips, #2563eb for the secondary
 * button and links. The navy lattice appears only in the card bands, which
 * home_page.css draws.
 */

.keyro-page {
  --keyro-navy: #14306e;
  --keyro-ink: #1e293b;
  --keyro-body: #475569;
  --keyro-muted: #64748b;
  --keyro-line: #e2e8f0;
  --keyro-hairline: #eef2f7;
  --keyro-orange-text: #c23a00;
  --keyro-orange-text-hover: #a53100;
  --keyro-blue: #2563eb;
  --keyro-blue-hover: #1d4ed8;
}

/* navbar_wizard is fixed at the top (64px on a phone, 80px from md up). A
   control that takes keyboard focus above the viewport (Shift+Tab) can be
   scrolled to the top edge, depending on the browser, where the bar would
   cover it completely; this keeps it in view below the bar (WCAG 2.2,
   2.4.11 Focus Not Obscured). */
html:has(.keyro-page) {
  scroll-padding-top: 96px;
}

.keyro-page a:focus-visible,
.keyro-page button:focus-visible {
  outline: 2px solid var(--keyro-navy);
  outline-offset: 3px;
}

/* ================================ hero ================================
   White, under navbar_wizard (transparent at the top, white once scrolled),
   so its dark links read from the first frame. The top padding clears that
   bar: 64px tall on a phone, 80px from md up. */

.keyro-hero {
  padding: 136px clamp(24px, 5vw, 64px) 104px;
  background: #ffffff;
}

/* 1.2fr keeps the two buttons on one line down to 1024px. */
.keyro-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}

/* The brand hero scale: one big moment at 48px, 800. */
.keyro-hero-title {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--keyro-ink);
}

.keyro-hero-sub {
  margin: 10px 0 0;
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--keyro-navy);
}

.keyro-hero-lede {
  margin: 22px 0 0;
  max-width: 32em;
  font-size: 17px;
  line-height: 1.65;
  color: var(--keyro-body);
  text-wrap: pretty;
}

.keyro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* One height for the pair, whatever each label's size. */
.keyro-btn {
  box-sizing: border-box;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  font-family: inherit;
}

/* Secondary: the brand's blue on white, filling on hover. 17px, not the
   primary's 19px; blue on white passes at any size. */
.keyro-btn--call {
  font-size: 17px;
  font-weight: 700;
  color: var(--keyro-blue);
  background: #ffffff;
  border: 2px solid var(--keyro-blue);
}

.keyro-btn--call:hover {
  color: #ffffff;
  background: var(--keyro-blue-hover);
  border-color: var(--keyro-blue-hover);
}

.keyro-hero-note {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--keyro-body);
}

/* The art's off-white ground (about #f3f3f2) sits inside a white mat, so it
   reads as a framed picture rather than a stray box. The mat's soft shadow
   lifts it off the white hero. */
.keyro-hero-figure {
  justify-self: end;
  width: 100%;
  max-width: 452px;
  margin: 0;
}

.keyro-hero-panel {
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--keyro-line);
  border-radius: 24px;
  box-shadow:
    0 28px 56px -28px rgba(20, 48, 110, 0.45),
    0 2px 8px rgba(15, 23, 42, 0.06);
}

.keyro-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* =============================== services ===============================
   The cards are home's (.home-svc-card and friends, home_page.css). Two
   columns because these descriptions are three or four sentences long. */

.keyro-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* An odd card count leaves the last card alone on its row. That card is "Ask
   Keyro", the catch-all after the services, so it takes the whole row,
   and its description keeps a readable measure rather than running the full
   width. One column on phones makes this a no-op there. */
.keyro-card-grid > .keyro-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.keyro-card-grid > .keyro-card:last-child:nth-child(odd) .keyro-card-desc {
  max-width: 68ch;
}

/* Home's titles are short enough to hold one line. "Keyro for escrow
   questions" isn't on the narrowest phones, so it may wrap to a second line,
   which the 96px band has room for. It wraps only once it fills the band's
   content box, which ends where the band's 92px motif zone begins. */
.keyro-card .home-svc-title {
  white-space: normal;
  text-wrap: balance;
}

/* So no motif may be wider than that zone less its 16px inset (76px). The
   escrow art borrowed from home (130x82) comes out about 98px wide at home's
   62px height, and on cards about 327-349px wide (375px phones, 768px
   tablets) it ran into the one-line title. At 70px it scales down inside its
   box and clears the title by at least 6px. The sell, buy and ask art is
   55-73px wide, so only the ask motif shrinks, by 3px. */
.keyro-card .home-svc-motif {
  max-width: 70px;
}

.keyro-card .home-svc-body {
  padding: 22px 26px 18px;
}

.keyro-card-desc {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--keyro-body);
  text-wrap: pretty;
}

/* Home's card link, given a 44px hit area. The chat buttons share the look;
   the bubble icon in place of the arrow says they open the chat. */
.keyro-card-cta {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--keyro-orange-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-underline-offset: 4px;
}

/* The CTA row takes over home's margin-top: auto, so it still sits at the
   card's bottom. The renters and landlords card has two links: they share
   the row and wrap on narrow cards, each with its own 44px hit area and 24px
   between them so a thumb can't land on both. */
.keyro-card-ctas {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
}

.keyro-card-ctas .keyro-card-cta {
  margin-top: 0;
}

.keyro-card-cta:hover {
  color: var(--keyro-orange-text-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

.keyro-card-cta i {
  font-size: 13px;
  transition: transform 0.2s var(--svc-ease);
}

.keyro-card-cta:hover i {
  transform: translateX(3px);
}

/* ============================= how it works ============================= */

.keyro-how {
  padding: 88px clamp(24px, 5vw, 64px) 56px;
  background: #ffffff;
}

.keyro-steps {
  --keyro-step-gap: clamp(32px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--keyro-step-gap);
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.keyro-step-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

/* Navy chip, the brand's colour for small badges. */
.keyro-step-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  background: var(--keyro-navy);
  border-radius: 999px;
}

/* Runs on across the column gap and stops 16px short of the second chip,
   the same space it leaves after the first. */
.keyro-step-rule {
  flex: 1 1 auto;
  height: 2px;
  margin-right: calc(16px - var(--keyro-step-gap));
  background: var(--keyro-line);
}

/* The service pages' step-title size (.svc-hiw-step-title). */
.keyro-step-text {
  margin: 0;
  max-width: 30em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--keyro-ink);
  text-wrap: pretty;
}

/* ============================== disclaimer ==============================
   Closes the white band that "How it works" opens. */

.keyro-disclaimer {
  padding: 0 clamp(24px, 5vw, 64px) 88px;
  background: #ffffff;
}

.keyro-disclaimer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--keyro-line);
}

/* 36em holds about 70-75 characters a line at 14px, the body measure, which
   matters most here: this is the page's smallest text and it carries the
   licence and recording disclosures. The hero note is capped the same way. */
.keyro-disclaimer-text {
  margin: 0;
  max-width: 36em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--keyro-body);
}

.keyro-disclaimer-text a,
.keyro-roadmap-list a {
  color: var(--keyro-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.keyro-disclaimer-text a:hover,
.keyro-roadmap-list a:hover {
  color: var(--keyro-blue-hover);
}

/* =============================== roadmap ===============================
   One bounded panel per status. "Live now" spans the row and splits its
   eleven lines into three labelled groups; the two shorter panels share the
   row below. The status mark changes shape as well as colour (filled, half,
   outline), so it doesn't lean on colour alone. */

.keyro-roadmap-panel {
  padding: 28px clamp(20px, 3vw, 32px) 26px;
  background: #ffffff;
  border: 1px solid var(--keyro-line);
  border-radius: 16px;
}

.keyro-roadmap-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--keyro-ink);
}

.keyro-roadmap-status i {
  font-size: 12px;
}

.keyro-roadmap-status--live i {
  color: var(--keyro-orange-text);
}

.keyro-roadmap-status--progress i {
  color: var(--keyro-navy);
}

.keyro-roadmap-status--planned i {
  color: var(--keyro-muted);
}

.keyro-roadmap-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 3vw, 40px);
  margin-top: 22px;
}

.keyro-roadmap-group-title {
  margin: 0 0 4px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--keyro-navy);
  border-bottom: 1px solid var(--keyro-line);
}

.keyro-roadmap-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.keyro-roadmap-list li {
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--keyro-body);
  border-bottom: 1px solid var(--keyro-hairline);
  text-wrap: pretty;
}

.keyro-roadmap-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* start, not stretch: "In progress" holds one line against Planned's four,
   and stretched it was mostly an empty box. */
.keyro-roadmap-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin-top: 20px;
}

.keyro-roadmap-next .keyro-roadmap-list {
  margin-top: 8px;
}

/* Ends the page on something to do: the last chat button, since phones have
   no floating chat button. */
.keyro-roadmap-cta {
  display: flex;
  margin-top: 40px;
}

/* ============================== responsive ============================== */

/* Stacked, each group's label needs more space above it (from the group
   before) than the 27px below it (to its own items), or it reads as the
   previous group's footer. */
@media (max-width: 1023px) {
  .keyro-roadmap-groups {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
  }
}

/* Tablet portrait: the copy column can't hold both buttons beside a full
   panel, and a stacked hero left the right half empty. So the panel shrinks
   to sit beside the title and lede, and the buttons and the note take the
   full width below. The copy wrapper steps out of the grid (display:
   contents; a plain div, so no semantics are lost) to let its children take
   their own areas. */
@media (min-width: 768px) and (max-width: 1023px) {
  .keyro-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "title   figure"
      "sub     figure"
      "lede    figure"
      "actions actions"
      "note    note";
    align-items: start;
    column-gap: 40px;
    row-gap: 0;
  }

  .keyro-hero-copy {
    display: contents;
  }

  .keyro-hero-title {
    grid-area: title;
  }

  .keyro-hero-sub {
    grid-area: sub;
  }

  .keyro-hero-lede {
    grid-area: lede;
  }

  .keyro-hero-actions {
    grid-area: actions;
  }

  .keyro-hero-note {
    grid-area: note;
  }

  .keyro-hero-figure {
    grid-area: figure;
    align-self: center;
    max-width: 260px;
  }

  .keyro-hero-panel {
    padding: 10px;
    border-radius: 20px;
  }
}

@media (max-width: 767px) {
  .keyro-hero {
    padding: 104px 20px 72px;
  }

  .keyro-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .keyro-hero-lede {
    font-size: 16px;
  }

  .keyro-hero-figure {
    justify-self: center;
    max-width: 340px;
  }

  .keyro-hero-panel {
    padding: 10px;
    border-radius: 20px;
  }

  .keyro-card-grid,
  .keyro-steps,
  .keyro-roadmap-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .keyro-card .home-svc-body {
    padding: 20px 20px 16px;
  }

  /* Number beside its line rather than above it. */
  .keyro-step {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .keyro-step-head {
    margin-bottom: 0;
  }

  .keyro-step-rule {
    display: none;
  }

  .keyro-step-text {
    font-size: 17px;
  }

  .keyro-how {
    padding: 60px 20px 40px;
  }

  .keyro-disclaimer {
    padding: 0 20px 64px;
  }
}

/* Full-width buttons where the hero pair would otherwise wrap unevenly; the
   closing button matches them, in easy reach of the thumb. */
@media (max-width: 520px) {
  .keyro-hero-actions .keyro-btn,
  .keyro-roadmap-cta .keyro-btn {
    width: 100%;
  }
}

/* ================================ motion ================================
   The page has no entrance animation. What moves is hover feedback, and that
   stops under reduced motion, card lift included. */

@media (prefers-reduced-motion: reduce) {
  .keyro-page .svc-card,
  .keyro-page .svc-btn,
  .keyro-card-cta i {
    transition: none;
  }

  .keyro-page .svc-card:hover,
  .keyro-card-cta:hover i {
    transform: none;
  }
}

/* ================================ print ================================
   The page gets captured as a full-page PDF. Without these the navy bands
   would drop their background and take the white card titles with them, the
   fixed navbar would repeat over the top of every page, and the floating
   chat button would sit over the bottom of every page. */

@media print {
  .keyro-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body:has(.keyro-page) #navbar {
    position: absolute;
  }

  body:has(.keyro-page) #support-chat-container {
    display: none;
  }

  .keyro-page .svc-card:hover {
    transform: none;
  }

  /* Keep each section heading on the page with what it heads. */
  .keyro-page .svc-h2,
  .keyro-page .svc-section-head {
    break-after: avoid;
    page-break-after: avoid;
  }

  .keyro-card,
  .keyro-step,
  .keyro-disclaimer-inner,
  .keyro-roadmap-next .keyro-roadmap-panel,
  .keyro-roadmap-group {
    break-inside: avoid;
  }

  /* The roadmap starts its own page, so a capture of the hero, the cards and
     the disclaimer can stop at the page before it. */
  .keyro-roadmap {
    break-before: page;
  }

  /* Stacked, "Live now" can outgrow a page, and Chrome won't break between
     the rows of a grid: it moved all three groups to the next page and left
     the "Live now" heading alone above an empty panel. As a flex column the
     panel breaks between groups, each label kept with its items. */
  .keyro-roadmap-groups {
    display: flex;
    flex-direction: column;
    row-gap: 44px;
  }

  .keyro-roadmap-status,
  .keyro-roadmap-group-title {
    break-after: avoid;
  }
}