/* ===== ForecourtIQ — Book a Demo + FAQs (light pages) ===== */

.page{ background: var(--paper); }

/* light page hero */
.phead{ position:relative; padding-top: 76px; background:
  radial-gradient(900px 500px at 85% -20%, rgba(22,166,224,.10), transparent 60%),
  linear-gradient(180deg, #fff, var(--paper)); }
.phead__inner{ padding-block: clamp(48px, 7vw, 92px) clamp(8px, 2vw, 24px); }
.phead .eyebrow{ color: var(--blue); }
.phead h1{ font-size: clamp(2.3rem, 5vw, 3.6rem); margin-top:14px; }
.phead p.lead{ margin-top:18px; max-width: 56ch; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.85rem; color: var(--muted-2); margin-bottom:22px; }
.crumbs a:hover{ color: var(--ink); }

/* ===== Book a Demo layout ===== */
.demo-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items:start; padding-bottom: clamp(56px, 8vw, 110px); }

.expect{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:18px; }
.expect li{ display:flex; gap:14px; align-items:flex-start; }
.expect .ic{ flex:none; width:38px; height:38px; border-radius:10px; background: #fff; border:1px solid var(--line); display:grid; place-items:center; color: var(--blue); box-shadow: var(--shadow-sm); }
.expect .ic svg{ width:19px; height:19px; }
.expect b{ display:block; font-size:1.02rem; color: var(--ink); }
.expect span{ color: var(--muted); font-size:.95rem; }

.founder{ margin-top:36px; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.founder p{ font-size:1rem; color:#2b4763; font-style:italic; }
.founder .by{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.founder .av{ width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden; background: linear-gradient(135deg, var(--ink), var(--blue)); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:600; }
.founder .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder .by b{ font-size:.95rem; color: var(--ink); }
.founder .by span{ font-size:.84rem; color: var(--muted-2); display:block; }

/* form card */
.form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow); position: sticky; top: 96px; }
.form-card h2{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.form-card > p{ color: var(--muted); margin-top:8px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.82rem; font-weight:600; color: var(--ink); }
.field label .req{ color: var(--blue); }
.field input, .field select, .field textarea{
  font-family: var(--sans); font-size:.98rem; color: var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius: 11px; background: var(--paper);
  transition: border-color .18s, box-shadow .18s, background .18s; width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue); background:#fff; box-shadow: 0 0 0 4px rgba(45,123,244,.12); }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }
.form-card .btn{ width:100%; margin-top:22px; }
.form-fine{ text-align:center; font-size:.82rem; color: var(--muted-2); margin-top:14px; }
.form-error{ text-align:center; font-size:.9rem; color: var(--live); margin-top:14px; background: rgba(255,75,75,.07); border:1px solid rgba(255,75,75,.25); border-radius: 11px; padding:11px 14px; }
.form-error a{ color: var(--live); font-weight:600; text-decoration: underline; }

.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-card.done .form-grid, .form-card.done > .btn, .form-card.done > .form-fine, .form-card.done > h2, .form-card.done > p{ display:none; }
.form-success .tickbig{ width:64px; height:64px; border-radius:50%; background: rgba(31,184,119,.12); color: var(--ok); display:grid; place-items:center; margin:0 auto 18px; }
.form-success .tickbig svg{ width:30px; height:30px; }
.form-success h2{ margin-bottom:10px; }
.form-success p{ color: var(--muted); max-width:34ch; margin:0 auto; }

/* trust row */
.trust-row{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; }
.trust-row .pill{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color: var(--muted); font-weight:500; }
.trust-row .pill .d{ width:7px; height:7px; border-radius:50%; background: var(--ok); }

/* ===== FAQs ===== */
.faq-wrap{ display:grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(28px,5vw,64px); align-items:start; padding-bottom: clamp(56px,8vw,110px); }
.faq-aside{ position: sticky; top: 100px; }
.faq-aside h2{ font-size: clamp(1.6rem,2.6vw,2.1rem); }
.faq-aside p{ color: var(--muted); margin-top:14px; }
.faq-aside .help{ margin-top:24px; padding:22px; background: var(--ink); color:#fff; border-radius: var(--r-lg); }
.faq-aside .help h3{ color:#fff; font-size:1.15rem; }
.faq-aside .help p{ color: var(--on-dark); margin-top:8px; font-size:.95rem; }
.faq-aside .help .btn{ margin-top:16px; }

.faq-group + .faq-group{ margin-top:34px; }
.faq-group__title{ font-family: var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--blue); margin-bottom:14px; }

.acc{ background:#fff; border:1px solid var(--line); border-radius: var(--r); margin-bottom:12px; overflow:hidden; transition: box-shadow .2s, border-color .2s; }
.acc.open{ box-shadow: var(--shadow-sm); border-color:#cfe0f0; }
.acc__q{ width:100%; text-align:left; background:none; border:0; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family: var(--display); font-weight:500; font-size:1.08rem; color: var(--ink); }
.acc__q .pm{ flex:none; width:24px; height:24px; position:relative; }
.acc__q .pm::before, .acc__q .pm::after{ content:""; position:absolute; background: var(--blue); border-radius:2px; transition: transform .25s ease, opacity .25s; }
.acc__q .pm::before{ top:11px; left:4px; width:16px; height:2px; }
.acc__q .pm::after{ top:4px; left:11px; width:2px; height:16px; }
.acc.open .acc__q .pm::after{ transform: rotate(90deg); opacity:0; }
.acc__a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.acc.open .acc__a{ grid-template-rows: 1fr; }
.acc__a > div{ overflow:hidden; }
.acc__a p{ padding: 0 22px 22px; color: var(--muted); font-size:.98rem; line-height:1.6; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items:start; padding-bottom: clamp(56px, 8vw, 110px); }
.contact-methods{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.cmethod{ display:flex; gap:16px; align-items:flex-start; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
.cmethod:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color:#cfe0f0; }
.cmethod .ic{ flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(45,123,244,.12), rgba(22,166,224,.12)); color: var(--blue); }
.cmethod .ic svg{ width:22px; height:22px; }
.cmethod h3{ font-size:1.1rem; margin-bottom:4px; }
.cmethod p{ color: var(--muted); font-size:.94rem; margin-bottom:0; }
.cmethod a.link{ display:inline-block; margin-top:9px; color: var(--blue); font-weight:600; white-space:nowrap; }
.cmethod a.link:hover{ text-decoration: underline; }
.response-note{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:.92rem; color: var(--muted); }
.response-note .d{ width:9px; height:9px; border-radius:50%; background: var(--ok); box-shadow:0 0 0 4px rgba(31,184,119,.16); flex:none; }

/* ===== About / founder story ===== */
.story{ max-width: 760px; margin-inline:auto; }
.story p{ font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height:1.7; color: #2b4763; }
.story p + p{ margin-top:1.3em; }
.story p.intro{ font-size: clamp(1.25rem, 2vw, 1.5rem); line-height:1.55; color: var(--ink); font-family: var(--display); font-weight:500; letter-spacing:-.01em; }
.pullquote{ margin: clamp(30px,4vw,44px) 0; padding: clamp(22px,3vw,30px); background: var(--ink); color:#fff; border-radius: var(--r-lg); position:relative; }
.pullquote p{ font-family: var(--display); font-weight:500; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height:1.4; letter-spacing:-.02em; color:#fff; }
.pullquote .mark{ font-size:2.6rem; line-height:1; color: var(--cyan-bright); font-family: var(--display); display:block; margin-bottom:4px; }
.pullquote cite{ display:block; margin-top:14px; font-style:normal; font-family: var(--sans); font-size:.9rem; color: var(--cyan-bright); font-weight:600; }
.pullquote--photo{ display:grid; grid-template-columns: 132px 1fr; gap: clamp(20px,3vw,32px); align-items:center; }
.pullquote--photo .mark{ margin-bottom:2px; }
.pullquote__photo{ border-radius:12px; overflow:hidden; aspect-ratio:4/5; box-shadow: 0 14px 32px -16px rgba(0,0,0,.6); }
.pullquote__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
@media (max-width:640px){
  .pullquote--photo{ grid-template-columns:1fr; gap:16px; }
  .pullquote__photo{ width:104px; aspect-ratio:1/1; max-height:none; }
}
.story-values{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top: clamp(36px,5vw,56px); }
.story-value{ padding:26px 24px; border:1px solid var(--line); border-radius: var(--r-lg); background:#fff; box-shadow: var(--shadow-sm); }
.story-value .ic{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background: var(--paper-2); color: var(--blue); margin-bottom:16px; }
.story-value .ic svg{ width:22px; height:22px; }
.story-value h3{ font-size:1.1rem; margin-bottom:7px; }
.story-value p{ color: var(--muted); font-size:.94rem; line-height:1.55; }

/* ===== final CTA (shared on subpages — home.css defines it for index) ===== */
.cta{ position:relative; overflow:hidden;
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(22,166,224,.25), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(45,123,244,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--ink-deep));
  color:#fff; }
.cta__inner{ text-align:center; padding-block: clamp(64px,9vw,120px); position:relative; z-index:2; }
.cta .eyebrow{ color: var(--cyan-bright); }
.cta h2{ color:#fff; max-width:18ch; margin-inline:auto; margin-top:14px; }
.cta__sub{ color: var(--on-dark); font-size:1.15rem; margin-top:18px; max-width:48ch; margin-inline:auto; }
.cta__btns{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
@media (max-width:600px){
  .cta__btns{ flex-direction:column; align-items:stretch; }
  .cta__btns .btn{ width:100%; }
  .cta__sub{ font-size:1.05rem; }
}

/* ===== Legal / prose ===== */
.legal{ max-width: 800px; margin-inline:auto; padding-bottom: clamp(56px,8vw,100px); }
.legal__note{ display:flex; gap:13px; align-items:flex-start; padding:18px 20px; background: rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.3); border-radius: var(--r); margin-bottom:40px; }
.legal__note svg{ flex:none; width:20px; height:20px; color: var(--warn); margin-top:2px; }
.legal__note p{ font-size:.9rem; color:#7a5a14; line-height:1.55; }
.legal h2{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2.2em; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-size:1.1rem; margin-top:1.6em; }
.legal p, .legal li{ color: var(--muted); font-size:1rem; line-height:1.7; }
.legal p{ margin-top:1em; }
.legal ul{ margin:1em 0 0; padding-left:1.3em; display:flex; flex-direction:column; gap:.5em; }
.legal a{ color: var(--blue); font-weight:500; }
.legal a:hover{ text-decoration: underline; }
.legal__meta{ font-family: var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); margin-bottom:32px; }

@media (max-width: 940px){
  .demo-grid{ grid-template-columns:1fr; }
  .form-card{ position: static; }
  .faq-wrap{ grid-template-columns:1fr; }
  .faq-aside{ position: static; }
  .contact-grid{ grid-template-columns:1fr; }
  .story-values{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  /* page header */
  .phead{ padding-top: 62px; }
  .phead__inner{ padding-block: 36px 8px; }
  .crumbs{ margin-bottom:16px; }

  /* forms */
  .form-card{ padding:22px; border-radius: var(--r-lg); }
  .form-grid{ gap:14px; margin-top:20px; }
  .form-card .btn{ width:100%; }

  /* contact methods */
  .cmethod{ padding:18px 18px; gap:13px; }
  .cmethod .ic{ width:42px; height:42px; }

  /* about / story */
  .story p.intro{ font-size:1.18rem; }
  .pullquote{ padding:26px 22px; border-radius: var(--r-lg); }
  .story-values{ gap:14px; }

  /* legal */
  .legal__note{ padding:15px 16px; }
  .legal h2{ margin-top:1.9em; }
}
@media (max-width: 520px){
  .form-grid{ grid-template-columns:1fr; }
}