/* ==========================================================================
   PYLON DEMO PAGES
   One template, three instances (Command, Scout, Anvil). Loaded after
   pylon.css. Each page sets only --acc / --acc-txt in its own <style>.

   The page has one job: book the call. So it is short, there is no CTA
   section (the form IS the CTA), and the header's button is an anchor to
   the form rather than the contact modal — two competing conversion
   paths on a landing page is one too many. The contact modal is not
   mounted on these pages at all.

   Form controls are pylon.css's .fg / .fr / .fl / .fi / .fs, which are
   global rather than scoped to .modal — so this form matches the site's
   modal by construction rather than by copied values.
   ========================================================================== */

/* hero: copy left, form card right. The card is the page. */
.dm .g{align-items:start}
.dm-l{grid-column:1/7;padding:clamp(2.5rem,5vh,3.75rem) 0 clamp(2.5rem,5vh,3.5rem)}
.dm-f{grid-column:8/13;padding-top:clamp(2.5rem,5vh,3.75rem);position:sticky;top:calc(var(--chrome) + 1.5rem)}
@media(max-width:1024px){.dm-l,.dm-f{grid-column:1/-1}.dm-f{position:static;padding-top:0;padding-bottom:3rem}}

/* what the thirty minutes looks like */
.dm-ex{margin-top:clamp(2rem,4vw,2.75rem)}
.dm-ex .lbl{display:block;color:var(--t4);padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.dm-r{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:var(--gut);align-items:baseline;padding:1.125rem 0;border-bottom:1px solid var(--rule-2)}
.dm-r .t{color:var(--acc-txt);font-size:.6875rem;letter-spacing:.12em;white-space:nowrap}
.dm-r .m b{display:block;font-size:1rem;font-weight:500;letter-spacing:-.02em;color:var(--t1)}
.dm-r .m i{display:block;font-style:normal;margin-top:.3rem;font-size:.875rem;line-height:1.55;color:var(--t3);max-width:46ch}
@media(max-width:560px){.dm-r{grid-template-columns:1fr;row-gap:.5rem}}

/* the form card. Sized so a scheduler embed can replace the <form> later
   without the card changing shape. */
.dm-card{border:1px solid var(--rule);background:var(--ink-2);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.dm-card h2{font-size:1.375rem;letter-spacing:-.035em;color:var(--t1);margin-bottom:.5rem}
.dm-card .sub{font-size:.875rem;color:var(--t3);margin-bottom:1.75rem}
.dm-card .fs{background:var(--acc-txt);color:var(--ink)}
.dm-card .fs:hover{background:var(--t1)}
.dm-fine{margin-top:1rem;color:var(--t4);text-align:center}
.dm-ok{border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent);padding:1.125rem 1.25rem}
.dm-ok b{display:block;font-size:1rem;font-weight:500;color:var(--t1);margin-bottom:.375rem}
.dm-ok span{font-size:.875rem;line-height:1.6;color:var(--t3)}

/* three things you'll see */
.dm-see{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
.dm-see>div{padding-top:1.5rem}
.dm-see .n{display:block;color:var(--acc-txt);font-size:.625rem;letter-spacing:.2em;margin-bottom:1rem}
.dm-see h3{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.dm-see p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:38ch;text-wrap:pretty}
@media(max-width:900px){.dm-see{grid-template-columns:1fr;row-gap:2rem}.dm-see>div+div{border-top:1px solid var(--rule-2)}}

/* read-first row, for traffic that isn't ready to book */
.dm-alt{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.5rem 2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.dm-alt-h b{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;color:var(--t1)}
.dm-alt-h span{margin-left:.75rem;font-size:.9375rem;color:var(--t4)}
.dm-alt-l{display:flex;flex-wrap:wrap;gap:1rem 2rem}
.dm-alt-l a{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--t2);border-bottom:1px solid var(--rule-2);padding-bottom:.25rem;transition:color .25s,border-color .25s}
.dm-alt-l a:hover{color:var(--t1);border-bottom-color:var(--acc)}
.dm-alt-l i{font-style:normal;color:var(--t4)}