/* Страницы продуктов (/apps/*): стиль главной B «Карта задач», обе темы. Токены — assets/site.css. */
.page{max-width:1280px;margin:0 auto;padding:0 32px 40px}
#main:focus{outline:none}
.page h1{font-size:60px;line-height:64px}
.page h2{font-size:36px;line-height:42px;margin-top:6px}
.page h3{font-size:22px;line-height:28px}
.eyebrow{font-size:15px;line-height:22px;font-weight:600;color:var(--muted)}
.section{padding:64px 0;border-bottom:1px solid var(--line)}
.hero-lead{font-size:20px;line-height:30px;color:var(--muted);max-width:720px}
.cta-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.note{color:var(--muted);font-size:16px;line-height:24px;margin-top:24px}
/* герой продукта */
.app-hero{padding:56px 0 64px;border-bottom:2px solid var(--strong-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.app-badge{display:inline-flex;padding:4px 10px;background:var(--accent-soft);color:var(--accent);border-radius:var(--radius);font-size:14px;line-height:20px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.app-hero h1{margin-bottom:16px}
.app-description{font-size:20px;line-height:30px;color:var(--muted);margin-bottom:28px;overflow-wrap:anywhere}
.app-description strong{color:var(--ink)}
.hero-visual{min-width:0}
.hero-visual > img{display:block;width:100%;height:auto;border:1px solid var(--field-border);background:var(--white)}
.shot-container{border:1px solid var(--field-border);background:var(--white);overflow:hidden}
.shot-container img{width:100%;height:auto;display:block}
.fig-cap{color:var(--muted);font-size:16px;line-height:24px;margin-top:12px}
/* панели и списки */
.info-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;margin-top:48px}
.info-grid--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:28px}
.info-panel{background:var(--surface);border-top:4px solid var(--accent);padding:28px;min-width:0}
.info-panel h2{font-size:28px;line-height:34px;margin:0 0 20px}
.info-panel h3{margin:0}
.info-panel h3 + p{margin-top:10px;color:var(--muted);font-size:16px;line-height:25px}
.list-clean{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.list-clean li{display:flex;gap:12px;color:var(--muted);font-size:16px;line-height:25px}
.list-clean li::before{content:"—";color:var(--accent);font-weight:700}
.list-clean strong{color:var(--ink)}
.prose p{color:var(--muted);font-size:17px;line-height:27px;margin-top:16px;max-width:70ch}
.prose p strong{color:var(--ink)}
.prose .fig-cap{margin-top:12px}
.fig{margin-top:28px;border:1px solid var(--field-border);background:var(--white);overflow:hidden}
.fig img{width:100%;height:auto;display:block}
/* шаги со снимками экрана (Разделение счёта) */
.screen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
.screen-card{background:var(--surface);border-top:4px solid var(--accent);padding:16px;min-width:0;overflow-wrap:break-word}
.screen-card img{width:100%;height:auto;margin-bottom:16px;border:1px solid var(--field-border);background:var(--white);display:block}
.screen-card h3{font-size:18px;line-height:24px;margin-bottom:8px}
.screen-card p{font-size:16px;line-height:24px;color:var(--muted)}
/* каталог */
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-bottom:64px;margin-top:40px}
.app-card{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--accent);display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0;
  animation:mo-reveal var(--mo-reveal) var(--mo-ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
.app-card:hover{background:var(--surface);color:inherit}
.app-card:hover .app-card-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.app-card-media{height:240px;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--line)}
.app-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.app-card-body{padding:24px 28px 28px;flex-grow:1;display:flex;flex-direction:column;gap:14px}
.app-card-title{font-size:24px;line-height:30px;color:var(--ink);margin:0}
.app-card-text{color:var(--muted);font-size:16px;line-height:25px}
.app-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tag{font-size:14px;line-height:20px;font-weight:600;padding:3px 10px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.app-card:hover .tag{background:var(--white)}
.tag--accent{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-soft)}
.app-card:hover .tag--accent{background:var(--accent-soft)}
/* переадресация */
.redirect{text-align:center;padding-top:96px}
.redirect .hero-lead{margin:24px auto 40px}
@media (max-width:1100px){
  .app-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .info-grid,.info-grid--even{grid-template-columns:minmax(0,1fr)}
  .catalog-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .page{padding:0 16px 32px}
  .page h1{font-size:36px;line-height:40px}
  .page h2{font-size:28px;line-height:34px}
  .app-hero{padding:32px 0 40px}
  .section{padding:44px 0}
  .app-description,.hero-lead{font-size:18px;line-height:27px}
  .info-panel{padding:20px}
  .info-grid{margin-top:32px}
  .cta-group .btn,.app-hero .cta-group .btn{flex:1 1 100%}
  .app-card-body{padding:20px}
  .redirect{padding-top:48px}
}
@media (max-width:560px){
  .screen-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:400px){
  .page h1{font-size:clamp(28px,8.4vw,36px);line-height:1.15}
}
.app-hero .cta-group{justify-content:flex-start}
.section > h1{margin-top:6px;margin-bottom:20px}
.catalog-grid{margin-top:40px}
/* ---- Home Assistant: иллюстрации на разметке (климат по комнатам, автоматизации) ---- */
.app-hero--top{align-items:start}
.hl-title{font-size:20px;line-height:26px;font-weight:700;margin:0 0 14px}
.hl-climate{border:1px solid var(--field-border);background:var(--white);padding:20px}
.hl-rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hl-room{background:var(--surface);border-top:4px solid var(--accent);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hl-name{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:17px;line-height:22px}
.hl-sw{width:40px;height:8px;display:block;overflow:visible}
.hl-temp{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.01em}
.hl-sub{font-size:16px;line-height:22px;color:var(--muted)}
.hl-fig{margin-top:16px}
.hl-chart,.hl-spark{display:block;width:100%;height:auto}
.hl-grid{stroke:var(--line);stroke-width:1}
.hl-tx{fill:var(--muted);font:500 20px var(--sans)}
.hl-ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hl-ln--l{stroke:var(--accent)}
.hl-ln--b{stroke:var(--ink);stroke-dasharray:9 6}
.hl-ln--s{stroke:var(--muted);stroke-dasharray:1 7;stroke-width:4}
.hl-end{stroke-width:3;fill:var(--white)}
.hl-end--l{stroke:var(--accent)}.hl-end--b{stroke:var(--ink)}.hl-end--s{stroke:var(--muted)}
.hl-cap{font-size:16px;line-height:24px;color:var(--muted);margin-top:8px}
.hl-climate + .fig-cap{margin-top:12px}
/* автоматизации */
.hl-auto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:28px;align-items:start}
.hl-autolist{list-style:none;margin:0;padding:0;border-top:2px solid var(--strong-line)}
.hl-autolist li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:26px;font-weight:600}
.hl-n{color:var(--muted);font-weight:600}
.hl-example{background:var(--surface);border-top:4px solid var(--accent);padding:24px}
.hl-flow{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hl-flow li{display:grid;gap:2px;background:var(--white);border:1px solid var(--field-border);padding:12px 16px;position:relative}
.hl-flow li + li{margin-top:28px}
.hl-flow li + li::before{content:"↓";position:absolute;left:16px;top:-28px;height:28px;display:flex;align-items:center;color:var(--accent);font-weight:700;font-size:20px}
.hl-step{font-size:14px;line-height:20px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.hl-what{font-size:18px;line-height:26px;font-weight:600}
/* миниатюра в каталоге */
.hl-mini{height:100%;background:var(--white);padding:18px 20px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.hl-mini-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hl-mini-i{display:flex;flex-direction:column;min-width:0}
.hl-mini-n{font-size:16px;line-height:22px;color:var(--muted);font-weight:600}
.hl-mini-t{font-size:28px;line-height:34px;font-weight:700;color:var(--ink)}
.app-card:hover .hl-mini{background:var(--surface)}
.app-card:hover .hl-end{fill:var(--surface)}
@media (max-width:900px){.hl-auto{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .hl-climate{padding:16px}
  .hl-rooms{grid-template-columns:minmax(0,1fr)}
  .hl-room{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .hl-name{grid-column:1}.hl-temp{grid-column:2;grid-row:1 / span 3;font-size:32px}
  .hl-sub{grid-column:1}
  .hl-mini-t{font-size:22px;line-height:28px}
}
.prose p.hl-title{color:var(--ink);margin-top:0;max-width:none}
@media (max-width:560px){.hl-tx{font-size:26px}}
@media (max-width:400px){.hl-tx{font-size:31px}}
/* телефон: текст не меньше 16 px (DESIGN.md) */
@media (max-width:760px){
  body .tag,body .eyebrow,body .app-badge,body .hl-step,body .scheme-btn{font-size:16px;line-height:24px}
  body .tag{padding:2px 10px}
  body .scheme-cap{font-size:16px;line-height:24px}
  .hl-mini-n{font-size:16px}
}