/* /contact (contact/build_contact.py). Oct 31 (owner: "Our contact page is still the old coldkit.com contact page, but the
   form works. Can you design out the new contact page ... make sure that you do not mess up any backend ... Use Mobbin MCP
   extensively"). On top of pricing/pricing.css (the sub-pages' shared world: parchment, the grid rules, the header, the
   dark CTA, the end band with its framed painting, the footer), the page's own pieces, after Mobbin's best contact pages:
   the title and a ruled list of other ways in beside the form (Savor, Trawelt, In Common With, Mother Design), the topic
   asked first as chips (Skiff, Base44, Dovetail: "we'll route your message"), a thank-you in the same card, by name
   (Calendly, Superhuman). The form is a letter on the site's stationery: the Run it sheet's paper, fields and gold focus
   (sections/runit.css), sealed in wax once sent (s14 flair). Oct 31 (owner, of the stamp on its corner: "the stamp doesn't look
   great visually, I think we can remove it"): gone, with the postmark across it. */

/* ── the first screen: the title and the ways in on the left, the letter on the right ── */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) min(calc(704px * var(--s,1)),800px);grid-template-rows:auto 1fr;
  grid-template-areas:"intro card" "dir card";column-gap:calc(104px * var(--s,1));align-items:start}
.ct-intro{grid-area:intro;padding-top:calc(30px * var(--s,1))}
.ct-hero .pr-eyebrow{text-align:left;margin-bottom:22px}
.ct-title{margin:0;font:400 clamp(46px,5.3vw,80px)/.98 var(--f-display);letter-spacing:-.025em;color:var(--ink);font-feature-settings:"dlig" 1}
.ct-hero .pr-lede{max-width:23em;margin-top:26px}
.ct-promise{display:flex;align-items:center;gap:12px;margin:28px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.ct-promise i,.ct-dir__k i{flex:none;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* the other ways in: a ruled list (In Common With's, Mother Design's), each line a link with its arrow */
.ct-dir{grid-area:dir;margin:calc(64px * var(--s,1)) 0 0;max-width:430px}
.ct-dir__h{margin:0 0 14px;font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.5}
.ct-dir dl{margin:0;border-top:1px solid var(--rule)}
.ct-dir dl>div{border-bottom:1px solid var(--rule)}
.ct-dir dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct-dir dd{margin:0}
.ct-dir a{display:grid;grid-template-columns:96px minmax(0,1fr) 14px;align-items:center;gap:16px;padding:15px 0;color:var(--ink);text-decoration:none}
.ct-dir__k{font-size:13px;letter-spacing:.02em;color:var(--muted)}
.ct-dir__v{font-size:16px;line-height:1.35;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  justify-self:start;padding-bottom:1px;transition:background-size .45s var(--ease-out)}
.ct-dir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.45;transition:transform .35s var(--ease-out),opacity .25s var(--ease-fade)}
@media (hover:hover) and (pointer:fine){
  .ct-dir a:hover .ct-dir__v{background-size:100% 1px}
  .ct-dir a:hover svg{transform:translateX(3px);opacity:.9}
}
.ct-dir a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.ct-dir a:focus-visible .ct-dir__v{background-size:100% 1px}

/* ── the letter: a sheet of the Run it sheet's paper on a second ── */
.ct-card{grid-area:card;position:relative;margin-top:calc(8px * var(--s,1))}
.ct-under{position:absolute;inset:0;border-radius:6px;background:#ece5d8;
  box-shadow:0 0 0 1px rgba(201,168,106,.2),0 24px 50px -30px rgba(36,24,14,.4);transform:translate(10px,12px) rotate(1.4deg);transform-origin:50% 100%}
.ct-sheet{position:relative;display:flex;flex-direction:column;padding:46px 48px 42px;overflow:visible;border-radius:6px;background:var(--sheet);
  box-shadow:0 0 0 1px rgba(201,168,106,.3),inset 0 1px 0 rgba(255,255,255,.7),0 36px 80px -36px rgba(36,24,14,.42),0 10px 26px -14px rgba(36,24,14,.2)}
.ct-sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 85% 0%,rgba(230,195,138,.16),transparent 60%),radial-gradient(90% 70% at 0% 100%,rgba(168,127,60,.07),transparent 70%)}

/* ── the form: the topic first, then who, then the note ── */
.ct-form{display:grid;gap:22px;transition:opacity .32s var(--ease-fade),transform .5s var(--ease-out)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ct-topics{margin:0;padding:0;border:0;min-width:0}
.ct-topics legend{padding:0;float:left;width:100%}
.ct-ml{display:block;font-size:14.5px;line-height:1.4;color:var(--text)}
.ct-ml em{margin-left:7px;font-style:normal;font-size:13px;color:var(--muted)}
.ct-chips{clear:both;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.ct-chip{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ct-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-chip span{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px 0 14px;border-radius:var(--r);background:#fbfaf6;
  box-shadow:inset 0 0 0 1px rgba(38,27,27,.16);font-size:15px;line-height:1;white-space:nowrap;color:var(--ink);
  transition:background-color .3s var(--ease-fade),color .3s var(--ease-fade),box-shadow .3s var(--ease-fade),transform .2s var(--ease-out)}
/* the site's lozenge (the pricing picker's chosen mark): an outline at rest, the gold one when chosen */
.ct-chip i{flex:none;width:7px;height:7px;border:1px solid rgba(38,27,27,.34);transform:rotate(45deg);transition:background-color .3s var(--ease-fade),border-color .3s var(--ease-fade),transform .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ct-chip:hover span{box-shadow:inset 0 0 0 1px rgba(38,27,27,.32)}
  .ct-chip:hover i{border-color:rgba(38,27,27,.6)}
}
.ct-chip input:active+span{transform:scale(.97)}
.ct-chip input:checked+span{background:#2b221c;color:#f6efe2;box-shadow:inset 0 0 0 1px #2b221c,0 8px 16px -10px rgba(36,24,14,.55)}
.ct-chip input:checked+span i{background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.15)}
.ct-chip input:focus-visible+span{box-shadow:inset 0 0 0 1.4px var(--gold),0 0 0 3px rgba(201,168,106,.24)}
.ct-chip input:checked:focus-visible+span{box-shadow:inset 0 0 0 1.4px var(--gold),0 0 0 3px rgba(201,168,106,.3)}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.ct-fl{min-width:0}
.ct-field{display:flex;align-items:center;margin-top:8px;height:50px;padding:0 16px;border-radius:var(--r);background:#fbfaf6;
  box-shadow:inset 0 0 0 1px rgba(38,27,27,.16);transition:box-shadow .25s var(--ease-fade)}
@media (hover:hover) and (pointer:fine){.ct-field:hover{box-shadow:inset 0 0 0 1px rgba(38,27,27,.3)}}
.ct-field:focus-within,.ct-field:focus-within:hover{box-shadow:inset 0 0 0 1.4px var(--gold),0 0 0 3px rgba(201,168,106,.22)}
.ct-field input,.ct-field textarea{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:0;background:none;
  font:inherit;font-size:16px;line-height:1.4;color:var(--ink);-webkit-appearance:none;appearance:none}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:rgba(38,27,27,.36);opacity:1}
/* a browser's autofill keeps the paper (no blue or yellow wash) */
.ct-field input:-webkit-autofill,.ct-field input:-webkit-autofill:hover,.ct-field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 60px #fbfaf6 inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s}
.ct-field--area{height:auto;align-items:stretch;padding:13px 16px}
.ct-field textarea{display:block;min-height:118px;height:118px;resize:vertical;line-height:1.5}
.ct-fl.is-bad .ct-field,.ct-fl.is-bad .ct-field:hover{box-shadow:inset 0 0 0 1.4px rgba(154,59,34,.62)}
.ct-topics.is-bad .ct-chip span{box-shadow:inset 0 0 0 1px rgba(154,59,34,.5)}
.ct-err{margin:7px 0 0;font-size:13.5px;line-height:1.45;color:#9a3b22}
.ct-err:empty{display:none}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
/* the label is the button's own text, as on the old page ("Send it →"), in the CTA's gilt (pricing.css .pr-cta span) */
.ct-send{min-width:148px;font-size:15px;line-height:1;white-space:nowrap;color:#f0d9a0;text-shadow:0 .56px 1.12px rgba(0,0,0,.25)}
.ct-send.is-ready{--cta-h:.32}
.ct-send[disabled]{cursor:progress}
.ct-fine{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ct-err--send{margin-top:-6px}

/* ── sent: the note leaves the sheet, the wax seal is pressed on it, a line back by name ── */
.ct-sent{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:24px 0 8px}
.ct-sent[hidden]{display:none}
.ct-card.done .ct-form{position:absolute;inset:46px 48px 42px;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .32s var(--ease-fade),transform .5s var(--ease-out),visibility 0s .32s}
.ct-seal{width:84px;height:84px;filter:drop-shadow(0 6px 10px rgba(80,20,14,.3)) drop-shadow(0 1px 2px rgba(60,14,10,.3))}
.ct-sent__h{margin:22px 0 0;font:400 clamp(34px,3.2vw,46px)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--ink);font-feature-settings:"dlig" 1}
.ct-sent__h:focus{outline:none}
.ct-sent__p{margin:16px auto 0;max-width:25em;font-size:17px;line-height:1.55;color:var(--text);text-wrap:balance}
.ct-sent .pr-cta{margin-top:28px}
.ct-sent .pr-cta[hidden]{display:none}
.ct-sent__sig{margin:30px 0 0;font:300 22px/1 var(--f-display);color:var(--ink);opacity:.72}
.ct-sent__review{margin:22px 0 0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gilt)}
.ct-sent__review[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .ct-sent.show .ct-seal{animation:ct-press .8s cubic-bezier(.2,1.25,.4,1) .12s both}
  .ct-sent.show .ct-sent__h,.ct-sent.show .ct-sent__p,.ct-sent.show .pr-cta,.ct-sent.show .ct-sent__sig{animation:ct-rise .9s var(--ease-out) both}
  .ct-sent.show .ct-sent__h{animation-delay:.42s}
  .ct-sent.show .ct-sent__p{animation-delay:.5s}
  .ct-sent.show .pr-cta{animation-delay:.58s}
  .ct-sent.show .ct-sent__sig{animation-delay:.66s}
}
@keyframes ct-press{0%{opacity:0;transform:scale(1.9) rotate(-28deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes ct-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ct-seal{transform:rotate(-8deg)}}

/* ── the booking sheet for a sales note (window.dmOpenBooking: our /15min page in a same-origin frame), in the Run it
   sheet's world: the softened page under it, the parchment sheet with its gold hairline, the site's ease ── */
.ct-book{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,0px)) 20px max(20px,env(safe-area-inset-bottom,0px))}
.ct-book[open]{display:flex}
.ct-book__veil{position:absolute;inset:0;background:rgba(24,17,12,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .52s var(--ease-fade)}
.ct-book__panel{position:relative;width:min(1000px,100%);height:min(700px,100%);border-radius:6px;overflow:hidden;background:var(--sheet);
  box-shadow:0 0 0 1px rgba(201,168,106,.3),0 40px 90px -30px rgba(10,6,3,.62),0 12px 30px -12px rgba(10,6,3,.4);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .5s var(--ease-fade),transform .9s var(--ease-out)}
.ct-book.is-in .ct-book__veil{opacity:1}
.ct-book.is-in .ct-book__panel{opacity:1;transform:none}
.ct-book__panel iframe{display:block;width:100%;height:100%;border:0}
.ct-book__x{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r);
  background:rgba(247,244,238,.92);box-shadow:0 0 0 1px rgba(38,27,27,.12);color:var(--ink);cursor:pointer;transition:background-color .2s var(--ease-fade)}
.ct-book__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.ct-book__x:hover{background:#fff}
.ct-book__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ct-book__veil,.ct-book__panel{transition:none}}

/* ── narrower: one column (the phone canvas's margins, as the rest of the page), the letter between the title and the ways in ── */
@media (max-width:1100px) and (min-width:1024px){
  .ct-sheet{padding:40px 36px 36px}
  .ct-card.done .ct-form{inset:40px 36px 36px}
}
@media (max-width:1023px){
  .ct-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"intro" "card" "dir"}
  .ct-intro{padding-top:0}
  .ct-title{font-size:clamp(44px,12vw,64px)}
  .ct-hero .pr-lede{margin-top:18px;font-size:17px}
  .ct-promise{margin-top:20px;font-size:14.5px}
  .ct-card{margin-top:52px}
  .ct-under{transform:translate(3px,7px) rotate(.7deg)}
  .ct-sheet{padding:30px 20px 24px}
  .ct-card.done .ct-form{inset:30px 20px 24px}
  .ct-form{gap:18px}
  .ct-chips{gap:7px}
  .ct-chip span{height:38px;padding:0 13px 0 12px;font-size:14.5px;gap:9px}
  .ct-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .ct-field:not(.ct-field--area){height:48px}
  .ct-field textarea{min-height:112px;height:112px}
  .ct-actions{gap:12px 16px}
  .ct-actions .pr-cta{flex:1 1 100%}
  .ct-fine{flex:1 1 100%;text-align:center}
  .ct-dir{margin-top:56px;max-width:none}
  .ct-sent__p{font-size:16px}
}