/* Public landing page. */

.landing { background: var(--surface); }

.landing-nav {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.landing-nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 680; }
.landing-nav .brand:hover { text-decoration: none; }
.landing-nav .brand img { width: 108px; }
.landing-nav .links { display: flex; align-items: center; gap: 8px; }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: 2.9rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.hero .lede { font-size: 1.1rem; color: var(--ink-muted); margin-bottom: 26px; max-width: 46ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 0.85rem; color: var(--ink-faint); }

.hero-visual {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
}

.hero-doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  font-size: 0.75rem;
}

.hero-doc .doc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.hero-doc .doc-title { font-size: 1.3rem; font-weight: 300; letter-spacing: 0.06em; color: var(--brand); }
.hero-doc .doc-rule { height: 1px; background: var(--line); margin: 12px 0; }
.hero-doc .doc-line { height: 7px; background: var(--line); border-radius: 3px; margin-bottom: 7px; }
.hero-doc .doc-line.w40 { width: 40%; }
.hero-doc .doc-line.w60 { width: 60%; }
.hero-doc .doc-line.w80 { width: 80%; }
.hero-doc .doc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hero-doc .doc-total { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 700; color: var(--brand); }

.section { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
.section-tinted { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tinted .section { padding: 56px 24px; }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.section-head h2 { font-size: 1.9rem; letter-spacing: -0.02em; }
.section-head p { color: var(--ink-muted); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* The features grid and the document guide are the same object - a heading with
   an icon on it and a sentence underneath - so they share one definition rather
   than two that drift apart.

   The icon used to sit in a 38px tinted tile above the heading. Inline in the
   heading it reads as belonging to the words rather than as decoration over
   them, it lets the eye run straight down the six titles, and it drops a block
   of colour that was competing with the actual content. */
.feature,
.doc-kind {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.feature h3,
.doc-kind h3 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
}
.feature h3 svg,
.doc-kind h3 svg { color: var(--brand); flex: none; }

.feature p,
.doc-kind p { font-size: 0.9rem; color: var(--ink-muted); margin: 0; line-height: 1.55; }

/* --- Template gallery ------------------------------------------------------ */

.template-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.template-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.template-chip .thumb {
  height: 128px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.template-chip .thumb .bar { height: 6px; border-radius: 2px; background: var(--line); }
.template-chip .thumb .bar.accent { background: var(--brand); }
.template-chip .thumb .bar.w30 { width: 30%; }
.template-chip .thumb .bar.w50 { width: 50%; }
.template-chip .thumb .bar.w70 { width: 70%; }
.template-chip .name { padding: 10px; font-size: 0.85rem; font-weight: 600; }

/* --- Pricing --------------------------------------------------------------- */

.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }

.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.price-card.is-featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg);
  position: relative;
}

.price-card .flag {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 12px;
}

.price-card h3 { font-size: 1.05rem; margin-bottom: 3px; }
.price-card .price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin: 8px 0 14px; }
.price-card .price small { font-size: 0.82rem; font-weight: 500; color: var(--ink-faint); }

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 0.88rem;
  flex: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}

.price-mark { flex: none; display: flex; align-items: center; height: 1.35em; }
.price-label { min-width: 0; }

/* Included: full-contrast text, the value or capability in bold so a glance
   down the column reads as a list of what you get. */
.price-features li.is-on { color: var(--ink); }
.price-features li.is-on .price-mark { color: var(--ok); }
.price-features li.is-on strong { font-weight: 650; }

/* Excluded: muted and unemphasised, with a neutral dash rather than a red
   cross — absent, not an error. */
.price-features li.is-off { color: var(--ink-faint); }
.price-features li.is-off .price-mark { color: var(--line-strong); }

/* Quiet heading that opens the excluded group. */
.price-features li.price-divider {
  display: block;
  margin-top: 10px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Footer ---------------------------------------------------------------- */

.landing-footer {
  border-top: 1px solid var(--line);
  background: var(--canvas);
}

.landing-footer .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.landing-footer img { width: 96px; opacity: 0.75; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero h1 { font-size: 2.2rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .feature-grid, .pricing-grid, .template-strip { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
}

/* Shown instead of a switch button on tiers that are not self-service. */
.price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--ink-faint);
  text-align: center;
}

/* Walkthrough video.
 *
 * Sat in a window-like frame so the recording reads as the product rather than
 * a stray media file, and given a fixed 1440x900 aspect ratio so the section
 * reserves its height before the poster loads. */
.demo-frame {
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.demo-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 900;
  background: var(--canvas);
}

.demo-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  color: var(--ink-faint);
  text-align: center;
}

.demo-note .icon { flex: none; }

/* Closing call to action, where the pricing table used to sit. */
.closing .section-head { margin-bottom: 22px; }

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


/* Play badge, drawn over the poster until the walkthrough starts.
 * Added by demo-video.js; without it the video keeps its native controls. */
.demo-frame { position: relative; }

.demo-play {
  position: absolute;
  left: 50%;
  top: calc(50% + 17px); /* Offset by half the chrome bar, to centre on the video. */
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  padding: 0 0 0 4px; /* The triangle's mass sits left of centre. */
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(16, 24, 34, 0.34);
  transition: transform 0.16s ease, background 0.16s ease;
}

.demo-play:hover { background: var(--brand-dark); transform: translate(-50%, -50%) scale(1.06); }
.demo-play:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.demo-play[hidden] { display: none; }

@media (max-width: 620px) {
  /* The header sits on one line down to about 480px, then the sign-in and
     sign-up buttons push past the viewport. Let it stack instead. */
  .landing-nav {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 16px;
  }

  .landing-nav .links { flex-wrap: wrap; justify-content: center; }

  /* The badge is sized against a 940px frame; on a phone it swallows the
     poster. */
  .demo-play { width: 60px; height: 60px; }
  .demo-play svg { width: 26px; height: 26px; }
}

/* --- Which document you need ----------------------------------------------- */
/* Same card as the feature grid above; see that rule. */
.doc-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .doc-guide { grid-template-columns: 1fr; }
}