/* ============================================================
   Lab N Cloud — Shared Page Styles (Features / Pricing / Demo)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* IDENTICAL to the :root in home.css — features/pricing/demo/contact load BOTH
   files, so any difference here silently wins over home.css. The two blocks had
   already drifted apart on --surface, --surface-border and --blue-glow before
   this conversion. Change one, change the other. */
:root {
  --bg: #eef2f7;              /* app.css --bg-pearl  */
  --bg-deep: #e4e9f0;         /* app.css --bg-pearl-deep */
  --paper: #ffffff;           /* app.css --paper */
  --surface: rgba(255,255,255,0.96);
  --surface-hover: rgba(255,255,255,1);
  --surface-border: rgba(200,210,225,0.55);
  --line: #e6edf5;            /* app.css --line */
  --blue: #3b82f6;            /* UNCHANGED — button fills */
  --blue-ink: #0284c7;        /* accent text only, 4.6:1 on pearl */
  --blue-glow: rgba(59,130,246,0.28);
  --cyan: #1d4ed8;            /* app.css --primary2 */
  --text: #0f172a;            /* app.css --text */
  --text-muted: #475569;      /* app.css --muted */
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow2: 0 16px 40px rgba(15,23,42,0.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.page {
  font-family: var(--font);
  /* Matches body.home-page and the dashboard's own ground (app.css body). */
  background:
    /* Both corner washes are the button blue (--blue #3b82f6) at 0.20 — kept
       in sync with body.home-page in home.css. Change one, change the other. */
    radial-gradient(900px 500px at 10% -10%, rgba(59,130,246,0.20), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,0.20), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.page a { text-decoration: none; color: inherit; }

/* The particle canvas is position:fixed with z-index:0, and a positioned
   element at z-index 0 paints ABOVE all static-flow content -- so the wave
   drew over every card and input on these pages. On the old near-black theme
   the wave was too dark to see doing it; blue-on-pearl made it visible. Every
   content wrapper is lifted above the canvas the same way the home hero
   always was (hp-hero carries z-index:1 for exactly this reason). */
.pg-header, .pg-footer, .hp-footer,
.ft-section, .ft-tour-section,
.pr-grid, .pr-solo-wrap,
.dm-container {
  position: relative;
  z-index: 1;
}

/* ===== NAV (same as home) ===== */
.pg-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.pg-nav-logo { display: flex; align-items: center; }
/* The brightness(0) invert(1) filter existed only to force the dark logo white
   against a near-black bar. On white it would erase the logo, so it is gone and
   the artwork renders as drawn — the same way home.css has always shown it. */
.pg-nav-logo img { height: 48px; }
.pg-nav-links { display: flex; gap: 32px; }
.pg-nav-links a { color: var(--text-muted); font-size: 14px; font-weight: 500; transition: color 0.25s; }
.pg-nav-links a:hover { color: var(--text); }
.pg-nav-links a.active { color: var(--text); }
/* Translucency inverted, geometry untouched — see .hp-nav-cta in home.css. */
.pg-nav-cta {
  background: rgba(15,23,42,0.05); border: 1px solid rgba(15,23,42,0.12);
  color: var(--text); padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; transition: all 0.25s;
}
.pg-nav-cta:hover { background: rgba(15,23,42,0.09); }

/* ===== PAGE HEADER ===== */
.pg-header {
  padding: 140px 5% 60px;
  text-align: center;
}
.pg-header h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pg-header p {
  font-size: 18px; color: var(--text-muted); max-width: 540px; margin: 0 auto; line-height: 1.6;
}

/* ===== FEATURES PAGE ===== */
.ft-section { padding: 0 5% 80px; }
.ft-category {
  max-width: 1100px; margin: 0 auto 64px;
}
.ft-cat-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-border);
}
.ft-cat-icon { font-size: 28px; }
.ft-cat-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.ft-cat-count {
  font-size: 12px; font-weight: 700; color: var(--blue-ink);
  background: rgba(59,130,246,0.1); padding: 4px 10px; border-radius: 6px;
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.ft-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 3px 8px rgba(15,23,42,0.05);
  transition: all 0.3s;
  /* White-alpha surfaces read as flat panels on a dark ground; on pearl they
     need a shadow or they disappear into the background. */
  box-shadow: var(--shadow);
}
.ft-card:hover {
  background: var(--surface-hover);
  border-color: rgba(59,130,246,0.3);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.ft-card h4 {
  font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--text);
}
.ft-card p {
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
/* A promised feature, visibly not a shipped one. The card stays in the grid
   so the roadmap is honest, but it must not read as something a lab can use
   the day they sign up. */
.ft-card--soon { opacity: 0.75; }
.ft-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: #92400e;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.35);
}

/* ===== PRICING PAGE ===== */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5% 100px;
}

.pr-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  padding: 40px;
  display: flex; flex-direction: column;
  box-shadow: 0 3px 8px rgba(15,23,42,0.05);
  transition: all 0.3s;
  box-shadow: var(--shadow);
}
.pr-card:hover { border-color: rgba(15,23,42,0.16); }

.pr-card.featured {
  background: linear-gradient(160deg, rgba(230,245,255,0.92), rgba(255,255,255,0.94));
  border-color: rgba(14,165,233,0.30);
  box-shadow: var(--shadow);
  position: relative;
}
.pr-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 980px; letter-spacing: 0.5px;
}

/* One plan, one card, centred.
   The base .pr-grid is three fixed columns, left over from a
   Starter/Professional/Enterprise ladder that no longer exists. With a single
   card that grid leaves two empty columns and the card sits hard left, so this
   collapses it to one column and centres the whole block.

   margin-inline is restated here rather than inherited from .pr-grid: the
   responsive blocks at the bottom of this file re-declare .pr-grid, and this
   rule needs to survive whatever they do. "Most popular" is also meaningless
   with nothing to be more popular than. */
/* The single plan is NOT a grid cell.
   .pr-grid is three fixed columns built for a Starter/Professional/Enterprise
   ladder that no longer exists. Dropping one card into it left a narrow column
   sitting hard left with two empty columns beside it -- so this stops using the
   grid entirely and lays the plan out as one wide panel: price and call to
   action on the left, the feature list on the right. It fills the page at the
   width it actually is, instead of pretending to be one of three. */
.pr-solo-wrap {
  max-width: 940px;
  margin-inline: auto;
  padding: 0 24px 100px;
}

.pr-card.pr-plan {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding: 48px;
  text-align: left;
}
.pr-card.featured.pr-plan::before { content: 'EVERYTHING INCLUDED'; }

.pr-plan-main { display: flex; flex-direction: column; }
.pr-plan-main .pr-btn { margin-top: 4px; }

/* Two columns of features so the list reads at a glance rather than as a long
   scroll, and so the right-hand panel balances the price block on the left. */
.pr-plan-features .pr-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
}
.pr-plan-features .pr-list li { align-items: flex-start; }

/* Stack below the point where two feature columns stop being readable. */
@media (max-width: 860px) {
  .pr-card.pr-plan { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px; }
  .pr-plan-features .pr-list { grid-template-columns: minmax(0, 1fr); }
}

.pr-quiet-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1c4d96;
  text-decoration: none;
}
.pr-quiet-link:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .pr-grid.pr-duo { grid-template-columns: 1fr; }
}

.pr-tier {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--blue-ink); margin-bottom: 16px;
}
.pr-price {
  font-size: 48px; font-weight: 900; letter-spacing: -2px; margin-bottom: 4px; color: var(--text);
}
.pr-price span { font-size: 16px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.pr-desc {
  color: var(--text-muted); font-size: 14px; margin-bottom: 32px; line-height: 1.5; min-height: 42px;
}

/* Translucency inverted, geometry untouched. The featured variant below is a
   solid fill and is left exactly as it was. */
.pr-btn {
  display: block; text-align: center; padding: 14px; border-radius: 10px;
  background: rgba(15,23,42,0.05); border: 1px solid rgba(15,23,42,0.12);
  color: var(--text); font-weight: 700; font-size: 15px; margin-bottom: 32px; transition: all 0.25s;
}
.pr-btn:hover { background: rgba(15,23,42,0.09); }
.pr-card.featured .pr-btn {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 20px var(--blue-glow);
}
.pr-card.featured .pr-btn:hover { background: #4f8ff7; }

.pr-list { list-style: none; flex: 1; }
.pr-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-muted); margin-bottom: 14px; font-weight: 500;
}
.pr-list li svg { width: 16px; height: 16px; stroke: var(--blue-ink); stroke-width: 2.5; fill: none; flex-shrink: 0; }

/* ===== DEMO PAGE ===== */
.dm-container {
  max-width: 560px; margin: 0 auto; padding: 0 5% 100px;
}
.dm-form {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow);
}
.dm-group { margin-bottom: 18px; }
.dm-group label {
  display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px;
}
.dm-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(200,210,225,0.85);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text); font-size: 15px; font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05);
  transition: border-color 0.2s;
}
.dm-input::placeholder { color: #94a3b8; }
.dm-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
textarea.dm-input { resize: vertical; min-height: 100px; }

.dm-submit {
  width: 100%; background: var(--blue); color: #fff; border: none;
  padding: 16px; border-radius: 10px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all 0.25s; margin-top: 8px; font-family: inherit;
  box-shadow: 0 0 20px var(--blue-glow);
}
.dm-submit:hover { background: #4f8ff7; }

.dm-row { display: flex; gap: 16px; }
.dm-row .dm-group { flex: 1; }

/* ===== FOOTER ===== */
.pg-footer {
  border-top: 1px solid var(--line);
  padding: 40px 5%;
  display: flex; justify-content: space-between; align-items: center;
}
.pg-footer-copy { color: var(--text-muted); font-size: 13px; }
.pg-footer-links { display: flex; gap: 24px; }
.pg-footer-links a { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.pg-footer-links a:hover { color: var(--text); }

/* ===== FULL TOUR VIDEO ===== */
.ft-tour-section {
  padding: 0 5% 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.ft-tour-wrapper {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ft-tour-label {
  padding: 32px 32px 20px;
  text-align: center;
}
/* The badge sits on the light .ft-tour-wrapper, so it takes the ink accent.
   Everything below it — poster overlay, control bar, play button — deliberately
   stays dark: it overlays video, not the page. */
.ft-tour-badge {
  display: inline-block;
  background: rgba(59,130,246,0.12);
  color: var(--blue-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.ft-tour-label h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.ft-tour-label p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Player container */
.ft-tour-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.ft-tour-player video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Poster overlay. Everything from here to the fullscreen rules is the chrome
   INSIDE the video frame -- dark on purpose, like any video player, and it
   does not follow the page theme. */
.ft-tour-poster {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,8,13,0.9), rgba(15,23,42,0.85));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
  cursor: pointer;
  transition: background 0.3s;
}
.ft-tour-poster:hover { background: linear-gradient(135deg, rgba(6,8,13,0.8), rgba(15,23,42,0.7)); }
.ft-tour-play-btn {
  width: 80px; height: 80px;
  background: rgba(59,130,246,0.2);
  border: 2px solid rgba(59,130,246,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.ft-tour-play-btn svg { width: 32px; height: 32px; margin-left: 4px; }
.ft-tour-poster:hover .ft-tour-play-btn {
  transform: scale(1.1);
  background: rgba(59,130,246,0.35);
  border-color: var(--blue);
}
.ft-tour-play-text {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
}

/* Controls bar */
.ft-tour-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.ft-vc-btn {
  background: none; border: none;
  color: #fff; cursor: pointer;
  padding: 6px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85; flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.ft-vc-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.ft-vc-progress {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px; cursor: pointer;
  position: relative; transition: height 0.15s;
}
.ft-vc-progress:hover { height: 7px; }
.ft-vc-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  width: 0%; pointer-events: none;
}
.ft-vc-progress-handle {
  position: absolute; top: 50%; left: 0%;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.ft-vc-progress:hover .ft-vc-progress-handle { transform: translate(-50%, -50%) scale(1); }
.ft-vc-time {
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}
.ft-tour-player:fullscreen { border-radius: 0; }
.ft-tour-player:fullscreen video { object-fit: contain; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .pr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pg-nav-links { display: none; }
  .ft-grid { grid-template-columns: 1fr; }
  .pr-grid { grid-template-columns: 1fr; padding: 0 5% 60px; }
  .dm-row { flex-direction: column; gap: 0; }
  .pg-footer { flex-direction: column; gap: 16px; text-align: center; }
}