.s-full {
  --sf-paper: #edf3ff;
  --sf-ink: #152440;
  --sf-copy: #425573;
  --sf-accent: #174dab;
  --sf-line: #d5e0f0;
  color: var(--sf-ink);
}
.s-full.sf-cooker { --sf-paper:#f8f1e9; --sf-accent:#6c4231; --sf-line:#e7d8ca }
.s-full.sf-heater { --sf-paper:#edf5f2; --sf-accent:#226759; --sf-line:#d1e6de }
.s-full.sf-washer { --sf-paper:#edf4fe; --sf-accent:#164f9d }
.s-full.sf-wave { --sf-paper:#f0eff9; --sf-accent:#554298; --sf-line:#ded9ee }
.s-full.sf-fridge { --sf-paper:#eef4f7; --sf-accent:#155a75; --sf-line:#d3e4eb }
.s-full.sf-ac { --sf-paper:#ecf5f8; --sf-accent:#1b5978; --sf-line:#cee3ed }
.s-full.sf-screen { --sf-paper:#edf0f7; --sf-accent:#334975; --sf-line:#d8dfed }
.s-full.sf-dish { --sf-paper:#f1f5ee; --sf-accent:#3b603d; --sf-line:#d8e4d7 }
.s-full [id] { scroll-margin-top: 110px }
.s-full h1, .s-full h2, .s-full h3, .s-full p, .s-full figure { margin: 0 }
.s-full .sf-hero {
  background: radial-gradient(ellipse at 14% 55%, #ffffffb5, transparent 60%), var(--sf-paper);
  padding-block: clamp(45px, 7vw, 105px);
}
.s-full .sf-hero-inner { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); gap: clamp(23px, 5vw, 66px); align-items: center }
.s-full .sf-hero-copy { animation: sf-enter .65s ease-out both }
.s-full .sf-kicker { font-weight: 700; font-size: .93rem; color: var(--sf-accent); margin-bottom: 12px }
.s-full h1 { font-size: clamp(3rem, 6.8vw, 6.7rem); line-height: 1.05; letter-spacing: -.056em; max-width: 14ch; font-weight: 800 }
.s-full h2 { font-size: clamp(2.35rem, 4.7vw, 4.75rem); line-height: 1.13; letter-spacing: -.044em; font-weight: 760 }
.s-full h3 { font-size: clamp(1.22rem, 2.3vw, 1.5rem); line-height: 1.28 }
.s-full :is(.sf-hero-copy,.sf-faults,.sf-book) p:not(.sf-kicker) { margin-top: 16px; max-width: 41ch; color: var(--sf-copy); font-size: clamp(1rem,1.7vw,1.19rem) }
.s-full .sf-visual {
  border-radius: clamp(16px, 2.6vw, 28px);
  min-width: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 20px 65px #112b501e;
  border: 1px solid var(--sf-line);
  animation: sf-enter .75s .12s ease-out both;
}
.s-full .sf-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover }
.s-full .sf-visual figcaption { position: absolute; bottom: 12px; inset-inline-end: 12px; padding: 4px 9px; border-radius: 8px; font-size: .75rem; color: #f7faff; background: #121e32dc }
.s-full .sf-visual-plain { min-height: 350px; display: grid; align-content: center; gap: 14px; padding: clamp(23px, 4.5vw, 58px); color: #fff; background: linear-gradient(150deg,var(--sf-accent),#101d37) }
.s-full .sf-visual-plain p { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 750; line-height: 1.2 }
.s-full .sf-visual-plain ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px }
.s-full .sf-visual-plain li { padding: 8px 0; border-bottom: 1px solid #ffffff56; font-weight: 550 }
.s-full .sf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; margin-top: 24px }
.s-full .sf-secondary, .s-full .sf-text { display: inline-flex; align-items: center; gap: 6px; min-height: 45px; color: var(--sf-accent); font-weight: 650 }
.s-full .sf-secondary { padding-inline: 15px; border: 1px solid var(--sf-line); border-radius: 100px; background: #fff; transition: border-color .2s }
.s-full .sf-secondary:hover { border-color: var(--sf-accent) }
.s-full :is(.sf-text,.sf-nav a):hover { text-decoration: underline; text-underline-offset: 4px }
.s-full .sf-nav { border-bottom: 1px solid var(--sf-line); background: #fff }
.s-full .sf-nav > div { display: flex; flex-wrap: wrap; gap: 7px clamp(14px,4vw,40px); min-height: 58px; align-items: center }
.s-full .sf-nav a { color: var(--sf-accent); font-weight: 650; font-size: .92rem }
.s-full .sf-section { padding-block: clamp(54px, 8vw, 105px) }
.s-full .sf-faults { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 5vw, 62px); align-items: start }
.s-full .sf-accordion { padding: 9px 20px; border: 1px solid var(--sf-line); border-radius: 17px; background: #fff }
.s-full .sf-accordion details + details { border-top: 1px solid var(--sf-line) }
.s-full .sf-accordion summary { cursor: pointer; padding: 13px 0; color: var(--sf-ink); font-weight: 700 }
.s-full .sf-accordion details p { margin: 0 0 13px!important; max-width: 60ch; font-size: 1rem!important }
.s-full .sf-prep { background: var(--sf-paper) }
.s-full .sf-prep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px }
.s-full .sf-prep-grid article { padding: 24px; border: 1px solid var(--sf-line); border-radius: 17px; background: white }
.s-full .sf-prep-grid p { color: var(--sf-copy); margin-top: 9px }
.s-full .sf-book { display: flex; align-items: end; justify-content: space-between; gap: 25px }
.s-full .sf-book .sf-actions { margin: 0 }
@keyframes sf-enter { from { opacity: 0; transform: translateY(15px) } to { opacity: 1; transform: none } }
@media(max-width: 700px) {
  .s-full .sf-hero-inner, .s-full .sf-faults, .s-full .sf-prep-grid { grid-template-columns: 1fr }
  .s-full .sf-visual-plain { min-height: 0 }
  .s-full .sf-prep-grid article { padding: 17px }
  .s-full .sf-book { flex-direction: column; align-items: start; gap: 14px }
}
@media(prefers-reduced-motion: reduce) { .s-full * { animation: none!important; transition: none!important } }