/* Free tools hub and tool pages in the new look (2026-10-24). The tools' own stylesheets
   follow light and dark through ui-legacy.css; this file restyles the shared page parts:
   no rails or handles, a calm centred hero, white cards, pill buttons, centred questions. */
.ui .ft{max-width:1180px;margin:0 auto;border:0}
.ui.free-tools-page main{padding-inline:20px}
.ui .ft-sec{padding:56px 0}
/* The result sits right under the link box (owner, 2026-10-24: too much space). */
.ui .ft-work{padding-top:8px}
.ui .ft-sec:last-child{padding-bottom:112px}
.ui .ft-sec+.ft-sec::before,.ui .ft-sec+.ft-sec::after,.ui .ft-rule::before,.ui .ft-rule::after{display:none}
.ui .ft-label{margin:0 0 10px;font:400 12px/1.4 var(--ui-mono);letter-spacing:0;text-transform:none;color:var(--ui-faint)}
.ui .ft-label b{display:none}
.ui .ft-sec-head{align-items:flex-end;margin:0 0 28px}
.ui .ft-sec-head h2{font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.ui .ft-sec-head p{font-size:16px;color:var(--ui-dim)}

/* Hero: a mono proof line, a plain headline, one line, the link field. */
.ui .ft-hero{padding:64px 0 32px;background:radial-gradient(50% 360px at 50% 240px,var(--ui-hero-glow),transparent 75%)}
.ui .ft-hero::before{display:none}
.ui .ft-hero .ft-eyebrow{display:block;height:auto;margin:0 0 20px;padding:0;border:0;background:none;font:400 12px/18px var(--ui-mono);letter-spacing:0;text-transform:none;color:var(--ui-faint)}
.ui .ft-hero .ft-eyebrow::before{display:none}
.ui .ft-hero h1{max-width:860px;margin:0 auto;font-size:52px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.ui .ft-hero h1:has(.ft-pick){margin-bottom:0}
.ui .ft-pick{display:inline;padding:0;outline:0;background:none;color:inherit}
.ui .ft-pick::after{display:none}
.ui .ft-dot{color:inherit}
.ui .ft-hero .ft-lead{max-width:620px;margin:18px auto 36px;font-size:18px;line-height:1.5;letter-spacing:-.03em;color:var(--ui-dim)}
.ui .ft-hub-hero{padding-bottom:40px}
.ui .ft-hub-hero h1{margin-bottom:0}
.ui .ft-hero-center .ft-form{margin-inline:auto}

/* Tool cards: white cards with the drawn result in a grey well. */
.ui .ft-cards{gap:12px}
.ui .ft-tool-card{padding:12px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card);box-shadow:none;transition:transform .2s var(--ui-ease),box-shadow .2s}
.ui .ft-tool-card::before,.ui .ft-tool-card::after,.ui .ft-tool-card[data-size]::after{display:none}
.ui .ft-tool-card:hover,.ui .ft-tool-card:focus-visible{border-color:var(--ui-line);transform:translateY(-2px);box-shadow:var(--ui-card-hover);outline:0}
.ui .ft-tool-card:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.ui .ft-card-well{border:0;border-radius:10px;background:var(--ui-well)}
.ui .ft-card-body{padding:14px 8px 6px}
.ui .ft-card-kicker{font:400 11.5px var(--ui-mono);letter-spacing:0;text-transform:none;color:var(--ui-faint)}
.ui .ft-card-title b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.ui .ft-card-open{border-radius:50%;color:var(--ui-link)}
.ui .ft-card-body small{font-size:14px;line-height:1.55;color:var(--ui-faint)}

/* "What you get" before a first run. */
.ui .ft-preview{border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card);box-shadow:none;overflow:hidden}
.ui .ft-preview-art{background:var(--ui-well)}
.ui .ft-preview li::before{color:var(--ui-accent)}

/* Questions: centred head, one rounded card per question. */
.ui .ft-faq{display:block}
.ui .ft-faq>header{max-width:660px;margin:0 auto 40px;text-align:center}
.ui .ft-faq>header .ft-label{display:none}
.ui .ft-faq>header h2{font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.ui .ft-faq-list{display:grid;gap:6px;width:min(768px,100%);margin:0 auto;border:0}
.ui .ft-faq details{border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card);padding:0}
.ui .ft-faq summary{min-height:66px;padding:14px 16px 14px 24px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ui .ft-faq summary::after{width:32px;height:32px;border:0;border-radius:50%;background:linear-gradient(var(--ui-accent) 0 0) center/12px 1.6px no-repeat,linear-gradient(var(--ui-accent) 0 0) center/1.6px 12px no-repeat,var(--ui-accent-soft)}
.ui .ft-faq details[open] summary::after{background-color:transparent}
.ui .ft-faq details p{margin:-4px 0 0;padding:0 24px 22px;font-size:15px;line-height:1.65;color:var(--ui-faint)}
.ui .ft-faq details a{color:var(--ui-link)}

/* The extension call-out: a lavender panel. */
.ui .ft-cta{margin:0;padding:32px;border:0;border-radius:16px;background:var(--ui-tint)}
.ui .ft-cta .ft-label{color:var(--ui-link)}
.ui .ft-cta h2{font-size:26px;font-weight:600;letter-spacing:-.02em}
.ui .ft-cta p{color:var(--ui-dim)}
.ui .ft-cta .ft-btn img{width:20px;height:20px}
.ui .ft-sec.ft-cta{margin:72px 0;padding:32px}

@media (max-width:760px){
  .ui .ft-sec{padding:40px 0}
  .ui .ft-work{padding-top:4px}
  .ui .ft-hero{padding:44px 0 24px}
  .ui .ft-hero h1{font-size:36px}
  .ui .ft-hero .ft-lead{font-size:16.5px;margin-bottom:28px}
  .ui .ft-sec-head h2,.ui .ft-faq>header h2{font-size:30px}
  .ui .ft-sec.ft-cta{margin:48px 0;padding:24px}
}