/* ============================================================
   Control - /demo  (the booking page)

   Scope: this file styles ONLY /demo. It defines no new custom
   properties; every colour, radius and spacing unit comes from
   the :root block in hero.css, which this page also links for
   the nav and the .btn set.

   Nothing here touches hero.css, body.css or the lander.
   ============================================================ */


/* ------------------------------------------------------------
   Page shell.
   hero.css sets html,body{height:100%} so the lander could end
   exactly at the fold. This page is taller than the viewport as
   soon as the calendar mounts, and with overflow-x:hidden on the
   body that fixed height turns <body> into its own scroll
   container. Release the height, keep the same minimum.
   ------------------------------------------------------------ */
html,body{height:auto;min-height:100%}

.dm{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  padding:clamp(24px,4vw,52px) 0 clamp(56px,7vw,92px);
}
.dm-wrap{
  width:100%;max-width:1080px;
  margin:0 auto;padding:0 var(--pad-x);
}


/* ------------------------------------------------------------
   Heading. One line, weight 300, one quiet supporting line.
   The C mark carries the only accent on the page (its rainbow
   dash), so no beam and no spectrum rule is added below it.
   ------------------------------------------------------------ */
.dm-head{text-align:center;margin-bottom:clamp(30px,4vw,48px)}

.dm-home{display:inline-block;text-decoration:none;line-height:0}
/* identical to the lander's .logo-mark in hero.css - the founder wants the
   same mark at the same size on both pages */
.dm-mark{
  display:block;width:auto;height:clamp(56px,7vw,76px);
  margin:0 auto clamp(20px,2.4vw,28px);
}

.dm-head h1{
  font-weight:300;
  font-size:clamp(2.1rem,4.6vw,3.3rem);
  line-height:1.04;letter-spacing:-.032em;color:var(--ink);
}
.dm-sub{
  margin:clamp(14px,1.6vw,18px) auto 0;max-width:44ch;
  font-size:clamp(15px,1.2vw,16.5px);font-weight:400;
  color:var(--muted);letter-spacing:-.005em;
}


/* ------------------------------------------------------------
   The calendar.
   Flat card, 10px radius, 1px hairline, no shadow. The mount
   keeps a floor height so the page never reflows by 600px when
   the iframe lands, and so a blocked script leaves a visible
   panel rather than nothing.
   ------------------------------------------------------------ */
.dm-book{scroll-margin-top:96px}

/* Unboxed (founder, 2026-07-25): Cal.com's booker paints its own bordered,
   rounded card, so our frame around it read as a double border. The mount is
   now a bare positioning context. The border/background is re-applied ONLY
   while the embed is absent - loading or failed - so a blocked script still
   leaves a visible panel instead of a void. */
.dm-mount{
  position:relative;
  width:100%;
  min-height:clamp(520px,64vh,760px);
}
/* The panel is only drawn before the embed lands. Once Cal.com's booker is
   mounted it paints its own bordered card, and ours doubled it. .is-loaded is
   set on .dm-book by the boot script; .is-failed keeps its own panel rules
   further down, so a blocked script still shows something. */
.dm-mount{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden;
}
.is-loaded .dm-mount{
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  min-height:0;
}

/* quiet placeholder while embed.js is in flight; it sits behind the
   iframe and is dropped the moment the iframe exists */
.dm-mount::after{
  content:"Loading the calendar";
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;letter-spacing:.02em;color:var(--faint);
}
.is-loaded .dm-mount::after,
.is-failed .dm-mount::after{content:none}

/* Cal.com injects a custom element wrapping the iframe */
.dm-mount > *{position:relative;z-index:1;width:100%}
.dm-mount iframe{display:block;width:100%;border:0}


/* ------------------------------------------------------------
   The fallback link. Always present, so this page can never be
   a blank white rectangle. Quiet by default; if the embed never
   mounts it takes the calendar's place.
   ------------------------------------------------------------ */
.dm-alt{
  margin-top:clamp(16px,1.8vw,22px);text-align:center;
  font-size:12.5px;letter-spacing:.01em;color:var(--faint);
}
.dm-alt a{
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);
  padding-bottom:1px;margin-left:4px;
  transition:color .18s ease,border-color .18s ease;
}
.dm-alt a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.dm-alt a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* blocked or failed: collapse the empty panel, promote the link */
.is-failed .dm-mount{
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(44px,6vw,72px) var(--pad-x);
}
.is-failed .dm-alt{
  font-size:15.5px;color:var(--ink-soft);
  margin-top:clamp(20px,2.4vw,26px);
}
.is-failed .dm-alt a{font-weight:500;color:var(--ink)}
.is-failed .dm-mount::before{
  content:"The booking calendar could not be loaded in this browser.";
  display:block;max-width:34ch;text-align:center;
  font-size:15px;font-weight:400;line-height:1.55;color:var(--muted);
}


/* ------------------------------------------------------------
   Footer.
   The .dm-foot placeholder that used to live here is gone: /demo
   now renders the shared enterprise footer (.b-foot), which is
   owned by body.css and is linked by this page for exactly that
   reason. No .dm-foot markup remains. Do not re-add footer rules
   to this file - they belong in body.css.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:640px){
  .dm-mount{min-height:clamp(560px,72vh,700px);border-radius:var(--radius)}
  .dm-sub{max-width:32ch}
}
@media (max-width:400px){
  .dm-book{scroll-margin-top:80px}
}

/* On a phone in landscape the mount's 72vh floor collapses to ~280px
   and the clamp holds it at 560px, which is taller than the whole
   viewport before the booker has said anything. The embed sizes its
   own iframe, so the floor only has to be big enough that a blocked
   script leaves a visible panel rather than nothing. */
@media (orientation:landscape) and (max-height:500px){
  .dm{padding:20px 0 40px}
  .dm-head{margin-bottom:24px}
  .dm-mark{height:38px;margin-bottom:16px}
  .dm-mount{min-height:340px}
}

/* Tap targets.   (mobile-playbook P2)
   #calFallbackLink is 156x17 and it is the path a phone user needs at
   exactly the moment the embed has failed. The hairline underline moves
   from border-bottom to text-decoration so that padding the box does
   not push the rule 14px clear of the baseline. The C mark above the
   heading is a home link at 42px wide, two short of the floor. */
@media (pointer:coarse){
  .dm-alt a{
    display:inline-block;
    padding:14px 6px;
    border-bottom:0;
    text-decoration:underline;
    text-decoration-color:var(--hair-strong);
    text-underline-offset:3px;
  }
  .dm-alt a:hover{text-decoration-color:var(--ink)}
  .dm-home{padding:0 4px}
}