/* Knowledge Vault page: styles only this page needs. Shared look comes from c.css. */

/* Hero: a knowledge base your team and your AI can both trust. The same layout as the Ad-hoc fixes and Digital Home heroes,
   so the pages match: words on the left, the picture on the right with its edges fading into the paper. */
.kv-hero{padding-top:clamp(140px,12vw,180px)}
.kv-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.kv-hero-text{grid-column:1 / span 6;grid-row:1;position:relative;z-index:1}
.kv-title{margin:0;font:300 clamp(44px,5.2vw,76px)/1.05 var(--serif);letter-spacing:-.04em;color:#1b3832;text-wrap:balance}
.kv-lede{max-width:520px;margin:clamp(24px,2.4vw,32px) 0 0;font:300 clamp(20px,1.6vw,23px)/1.4 var(--serif);letter-spacing:-.015em;color:var(--deep);text-wrap:pretty}
.kv-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.kv-actions .f-btn{min-height:50px;padding:0 20px;font-size:var(--type-action)}
.kv-hero-art{grid-column:7 / -1;grid-row:1;margin:0 calc(var(--gutter) * -.5) 0 calc(var(--gap) * -1)}
.kv-hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 18%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.js .kv-title,html.js .kv-lede,html.js .kv-actions{animation:f-rise 1.1s var(--ease) both}
  html.js .kv-title{animation-delay:.06s}
  html.js .kv-lede{animation-delay:.2s}
  html.js .kv-actions{animation-delay:.28s}
  html.js .kv-hero-art{animation:kv-fade 1.6s var(--ease) .2s both}
}
@keyframes kv-fade{0%{opacity:0;transform:translateY(12px)}}
@media (max-width:960px){
  .kv-hero-text,.kv-hero-art{grid-column:1 / -1;grid-row:auto}
  .kv-hero-text{max-width:600px}
  .kv-hero-art{margin:40px calc(var(--gutter) * -1) 0}
}
@media (max-width:760px){
  .kv-hero{padding-top:136px}
  .kv-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .kv-lede{font-size:21px}
  .kv-actions{display:grid;gap:12px}
  .kv-actions .f-btn{width:100%;min-height:52px;font-size:15px}
  .kv-hero-art{margin-top:32px}
}

/* Section 2 (id="one-home"): one calm reading column, the same as Digital Home Section 3. The quote sits apart at the end
   in the look of "Stop paying me and nothing breaks." on the Digital Home page (large serif, deep green rule on the left). */
.kv-one-home{margin-top:var(--section)}
.kv-one-home-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.kv-one-home-text{grid-column:1 / span 6;max-width:600px}
.kv-one-home-text h2{margin:0 0 32px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.kv-one-home-text p{margin:0 0 22px;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
/* The quote sits in the right column, level with the story, as on the Ad-hoc fixes page. */
.kv-one-home-grid{align-items:center}
.kv-one-home-quote{grid-column:8 / -1;grid-row:1;margin:0}
@media (max-width:960px){
  .kv-one-home-text,.kv-one-home-quote{grid-column:1 / -1;grid-row:auto}
  .kv-one-home-quote{margin-top:48px}
}
@media (max-width:760px){
  .kv-one-home-text h2{margin-bottom:24px}
  .kv-one-home-text p{font-size:17px}
  .kv-one-home-quote{margin-top:40px}
}

/* Section 3 (id="rules"): four ledger rows with thin lines, copied from the Digital Home Section 2 rows
   (.dh-parts, .dh-part in digital-home.css): rule name on the left, the line on the right. */
.kv-rules{margin-top:var(--section)}
.kv-rules-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.kv-rules-intro{grid-column:1 / span 6;max-width:600px}
.kv-rules-intro h2{margin:0 0 24px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.kv-rules-intro p{margin:0;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.kv-rule-rows{grid-column:1 / -1;list-style:none;margin:var(--space-within) 0 0;padding:0;border-bottom:1px solid var(--line)}
.kv-rule{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.kv-rule h3{grid-column:1 / span 4;margin:0;display:grid;gap:6px}
.kv-rule-name{font:300 clamp(21px,1.75vw,25px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--deep);text-wrap:balance}
.kv-nowrap{white-space:nowrap}
.kv-rule p{grid-column:6 / -1;max-width:640px;margin:0;font-size:17px;line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
@media (max-width:960px){
  .kv-rules-intro{grid-column:1 / -1}
  .kv-rule h3{grid-column:1 / span 4}
  .kv-rule p{grid-column:5 / -1}
}
@media (max-width:760px){
  .kv-rule-rows{margin-top:36px}
  .kv-rule{grid-template-columns:1fr;row-gap:10px;padding:22px 0}
  .kv-rule h3,.kv-rule p{grid-column:1 / -1}
  .kv-rule-name{font-size:22px}
  .kv-rule p{font-size:17px}
  .kv-rules-intro p{font-size:17px}
}

/* Section 4 (id="what-you-get"): a split like Digital Home Section 4 (.dh-build in digital-home.css): the heading left,
   staying in place while you scroll, and three short paragraphs right in the body style. No rows, no list. */
.kv-get{margin-top:var(--section)}
.kv-get-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.kv-get-title{grid-column:1 / span 5;position:sticky;top:120px;margin:0;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.kv-get-text{grid-column:7 / -1;max-width:600px}
.kv-get-text p{margin:0 0 22px;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.kv-get-text p:last-child{margin-bottom:0}
@media (max-width:960px){
  .kv-get-title{grid-column:1 / -1;position:static;margin-bottom:32px}
  .kv-get-text{grid-column:1 / -1}
}
@media (max-width:760px){
  .kv-get-title{margin-bottom:24px}
  .kv-get-text p{font-size:17px}
}

/* Section 5 (id="prices"): the Digital Home Section 5 price rows (c.css .f-todo-* rows, Digital Home row spacing),
   with two columns here, team size left and price right, kept side by side on a phone too. Then the same quiet small print. */
.kv-prices{margin-top:var(--section);scroll-margin-top:104px}
.kv-prices-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.kv-prices-intro{grid-column:1 / span 6;max-width:600px}
.kv-prices-intro h2{margin:0 0 24px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.kv-prices-intro p{margin:0;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.kv-price-rows{margin-top:var(--space-within)}
.kv-price-rows .f-todo-row{grid-template-columns:minmax(0,1fr) auto;padding:28px 0}
.kv-price-rows .f-todo-price{grid-column:auto;justify-self:end;text-align:right;margin-top:0}
/* Small print: smaller and lighter than the row text. #6b716d is the lightest grey that still passes AA contrast on the paper. */
.kv-prices-small{grid-column:1 / span 8;margin:28px 0 0;font-size:14px;line-height:1.6;color:var(--small-print);text-wrap:pretty}
@media (max-width:960px){
  .kv-prices-intro,.kv-prices-small,.kv-more-line{grid-column:1 / -1}
}
@media (max-width:760px){
  .kv-price-rows{margin-top:36px}
  .kv-price-rows .f-todo-row{grid-template-columns:minmax(0,1fr) auto;padding:22px 0}
  .kv-price-rows .f-todo-job{margin-bottom:0}
  .kv-prices-intro p{font-size:17px}
}

/* Section 5 closing line: one quiet line after the small print, styled like the last line on the Ad-hoc fixes page (.ah-more-line). */
.kv-more-line{grid-column:1 / -1;margin:clamp(56px,6vw,80px) 0 0;font:300 clamp(19px,1.5vw,21px)/1.45 var(--serif);letter-spacing:-.01em;color:var(--deep);text-wrap:pretty}
@media (max-width:760px){
  .kv-more-line{margin-top:48px;font-size:19px}
}

/* Gate 6 Oct (Simon): no fade from invisible. */
@keyframes kv-fade{0%{transform:translateY(12px)}}