/* Pomo owner's-manual stylesheet, shared by every page on pomo.smarthaustech.de. Keep this file ASCII-only. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/LibreBaskerville-400i.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/LibreBaskerville-400.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/LibreBaskerville-700.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Oswald-400.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Oswald-500.woff2') format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/PinyonScript-400.woff2') format('woff2'); }
/* Metric-matched fallback so the 200px headline does not reflow when Anton arrives. */
@font-face { font-family: 'Anton Fallback'; src: local('Impact'), local('Arial Narrow Bold'); size-adjust: 88%; ascent-override: 98%; descent-override: 22%; }

:root { --ink:#2B2420; --faded:#6B5E52; --red:#C8372B; --green:#2F7A62; --cream:#F3EAD3; --paper:#EFE5C9; --paper2:#E6DABA; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:#D9CDAB; font-family:"Libre Baskerville",Baskerville,Georgia,serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.page { position:relative; max-width:1120px; margin:0 auto; background:linear-gradient(180deg,var(--paper),var(--paper2)); box-shadow:0 30px 80px rgba(60,40,10,.35); overflow:hidden; }
.page::before { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.page > * { position:relative; z-index:1; }

.display { font-family:Anton,"Anton Fallback","Futura-CondensedExtraBold",Impact,sans-serif; text-transform:uppercase; letter-spacing:.02em; line-height:.95; font-weight:400; }
.cond { font-family:Oswald,"Futura-CondensedMedium",sans-serif; text-transform:uppercase; letter-spacing:.22em; font-weight:400; }
.script { font-family:"Pinyon Script","Snell Roundhand",cursive; font-weight:400; }
a { color:var(--red); text-decoration:none; }
a:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
p a, li a, td a { border-bottom:1px solid rgba(200,55,43,.45); }

/* The cover band */
.band { background:var(--red); color:var(--cream); padding:56px 64px 0; position:relative; }
.band::before { content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.3; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.band .inner { position:relative; display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:end; }
.band .script { font-size:clamp(34px, 12vw, 64px); line-height:1; padding-left:6px; }
.band h1 { margin:-8px 0 0; }
.band h1 .display { display:block; font-size:200px; letter-spacing:.04em; }
.band h1 .sub, .band .sub { display:block; font-size:34px; margin-top:6px; }
.band .thin { height:2px; background:rgba(243,234,211,.9); margin:26px 120px 12px 0; }
.band .model { font-size:14px; opacity:.9; padding-bottom:56px; }
.band .model a { color:var(--cream); border-bottom:1px solid rgba(243,234,211,.6); }
.band .stamp { display:inline-block; margin:0 0 56px; padding:6px 12px; border:2px solid var(--cream); color:var(--cream); font-family:Oswald,sans-serif; letter-spacing:.2em; text-transform:uppercase; font-size:12px; transform:rotate(-2deg); }
.band .hero { align-self:end; margin-bottom:-120px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4)); }
.band .hero img { display:block; width:100%; height:auto; }
/* compact cover for chapter pages */
.band.chapter { padding:40px 64px 0; }
.band.chapter .inner { grid-template-columns:1fr; }
.band.chapter h1 .display { font-size:96px; letter-spacing:.03em; line-height:1; }
.band.chapter h1 .sub { font-size:22px; }
.band.chapter .model { padding-bottom:36px; }
.band.chapter .crumbs { font-size:12px; opacity:.85; margin-bottom:18px; }
.band.chapter .crumbs a { color:var(--cream); }

.lead { padding:150px 64px 0; text-align:center; }
.lead.chapter { padding:48px 64px 0; }
.lead .script { font-size:clamp(34px, 11vw, 72px); line-height:1; }
.lead p { max-width:640px; margin:18px auto 0; font-size:19px; }
.links { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; margin-top:26px; }
.links a, .links .soon { font-family:Anton,sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:22px; }
.links a::after { content:"  \2192"; }
.links .soon { color:var(--ink); }
.links small { display:block; font-family:Oswald,sans-serif; letter-spacing:.18em; text-transform:uppercase; font-size:11px; color:var(--faded); text-align:center; }

/* Contents */
.contents { max-width:560px; margin:56px auto 0; padding:0 24px; }
.contents h2 { font-size:16px; margin:0; letter-spacing:.24em; border-bottom:1px solid var(--ink); padding-bottom:6px; }
.contents ol { list-style:none; margin:10px 0 0; padding:0; }
.contents li { display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:17px; }
.contents li .n { font-family:Anton,sans-serif; color:var(--red); width:22px; }
.contents li .dots { flex:1; border-bottom:2px dotted rgba(43,36,32,.55); transform:translateY(-5px); }
.contents li a { color:var(--ink); }
.contents li .pg { font-family:Oswald,sans-serif; color:var(--faded); font-size:14px; }

/* Sections */
section { padding:72px 64px 0; }
.head { display:flex; justify-content:space-between; font-size:12px; color:var(--faded); margin-bottom:14px; }
h2.title { font-size:72px; margin:0; }
.rule { height:7px; background:var(--red); margin-top:8px; box-shadow:0 10px 0 -9px var(--ink); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:28px; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:28px; }
.prose { max-width:720px; margin-top:28px; }
.prose.wide { max-width:860px; }
section p { margin:0 0 16px; }
section h3 { font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:15px; margin:28px 0 8px; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.steps .n { flex:none; width:32px; height:32px; border-radius:50%; background:var(--red); color:var(--cream); font-family:Anton,sans-serif; font-size:17px; display:grid; place-items:center; margin-top:3px; }
.steps b { display:block; font-size:18px; }
.repeat { color:var(--red); font-style:italic; padding-left:48px; margin:0 0 12px; }
.bullets { list-style:none; margin:0 0 16px; padding:0; }
.bullets li { position:relative; padding-left:24px; margin-bottom:8px; }
.bullets li::before { content:""; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--red); }
figure.walk svg { max-width:320px; width:100%; height:auto; margin:0 auto; display:block; filter:none; }
figure.walk .lamp { transition: fill .6s ease, stroke .6s ease; }
#wk-cap { transition: transform .12s ease-in; }
#wk-capfill { transition: fill .6s ease; }
#wk-glow { transition: opacity 1s cubic-bezier(.6,0,.85,.35); }
#wk-capshadow { transition: opacity .2s ease; }
.walking .steps li, .walking .repeat, .walking #st6 { opacity:.62; transition: opacity .4s ease; }
.walking .steps li.on, .walking .repeat.on, .walking #st6.on { opacity:1; }
figure { margin:0; text-align:center; }
figure img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(0,0,0,.28)); }
figure.phone img { max-width:300px; margin:0 auto; border-radius:34px; }
figure.pad img { max-width:420px; margin:0 auto; border-radius:18px; }
figure.watch img { max-width:200px; margin:0 auto; border-radius:40px; }
figure.mac img { max-width:520px; margin:0 auto; }
figcaption { font-style:italic; font-size:14px; color:var(--faded); margin-top:14px; }
.subhead { font-size:14px; letter-spacing:.22em; border-bottom:1px solid var(--ink); padding-bottom:4px; margin:28px 0 12px; }

/* Specification table */
.spec { list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--ink); }
.spec li { display:flex; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid rgba(43,36,32,.25); }
.spec li .k { font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:var(--faded); flex:none; }
.spec li .dots { flex:1; border-bottom:2px dotted rgba(43,36,32,.5); transform:translateY(-5px); }
.spec li .v { text-align:right; }

/* Comparison table */
table.cmp { width:100%; border-collapse:collapse; margin:28px 0 8px; font-size:15px; }
table.cmp th, table.cmp td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(43,36,32,.25); vertical-align:top; }
table.cmp th { font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:12px; color:var(--faded); border-bottom:1px solid var(--ink); }
table.cmp th:first-child { width:34%; }
table.cmp td.yes { color:var(--green); }
table.cmp td.no { color:var(--faded); }
table.cmp td.pro { color:var(--red); }
.legend { font-size:13px; color:var(--faded); font-style:italic; margin:0 0 16px; }

/* Questions from owners */
.faq { max-width:760px; margin-top:28px; }
.faq details { border-bottom:1px solid rgba(43,36,32,.25); padding:12px 0; }
.faq summary { cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; gap:12px; align-items:baseline; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"\25B8"; color:var(--red); font-size:14px; flex:none; }
.faq details[open] summary::before { content:"\25BE"; }
.faq .a { padding:8px 0 4px 26px; }
.faq .a p { margin:0 0 10px; }

/* Leaflets (links to other chapters) */
.leaflets { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px 32px; }
.leaflets li { border-top:1px solid var(--ink); padding-top:10px; }
.leaflets li a { display:block; font-family:Anton,sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:20px; color:var(--ink); }
.leaflets li a:hover { color:var(--red); }
.leaflets li span { display:block; font-size:14px; color:var(--faded); margin-top:4px; }

/* Notes and cards */
.note { border:1px solid var(--ink); padding:16px 20px; margin:24px 0; background:rgba(243,234,211,.5); }
.note b { font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:13px; display:block; margin-bottom:6px; }
.card { background:var(--cream); border:1px solid rgba(43,36,32,.4); padding:24px 28px; box-shadow:0 10px 24px rgba(0,0,0,.12); margin:24px 0; }
.stamped { display:inline-block; padding:4px 10px; border:2px solid var(--red); color:var(--red); font-family:Oswald,sans-serif; letter-spacing:.2em; text-transform:uppercase; font-size:12px; transform:rotate(-2deg); }
.obtain { text-align:center; padding-top:48px; }
.obtain .script { font-size:clamp(34px, 9vw, 56px); line-height:1; }
pre, code { font-family:"SF Mono",Menlo,monospace; font-size:14px; }
pre { background:rgba(43,36,32,.06); padding:14px 16px; overflow:auto; }

footer { margin-top:72px; padding:0 64px 40px; }
footer .line { border-top:1px solid rgba(43,36,32,.7); padding-top:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:13px; color:var(--faded); }
footer .line i { font-style:italic; }
footer .line a { color:var(--faded); border-bottom:1px solid rgba(107,94,82,.5); margin-left:18px; display:inline-block; padding:6px 0; }
footer .line .form { font-family:Oswald,sans-serif; letter-spacing:.12em; }

@media (max-width: 900px) {
  .band { padding:40px 28px 0; }
  .band .inner { grid-template-columns:1fr; gap:0; }
  .band h1 .display { font-size:132px; }
  .band h1 .sub, .band .sub { font-size:26px; }
  .band .model { padding-bottom:28px; }
  .band .stamp { margin-bottom:28px; }
  .band .hero { max-width:260px; margin:0 auto -90px; }
  .band.chapter { padding:32px 28px 0; }
  .band.chapter h1 .display { font-size:64px; }
  .band.chapter h1 .sub { font-size:18px; }
  .lead { padding:120px 28px 0; }
  .lead.chapter { padding:40px 28px 0; }
  section { padding:56px 28px 0; }
  h2.title { font-size:48px; }
  .two, .three, .leaflets { grid-template-columns:1fr; gap:32px; }
  .leaflets { gap:12px; }
  table.cmp { font-size:14px; }
  table.cmp th, table.cmp td { padding:8px 6px; }
  footer { padding:0 28px 32px; }
  footer .line a { margin-left:0; margin-right:18px; }
}
@media (max-width: 480px) {
  .band h1 .display { font-size:96px; }
  .band .thin { margin-right:40px; }
  .band.chapter h1 .display { font-size:52px; }
  h2.title { font-size:40px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }

/* FAQ headings inside summaries keep the body face */
.faq summary h3 { margin:0; font-family:inherit; font-size:inherit; text-transform:none; letter-spacing:0; font-weight:700; }