/* /plan styles: where a reader books a call. Layers on top of base.css,
   which holds the shared design system (palette, type, container,
   buttons, header, footer, accent rule).

   One section on Paper. Left, the close the reader just clicked from,
   picked up word for word (the accent rule, the headline, Rex's
   paragraph), then his film, then the three steps on the pricing page's
   line. Right, HubSpot's calendar on a plate. On a phone the calendar
   comes straight after the film. Every rule is scoped
   under .pl (the page's <main>) except the header block, which sits
   outside it. Use only base.css tokens.

   Rebuilt 2026-10-02 from the earlier form page; that page's styles are
   in git history (a5bb0d9). */

/* ── Header, on a phone ─────────────────────────────────────────── */

/* As on /pricing and the audience pages: the header keeps "Get a custom
   plan" beside the menu button on a phone, compact. Here it goes to the
   calendar. Below 360px there is no room, and the menu carries it. */
@media (max-width: 900px) {
  .bar .bar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    margin-right: -6px;
    padding: 0 14px;
    font-size: 14px;
  }
  .bar-inner { gap: 12px; }
  body.mobile-menu-open .bar .bar-cta { visibility: hidden; }
}
@media (max-width: 359px) {
  .bar .bar-cta { display: none; }
}

/* ── The frame ──────────────────────────────────────────────────── */

/* Two columns: the copy, and the calendar at a fixed 660px. HubSpot draws
   its calendar beside its list of times only when its frame is at least
   about 630px wide (measured 2026-10-02: side by side at 633, stacked at
   624), and stacked inside a wide plate it floats in white space. So the
   calendar never gets narrower than that beside the copy: below 1280px,
   where the copy column would drop under the headline's width, the page
   stacks instead. The grid areas put the calendar right after the
   paragraph and the film when stacked, so on a phone a reader reaches it
   past the film and the steps follow. */
.pl .pl-top { padding: 72px 0 112px; }
.pl .pl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 660px;
  grid-template-areas:
    "head   book"
    "expect book";
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  align-items: start;
}
.pl .pl-head { grid-area: head; }
.pl .pl-book { grid-area: book; }
.pl .pl-expect { grid-area: expect; margin-top: 44px; }
@media (max-width: 1279px) {
  .pl .pl-top { padding: 56px 0 80px; }
  .pl .pl-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "book"
      "expect";
    grid-template-rows: none;
  }
  .pl .pl-book { margin-top: 40px; max-width: 940px; }
  .pl .pl-expect { margin-top: 64px; }
}

/* ── The offer ──────────────────────────────────────────────────── */

/* The headline at Display section size (DESIGN.md: a page below the
   homepage), under the close's accent rule, then Rex's paragraph at the
   lede size every hero on his line uses. */
.pl .pl-title { font-size: clamp(33px, 4.5vw, 57px); max-width: 10em; }
.pl .pl-intro {
  margin-top: 22px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  color: var(--body);
  max-width: 24em;
}

/* ── What to expect ─────────────────────────────────────────────── */

/* "Here's what to expect:", the turn into the steps: Ink and a step
   heavier, in the body face, as "Here's how we make it a reality:" is on
   /pricing. */
.pl .pl-lead {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  letter-spacing: 0;
  color: var(--ink);
}

/* The pricing page's line: each step draws its own segment from under its
   node to the next node, so the line ends on the last one whatever the
   heights. The node is an Ink square softened 3px, never a circle (a
   circle is an account). All three solid: unlike /pricing's last stop,
   nothing here goes on without end. */
.pl .pl-rail {
  list-style: none;
  margin: 32px 0 0;
  padding: 0 0 0 44px;
}
.pl .pl-step {
  position: relative;
  padding-bottom: 36px;
}
.pl .pl-step:last-child { padding-bottom: 0; }
.pl .pl-step::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 5px;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--ink);
}
.pl .pl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(-44px + 6px);
  top: 26px;
  bottom: -1px;
  border-left: 1px solid rgba(17, 22, 27, 0.2);
}
@media (max-width: 700px) {
  .pl .pl-rail { padding-left: 30px; }
  .pl .pl-step::before { left: -30px; width: 11px; height: 11px; top: 5px; }
  .pl .pl-step:not(:last-child)::after { left: calc(-30px + 5px); top: 23px; }
}

/* The label, "Before the call": the site's Label role. Teal Deep is the
   ordinal clause of the Confirmed Teal Rule: the three are in time order. */
.pl .pl-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 8px;
}

/* The sentence, opening on its title in Ink at 600, as Rex's bold
   clauses read on /pricing. */
.pl .pl-p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  max-width: 30em;
}
.pl .pl-p strong { font-weight: 600; color: var(--ink); }
@media (max-width: 700px) {
  .pl .pl-p { font-size: 17px; }
}

/* ── The calendar ───────────────────────────────────────────────── */

/* The plate the audience pages put their pictures on (Surface, 1px Rule,
   14px radius, no shadow), holding HubSpot's frame. The minimum height
   is roughly the frame's own first height, so the page does not jump
   when it arrives; the frame then sizes itself from inside. Clear of the
   60px sticky header when the header button scrolls here. */
.pl .pl-book { scroll-margin-top: 84px; }
.pl .pl-plate {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  min-height: 640px;
}
.pl .meetings-iframe-container iframe {
  display: block;
  width: 100%;
  border: 0;
}
.pl .pl-noscript {
  padding: 28px 30px;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* The way round a blocked calendar, always shown: Caption, Muted, its
   link in Ink. */
.pl .pl-fallback {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.pl .pl-fallback a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pl .pl-fallback a:hover { color: var(--teal-deep); }

/* Read aloud, not shown: the calendar's heading. */
.pl .pl-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── The film ── (film-player.js) ───────────────────────────────── */

/* Rex's film, 16:9, under the paragraph (since 2026-10-21): the copy
   column's full width beside the calendar, about 470px at 1440, and up to
   640px once the page stacks. The player's rules are the Real example's
   (real-example.css) for a wide film on a dark poster: the frame is Ink
   under its poster and the play disc Paper on it. Most of the film plays
   on Paper, so the frame keeps the card's hairline. The .film box keeps
   its place while the frame is out in the larger view. */
.pl .film {
  width: 100%;
  margin-top: 36px;
  aspect-ratio: 16 / 9;
}
@media (max-width: 1279px) {
  .pl .film { max-width: 640px; margin-top: 32px; }
}

.pl .film-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--ink);
}
.pl .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl .film-frame.is-ready .film-video { cursor: pointer; }
.pl .film-frame.is-idle,
.pl .film-frame.is-idle .film-video { cursor: none; }

/* The play button: a Paper disc with an Ink triangle, in the poster's
   lower band, clear of its title and the line under it. It goes while
   the film plays and comes back on pause and at the end. */
.pl .film-play {
  position: absolute;
  left: 50%;
  top: 82%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, opacity 200ms ease, visibility 0s;
}
.pl .film-play[hidden] { display: none; }
.pl .film-play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.pl .film-play:hover { background: var(--teal); color: var(--surface); }
@media (max-width: 600px) {
  .pl .film-play { top: 84%; width: 48px; height: 48px; }
  .pl .film-play svg { width: 20px; height: 20px; }
}
.pl .film-frame.is-playing .film-play {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* The bar: Ink at 84% along the frame's foot, 8px in, 44px tall. Shown
   once the film has started, faded while the pointer rests on it
   playing. */
.pl .film-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 2px;
  border-radius: 8px;
  background: rgba(17, 22, 27, 0.84);
  color: var(--surface);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.pl .film-bar[hidden] { display: none; }
.pl .film-frame.is-started .film-bar {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
.pl .film-frame.is-started.is-playing.is-idle .film-bar {
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

/* 44px square, the site's floor for a control a thumb has to find. */
.pl .film-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 160ms ease;
}
.pl .film-btn[hidden] { display: none; }
.pl .film-btn:hover { background: rgba(255, 255, 255, 0.12); }
.pl .film-btn:focus-visible { outline-offset: -2px; }
.pl .film-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl .film-btn .i-play { fill: currentColor; stroke: none; }
.pl .film-btn .i-pause { stroke-width: 2.4; }
.pl .film-frame .i-pause,
.pl .film-frame .i-muted { display: none; }
.pl .film-frame.is-playing .i-play,
.pl .film-frame.is-muted .i-sound { display: none; }
.pl .film-frame.is-playing .i-pause,
.pl .film-frame.is-muted .i-muted { display: block; }

/* Captions on: the box filled, its two Cs cut out of it in Ink. */
.pl .film-cc[aria-pressed="true"] rect { fill: currentColor; }
.pl .film-cc[aria-pressed="true"] path { stroke: var(--ink); }

/* Where you are: a 4px line, white over white at 28%, filled as a scale
   so it never lays the bar out again. The whole bar's height is the
   target. */
.pl .film-seek {
  position: relative;
  flex: 1 1 auto;
  height: 44px;
  margin: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
}
.pl .film-seek::before,
.pl .film-seek-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
}
.pl .film-seek::before { content: ""; background: rgba(255, 255, 255, 0.28); }
.pl .film-seek-fill {
  background: var(--surface);
  transform: scaleX(0);
  transform-origin: left center;
}
.pl .film-seek:focus-visible { outline-offset: 0; }

.pl .film-time {
  flex: none;
  padding: 0 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--dark-body);
}
@media (max-width: 420px) {
  .pl .film-time { display: none; }
}

/* The captions line: the current cue in Paper on an Ink box, centered
   above the bar, and lower once the bar has faded. */
.pl .film-caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 62px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  pointer-events: none;
  transition: bottom 200ms ease;
}
.pl .film-caption[hidden] { display: none; }
.pl .film-caption span {
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(17, 22, 27, 0.84);
  color: var(--surface);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pl .film-frame.is-started.is-playing.is-idle .film-caption { bottom: 14px; }

/* It pops up (data-film-popup): anywhere but a phone it plays only in the
   larger view, so in its slot it is a poster and a play button, and its
   bar and captions belong to the larger view. Once it has been played and
   closed, the poster goes back over the paused picture, whose screens are
   unreadable at this size; presses still reach the video under it. The
   query is the opposite of film-player.js's PHONE; a phone keeps its bar,
   as it plays in the phone's own player and comes back to the page. */
@media (min-width: 701px), (pointer: fine) {
  .pl [data-film-popup] .film-frame:not(.is-big) .film-bar,
  .pl [data-film-popup] .film-frame:not(.is-big) .film-caption { display: none; }
  .pl [data-film-popup] .film-frame.is-started:not(.is-big)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("/static/media/plan-film/plan-page-teaser-poster.jpg") center / cover no-repeat;
    pointer-events: none;
  }
  .pl [data-film-popup] .film-play { z-index: 2; }
}

/* The larger view: the native modal dialog, its backdrop Ink at 88%, the
   frame as large as the window allows with room above for Close. In it,
   Watch it larger has nothing left to do and goes. The margin puts back
   the auto that centers a modal dialog, which base.css's reset of every
   margin to 0 takes away. */
.pl .film-box {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.pl .film-box::backdrop { background: rgba(17, 22, 27, 0.88); }
.pl .film-box .film-frame {
  width: min(92vw, calc((100vh - 140px) * 16 / 9));
  border: 0;
}
.pl .film-box .film-caption { font-size: clamp(16px, 1.5vw, 22px); }
.pl .film-box .film-play { width: 84px; height: 84px; }
.pl .film-box .film-play svg { width: 32px; height: 32px; margin-left: 4px; }
.pl .film-frame.is-big [data-film-larger] { display: none; }
.pl .film-box-close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--surface);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.pl .film-box-close:hover { border-color: var(--surface); }