/**
 * DocuPOW — Start Free Trial page styles
 * (page-templates/start-free-trial.php only).
 *
 * Scope: everything lives under .page-trial (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this
 * file adds the hero panel + sign-up-card layout, the display-only field
 * stack (HANDOFF SHELL — see the template docblock: no <form>, disabled
 * fields, every action a link through the app-handoff helpers), the
 * includes card row, the numbered-steps strip with its connector hairline,
 * the trial-FAQ accordions and the hero entrance motion only.
 *
 * Contrast contract (tokens only, plus ONE documented raw hex — zero new
 * undocumented values):
 *  - Eyebrows are 13px mono semibold var(--techblue) — 4.54:1 on white AND
 *    on var(--gray) #F5F7FA (AA).
 *  - h1 / check text / labels / questions / step titles are var(--ink) —
 *    16.68:1 on white, 15.6:1 on --gray (AA).
 *  - Section h2s are var(--indigo) (the export's #3D2E70 headline colour)
 *    — 11.4:1 on white/--gray (AA).
 *  - Leads, hints, the divider text, terms line, answers and the mono
 *    trust caption are var(--text-muted) — 9.34:1 on white (AA).
 *  - #0A7B56 is the ONLY raw hex in this sheet: the house deep success
 *    green (manifest-documented alongside #276CC1 — the same value
 *    contact.css documents), used solely for the 20px check-circle glyphs
 *    — decorative, non-text accents (the var(--ink) claim text carries the
 *    meaning). The export's text-success #10B981 is 2.2:1 on --gray; the
 *    house green is the standing accessible substitute.
 *  - Step roundels: var(--techblue) digits on white inside a 2px techblue
 *    ring — 4.54:1 (AA).
 *  - Links (Terms/Privacy/Log in) are var(--techblue) — 4.54:1 (AA),
 *    underlined on hover/focus so affordance never relies on colour alone.
 *
 * Motion contract (transform/opacity + grid-template-rows — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced
 *    motion (or if start-free-trial.js never runs) everything is visible.
 *    NO floats, NO loops — the ONE bespoke moment is the hero .is-ready
 *    entrance.
 *  - The accordion open/closed STATES are unconditional (functional under
 *    reduce); only the 200ms panel/chevron transitions are motion-gated.
 *  - main.js owns the [data-dp-reveal] / stagger entrances on S2 + S3.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — light canvas, section rhythm, functional [hidden]
   ========================================================================= */
.page-trial {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* Accordion visibility — start-free-trial.js toggles [hidden] on the
   panels. The panel's authored display:grid would beat the UA's [hidden]
   rule, so restate it here. Unconditional: collapsing works without
   motion. */
.page-trial [hidden] {
  display: none !important;
}

/* 96px section rhythm on desktop, 64px under 768. */
.page-trial__hero,
.page-trial__includes,
.page-trial__steps,
.page-trial__faq {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-trial__hero,
  .page-trial__includes,
  .page-trial__steps,
  .page-trial__faq {
    padding-block: var(--space-6);
  }
}

/* Shared mono eyebrow — Tech Blue (4.54:1 on white/--gray — AA). */
.page-trial__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* Shared section h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo per
   the export's #3D2E70 headings (11.4:1 — AA). */
.page-trial__h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

/* =========================================================================
   S1 — Hero: left panel + sign-up card on the NAMED wrapper
   ========================================================================= */

/* The NAMED grid wrapper (never .dp-container): 2 equal columns, centered
   vertically per the export's items-center. <1024 stacks in SOURCE ORDER —
   the pitch panel stays FIRST (the export stacks the same way; the claims
   justify the card, so the card is NOT pulled above them). */
.page-trial__hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.page-trial__hero-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-trial__hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Left panel — workspace-gray surface, hairline border, 12px radius (the
   export's rounded-xl), 48px padding; relative + overflow hidden clips the
   corner mascot bleed. (Named __hero-panel, NOT __panel: __panel is the S4
   accordion panel and its collapsed 0fr/opacity-0 state must never leak
   here.) */
.page-trial__hero-panel {
  position: relative;
  overflow: hidden;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-5);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-trial__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead (18/1.6), muted per the export's on-surface-variant. */
.page-trial__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 512px; /* export max-w-lg */
  margin-bottom: var(--space-5);
}

/* Trial claims — 6 rows, 12px rhythm (export space-y-sm reads as list
   rhythm one step down). Above the mascot watermark. */
.page-trial__checks {
  position: relative; /* stacks the claims above the absolute mascot */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--space-5);
}

/* Row: filled 20px check-circle + 16px Ink text (15.6:1 on --gray — AA). */
.page-trial__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* Check glyph — #0A7B56, the house deep success green (the ONLY raw hex in
   this sheet; manifest-documented — see the header). Decorative: the Ink
   text carries each claim. */
.page-trial__check svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px; /* optical alignment with the 1.6 first line */
  color: #0A7B56;
}

/* Hairline trust row — 16px lock glyph (indigo per the export's
   text-secondary) + mono 13 muted caption (8.7:1 on --gray — AA). */
.page-trial__secure {
  position: relative; /* above the mascot watermark */
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-trial__secure svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--indigo);
}

/* Corner mascot — the export's watermark treatment: absolute bottom-right
   with a -32px bleed (clipped by the panel), 192px wide, 20% opacity,
   multiply blend, inert to the pointer. Decorative (empty alt +
   aria-hidden in the markup). */
.page-trial__mascot {
  position: absolute;
  bottom: -32px;
  right: -32px;
  width: 192px;
  height: auto;
  opacity: .2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* =========================================================================
   S1 — Sign-up card (HANDOFF SHELL — no <form>; see the template docblock)
   ========================================================================= */

/* Flat white card: hairline border, 12px radius, 48px padding, the house
   subtle card shadow (the export's shadow-sm). */
.page-trial__card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

/* <640 — both hero surfaces step their 48px padding down so the field
   stack keeps breathing room inside a 360px viewport. */
@media (max-width: 639.98px) {
  .page-trial__hero-panel,
  .page-trial__card {
    padding: var(--space-3);
  }
}

/* Centered 48px-tall local logo (explicit dims in the markup). */
.page-trial__card-logo {
  display: block;
  width: 47px;
  height: 48px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* headline-md (24/1.3/500) in Ink, centered. */
.page-trial__card-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------------------
   Email-first trial form. The card embeds a REAL Fluent Forms trial form via
   [fluentform]; Fluent Forms owns the markup, so we only theme its stable
   public classes to the card's design (inputs, labels, submit, focus ring).
   These are best-effort overrides scoped to .page-trial__form and degrade
   gracefully if FF's classes change. When the form ID / plugin is absent, the
   card shows .page-trial__fallback instead (a calm link to the app sign-up).
   ------------------------------------------------------------------------- */
.page-trial__form {
  margin-bottom: var(--space-4);
}

/* Field groups — vertical rhythm matching the design (24px). */
.page-trial__form .ff-el-group {
  margin-bottom: var(--space-3);
}

/* Labels — Inter Medium 14 in Ink per the design system. */
.page-trial__form .ff-el-input--label label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* Inputs / selects / textareas — the designed input skin (white, hairline
   border, 8px radius, 12px padding). */
.page-trial__form .ff-el-form-control {
  width: 100%;
  padding: 12px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* Focus ring — 2px techblue, matching the site's form focus affordance. */
.page-trial__form .ff-el-form-control:focus,
.page-trial__form .ff-el-form-control:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 1px;
  border-color: var(--techblue);
}

/* Newsletter opt-in checkbox row — 14 muted copy. */
.page-trial__form .ff-el-form-check-label,
.page-trial__form .ff-el-form-check label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Submit — full-width primary button; colours/hover come from the FF button
   base, width + block padding align it to the card. */
.page-trial__form .ff-btn-submit {
  width: 100%;
  padding-block: var(--space-2);
}

/* -------------------------------------------------------------------------
   Fallback (no Fluent Forms available) — a calm hand-off to the app sign-up.
   ------------------------------------------------------------------------- */
.page-trial__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-trial__fallback-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

/* Legal line — 14 muted, centered; REAL Terms/Privacy links. */
.page-trial__terms {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  text-align: center;
}

/* Terms/Privacy links — techblue (4.54:1 — AA), underline on hover/focus
   so the affordance never relies on colour alone. */
.page-trial__terms-link {
  color: var(--techblue);
  font-weight: 500;
}

.page-trial__terms-link:hover,
.page-trial__terms-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Full-width primary CTA — colours/hover come from .dp-btn--primary; the
   export's py-4 submit height. */
.page-trial__cta {
  width: 100%;
  padding-block: var(--space-2);
}

/* "Already have an account?" footer line — muted, centered. */
.page-trial__login {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-4);
}

/* Log in link — techblue 600 per the export's font-semibold text-primary. */
.page-trial__login-link {
  color: var(--techblue);
  font-weight: 600;
}

.page-trial__login-link:hover,
.page-trial__login-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   S2 — What you get (white band, top hairline, 5-card row)
   ========================================================================= */
.page-trial__includes {
  background-color: var(--white);
  border-top: 1px solid var(--border);
}

.page-trial__includes-header {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* The NAMED card grid: 5 across per the export's md:grid-cols-5; 2 under
   1024; 1 under 640. */
.page-trial__includes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-trial__includes-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-trial__includes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .page-trial__includes-grid {
    grid-template-columns: 1fr;
  }
}

/* Include card — white, hairline border, 8px radius, 24px padding,
   centered stack; hover lifts the border to techblue (the work order's
   treatment in place of the export's gray-wash hover). cursor stays
   default: the cards are claims, not controls. */
.page-trial__include {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color .18s ease;
}

.page-trial__include:hover {
  border-color: var(--techblue);
}

/* 32px indigo glyph (decorative; the label carries the claim). */
.page-trial__include svg {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--indigo);
}

/* Card label — 16/500 Ink per the export's font-medium. */
.page-trial__include-label {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

/* =========================================================================
   S3 — What happens next (gray band, y-hairlines, 3 steps + connector)
   ========================================================================= */
.page-trial__steps {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

.page-trial__steps-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* The NAMED steps grid — relative so the connector hairline can sit behind
   the roundels; 1 column under 768. */
.page-trial__steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.page-trial__steps-grid > * {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-trial__steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop connector — a real block-level hairline (not a pseudo) behind
   the roundels: top 24px = the roundel centreline; 16% insets stop it
   short of the outer roundels per the export. Hidden under 768 where the
   steps stack. */
.page-trial__steps-line {
  position: absolute;
  top: 24px;
  left: 16%;
  right: 16%;
  height: 1px;
  background-color: var(--border);
}

@media (max-width: 767.98px) {
  .page-trial__steps-line {
    display: none;
  }
}

/* Step — centered stack above the connector. */
.page-trial__step {
  position: relative; /* stacks the roundel above the hairline */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Numbered roundel — 48px white disc, 2px techblue ring, techblue 700
   digits (4.54:1 on white — AA). */
.page-trial__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--techblue);
  color: var(--techblue);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

/* Step title — 18/500 Ink (the work order's scale for the long step 3). */
.page-trial__step-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  max-width: 320px;
}

/* =========================================================================
   S4 — Trial FAQ (gray continues over a top hairline; 3 accordions)
   ========================================================================= */
.page-trial__faq {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
}

/* Narrow reading column per the export's max-w-3xl. */
.page-trial__faq-inner {
  max-width: 768px;
  margin-inline: auto;
}

.page-trial__faq-title {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Item stack — 16px rhythm per the export's space-y-4. */
.page-trial__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Accordion item — white card, hairline border, 8px radius (the export's
   card-style items, unlike /faq/'s hairline rows). */
.page-trial__item {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The h3 is purely structural — the button inside carries the hit area. */
.page-trial__q {
  margin: 0;
}

/* Full-row disclosure button — native <button> (keyboard-operable for
   free), question left, chevron right, 24px padding per the export's p-md.
   Unstyled-button reset; the global :focus-visible ring applies. */
.page-trial__q-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Question — 16/500 Ink per the export's font-medium; techblue on
   hover/focus (house accordion affordance). */
.page-trial__q-text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  transition: color .18s ease;
}

.page-trial__q-btn:hover .page-trial__q-text,
.page-trial__q-btn:focus-visible .page-trial__q-text {
  color: var(--techblue);
}

/* Chevron — 20px muted glyph per the export's on-surface-variant
   (decorative); rotates 180deg when open. The rotation TRANSITION lives in
   the no-preference block below — the rotated end state itself is
   unconditional (open/closed must always be visually distinct). */
.page-trial__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.page-trial__item.is-open .page-trial__chevron {
  transform: rotate(180deg);
}

/* Panel — the grid-template-rows 0fr -> 1fr technique (faq.css): the
   closed panel measures zero height without a magic max-height. These
   STATES are unconditional (functional under reduce); only the 200ms
   transition is motion-gated below. Closed panels ALSO carry [hidden]
   (display:none) — start-free-trial.js sequences the attribute around the
   transition. */
.page-trial__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}

.page-trial__item.is-open .page-trial__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.page-trial__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Answer — body-md muted; side/bottom padding per the export's px-md pb-md
   (the button already padded the top). */
.page-trial__answer {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 0 var(--space-3) var(--space-3);
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-trial__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-trial__h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Motion — entrance base states + the accordion transitions (no-preference
   only). The accordion open/closed STATES are NOT here: they must work
   under every motion preference.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — start-free-trial.js adds .is-ready on init (double
     rAF); panel copy rises in with 0/80/160/240ms delays and the sign-up
     card fades alongside the lead. */
  .page-trial__hero .page-trial__eyebrow,
  .page-trial__hero .page-trial__title,
  .page-trial__hero .page-trial__lead,
  .page-trial__hero .page-trial__checks,
  .page-trial__hero .page-trial__secure,
  .page-trial__hero .page-trial__card {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-trial__hero .page-trial__title {
    transition-delay: 80ms;
  }

  .page-trial__hero .page-trial__lead,
  .page-trial__hero .page-trial__card {
    transition-delay: 160ms;
  }

  .page-trial__hero .page-trial__checks,
  .page-trial__hero .page-trial__secure {
    transition-delay: 240ms;
  }

  .page-trial__hero.is-ready .page-trial__eyebrow,
  .page-trial__hero.is-ready .page-trial__title,
  .page-trial__hero.is-ready .page-trial__lead,
  .page-trial__hero.is-ready .page-trial__checks,
  .page-trial__hero.is-ready .page-trial__secure,
  .page-trial__hero.is-ready .page-trial__card {
    opacity: 1;
    transform: none;
  }

  /* Accordion motion — 200ms height (grid rows) + opacity on the panel,
     200ms rotation on the chevron. start-free-trial.js's collapse timer
     matches this duration (OPEN_MS). */
  .page-trial__panel {
    transition: grid-template-rows .2s ease, opacity .2s ease;
  }

  .page-trial__chevron {
    transition: transform .2s ease;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static; the
   accordion open/close behaviour is untouched (functional, not motion)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-trial__hero .page-trial__eyebrow,
  .page-trial__hero .page-trial__title,
  .page-trial__hero .page-trial__lead,
  .page-trial__hero .page-trial__checks,
  .page-trial__hero .page-trial__secure,
  .page-trial__hero .page-trial__card {
    opacity: 1;
    transform: none;
  }
}