/* FactoryForge home (step 4). Built only on the tokens in public/ff-theme.css (see docs/THEME.md).
   Flat: borders and the card surface for depth, no shadows. One accent (ERP) plus the primary fill.
   Headings Manrope 600, body Inter, 16px floor for body copy, 44px tap targets. */

.hm{position:relative;z-index:10;display:block;color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-base);line-height:var(--lh-body)}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
.hm-wrap{width:100%;max-width:76rem;margin:0 auto;padding:0 var(--sp-5)}
@media (min-width:768px){.hm-wrap{padding:0 var(--sp-8)}}
.hm-sec{padding:var(--sp-14) 0;border-top:1px solid var(--line)}
@media (min-width:1024px){.hm-sec{padding:var(--sp-20) 0}}
.hm-hero{padding:var(--sp-10) 0 var(--sp-14);border-top:0}
@media (min-width:1024px){.hm-hero{padding:var(--sp-18) 0 var(--sp-20)}}

/* Type */
.hm h1,.hm h2,.hm h3{margin:0;color:var(--text);font-family:'Manrope',system-ui,sans-serif;font-weight:600}
.hm h1,.hm h2{letter-spacing:var(--tracking-tight)}
.hm h1{font-size:var(--fs-4xl);line-height:var(--lh-tight);max-width:18ch}
@media (min-width:768px){.hm h1{font-size:var(--fs-5xl)}}
.hm h2{font-size:var(--fs-2xl);line-height:var(--lh-snug);max-width:30ch}
@media (min-width:768px){.hm h2{font-size:var(--fs-3xl)}}
.hm h3{font-size:var(--fs-md);line-height:var(--lh-snug)}
.hm p{margin:0;color:var(--text-2);max-width:68ch}
.hm p+p{margin-top:var(--sp-4)}
.hm strong{color:var(--text);font-weight:600}
.hm .hm-sub{margin-top:var(--sp-5);color:var(--text);font-size:var(--fs-lg);line-height:1.5}
.hm .hm-intro{margin-top:var(--sp-4)}
.hm .hm-small{margin-top:var(--sp-4);color:var(--text-3);font-size:var(--fs-sm);line-height:1.5}
.hm .hm-mt{margin-top:var(--sp-4)}
.hm-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.hm-head p{font-size:var(--fs-md)}

/* Controls */
.hm-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-lg);min-width:var(--tap);padding:0 var(--sp-6);border:1px solid var(--input-border);border-radius:var(--r-pill);background:transparent;color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
.hm-btn:hover{border-color:var(--text)}
.hm-btn.primary{background:var(--primary-fill);border-color:var(--primary-fill);color:var(--on-primary)}
.hm-btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.hm-link{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);min-width:var(--tap);color:var(--t-erp);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hm-link:hover{color:var(--text)}
.hm-link svg{width:16px;height:16px;flex:none}
.hm-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-6);margin-top:var(--sp-6)}
.hm-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--sp-3);border:1px solid var(--t-erp);border-radius:var(--r-pill);color:var(--t-erp);font-size:var(--fs-sm);font-weight:500;line-height:1}
.hm-badge.quiet{border-color:var(--line-strong);color:var(--text-2)}

/* Layout */
.hm-split{display:grid;gap:var(--sp-10);align-items:start}
@media (min-width:1024px){.hm-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-14)}.hm-split.mid{align-items:center}}
.hm-grid{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.hm-grid.c2,.hm-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hm-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1023px){.hm-grid.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Cards */
.hm-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);box-shadow:var(--sh-none)}
.hm-card p{font-size:var(--fs-base);line-height:1.55}
.hm-card .hm-link{margin-top:auto}
.hm-card.media{padding:0;overflow:hidden}
.hm-card.media .hm-card-b{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-6)}
.hm-card.media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.hm-card h3 a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--text);text-decoration:none}
.hm-card h3 a:hover{color:var(--t-erp);text-decoration:underline;text-underline-offset:4px}
.hm-card.featured{border-top:3px solid var(--accent-raw)}
.hm-card.tool{flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;padding:var(--sp-4) var(--sp-5);color:var(--text);font-weight:600;text-decoration:none}
.hm-card.tool:hover{border-color:var(--t-erp)}
.hm-card.tool svg{width:18px;height:18px;flex:none;color:var(--t-erp)}
.hm-card.soon{gap:var(--sp-2);padding:var(--sp-5)}
.hm-card.soon h3{font-size:var(--fs-base)}

/* Numbered steps */
.hm-steps{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.hm-steps li{display:grid;grid-template-columns:var(--sp-10) minmax(0,1fr);gap:var(--sp-4);align-items:start;padding:var(--sp-5);border-top:1px solid var(--line);color:var(--text)}
.hm-steps li:first-child{border-top:0}
.hm-num{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-10);height:var(--sp-10);border:1px solid var(--t-erp);border-radius:var(--r-pill);color:var(--t-erp);font-family:'Manrope',system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;line-height:1}
.hm-steps li span+span{padding-top:var(--sp-2)}

/* Plans */
.hm-plan{gap:var(--sp-2)}
.hm-plan h3{font-size:var(--fs-lg)}
.hm .hm-price{color:var(--text);font-family:'Manrope',system-ui,sans-serif;font-size:var(--fs-md);font-weight:600;line-height:1.4}
.hm-plan ul{display:grid;gap:var(--sp-1);margin:var(--sp-2) 0 0;padding:0;list-style:none;color:var(--text-2)}
.hm .hm-note{margin-top:var(--sp-5)}

/* Closing band */
.hm-cta{display:grid;gap:var(--sp-6);padding:var(--sp-8) var(--sp-6);border:1px solid var(--line-strong);border-top:3px solid var(--primary-fill);border-radius:var(--r-md);background:var(--card)}
@media (min-width:1024px){.hm-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--sp-10)}}
.hm-cta .hm-actions{margin-top:0;flex-direction:column;align-items:flex-start}
.hm-cta .hm-q{margin-top:var(--sp-1)}
.hm-cta .hm-q a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--t-erp);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Product frames */
.hm-media{margin:0}
.hm-frame{border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.hm-bar{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--sp-10);padding:0 var(--sp-4);border-bottom:1px solid var(--line);color:var(--text-2);font-size:var(--fs-sm);font-weight:500}
.hm-bar .r{margin-left:auto;color:var(--text-3);font-weight:500}
.hm-dots{display:inline-flex;gap:6px}
.hm-dots i{display:block;width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-strong)}
.hm-media figcaption{margin-top:var(--sp-3);color:var(--text-3);font-size:var(--fs-sm);line-height:1.5}
.hm-lbl{color:var(--text-3);font-size:var(--fs-xs);font-weight:500;line-height:var(--lh-snug)}
.hm-val{color:var(--text);font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug)}
.hm-sk{display:block;height:8px;border-radius:var(--r-pill);background:var(--line)}
.hm-sk.w1{width:40%}.hm-sk.w2{width:60%}.hm-sk.w3{width:75%}.hm-sk.w4{width:30%}

/* Hero: quote to cash on one order */
.hm-q2c-part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-4);align-items:end;padding:var(--sp-4);border-bottom:1px solid var(--line)}
@media (min-width:768px){.hm-q2c-part{padding:var(--sp-4) var(--sp-5)}}
.hm-q2c-part .hm-val{font-size:var(--fs-base)}
.hm-q2c-part .qty{text-align:right}
.hm-flow{display:grid;margin:0;padding:var(--sp-2) 0;list-style:none}
.hm-flow li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:start;padding:var(--sp-3) var(--sp-4)}
@media (min-width:768px){.hm-flow li{padding:var(--sp-3) var(--sp-5)}}
.hm-flow li+li::before{content:"";position:absolute;left:calc(var(--sp-4) + 13px);top:calc(-1 * var(--sp-3));height:calc(2 * var(--sp-3));width:2px;background:var(--line)}
@media (min-width:768px){.hm-flow li+li::before{left:calc(var(--sp-5) + 13px)}}
.hm-flow li.done+li::before{background:var(--accent-raw)}
.hm-flow .n{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);color:var(--text-2);font-size:var(--fs-xs);font-weight:600}
.hm-flow li.done .n{border-color:var(--accent-raw);color:var(--t-erp)}
.hm-flow li.on .n{border-color:var(--primary-fill);background:var(--primary-fill);color:var(--on-primary)}
.hm-flow .t{display:grid;gap:2px;min-width:0}
.hm-flow .t b{color:var(--text);font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug)}
.hm-flow .t span{color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.hm-flow .ref{color:var(--text-3);font-weight:500}
.hm-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;line-height:1;white-space:nowrap}
.hm-flow li.done .hm-chip{border-color:var(--line);color:var(--text-2)}
.hm-flow li.on .hm-chip{border-color:var(--t-erp);color:var(--t-erp)}
.hm-q2c-foot{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line)}
@media (min-width:768px){.hm-q2c-foot{padding:var(--sp-3) var(--sp-5)}}

/* Feature tile posters (video slots) */
.hm-thumb{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);aspect-ratio:16/9;padding:var(--sp-4);border-bottom:1px solid var(--line);background:var(--bg)}
.hm-thumb .hm-badge{align-self:flex-start}
.hm-rail{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.hm-rail li{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:0 var(--sp-3) 0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--text-2);font-size:var(--fs-xs);font-weight:500}
.hm-rail b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-pill);background:var(--line);color:var(--text);font-size:var(--fs-xs);font-weight:600}
.hm-rail li.on{border-color:var(--t-erp);color:var(--text)}
.hm-rail li.on b{background:var(--primary-fill);color:var(--on-primary)}
.hm-rows{display:grid;gap:6px;align-self:stretch}
.hm-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);align-items:center;min-height:26px;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm)}
.hm-row.head{border:0;min-height:20px}
/* Skip link: off screen until focused. */
.hm-skip{position:absolute;left:var(--sp-4);top:-100px;z-index:1000;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-sm);background:var(--primary-fill);color:var(--on-primary);font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.hm-skip:focus{top:var(--sp-4);outline:2px solid var(--text);outline-offset:2px}
/* Figures line up. */
.hm-price,.hm-val,.hm-flow .ref,.hm-q2c-part,.hm-bar .r{font-variant-numeric:tabular-nums}