/* Product: Zoho Sites / LandingPage - page-specific design. Primary accent sampled from Sites'
   icon (#226db4, the anchor app); LandingPage's own green (#088741) used only as a secondary
   block tint. Mechanic is a live section-builder: clicking "add a section" appends a wireframe
   block to a page-preview stack in real time - distinct from every other mechanic on the site
   (a constructive/generative build-your-own-structure interaction, not a switchboard, matcher,
   checker or feed).

   All classes scoped to .sit-page, prefixed sit-. */

.sit-page { --sit: #226db4; --sit-d: #185086; --sit-l: #eaf2fa; --sit-lp: #088741; }

.sit-page .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff;
  margin-block-end: 18px;
}
.sit-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* ---------------------------------------------------------------------- builder -- */
.sit-builder { padding: clamp(48px, 7vw, 84px) 0; }
.sit-builder h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 12px; }
.sit-builder .lede { max-width: 82ch; margin: 0 0 26px; }

.sit-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.sit-controls { display: flex; flex-direction: column; gap: 8px; }
.sit-add {
  font: inherit; text-align: start; cursor: pointer; padding: 10px 14px; border-radius: 10px;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; font-size: .86rem;
}
.sit-add:hover:not(:disabled) { border-color: var(--sit); }
.sit-add:disabled { opacity: .4; cursor: default; }
.sit-clear { font-size: .82rem; margin-block-start: 8px; }

.sit-preview { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sit-browser-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--sit-l); }
.sit-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--sit) 35%, var(--white)); }
.sit-stack { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.sit-empty { margin: auto; color: var(--muted); font-size: .88rem; text-align: center; }

.sit-block {
  padding: 14px; border-radius: 8px; font-size: .85rem; font-weight: 700; color: var(--sit-d);
  background: var(--sit-l); border: 1px dashed color-mix(in srgb, var(--sit) 35%, var(--line));
  animation: sitIn .25s ease;
}
.sit-block-form { color: var(--sit-lp); background: color-mix(in srgb, var(--sit-lp) 10%, var(--white)); border-color: color-mix(in srgb, var(--sit-lp) 35%, var(--line)); }
@keyframes sitIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.sit-score { margin: 12px 16px 16px; font-size: .84rem; font-weight: 700; color: var(--ink); }

@media (max-width: 640px) {
  .sit-layout { grid-template-columns: 1fr; }
  .sit-controls { flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------------------------------------ need -- */
.sit-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--sit-l);
  border-block: 1px solid color-mix(in srgb, var(--sit) 18%, var(--line));
}
.sit-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.sit-need .lede { max-width: 82ch; margin: 0; }

/* ------------------------------------------------------------------------- caps -- */
.sit-caps { padding: clamp(48px, 7vw, 84px) 0; }
.sit-caps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.sit-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.sit-cap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.sit-cap b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--sit-d); }
.sit-cap p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ------------------------------------------------------------------------- move -- */
.sit-move { padding: clamp(48px, 7vw, 84px) 0; }
.sit-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.sit-move h3 { font-size: 1.08rem; }