/* The call page, on the homepage's notebook (home.css, .dir-b). Design pass
   2026-10-18. home.css gives the page grid, the sticky rail, the call card and
   the starter cards; these are the parts only this page has. */

/* the rail: the call card is this page's focal point, so it gets a little more
   room than the homepage's, where it shares the rail with the signup form */
.dir-b .c-call{padding:12px 18px 16px; margin-top:6px}
.dir-b .c-call .b-call__price b{font-size:28px}
.dir-b .c-call .b-call__btn{padding:13px 18px}
.dir-b .c-promise{display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; padding-top:12px;
  border-top:1px solid var(--rule); font-size:var(--t-small); line-height:1.5}
.dir-b .c-promise b{color:var(--text)}
.dir-b .c-promise__mark{flex:none; width:18px; height:18px; margin-top:2px; overflow:visible}
.dir-b .c-promise__mark path{fill:none; stroke:var(--hot); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* a section: its number in the notebook's margin, circled the way a note's
   number is on the homepage, then the words on the measure */
.dir-b .c-sec{display:grid; grid-template-columns:var(--numw) minmax(0,1fr); gap:0 20px;
  padding:0; margin:0 0 calc(var(--step) * 3); scroll-margin-top:24px}
.dir-b .c-sec:first-child{padding-top:10px}
.dir-b .c-sec__mark{position:relative; width:48px; height:34px; display:flex; align-items:center; justify-content:center;
  margin-top:-1px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:700;
  color:var(--hot-ink); font-variant-numeric:tabular-nums}
.dir-b .c-sec__mark svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.dir-b .c-sec__mark path{stroke:var(--hot); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.dir-b .c-sec__body{max-width:62ch; min-width:0}
.dir-b .c-sec h2{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-h2); font-weight:700;
  letter-spacing:var(--ls-tight); line-height:1.15; margin:0 0 14px}
.dir-b .c-sec p{margin:0 0 12px}

/* how it works */
.dir-b .c-price{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-lead); font-weight:700;
  color:var(--hot-ink); letter-spacing:var(--ls-tight); font-variant-numeric:tabular-nums}
.dir-b .c-checks{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px}
.dir-b .c-checks li{position:relative; padding-left:30px}
.dir-b .c-checks li::before{content:""; position:absolute; left:2px; top:.32em; width:16px; height:16px;
  border-radius:3px; background:var(--surface); border:1px solid var(--rule)}
.dir-b .c-checks li::after{content:""; position:absolute; left:7px; top:calc(.32em + 2px); width:5px; height:10px;
  border:solid var(--hot); border-width:0 2.4px 2.4px 0; transform:rotate(45deg)}

/* what to bring */
.dir-b .c-sec .b-cards{margin:18px 0 0}
.dir-b .c-all{margin:14px 0 0; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:700}
.dir-b .c-all a{text-underline-offset:3px}

/* who */
.dir-b .c-who{display:grid; grid-template-columns:88px minmax(0,1fr); gap:0 22px; align-items:start}
.dir-b .c-who img{width:88px; height:88px; border-radius:50%; display:block; box-shadow:0 0 0 1px var(--rule)}

/* questions: the question set apart from its answer, so a scan down the left
   edge reads the four questions */
.dir-b .c-faq{margin:0; display:grid; gap:22px}
.dir-b .c-faq > div{padding-top:18px; border-top:1px solid var(--rule)}
.dir-b .c-faq dt{font-family:"Archivo",system-ui,sans-serif; font-size:19px; font-weight:700; line-height:1.3; margin:0 0 6px}
.dir-b .c-faq dd{margin:0}
.dir-b .c-faq dd p:last-child{margin-bottom:0}

/* close */
.dir-b .c-sec--close{margin-bottom:calc(var(--step) * 2)}
.dir-b .c-ps{font-size:var(--t-body); padding:14px 16px; background:var(--surface); border-radius:3px; margin-top:6px}

/* the in-flow buttons: on a wide screen the rail's card is beside every
   section, so these would be a second primary in the same view; they show
   once the rail stops being sticky */
.dir-b .c-flow{display:none; margin:18px 0 6px}
.dir-b .c-btn{display:block; text-align:center; background:var(--hot); color:#FFFFFF; text-decoration:none;
  padding:13px 18px; border-radius:2px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small);
  font-weight:700; letter-spacing:var(--ls-caps); text-transform:uppercase; line-height:1.35}
.dir-b .c-btn:hover{filter:brightness(1.1)}
.dir-b .c-btn:focus-visible{outline:2px solid var(--link); outline-offset:3px}

@media (prefers-reduced-motion: no-preference){
  .dir-b.c-motion .c-sec__mark path{transition:stroke-dashoffset .5s var(--ease-out) .15s}
  .dir-b.c-motion .c-sec:not(.is-in) .c-sec__mark path{stroke-dashoffset:1}
  .dir-b .c-promise__mark path{stroke-dasharray:1; stroke-dashoffset:0}
  .dir-b.c-motion .c-promise__mark path{animation:c-tick .5s var(--ease-out) .5s both}
  @keyframes c-tick{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
}

@media (max-width:860px){
  /* on a phone the margin column would cost a fifth of the measure, so the
     number moves onto the heading's line and the words run full width */
  .dir-b .c-sec{display:block; position:relative; margin-bottom:calc(var(--step) * 2)}
  .dir-b .c-sec__mark{position:absolute; left:-4px; top:-1px; width:40px; font-size:12px}
  .dir-b .c-sec h2{padding-left:44px}
  .dir-b .c-flow{display:block}
  .dir-b .c-who{grid-template-columns:64px minmax(0,1fr); gap:0 16px}
  .dir-b .c-who img{width:64px; height:64px}
}

/* testimonials: kaidavis.com's own, verbatim (cut by elimination only), picked
   by two copy readers on 2026-10-19 at Kai's ask */
.dir-b .c-quote{margin:18px 0 6px; padding:2px 0 2px 16px; border-left:2.4px solid var(--hot)}
.dir-b .c-quote blockquote{margin:0}
.dir-b .c-quote p{margin:0; font-size:var(--t-body); line-height:1.55}
.dir-b .c-quote figcaption{margin-top:6px; font-size:var(--t-small); color:var(--text); font-weight:600}

/* what Kai has built: three short groups under the bio (2026-10-19) */
.dir-b .c-built__h{margin:16px 0 4px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:700;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--hot-ink)}
.dir-b .c-built{margin:0; padding:0 0 0 18px}
.dir-b .c-built li{margin:0 0 6px; line-height:1.5}