/* front.css — the front page (templates/front.html; owner decision 2026-11-01). Ward Desk: every colour, face and
   radius is a desk.css token, so light and dark come with it. Loaded after desk.css on body.desk.wd-front only.
   Shape from the owner's reference: top bar · centred hero (headline, one line, two buttons) · the product in a
   browser frame over the seam of two grounds · then the plans and one last "Try the demo". One action colour, blue;
   no gold; nothing moves by itself but the video, and under reduced motion not even that. */

/* the desk's three-pane grid stands down: this page is one centred column */
body.desk.wd-front { display: block; background: var(--wd-work); }
html:has(> body.wd-front) { background: var(--wd-work); }
@media (prefers-reduced-motion: no-preference) { html:has(> body.wd-front) { scroll-behavior: smooth; } }
body.wd-front > main { max-width: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- the top bar */
.wd-fbar { position: relative; background: var(--wd-canvas); }
.wd-fbar-in { max-width: 1200px; margin: 0 auto; padding: 18px 32px; box-sizing: border-box; display: flex; align-items: center; gap: 24px; }
/* the owner's logo with its tagline, in its own colours on the bar's own ground (DESIGN.md §10): 60px tall (owner
   2026-11-01: slightly smaller; it was 72px) */
.wd-flogo { display: block; flex: none; line-height: 0; border-radius: 8px; }
.wd-flogo img { display: block; height: 60px; width: auto; }
.wd-fnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.wd-fnav a:not(.wd-btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px;
  font: 600 15px/1 var(--wd-sans); color: var(--wd-text-2); text-decoration: none; }
.wd-fnav a:not(.wd-btn):hover { color: var(--wd-text); background: var(--wd-recessed); }
.wd-fnav .wd-btn { margin-left: 10px; min-height: 44px; font: 600 15px/1 var(--wd-sans); text-decoration: none; }
.wd-fmenu { display: none; }

/* ---------------------------------------------------------------- the hero */
body.wd-front .wd-btn { text-decoration: none; justify-content: center; font-weight: 600; }
body.wd-front .wd-btn svg { flex: none; }
body.wd-front .wd-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 10px; }
.wd-hero { background: var(--wd-canvas); text-align: center; padding: 72px 32px 0; }
.wd-hero h1 { max-width: 15ch; margin: 0 auto; font: 800 clamp(40px, 5.6vw, 66px)/1.06 var(--wd-sans); letter-spacing: -.025em; color: var(--wd-text); }
.wd-hero-sub { max-width: 34em; margin: 22px auto 0; font: 400 19px/1.55 var(--wd-sans); color: var(--wd-text-2); text-wrap: balance; }
.wd-hero-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------------------------------------------------------------- the film, in a browser frame on the seam */
.wd-film { position: relative; margin: 0; padding: 56px 32px 0; outline: none;
  background: linear-gradient(to bottom, var(--wd-canvas) 0, var(--wd-canvas) 55%, var(--wd-work) 55%); }
.wd-film-bar, .wd-film-v { max-width: 1040px; margin: 0 auto; box-sizing: border-box; }
.wd-film-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 1px solid var(--wd-border); border-bottom: 0;
  border-radius: 14px 14px 0 0; background: var(--wd-recessed); }
.wd-film-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--wd-border-strong); }
.wd-film-bar span { margin: 0 auto; transform: translateX(-28px); padding: 4px 14px; border-radius: 6px; background: var(--wd-work);
  font: 500 12px/1.2 var(--wd-mono); color: var(--wd-text-3); }
.wd-film-v { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; object-fit: cover; background: var(--wd-work);
  border: 1px solid var(--wd-border); border-top: 0; border-radius: 0 0 14px 14px; }
/* one soft shadow under the whole frame, in the action colour's own tint — no glow of other hues */
.wd-film::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(1040px, calc(100% - 64px)); height: 70%;
  transform: translateX(-50%); border-radius: 14px; pointer-events: none;
  box-shadow: 0 40px 90px -30px color-mix(in oklab, var(--wd-primary) 30%, transparent); }
.wd-film { isolation: isolate; }
.wd-film:focus-visible .wd-film-v { outline: 2px solid var(--wd-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- the plans and the last step */
.wd-front-plans { max-width: 880px; margin: 0 auto; padding: 88px 32px 0; box-sizing: border-box; }
body.wd-front .wd-plans { margin: 0; padding: 0; border-top: 0; scroll-margin-top: 24px; gap: 22px; }
body.wd-front .wd-plans-head { text-align: center; }
body.wd-front .wd-plans-head h2 { font-size: 30px; letter-spacing: -.015em; }
body.wd-front .wd-plans-head p:not(.wd-eyebrow) { font-size: 16px; }
body.wd-front .wd-plan { background: var(--wd-work); }
body.wd-front .wd-plan-foot { text-align: center; }
.wd-front-last { max-width: 880px; margin: 88px auto 0; padding: 56px 32px; box-sizing: border-box; text-align: center; border-top: 1px solid var(--wd-border); }
.wd-front-last h2 { margin: 0; font-size: 30px; letter-spacing: -.015em; }
.wd-front-last p { margin: 10px auto 26px; max-width: 34em; color: var(--wd-text-2); text-wrap: balance; }
body.wd-front > .foot { max-width: 1200px; margin: 0 auto; padding: 0 32px 32px; }

/* ---------------------------------------------------------------- /pricing (owner 2026-11-01: its own page, in Ward Desk)
   The front page's bar and grounds; the plans first, their heading the page's h1; the reader's standing, the society
   code and one last "Try the demo" below. */
.wd-fnav a[aria-current="page"]:not(.wd-btn) { color: var(--wd-text); background: var(--wd-recessed); }
body.desk.wd-front.wd-pricing { background: var(--wd-canvas); }
html:has(> body.wd-pricing) { background: var(--wd-canvas); }
.wd-pricing-plans { padding-top: 56px; }
body.wd-pricing .wd-plans-head h1 { margin: 0; font: 800 clamp(34px, 4.2vw, 48px)/1.08 var(--wd-sans); letter-spacing: -.025em; color: var(--wd-text); }
body.wd-pricing .wd-plans-head p:not(.wd-eyebrow) { margin-top: 12px; font-size: 17px; }
body.wd-pricing .wd-price .pp-was { font-size: .55em; color: var(--wd-text-3); text-decoration-thickness: 1px; margin-right: 4px; }
body.wd-pricing .wd-price .pp-now { color: var(--wd-text); }
.wd-pstate { max-width: 816px; margin: 32px auto -24px; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--wd-border); border-left: 3px solid var(--wd-primary);
  border-radius: 10px; background: var(--wd-work); font-size: 14.5px; color: var(--wd-text-2); }
.wd-pstate b { color: var(--wd-text); font-weight: 700; }
.wd-pcode-sec { max-width: 880px; margin: 0 auto; padding: 28px 32px 0; box-sizing: border-box; }
.wd-pcode { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.wd-pcode .pp-code-l { font: 600 14.5px/40px var(--wd-sans); color: var(--wd-text-2); }
body.wd-pricing .wd-pcode input[type="text"] { width: 200px; min-height: 40px; padding: 0 12px; box-sizing: border-box; font-family: var(--wd-mono); font-size: 14px; letter-spacing: .04em; }
.wd-pcode .wd-btn { min-height: 40px; }
.wd-pcode .pp-code-msg { flex: 1 0 100%; margin: 2px 0 0; min-height: 1.4em; text-align: center; font-size: 13.5px; color: var(--wd-text-2); }
.wd-pcode .pp-code-msg.is-ok { color: var(--wd-ok); }
.wd-pcode .pp-code-msg.is-err { color: var(--wd-crit); }
body.wd-pricing .wd-front-last { margin: 56px auto; background: var(--wd-work); border-radius: 14px; border: 1px solid var(--wd-border); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 760px) {
  .wd-fbar-in { padding: 12px 16px; gap: 12px; }
  .wd-flogo img { height: 52px; }
  .wd-fmenu { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--wd-border-strong); border-radius: 8px; background: var(--wd-work); cursor: pointer; }
  .wd-fmenu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--wd-text); }
  .wd-fnav { display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 0; padding: 8px 16px 16px;
    flex-direction: column; align-items: stretch; gap: 2px; background: var(--wd-overlay); border-bottom: 1px solid var(--wd-border);
    box-shadow: 0 16px 32px -16px var(--wd-scrim); }
  .wd-fnav.open { display: flex; }
  .wd-fnav a:not(.wd-btn) { min-height: 48px; padding: 0 12px; font-size: 16px; }
  .wd-fnav .wd-btn { margin: 8px 0 0; min-height: 48px; }
  .wd-hero { padding: 40px 16px 0; }
  .wd-hero h1 { font-size: 40px; }
  .wd-hero-sub { margin-top: 16px; font-size: 17px; }
  .wd-hero-acts { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .wd-film { padding: 36px 16px 0; }
  .wd-film::after { width: calc(100% - 32px); }
  .wd-film-bar { height: 28px; padding: 0 10px; gap: 5px; border-radius: 10px 10px 0 0; }
  .wd-film-bar i { width: 8px; height: 8px; }
  .wd-film-bar span { display: none; }
  .wd-film-v { border-radius: 0 0 10px 10px; }
  .wd-front-plans { padding: 56px 16px 0; }
  body.wd-front .wd-plans-head h2, .wd-front-last h2 { font-size: 24px; }
  .wd-front-last { margin-top: 56px; padding: 40px 16px; }
  .wd-front-last .wd-btn { width: 100%; }
  .wd-pricing-plans { padding-top: 32px; }
  .wd-pstate { margin: 20px 16px -8px; }
  .wd-pcode-sec { padding: 24px 16px 0; }
  .wd-pcode .pp-code-l { flex: 1 0 100%; text-align: center; line-height: 1.3; }
  body.wd-pricing .wd-pcode input[type="text"] { flex: 1 1 140px; min-height: 44px; }
  .wd-pcode .wd-btn { min-height: 44px; }
  body.wd-pricing .wd-front-last { margin: 40px 16px; }
  body.wd-front > .foot { padding: 0 16px 24px; }
  /* every control at least 44px tall on a phone (DESIGN §7): the plans' buttons and the footer's links */
  body.wd-front .wd-plan .wd-btn { min-height: 44px; }
  body.wd-front > .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { body.wd-front *, body.wd-front *::before, body.wd-front *::after { transition: none !important; animation: none !important; } }