/* ═══════════════════════════════════════════════════════════════════════════
   site-land.css — the full page for each thing Nivasik sells (2026-09-26):
   Hotels, Restaurants, Shops (and each kind of shop), Staff & payroll,
   Expenses. Generated by tools/seo/gen_c.py through nvpage.render(landing=True),
   which loads ds.css (the figure kit and the materials) before site.css and this
   file after it. The homepage loads it too, for the drawn panels (.tf).

   What it adds, in page order:
     .ph-split   the promise beside its drawing (stacked on a phone)
     .tf         a drawn ledger in its panel — header line, drawing, caption
     .l-points   three things it does, set large
     .l-day      the day of that business, told through the product: a register
     .l-screens  what is on its screen, and what never is
     .l-demo     the trade's own demo
     .l-price    the price for that trade, as a number
   Motion rules (CLAUDE.md § Motion, § The homepage moves now): transform and
   opacity only, --ease-out, nothing moves unless it is seen, reduced motion
   gets the finished page. html.nv-js holds things hidden ONLY while
   site-land.js is there to light them; without it the page is complete.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The hero, split ──────────────────────────────────────────────────── */
.ph.ph-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: 12px; }
.ph-split .ph-copy { min-width: 0; }
.ph-split h1 { font-size: clamp(34px, 4vw, 54px); }
.ph-fig { min-width: 0; }
@media (max-width: 960px) {
  .ph.ph-split { grid-template-columns: minmax(0, 1fr); }
  .ph-fig { max-width: 560px; }
}

/* ── A drawn ledger in its panel ──────────────────────────────────────── */
.tf { margin: 0; padding: 16px 18px 14px; border-radius: var(--radius-lg, 16px); min-width: 0; }
.tf-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tf-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-h .stamp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; flex: none; }
.tf .fig { max-width: 520px; margin: 0 auto; }
.tf-cap { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* On a phone the drawing takes the panel's width: every px of padding comes
   off the drawing's scale, and its 11px labels have to land at 9px or more
   (282px wide at 360 put them at 7.8). The header and caption keep an inset. */
@media (max-width: 480px) {
  .tf:not(.tf-film) { padding: 14px 8px 12px; }
  .tf:not(.tf-film) .tf-h, .tf:not(.tf-film) .tf-cap { margin-inline: 6px; }
}
/* The film: poster and video share one 16:9 box, the video fades in over it. */
.tf-film { padding: 12px 12px 12px; }
.tf-film .tf-h { margin: 2px 4px 10px; }
.tf-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--sunken, #000); }
.tf-stage img, .tf-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-stage video { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.tf-film.is-playing .tf-stage video { opacity: 1; }
.tf-film .tf-cap { margin: 10px 4px 0; }
.tf-pause { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border-control); background: transparent;
  color: var(--text-soft); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.tf-pause .i-play, .tf-pause[data-paused] .i-pause { display: none; }
.tf-pause[data-paused] .i-play { display: inline; }
.tf-pause svg * { fill: currentColor; }

/* ── Three things it does ─────────────────────────────────────────────── */
.l-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--border); }
.l-points li { padding: 22px 24px 4px 0; min-width: 0; }
.l-points li + li { padding-left: 24px; border-left: 1px solid var(--border); }
.l-points i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  letter-spacing: .06em; margin-bottom: 10px; }
.l-points h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; margin-bottom: 8px; }
.l-points p { color: var(--text-soft); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 860px) {
  .l-points { grid-template-columns: minmax(0, 1fr); }
  .l-points li, .l-points li + li { padding: 18px 0; border-left: 0; }
  .l-points li + li { border-top: 1px solid var(--border); }
}

/* ── The day, as a register ───────────────────────────────────────────── */
.l-day { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--border); }
.l-day li { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px;
  padding: 18px 0; border-bottom: 1px solid var(--border); }
.l-day time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text);
  padding-top: 2px; }
.l-day time small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.l-day .l-was { color: var(--text-soft); text-wrap: pretty; }
.l-day .l-now { color: var(--text); text-wrap: pretty; }
.l-day .l-now::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: 2px; }
.l-day-keys { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.l-day-keys span:first-child { grid-column: 2; }
@media (max-width: 760px) {
  .l-day li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .l-day time { display: flex; gap: 10px; align-items: baseline; }
  .l-day time small { margin-top: 0; }
  .l-day-keys { display: none; }
  .l-day .l-was::before { content: 'Before · '; color: var(--muted); }
}

/* ── On its screen, and never ─────────────────────────────────────────── */
.l-screens { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.l-screens > div { padding: 22px 24px; border-radius: var(--radius-lg, 16px); min-width: 0; }
.l-screens h3 { font-size: 17px; line-height: 1.35; margin-bottom: 14px; }
.l-screens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.l-screens li { position: relative; padding-left: 24px; color: var(--text-soft); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.l-screens .l-on li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.l-screens .l-off li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 11px; height: 1.5px;
  background: var(--muted); border-radius: 1px; }
.l-screens .l-off li { color: var(--muted); }
.l-screens p.l-note { margin-top: 14px; font-size: 13px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 760px) { .l-screens { grid-template-columns: minmax(0, 1fr); } }

/* ── The kinds of shop (the shops hub) ────────────────────────────────── */
.l-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.l-kinds a { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: var(--radius-md, 12px);
  color: inherit; text-decoration: none; min-width: 0; }
.l-kinds a b { font-size: 17px; font-weight: 500; color: var(--text); }
.l-kinds a span { color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.l-kinds a em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 13px; color: var(--primary); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .l-kinds a { transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
  .l-kinds a:hover { transform: translateY(-2px); border-color: var(--border-control); text-decoration: none; }
}
@media (max-width: 960px) { .l-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .l-kinds { grid-template-columns: minmax(0, 1fr); } }

/* ── The trade's own demo ─────────────────────────────────────────────── */
.l-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); border-radius: var(--radius-lg, 16px); margin-top: 8px; }
.l-demo h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.l-demo p { color: var(--text-soft); margin-top: 8px; max-width: 62ch; text-wrap: pretty; }
.l-demo .l-demo-a { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .l-demo { grid-template-columns: minmax(0, 1fr); } .l-demo .l-demo-a .btn { flex: 1 1 auto; } }

/* ── The price, as a number ───────────────────────────────────────────── */
.l-price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 36px; align-items: start;
  margin-top: 24px; padding: 24px 26px; border-radius: var(--radius-lg, 16px); }
.l-price .l-num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-price .l-unit { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; }
.l-price p { color: var(--text-soft); text-wrap: pretty; }
.l-price p + p { margin-top: 10px; }
.l-price .l-trial { color: var(--text); }
@media (max-width: 640px) { .l-price { grid-template-columns: minmax(0, 1fr); } }

/* ── Entrance ─────────────────────────────────────────────────────────── */
html.nv-js .l-rv:not(.is-lit) { opacity: 0; transform: translate3d(0, 10px, 0); }
html.nv-js .l-rv.is-lit { animation: nv-rise var(--dur-3) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  html.nv-js .l-rv:not(.is-lit) { opacity: 1; transform: none; }
  html.nv-js .l-rv.is-lit { animation: none; }
}
/* Script gone (the boot's 3 s check found site-land.js never ran): the finished page. */
html.nv-land:not(.nv-js) .fig [data-draw] { stroke-dashoffset: 0; }
html.nv-land:not(.nv-js) .fig [data-pop], html.nv-land:not(.nv-js) .fig [data-fade],
html.nv-land:not(.nv-js) .fig [data-rise] { opacity: 1; transform: none; }

/* ── Words beside a drawing (the hotel's room rack) ───────────────────── */
.l-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.l-duo h2 { margin-bottom: 14px; }
.l-duo .prose p { color: var(--text-soft); text-wrap: pretty; }
.l-duo .prose p + p { margin-top: 12px; }
@media (max-width: 860px) { .l-duo { grid-template-columns: minmax(0, 1fr); } }