/* Additions to the marketing pages' own styles (scripts/import-site.py links this from index.html and why.html). */

/* Hero headline: the same type as /contact-us's (Newsreader, tight leading, italic 30%), in the light theme's accent */
.hero-h, .dir-b .hero-h{font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; letter-spacing:-.015em}
.hero-h .n30{font-style:italic; color:var(--accent)}

/* Business cards are plain blocks until their segment pages exist: no link hover */
div.biz:hover .photo img{transform:none}
div.biz:hover h3{text-decoration:none}

/* The contact form (site.js builds it into [data-contact-form] on the home page, /why and /contact-us) and its
   confirmation. Colours are fixed, not the section's theme, so the card reads the same on a dark band. */
.cform-card, .book-done{--raised:#FFFFFF; --fg:#1C1917; --muted:#57534E; --line:#E7E2DA; --line-strong:#D6CFC4; --bg:#FAF7F2;
  --accent:#C2410C; --accent-hover:#9A3412; --on-accent:#FFFFFF; --pos:#166534; --wa:#166534; color:var(--fg)}
.cform-card{position:relative; isolation:isolate}
.cform-card::before{content:""; position:absolute; inset:-1px; border-radius:14px; z-index:-1;
  background:linear-gradient(160deg, rgba(232,163,61,.55), rgba(194,65,12,.25) 40%, rgba(245,239,230,.06) 70%)}
form.cform, .book-done{background:var(--raised); border-radius:13px;
  box-shadow:0 1px 2px rgba(28,25,23,.06),0 24px 60px -24px rgba(20,17,15,.45)}
form.cform{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:clamp(22px,3vw,34px); margin:0; text-align:left}
form.cform .full{grid-column:1 / -1}
.cform-head{display:flex; flex-direction:column; gap:6px; margin-bottom:4px}
.cform-head h2{font-family:'Newsreader','Iowan Old Style',Georgia,serif; font-weight:400; font-size:clamp(26px,2.6vw,32px);
  line-height:1.1; margin:0; color:var(--fg)}
.cform-head p{margin:0; color:var(--muted); font-size:15px; line-height:1.5}
form.cform label{display:flex; flex-direction:column; gap:6px; font:500 13px/1.4 'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; color:var(--fg)}
form.cform label .opt{font-weight:400; color:var(--muted)}
form.cform input, form.cform select{min-height:50px; border:1px solid var(--line-strong); border-radius:6px; background:var(--bg);
  color:var(--fg); font:400 16px 'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; padding:0 14px; width:100%; box-sizing:border-box;
  transition:border-color .15s, background .15s, box-shadow .15s; appearance:none; -webkit-appearance:none}
form.cform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2357534E' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
form.cform input:hover, form.cform select:hover{border-color:#B7AEA2}
form.cform input:focus, form.cform select:focus{outline:none; border-color:var(--accent); background:#FFFFFF; box-shadow:0 0 0 3px rgba(194,65,12,.14)}
form.cform label.consent{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:13px; line-height:1.5; color:var(--muted)}
form.cform label.consent input{width:18px; height:18px; min-height:0; margin:2px 0 0; padding:0; flex:none; accent-color:var(--accent); appearance:auto; -webkit-appearance:checkbox}
form.cform label.consent a{color:var(--fg)}
form.cform .btn{width:100%; min-height:56px; font-size:17px; font-weight:600; background:var(--accent); color:var(--on-accent); border-color:transparent}
form.cform .btn:hover{background:var(--accent-hover)}
form.cform .btn svg{transition:transform .2s}
form.cform .btn:hover svg{transform:translateX(3px)}
form.cform .btn[disabled]{opacity:.7; cursor:progress}
.cform-msg{grid-column:1 / -1; margin:0; font-size:14px; line-height:1.5; color:var(--accent-hover)}
.cform-msg:empty{display:none}
@media (max-width:720px){form.cform{grid-template-columns:1fr}}

/* ...and the confirmation that replaces it once it's sent */
.book-done{padding:clamp(24px, 3.4vw, 36px);
  display:flex; flex-direction:column; gap:18px; outline:none; animation:bookDoneIn .35s ease both}
.book-done .tick{width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--pos) 12%, transparent); color:var(--pos)}
.book-done h3{font-family:var(--display); font-weight:var(--dw); font-size:clamp(24px, 2.6vw, 30px); line-height:1.15; margin:0}
.book-done .lead{margin:0; font-size:16px; line-height:1.55; color:var(--muted)}
.book-done .lead strong{color:var(--fg); font-weight:600; white-space:nowrap}
.book-done ol{list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:12px}
.book-done li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-size:15px; line-height:1.45}
.book-done li b{width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center;
  font:600 12px var(--ui); color:var(--fg)}
.book-done .acts{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:4px}
@keyframes bookDoneIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.book-done{animation:none}}
@media (max-width:720px){.book-done .acts .btn{width:100%}}

/* Hero: Costonomy AI as a chat app (ChatGPT-like). The conversation itself is index.html's script: question bubbles
   (.q-bubble), answers (.answer), the thinking dots (.typing) and the composer it types into. */
.s-hero .demo{background:#FFFFFF; color:#1C1917; border:1px solid #E7E2DA; border-radius:20px; padding:0; min-height:0;
  justify-content:flex-start; box-shadow:0 1px 2px rgba(28,25,23,.05), 0 40px 80px -40px rgba(28,25,23,.4)}
.gpt-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #F0ECE6}
.gpt-model{display:inline-flex; align-items:center; gap:10px; font:600 15px var(--ui); color:#1C1917}
.gpt-model .chev{color:#8A847D; margin-left:-4px}
.gpt-av, .s-hero .thread .answer::before, .s-hero .typing::before{width:28px; height:28px; border-radius:50%; flex:none;
  background:#1C1917 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath fill='%23E8A33D' d='M19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E") center / 17px no-repeat}
.gpt-ctx{display:inline-flex; align-items:center; gap:8px; min-width:0; padding:6px 12px; border-radius:999px; background:#F4F2EE;
  font:500 12.5px/1.2 var(--ui); color:#57534E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gpt-ctx i{width:7px; height:7px; border-radius:50%; background:#22C55E; flex:none; animation:pulse 1.8s infinite}
.s-hero .chat{padding:4px 20px 14px; gap:10px}
.s-hero .thread{height:500px; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40px); mask-image:linear-gradient(to bottom, transparent 0, #000 40px)}
.s-hero .thread-in{gap:22px; padding-bottom:6px}
/* your turn: a soft bubble on the right */
.s-hero .q-bubble{background:#F1EEE9; color:#1C1917; font:400 15px/1.45 var(--ui); padding:10px 16px; border-radius:20px; max-width:80%}
/* its turn: plain text beside the avatar, no card */
.s-hero .thread .answer{position:relative; background:none; border:0; box-shadow:none; border-radius:0; padding:2px 0 0 42px; gap:12px}
.s-hero .thread .answer::before{content:""; position:absolute; left:0; top:0}
.s-hero .a-head{min-height:24px; align-items:center; justify-content:flex-start; font-size:12.5px}
.s-hero .a-head b{display:none}
.s-hero .a-sum{font-size:15.5px; line-height:1.65}
/* thinking */
.s-hero .typing{position:relative; align-self:flex-start; background:none; border:0; box-shadow:none; border-radius:0;
  padding:10px 0 10px 42px; gap:5px}
.s-hero .typing::before{content:""; position:absolute; left:0; top:0}
.s-hero .typing i{width:7px; height:7px; background:#A8A29E}
/* the composer: a pill with + and a round send */
.s-hero .composer{min-height:56px; padding:8px 8px 8px 10px; border-radius:28px; border:1px solid #E7E2DA; background:#FFFFFF;
  box-shadow:0 2px 12px -4px rgba(28,25,23,.12); font-size:15.5px; gap:8px}
.s-hero .composer:hover{border-color:#E7E2DA}
.s-hero .composer .plus{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#57534E; flex:none}
.s-hero .composer .send{width:36px; height:36px; border-radius:50%; background:#1C1917; color:#FFFFFF}
.gpt-note{margin:0; text-align:center; font-size:11.5px; line-height:1.4; color:#8A847D}
@media (max-width:960px){
  .s-hero .demo{margin-inline:0; margin-bottom:16px; border-radius:18px; padding:0}
}
@media (max-width:720px){
  .gpt-top{padding:12px 14px}
  .s-hero .chat{padding:4px 12px 12px}
  .s-hero .thread{height:440px}
  .s-hero .q-bubble{font-size:14px}
  .s-hero .thread .answer{padding-left:36px}
  .s-hero .thread .answer::before, .s-hero .typing::before, .gpt-av{width:26px; height:26px; background-size:15px}
  .s-hero .a-sum{font-size:14px; line-height:1.6}
  .s-hero .typing{padding-left:36px}
  .gpt-ctx{max-width:55%}
}