/* Homepage sections (scripts/home-page.mjs), new look from 2026-10-24. Shared parts (buttons,
   cards, sections, the link box, questions) are in ui.css; tokens in site-header.css. */
body.ui.free-tools-page main{padding:0}

/* Hero: a plain headline, one sentence, two pills, the link box, the recording. */
.hm-hero{padding:64px 0 0;text-align:center;background:radial-gradient(50% 420px at 50% 300px,var(--ui-hero-glow),transparent 75%)}
.hm-hero h1{max-width:780px;margin:0 auto;font-size:56px;line-height:1.1;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.hm-lead{max-width:640px;margin:20px auto 0;font-size:18px;line-height:1.5;letter-spacing:-.03em;color:var(--ui-dim)}
.hm-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
.hm-product{width:min(1024px,100% - 40px);margin:56px auto 0}
.hm-product .ui-frame{overflow:hidden}

/* Tools: nine cards, each with the tool's drawing from the free tools page (tool-art.mjs). */
.hm-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hm-bento .ui-card{grid-column:span 2}
.hm-art{display:block;aspect-ratio:16/10;border:.8px solid var(--ui-line);border-radius:10px;overflow:hidden;background:var(--ui-well)}
.hm-art .ft-art{display:block;width:100%;height:100%}
.hm-tool p{margin-bottom:14px}
.hm-tool-free{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--ui-accent-soft);color:var(--ui-link);font:500 11px/16px var(--ui-mono);letter-spacing:0;vertical-align:2px}
.hm-tool-cta{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;height:34px;margin:auto 8px 6px;padding:0 13px 1px 14px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px/1 var(--ui-font);letter-spacing:-.02em;transition:background .15s,border-color .15s,box-shadow .15s}
.hm-tool-cta svg{width:14px;height:14px;transition:transform .15s}
a.hm-tool:hover .hm-tool-cta,a.hm-tool:focus-visible .hm-tool-cta{border-color:var(--ui-btn-line);background:var(--ui-btn-bg);color:var(--ui-btn-fg);box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
a.hm-tool:hover .hm-tool-cta svg{transform:translateX(2px)}

/* Gallery: live DESIGN.md cards (public/home.js), screenshot first, colors beside the name. */
.hm-designs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-design-shot{display:block;aspect-ratio:16/10;border-radius:10px;background:var(--ui-well);overflow:hidden}
.hm-design-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hm-design h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 6px 2px}
.hm-design h3 span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-design p{margin:0 6px 6px;font:400 12px var(--ui-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-dots{display:flex;flex:none;padding-left:4px}
.hm-dots i{width:14px;height:14px;margin-left:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--ui-card),inset 0 0 0 .8px rgba(0,0,0,.1)}
.hm-design-sk .hm-design-body{display:grid;gap:8px;padding:14px 6px 8px}
.hm-design-sk i{display:block;height:10px;border-radius:999px;background:var(--ui-well)}
.hm-design-sk i+i{width:60%}

/* AI agents: two wide cards with a folder-tab label. */
.hm-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm-duo-art{display:grid;place-items:center;min-height:210px;padding:20px}
.hm-code{width:100%;max-width:400px;margin:0;padding:14px 16px;border:.8px solid var(--ui-line);border-radius:12px;background:var(--ui-well);font:400 12.5px/1.75 var(--ui-mono);text-align:left;white-space:pre;overflow:hidden}
.hm-code .k{color:var(--ui-link)}.hm-code .s{color:var(--ui-amber)}.hm-code .c{color:var(--ui-faint)}
.hm-cloud{position:relative;width:100%;max-width:420px;height:190px}
.hm-cloud a{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border-radius:999px;color:#101013;font:500 13px var(--ui-mono);text-decoration:none;white-space:nowrap;box-shadow:0 1px 3px rgba(16,24,48,.14);transition:transform .15s}
.hm-cloud a:hover{transform:translateY(-2px) rotate(0deg)!important}
.hm-cloud img{width:16px;height:16px}
.ui .hm-cloud img[src*="/tech/sites/"]{filter:brightness(0)}
.ui .hm-cloud img[src$="/logos/openai.svg"]{filter:none}
.hm-folder{margin-top:auto}
.hm-folder h3{display:inline-block;margin:0;padding:20px 22px 12px;border-radius:16px 16px 0 0;background:var(--ui-tint);font-size:16px}
.hm-folder p{margin:0;padding:6px 22px 24px;border-radius:0 16px 16px 16px;background:var(--ui-tint);font-size:15px;line-height:1.6;color:var(--ui-dim)}
.hm-duo .ui-card:nth-child(2) .hm-folder h3,.hm-duo .ui-card:nth-child(2) .hm-folder p{background:var(--ui-tint2)}
.hm-folder a{color:var(--ui-link);font-weight:500;text-decoration:none}

/* Extension: the recording, then its 13 tools as chips. */
.hm-ext-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:820px;margin:28px auto 0}

/* Guides (cards filled in by prerender.mjs). */
.hm-guide-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hm-guide{display:flex;flex-direction:column;padding:12px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card);color:inherit;text-decoration:none;transition:transform .2s var(--ui-ease),box-shadow .2s}
.hm-guide:hover{transform:translateY(-2px);box-shadow:var(--ui-card-hover)}
.hm-guide img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;object-fit:cover;background:var(--ui-well)}
.hm-guide span{margin:14px 8px 0;font:400 11.5px var(--ui-mono);color:var(--ui-faint)}
.hm-guide b{margin:6px 8px 8px;font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.02em}
.hm-guide:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}

@media (max-width:900px){
  .hm-bento .ui-card{grid-column:span 3}
  .hm-designs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-duo{grid-template-columns:1fr}
  .hm-guide-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hm-hero{padding-top:44px}
  .hm-hero h1{font-size:40px}
  .hm-cta{margin-top:24px}
  .hm-lead{font-size:16.5px}
  .hm-cta .ui-btn{flex:1 1 100%}
  .hm-bento .ui-card{grid-column:span 6}
  .hm-guide-row{grid-template-columns:1fr}
  .hm-product{margin-top:40px}
  .hm-product .ui-play{height:42px;font-size:15px}
}
@media (max-width:520px){.hm-dots{display:none}}
@media (max-width:380px){.hm-hero h1{font-size:34px}.hm-lead{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.hm-guide,.hm-cloud a{transition:none}.hm-guide:hover{transform:none}}

/* Speed on phones (2026-10-24 audit): sections below the first screen are only laid out and
   painted when they come near it. The remembered size keeps the scrollbar steady. */
.hm>.ui-sec{content-visibility:auto;contain-intrinsic-size:auto 900px}