/* Below the fold: problem, how it works, who it serves. Small additions on
   top of the classic-window system; everything else is inherited. */

/* problem: three columns, not four */
html[data-design-system="halde"][data-route-bundle="home"] .problem-window .problem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-design-system="halde"][data-route-bundle="home"] .problem-inner h2 .claim-quiet{display:block;color:var(--text-tertiary);font-weight:inherit}
html[data-design-system="halde"][data-route-bundle="home"] .problem-ask b{color:#ff5a1f}
@media (max-width:980px){html[data-design-system="halde"][data-route-bundle="home"] .problem-window .problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){html[data-design-system="halde"][data-route-bundle="home"] .problem-window .problem-grid{grid-template-columns:1fr}}

/* how it works: the generated file, with a way into the full anatomy */
html[data-design-system="halde"][data-route-bundle="home"] .anno-list .anno b{font-weight:600;color:var(--text-primary)}
html[data-design-system="halde"][data-route-bundle="home"] .how-window{--hx-lines:12;display:flex;flex-direction:column;box-shadow:8px 8px 0 rgba(17,17,17,.12)}
html[data-design-system="halde"][data-route-bundle="home"] .how-window>header b{margin-left:4px;color:#ff5a1f;font:650 10px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"][data-route-bundle="home"] .how-window>pre{min-height:0;font-size:12.5px;font-variant-ligatures:none}
html[data-design-system="halde"][data-route-bundle="home"] .how-window>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 12px;border-top:1.5px solid #111;color:var(--text-secondary);font:600 10px/1.4 var(--font-technical);letter-spacing:.08em}
html[data-design-system="halde"][data-route-bundle="home"] .how-window>footer a{color:#ff5a1f;text-decoration:none;white-space:nowrap}
html[data-design-system="halde"][data-route-bundle="home"] .how-window>footer a:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px}

/* who it serves: three windows, one real Play each */
html[data-design-system="halde"][data-route-bundle="home"] .who-inner{width:min(100%,var(--page-max));margin:0 auto}
html[data-design-system="halde"][data-route-bundle="home"] .who-intro{max-width:44ch}
html[data-design-system="halde"][data-route-bundle="home"] .who-intro .ds-eyebrow{display:block;margin-bottom:22px;color:#ff5a1f;font-size:10px}
html[data-design-system="halde"][data-route-bundle="home"] .who-intro h2 .claim-quiet{display:block;color:var(--text-tertiary);font-weight:inherit}
html[data-design-system="halde"][data-route-bundle="home"] .who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:clamp(30px,3.5vw,48px) 0 0;padding:0;list-style:none}
html[data-design-system="halde"][data-route-bundle="home"] .who-card{display:flex;flex-direction:column;box-shadow:8px 8px 0 rgba(17,17,17,.12)}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>header span{color:#111;letter-spacing:.1em}
html[data-design-system="halde"][data-route-bundle="home"] .who-body{flex:1 1 auto;padding:18px 16px 20px}
html[data-design-system="halde"][data-route-bundle="home"] .who-ask{margin:0;color:#111;font:500 14px/1.55 var(--font-technical)}
html[data-design-system="halde"][data-route-bundle="home"] .who-ask b{margin-right:8px;color:#ff5a1f;font-weight:500}
html[data-design-system="halde"][data-route-bundle="home"] .who-desc{margin:12px 0 0;color:var(--text-secondary);font:400 14.5px/1.5 var(--font-editorial)}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding:12px 16px 13px;border-top:1.5px solid #111;color:#111;text-decoration:none;font:500 11.5px/1.4 var(--font-technical)}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer code{grid-column:1;overflow:hidden;color:#ff5a1f;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer span{grid-column:1;color:var(--text-tertiary);font-size:10px;letter-spacing:.04em}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer i{grid-column:2;grid-row:1/3;font-style:normal;font-size:14px}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer a:is(:hover,:focus-visible){background:#fff3ee}
html[data-design-system="halde"][data-route-bundle="home"] .who-after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(26px,3vw,40px)}
html[data-design-system="halde"][data-route-bundle="home"] .who-teams{margin:0;color:var(--text-secondary);font:400 15px/1.5 var(--font-editorial)}
html[data-design-system="halde"][data-route-bundle="home"] .who-teams b{margin-right:10px;color:var(--text-primary);font:650 10px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"][data-route-bundle="home"] .who-teams a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
html[data-design-system="halde"][data-route-bundle="home"] .who-browse{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:#fff;border:1.5px solid #111;background:#ff5a1f;text-decoration:none;font:700 10px/1 var(--font-technical);letter-spacing:.1em;box-shadow:3px 3px 0 #111}
html[data-design-system="halde"][data-route-bundle="home"] .who-browse i{font-style:normal}
@media (max-width:980px){html[data-design-system="halde"][data-route-bundle="home"] .who-grid{grid-template-columns:1fr;gap:18px}}

/* dark */
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] :is(.how-window>footer,.who-card>footer a){border-color:#f1f1ed;color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] :is(.who-ask,.who-card>header span){color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .who-card>footer a:is(:hover,:focus-visible){background:rgba(255,90,31,.12)}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] :is(.how-window,.who-card){box-shadow:8px 8px 0 rgba(0,0,0,.5)}

/* loved by builders: one quote at a time on a dotted mat, a rail of names */
html[data-design-system="halde"][data-route-bundle="home"] .love-inner{width:min(100%,var(--page-max));margin:0 auto}
html[data-design-system="halde"][data-route-bundle="home"] .love-intro{max-width:44ch}
html[data-design-system="halde"][data-route-bundle="home"] .love-intro .ds-eyebrow{display:block;margin-bottom:22px;color:#ff5a1f;font-size:10px}
html[data-design-system="halde"][data-route-bundle="home"] .love-intro h2 .claim-quiet{display:block;color:var(--text-tertiary);font-weight:inherit}
html[data-design-system="halde"][data-route-bundle="home"] .love-mat{position:relative;isolation:isolate;margin-top:clamp(30px,3.5vw,48px);padding:clamp(28px,4vw,64px);overflow:hidden;border-radius:14px}
html[data-design-system="halde"][data-route-bundle="home"] .love-mat::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,#e6ebf0 0%,#f3f4f6 48%,#fff1ea 100%)}
html[data-design-system="halde"][data-route-bundle="home"] .love-mat::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(17,17,17,.28) .8px,transparent 1.1px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35));pointer-events:none}
html[data-design-system="halde"][data-route-bundle="home"] .love-cards{list-style:none;margin:0 auto;padding:0;width:min(100%,760px)}
html[data-design-system="halde"][data-route-bundle="home"] .love-card{display:flex;flex-direction:column;min-height:220px;color:#111;border:1.5px solid #111;background:#fff;box-shadow:8px 8px 0 rgba(17,17,17,.12)}
html[data-design-system="halde"][data-route-bundle="home"] .love-card[hidden]{display:none}
html[data-design-system="halde"][data-route-bundle="home"] .love-card.is-on{animation:love-in .32s steps(4,end)}
@keyframes love-in{from{opacity:0}to{opacity:1}}
html[data-design-system="halde"][data-route-bundle="home"] .love-card blockquote{flex:1 1 auto;display:grid;place-items:center;margin:0;padding:clamp(24px,3vw,40px) clamp(20px,3vw,44px)}
html[data-design-system="halde"][data-route-bundle="home"] .love-card blockquote p{margin:0;max-width:36ch;text-align:center;font:500 clamp(16px,1.5vw,21px)/1.45 var(--font-technical);letter-spacing:-.01em}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer{border-top:1.5px solid #111}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:11px 16px;color:#111;text-decoration:none;font:500 11.5px/1.4 var(--font-technical)}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer a span{color:var(--text-tertiary);font-size:10px;letter-spacing:.06em}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer a:is(:hover,:focus-visible){background:#fff3ee}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail button{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;color:var(--text-secondary);border:1px solid var(--border-strong);background:transparent;font:500 10.5px/1 var(--font-technical);letter-spacing:.04em;cursor:pointer}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail button i{color:var(--text-tertiary);font-style:normal;font-size:9px}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail button[aria-pressed="true"]{color:#fff;border-color:#111;background:#ff5a1f}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail button[aria-pressed="true"] i{color:#fff}
html[data-design-system="halde"][data-route-bundle="home"] .love-rail button:is(:hover,:focus-visible){border-color:#111;color:#111}
@media (prefers-reduced-motion:reduce){html[data-design-system="halde"][data-route-bundle="home"] .love-card.is-on{animation:none}}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-mat::before{background:linear-gradient(135deg,#111214 0%,#171716 48%,#2a1a13 100%)}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-mat::after{background-image:radial-gradient(circle,rgba(241,241,237,.22) .8px,transparent 1.1px)}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-card{color:#f1f1ed;border-color:#f1f1ed;background:rgba(10,10,9,.96);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-card>footer{border-color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-card>footer a{color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .love-card>footer a:is(:hover,:focus-visible){background:rgba(255,90,31,.12)}
html[data-design-system="halde"][data-route-bundle="home"] .love-date{margin:16px 0 0;color:var(--text-tertiary);font:600 9.5px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"][data-route-bundle="home"] .anno-list .anno code{padding:1px 5px;color:var(--text-primary);border:1px solid var(--border-strong);font:500 .82em/1.4 var(--font-technical)}
html[data-design-system="halde"][data-route-bundle="home"] .love-heart{display:inline-block;margin-left:2px;color:#ff5a1f;font-style:normal;font-size:.9em;line-height:1;vertical-align:-.02em;transform-origin:center;animation:love-beat 1.6s ease-in-out infinite}
@keyframes love-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}56%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){html[data-design-system="halde"][data-route-bundle="home"] .love-heart{animation:none}}

/* problem rows: chips, like the film */
html[data-design-system="halde"][data-route-bundle="home"] .problem-row{grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center}
html[data-design-system="halde"][data-route-bundle="home"] .problem-row em{height:auto;min-width:0;padding:3px 6px 2px;color:#111;border:1px solid #111;background:transparent;font:650 8.5px/1 var(--font-technical);letter-spacing:.1em;text-transform:uppercase;transform:none;box-shadow:none}
html[data-design-system="halde"][data-route-bundle="home"] .problem-row.is-bad em{color:#ff5a1f;border-color:#ff5a1f}
html[data-design-system="halde"][data-route-bundle="home"] .problem-row code{font-size:13px}
html[data-design-system="halde"][data-route-bundle="home"] .problem-row.is-bad code{color:#5b6068}

/* how: faint code, three labels written over it */
html[data-design-system="halde"][data-route-bundle="home"] .how-window>pre{padding:8px 0 0;overflow:visible}
html[data-design-system="halde"][data-route-bundle="home"] .how-block{position:relative;display:block;padding:12px 16px 14px 16px}
html[data-design-system="halde"][data-route-bundle="home"] .how-block+.how-block{border-top:1px dotted rgba(17,17,17,.35)}
html[data-design-system="halde"][data-route-bundle="home"] .how-block code{display:block;color:#b3b7bd;font-variant-ligatures:none;font:400 11.5px/1.55 var(--font-technical);white-space:pre;overflow-x:auto;transition:color .2s ease}
html[data-design-system="halde"][data-route-bundle="home"] .how-block:hover code{color:#111}
html[data-design-system="halde"][data-route-bundle="home"] .how-label{position:absolute;right:16px;top:10px;display:inline-flex;align-items:baseline;gap:10px;color:#111;font:500 clamp(20px,1.9vw,30px)/1 var(--font-editorial);letter-spacing:-.03em;pointer-events:none}
html[data-design-system="halde"][data-route-bundle="home"] .how-label i{color:#ff5a1f;font:650 10px/1 var(--font-technical);font-style:normal;letter-spacing:.1em}
html[data-design-system="halde"][data-route-bundle="home"] .how-block:hover .how-label{opacity:.25}
/* Phones have no room to write the label over the code: it sits above,
   the code scrolls sideways, and the window title truncates before the badge. */
@media (max-width:620px){
  html[data-design-system="halde"][data-route-bundle="home"] .how-window>header{overflow:hidden}
  html[data-design-system="halde"][data-route-bundle="home"] .how-window>header span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  html[data-design-system="halde"][data-route-bundle="home"] .how-window>header .stripes{min-width:8px}
  html[data-design-system="halde"][data-route-bundle="home"] .how-window>header b{flex:0 0 auto}
  html[data-design-system="halde"][data-route-bundle="home"] .how-block{padding:12px 12px 14px}
  html[data-design-system="halde"][data-route-bundle="home"] .how-label{position:static;display:flex;margin-bottom:8px;font-size:18px}
  html[data-design-system="halde"][data-route-bundle="home"] .how-block:hover .how-label{opacity:1}
  html[data-design-system="halde"][data-route-bundle="home"] .how-block code{font-size:11px}
}

/* who: the footer reads like the film receipt */
html[data-design-system="halde"][data-route-bundle="home"] .who-ask{font-size:15px}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer a{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer em{grid-column:1;grid-row:1/3;padding:3px 6px 2px;color:#fff;border:1px solid #111;background:#111;font:650 8.5px/1 var(--font-technical);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer code{grid-column:2}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer span{grid-column:2}
html[data-design-system="halde"][data-route-bundle="home"] .who-card>footer i{grid-column:3;grid-row:1/3;padding:5px 9px;color:#fff;border:1.5px solid #111;background:#ff5a1f;font:700 9px/1 var(--font-technical);letter-spacing:.1em;text-transform:uppercase;box-shadow:2px 2px 0 #111}
html[data-design-system="halde"][data-route-bundle="home"] .who-card{transition:transform .15s ease,box-shadow .15s ease}
html[data-design-system="halde"][data-route-bundle="home"] .who-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(17,17,17,.14)}

/* love: a social card */
html[data-design-system="halde"][data-route-bundle="home"] .love-card{min-height:0;text-align:left}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 18px 0}
html[data-design-system="halde"][data-route-bundle="home"] .love-avatar{display:grid;place-items:center;width:40px;height:40px;color:#fff;border-radius:50%;background:#ff5a1f;font:600 16px/1 var(--font-editorial)}
html[data-design-system="halde"][data-route-bundle="home"] .love-id{display:grid;gap:2px;min-width:0}
html[data-design-system="halde"][data-route-bundle="home"] .love-id b{font:600 14px/1.2 var(--font-editorial);letter-spacing:-.01em}
html[data-design-system="halde"][data-route-bundle="home"] .love-id small{color:var(--text-tertiary);font:500 11px/1.2 var(--font-technical)}
html[data-design-system="halde"][data-route-bundle="home"] .love-net{display:grid;place-items:center;width:28px;height:28px;color:#111}
html[data-design-system="halde"][data-route-bundle="home"] .love-net svg{width:18px;height:18px;fill:currentColor}
html[data-design-system="halde"][data-route-bundle="home"] .love-card blockquote{display:block;padding:14px 18px 18px}
html[data-design-system="halde"][data-route-bundle="home"] .love-card blockquote p{max-width:none;text-align:left;font:400 clamp(17px,1.5vw,22px)/1.4 var(--font-editorial);letter-spacing:-.015em}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer{border-top:1px solid var(--border-strong)}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 18px}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer span{color:var(--text-tertiary);font:500 11px/1.4 var(--font-technical);letter-spacing:.04em}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer a{color:#111;text-decoration:none;font:600 11px/1.4 var(--font-technical);letter-spacing:.04em}
html[data-design-system="halde"][data-route-bundle="home"] .love-card>footer a:is(:hover,:focus-visible){color:#ff5a1f;text-decoration:underline;text-underline-offset:3px}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] :is(.how-label,.love-net,.love-card>footer a,.who-card>footer em){color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .who-card>footer em{background:#f1f1ed;color:#111;border-color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .how-block code{color:#6b6f75}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .how-block:hover code{color:#f1f1ed}
html[data-design-system="halde"][data-route-bundle="home"][data-resolved-theme="dark"] .problem-row em{color:#f1f1ed;border-color:#f1f1ed;background:transparent}