/* Shared components for topical landings (пустой угол, подбор мебели, …).
   Builds on landing.css — variables, buttons, header, footer, sections. */

/* Body copy runs long on these pages, so it uses a darker ink than the shared
   --muted (#6f675c), which only clears ~4.9:1 on the paper background.
   ~9:1 here — still a step lighter than --ink, so headings keep the lead. */
:root{--muted-ink:#38342f}


/* ---------- article-like sections ---------- */
.lc-sec{padding:76px 0}
.lc-sec--tint{background:var(--paper-2);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.lc-narrow{max-width:760px;margin:0 auto}
.lc-narrow p{color:var(--muted-ink);font-size:1.08rem;margin-top:16px}
.lc-narrow p.lead{color:var(--ink);font-size:1.16rem}
.lc-narrow p:first-child{margin-top:0}

/* ---------- prose landing: reads as an article, images between sections ---------- */
.lc-prose{max-width:760px;margin:0 auto}
.lc-prose h1{font-family:var(--display);font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.lc-prose h1 .accent{color:var(--forest)}
.lc-prose h2{font-size:clamp(1.45rem,2.8vw,1.95rem);margin:56px 0 0}
.lc-prose p{color:var(--muted-ink);font-size:1.08rem;margin-top:16px}
.lc-prose p.lead{color:var(--ink);font-size:1.16rem}
.lc-prose p.closing{color:var(--ink);font-size:1.12rem;font-weight:600}
.lc-prose ul,.lc-prose ol{margin:16px 0 0;padding-left:24px;color:var(--muted-ink);font-size:1.06rem}
.lc-prose li{margin-top:9px}
.lc-prose li::marker{color:var(--coral)}
.lc-prose .ph{margin-top:34px}
.lc-prose .ph-cap{max-width:none}

/* example phrases a user might type */
.lc-says{list-style:none;padding:0;margin-top:18px}
.lc-says li{
  margin-top:9px;padding:11px 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--sand);
  color:var(--ink);font-size:1rem;line-height:1.45;
}
.lc-says li::before{content:'«'}
.lc-says li::after{content:'»'}

/* single button under a dropzone, no form around it */
.lc-cta-btn{margin-top:18px}

/* upload block sitting inside the text */
.lc-cta{margin-top:34px}
.lc-cta .hero-upload{max-width:460px;margin:0 auto}
.lc-cta .pform-note{margin-top:10px;text-align:center}

/* pull quote = a user's request, as typed */
.lc-quote{
  background:var(--card);border:1px solid var(--sand);border-left:4px solid var(--coral);
  border-radius:0 16px 16px 0;padding:18px 22px;margin:26px 0;
  font-size:1.06rem;line-height:1.5;
}
.lc-quote::before{content:'«'}
.lc-quote::after{content:'»'}

/* small card grid — doubts, criteria, anything list-shaped */
.lc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px;list-style:none;padding:0}
/* six cards: 3×2 beats auto-fit's ragged 4+2 */
.lc-cards--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.lc-cards--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lc-cards--3{grid-template-columns:1fr}}
.lc-card{background:var(--card);border:1px solid var(--sand);border-radius:18px;padding:20px 22px}
.lc-card b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;margin-bottom:6px}
.lc-card span{color:var(--muted-ink);font-size:.94rem;line-height:1.45}
.lc-card .lc-card-ico{display:flex;width:38px;height:38px;border-radius:11px;background:#e6ede3;align-items:center;justify-content:center;color:var(--forest);margin-bottom:14px}
.lc-card .lc-card-ico svg{width:20px;height:20px}

/* ---------- image placeholder ---------- */
.ph{
  position:relative;width:100%;aspect-ratio:var(--ratio,16/9);
  border-radius:20px;overflow:hidden;background:var(--paper-2);
  border:1.6px dashed var(--sand);
}
.ph-stub{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:26px;text-align:center;
}
.ph-stub svg{width:34px;height:34px;margin:0 auto;color:var(--forest);opacity:.55}
.ph-tag{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--coral-ink)}
.ph-desc{font-size:.94rem;line-height:1.45;color:var(--muted);max-width:46ch;margin:0 auto}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* real image loaded: drop the dashed placeholder chrome */
.ph--has-img{border-style:solid;border-color:var(--sand);background:#fff}
/* UI screenshots: fit whole, never crop — the pillarbox blends into their own white */
.ph--shot .ph-img{object-fit:contain}
.ph-cap{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.ph-cap b{color:var(--ink);font-weight:600}

/* ---------- prompt form (input + button) ---------- */
.pform{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.pform-input{
  flex:1 1 260px;min-width:0;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--card);border:1.5px solid var(--sand);border-radius:14px;padding:14px 16px;
}
.pform-input::placeholder{color:var(--muted)}
.pform-input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px rgba(35,75,63,.1)}
.pform .btn{flex:0 0 auto}
.pform-note{width:100%;font-size:.85rem;color:var(--muted);margin-top:-4px}

/* prompt chips */
.pchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pchip{
  font-family:var(--body);font-weight:600;font-size:.94rem;color:var(--forest);
  background:var(--card);border:1.4px solid var(--sand);border-radius:999px;
  padding:10px 17px;cursor:pointer;transition:all .18s ease;text-align:left;
}
.pchip:hover{border-color:var(--coral);background:#fff;color:var(--coral-ink);transform:translateY(-2px)}
.pchip:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* ---------- variants ---------- */
.lc-variants{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.lc-variant{background:var(--card);border:1px solid var(--sand);border-radius:24px;padding:16px 16px 22px;display:flex;flex-direction:column}
.lc-variant .ph{border-radius:16px}
.lc-variant-body{padding:18px 8px 0;display:flex;flex-direction:column;flex:1}
.lc-eyebrow,.lc-variant-num{font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink)}
.lc-variant h3{font-size:1.32rem;margin-top:8px}
.lc-variant p{color:var(--muted-ink);font-size:.96rem;margin-top:10px}
.lc-variant .pform{margin-top:auto;padding-top:18px}
@media(max-width:860px){.lc-variants{grid-template-columns:1fr}}

/* ---------- flow: комната → предмет → интерьер ---------- */
.lc-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.lc-flow-step{background:var(--card);border:1px solid var(--sand);border-radius:14px;padding:13px 18px;font-weight:600;font-size:.98rem}
.lc-flow-arrow{color:var(--coral);font-weight:700}

/* items the same logic applies to */
.lc-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;list-style:none;padding:0}
.lc-tags li{background:var(--paper-2);border:1px solid var(--sand);border-radius:999px;padding:8px 15px;font-size:.92rem;color:var(--muted-ink)}

/* ---------- steps: попробуйте самый простой запрос ---------- */
.lc-try{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
/* light cards — keep own colours, they also sit inside the dark .cta-panel */
.lc-try-step{background:var(--card);border:1px solid var(--sand);border-radius:20px;padding:24px;color:var(--ink)}
.lc-try-step .num{font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--coral);letter-spacing:.04em}
.lc-try-step b{display:block;font-family:var(--display);font-size:1.08rem;margin-top:10px;color:var(--ink)}
.lc-try-step span{display:block;color:var(--muted-ink);font-size:.93rem;margin-top:8px;line-height:1.45}
@media(max-width:760px){.lc-try{grid-template-columns:1fr}}

/* section intros come from landing.css at --muted — match the darker body ink */
.lc-sec .sec-head p{color:var(--muted-ink)}

/* ---------- capabilities hub: one card per landing ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;list-style:none;padding:0;margin:0}
.cap-card{
  position:relative;background:var(--card);border:1px solid var(--sand);
  border-radius:22px;padding:26px 26px 22px;transition:border-color .18s ease,transform .18s ease;
}
.cap-card:hover{border-color:var(--coral);transform:translateY(-2px)}
.cap-card h3{font-size:1.24rem;line-height:1.25}
/* the whole card is the link target */
.cap-card h3 a{color:var(--ink);text-decoration:none}
.cap-card h3 a::after{content:'';position:absolute;inset:0;border-radius:22px}
.cap-card:hover h3 a{color:var(--forest)}
.cap-card p{color:var(--muted-ink);font-size:1rem;line-height:1.5;margin-top:12px}
.cap-card .cap-go{display:block;margin-top:16px;font-weight:600;font-size:.94rem;color:var(--coral-ink)}

/* ---------- hero ---------- */
.lc-hero{padding:34px 0 20px}
.lc-hero .hero-grid{align-items:start}
/* wide screenshot below the copy instead of beside it — copy centred like every
   other section head on the page */
.lc-hero--wide .hero-copy{max-width:860px;margin:0 auto;text-align:center}
.lc-hero--wide .hero-upload{max-width:460px;margin:0 auto}
.lc-hero--wide .hero-drop{text-align:left}
.lc-hero--wide .pchips{justify-content:center}
.lc-hero-shot{margin-top:42px}
.lc-hero h1{font-family:var(--display);font-size:clamp(2.1rem,4vw,3.15rem);font-weight:800;line-height:1.08;letter-spacing:-0.02em}
.lc-hero h1 .accent{color:var(--forest)}
.lc-hero .sub{font-size:1.1rem;color:var(--muted-ink);margin:20px 0 26px}
.lc-hero .hero-upload{max-width:none}
.lc-hero .hero-upload .pform-note{margin-top:10px;text-align:center}

/* ---------- final cta ---------- */
.cta-panel .pform{max-width:520px;margin:26px auto 0;justify-content:center}
.cta-panel .pform-input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff}
.cta-panel .pform-input::placeholder{color:rgba(255,255,255,.6)}
.cta-panel .pform-input:focus{border-color:#fff;box-shadow:none}
.cta-panel .pchips{justify-content:center;max-width:720px;margin:22px auto 0}
.cta-panel .pchip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.cta-panel .pchip:hover{background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:640px){
  .lc-sec{padding:52px 0}
  .lc-hero{padding:20px 0 8px}
  .lc-narrow p{font-size:1rem}
  .lc-flow-arrow{display:none}
  .lc-flow{flex-direction:column;align-items:stretch;text-align:center}
  .pform .btn{width:100%;justify-content:center}
}