/* demo/index.html — page-specific only.
   Loaded after css/site.css. Nothing shared is redefined here. */


/* Fixed-nav clearance. The shared nav is 108px tall on desktop and 90px on
   mobile. A 120px hero padding left the headline 12px below it on desktop and
   20px BEHIND it at 900px. 168/150 gives roughly 60px of clearance, which is
   what the founder story reads correctly at. */
body.dm .demo-hero{padding:168px 0 8px}
body.dm .demo-hero .sechead{text-align:center;margin:0 auto;max-width:660px}
body.dm .demo-hero h1{font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1.12;color:var(--ink);margin:0 0 14px;text-wrap:balance}
body.dm .demo-hero .lead{font-size:17.5px;line-height:1.7;color:var(--body);text-wrap:pretty}
/* The Google Meet line is reassurance, not a badge — no pill, no fill. */
body.dm .meet{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:14px;color:var(--mute)}
body.dm .meet svg{width:17px;height:17px;flex:none}

body.dm .demo-main{padding-top:56px}
body.dm .demo-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
body.dm .demo-info h2{font-size:31px;font-weight:800;letter-spacing:-.028em;
  line-height:1.2;color:var(--ink);margin:0 0 22px}
  line-height:1.6;color:var(--body);border-top:1px solid var(--line)}
  width:7px;height:7px;border-radius:50%;background:var(--pu)}
body.dm .demo-trust{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.72;color:var(--mute)}

/* ── the booking embed ────────────────────────────────────────────────────
   Third-party and the page's only conversion mechanism. It gets a reserved
   height so the layout does not jump, a loading state so a slow response does
   not look like a blank box, and a failure state with a route that does not
   depend on the embed at all. */
body.dm .demo-booking{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:12px;min-height:560px}
body.dm .cal-wrap{position:relative;min-height:536px}
body.dm #cal-embed{min-height:536px}
body.dm .cal-state{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px}
body.dm .cal-state[hidden]{display:none}
body.dm .cal-state p{font-size:15px;line-height:1.65;color:var(--mute);margin:0;max-width:340px}
body.dm .cal-state strong{color:var(--ink)}
body.dm .cal-spin{width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--pu);animation:calspin .7s linear infinite}
@keyframes calspin{to{transform:rotate(360deg)}}
body.dm .cal-state .btn-quiet{margin-top:10px;display:inline-block;background:#fff;
  border:1px solid var(--line);border-radius:13px;padding:13px 24px;
  font-size:15px;font-weight:700;color:var(--ink)}
body.dm .cal-state .btn-quiet:hover{border-color:var(--pu);color:var(--pu)}
body.dm .cal-mail{font-size:14px;font-weight:600;color:var(--pu)}

/* Motion off means no spinner; the text still says what is happening. */
@media (prefers-reduced-motion:reduce){ body.dm .cal-spin{animation:none} }

body.dm .demo-faq-section h2{font-size:31px;font-weight:800;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 26px;text-align:center}
body.dm .demo-faq-item{max-width:760px;margin:0 auto;padding:22px 0;border-top:1px solid var(--line)}
body.dm .demo-faq-item h4{font-size:17px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 8px}
body.dm .demo-faq-item p{font-size:16px;line-height:1.75;color:var(--body);margin:0}

@media (max-width:900px){
  body.dm .demo-grid{grid-template-columns:1fr;gap:32px}
  body.dm .demo-hero{padding:150px 0 4px}
  body.dm .demo-hero h1{font-size:31px}
  body.dm .demo-booking{padding:8px}
}

/* ── the agenda ───────────────────────────────────────────────────────────
   Seven equally-weighted feature rows became four grouped outcomes. The old
   list had one level of hierarchy, so it read as notes beside a widget; a bold
   label with a quiet line under it gives the left column two, which is what
   makes it pair with the calendar rather than sit next to it.

   Hairlines, not a card — the calendar is the contained surface on this page
   and a second box would compete with it. */
body.dm .agenda{margin:0}
body.dm .agenda-item{padding:20px 0;border-top:1px solid var(--line)}
body.dm .agenda-item:first-child{border-top:0;padding-top:0}
body.dm .agenda-item h3{font-size:17px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 6px}
body.dm .agenda-item p{font-size:15px;line-height:1.6;color:var(--mute);margin:0}

/* Lowers the pressure without a coloured box. */
body.dm .demo-trust{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.7;color:var(--mute)}
body.dm .demo-trust strong{color:var(--ink);font-weight:700}

/* Names the action, so the right column is a step rather than an embed. */
body.dm .cal-head{margin:0 0 18px}
body.dm .cal-head h2{font-size:24px;font-weight:700;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 4px}
body.dm .cal-head p{font-size:14.5px;color:var(--mute);margin:0}
body.dm .demo-booking{padding:24px}

/* The left column narrows so the four themes read as a column, and the calendar
   keeps its dominance without the left looking like leftover space. */
body.dm .demo-grid{grid-template-columns:.85fr 1.15fr}

@media (max-width:900px){
  body.dm .demo-grid{grid-template-columns:1fr}
  /* Highest-intent visitor on the site meets the calendar first; the agenda
     stays underneath for anyone still deciding. */
  body.dm .demo-booking{order:-1}
  body.dm .demo-booking{padding:14px}
  body.dm .cal-head h2{font-size:21px}
}