/*
 * /features: every Raq.com tool on shelves grouped by the job it does, with the newest
 * tools first. Cards show the Miniature thumbnails (public/tool-thumbnails). Silver
 * palette and type scale shared with the homepage. Behaviour: features.js.
 */
.ft {
    --ground: #f6f7f8;
    --silver: #eef1f4;
    --band: #eaeef1;
    --paper: #ffffff;
    --ink: #191b22;
    --ink-2: #2d323c;
    --muted: #626777;
    --faint: #8a909c;
    --line: #e2e6eb;
    --line-2: #d3d9e0;
    --slate: #1d2532;
    --slate-2: #283243;
    --slate-line: #36414f;
    --green: #286c4c;
    --focus: #3b6fd9;
    --shadow-panel: 0 1px 1px #1c1f2a0a, 0 2px 6px #1c1f2a08, 0 30px 70px -28px #1c1f2a45;
    --wrap: 80rem;
    --gutter: clamp(16px, 4vw, 48px);
    --ease: cubic-bezier(.22, 1, .36, 1);
    background: var(--ground);
    color: var(--ink);
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    padding-bottom: 96px;
}
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
:where(.ft) :where(h1, h2, h3, h4, p, figure, ol, ul, dl, dd) { margin: 0; }
:where(.ft) :where(ol, ul) { padding: 0; list-style: none; }
:where(.ft) a { color: inherit; text-decoration: none; }
:where(.ft) button { font: inherit; color: inherit; }
.ft :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.ft [x-cloak] { display: none !important; }
.ft-wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.ft-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Type and buttons */
.ft-h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.ft-body { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ft-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.ft-button:hover { background: #2a2d37; transform: translateY(-1px); }
.ft-button:disabled { opacity: .6; cursor: progress; transform: none; }
.ft-button-quiet { background: #fff; color: var(--ink); border-color: var(--line-2); }
.ft-button-quiet:hover { background: #fff; border-color: #aeb6c0; }
.ft-text-button { padding: 0; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: #c4cad2; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.ft-text-button:hover { text-decoration-color: currentColor; }
.ft-text-button:disabled { opacity: .5; cursor: progress; }

/* Icon tile: one neutral style for every module */
.ft-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--ink); border: 1px solid #e3e7ec; box-shadow: 0 1px 2px #1c1f2a0f; flex-shrink: 0; }
.ft-icon svg { width: 17px; height: 17px; stroke-width: 1.75; }
.ft-icon-on-dark { background: #ffffff10; border-color: #ffffff24; color: #fff; box-shadow: none; }

/* Status marker for genuine data only: released recently */
.ft-new { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: #e3f1e9; color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: 0; flex-shrink: 0; }

/* Enable switch for people who manage the account's tools */
.ft-toggle-wrap { display: inline-flex; }
.ft-toggle { position: relative; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: #c9d0d8; cursor: pointer; transition: background .2s var(--ease); }
.ft-toggle span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform .2s var(--ease); }
.ft-toggle[aria-checked="true"] { background: var(--green); }
.ft-toggle[aria-checked="true"] span { transform: translateX(16px); }
.ft-toggle:disabled { opacity: .6; cursor: progress; }

/* Opening */
.ft-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 32px 72px; align-items: center; padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: 40px; }
.ft-hero-title { font-size: clamp(44px, 5.4vw, 78px); font-weight: 600; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.ft-hero-lead { max-width: 26em; margin-top: 22px; font-size: clamp(18px, 1.45vw, 22px); font-weight: 450; letter-spacing: -.02em; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

/* Ask your own AI: one-click open in ChatGPT or Claude, or copy the prompt for any other assistant */
.ft-ask { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-panel); }
.ft-ask-title { font-size: clamp(21px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.ft-ask-intro { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ft-ask-open-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.ft-ask-open { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px #1c1f2a26, 0 10px 22px -14px #1c1f2a90; transition: background .2s var(--ease), transform .2s var(--ease); }
.ft-ask-open:hover { background: #2a2d37; transform: translateY(-1px); }
.ft-ask-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.ft-ask-logo img { width: 16px; height: 16px; border-radius: 3px; }
.ft-ask-box { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ft-ask-box-label { font-size: 14px; color: var(--muted); }
.ft-ask-prompt { margin-top: 10px; padding: 14px 16px 12px; border-radius: 14px; background: var(--ground); border: 1px solid var(--line); }
.ft-ask-prompt p { font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.ft-ask-copy { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.ft-ask-copy:hover { border-color: #aeb6c0; }
.ft-ask-copy svg { width: 15px; height: 15px; }
.ft-ask-copy.is-copied { color: var(--green); border-color: #b9d9c7; }
.ft-ask-status { margin-top: 10px; font-size: 14px; color: var(--green); }
.ft-ask-status:empty { display: none; }

/* Search and filters */
.ft-toolbar { position: sticky; top: var(--ft-nav, 0px); z-index: 30; background: #f6f7f8f5; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.ft-toolbar.is-stuck { border-bottom-color: var(--line); }
.ft-toolbar-inner { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.ft-search-form { flex: 0 0 360px; }
.ft-search { position: relative; display: flex; align-items: center; }
.ft-search input { width: 100%; min-height: 44px; padding: 0 74px 0 42px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font-size: 15.5px; letter-spacing: -.01em; box-shadow: 0 1px 2px #1c1f2a0d; -webkit-appearance: none; appearance: none; }
.ft-search input::placeholder { color: var(--faint); }
.ft-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #191b2214; }
.ft-search input::-webkit-search-cancel-button { display: none; }
.ft-search > svg { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.ft-search-clear { position: absolute; right: 6px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--silver); color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.ft-search-clear:hover { background: var(--band); }

.ft-filters-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ft-filters { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding: 3px; scrollbar-width: none; scroll-behavior: smooth; }
.ft-filters::-webkit-scrollbar { display: none; }
.ft-filters-wrap.fade-end .ft-filters { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.ft-filters-wrap.fade-start .ft-filters { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.ft-filters-wrap.fade-start.fade-end .ft-filters { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ft-filter { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.ft-filter:hover { border-color: #aeb6c0; }
.ft-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ft-filter:disabled { opacity: .38; cursor: default; }
.ft-filter:disabled:hover { border-color: var(--line-2); }
.ft-filter-count { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ft-filter[aria-pressed="true"] .ft-filter-count { color: #ffffffa6; }
.ft-filter-step { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.ft-filter-step svg { width: 16px; height: 16px; }
.ft-filter-step:hover { border-color: #aeb6c0; }

/* Recently added: the one dark band */
.ft-featured { margin-top: 20px; padding-block: clamp(48px, 5vw, 72px); background: var(--slate); color: #fff; }
.ft-featured-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.ft-featured-head p { font-size: 16px; line-height: 1.5; color: #a9b2bf; }
.ft-featured-grid { display: grid; grid-template-columns: repeat(var(--ft-featured, 3), minmax(0, 1fr)); gap: 20px; }
.ft-feature { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 0; border-radius: 20px; background: var(--slate-2); border: 1px solid var(--slate-line); transition: border-color .2s var(--ease); }
.ft-feature:hover { border-color: #56637a; }
.ft-feature:has(.ft-stretch:focus-visible) { outline: 2px solid #8fb0f0; outline-offset: 3px; }
.ft-feature-media { position: relative; aspect-ratio: 1540 / 900; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff14, 0 22px 50px -26px #000d; transition: transform .45s var(--ease); }
.ft-feature:hover .ft-feature-media { transform: translateY(-3px); }
.ft-feature-body { padding: 18px 10px 22px; }
.ft-feature-title { display: flex; align-items: center; gap: 12px; }
.ft-feature-title h3 { font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.ft-feature-body p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #b4bcc8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Stretched card links */
.ft-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ft-stretch:focus-visible { outline: none; }

/* Results heading, empty state and AI suggestions */
.ft-results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; padding-top: 36px; }
.ft-results-head .ft-body { margin-top: 8px; max-width: 40em; }
.ft-results-actions { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 4px; }
.ft-empty { display: grid; justify-items: start; gap: 18px; padding-top: 14px; }
.ft-empty > p { max-width: 34em; }
.ft-ai { max-width: 720px; margin-top: 20px; }
.ft-ai-status { font-size: 15px; color: var(--muted); }
.ft-ai-found { display: grid; gap: 8px; }
.ft-ai-match { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .2s var(--ease); }
.ft-ai-match:hover { border-color: var(--line-2); }
.ft-ai-match strong { font-size: 16px; font-weight: 600; }
.ft-ai-match span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.ft-ai-missing { padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ft-ai-missing > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ft-ai-missing a { text-decoration: underline; text-underline-offset: 3px; }
.ft-ai-email { margin-top: 14px; }
.ft-ai-email label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.ft-ai-email div { display: flex; gap: 8px; }
.ft-ai-email input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; }
.ft-ai-email button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.ft-ai-email button:disabled { opacity: .5; cursor: not-allowed; }
.ft-ai-thanks { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green); }
.ft-ai-error { font-size: 14px; color: #b42318; }
.ft-ai-turnstile { margin-top: 12px; }

/* Shelves */
.ft-shelves { display: grid; gap: clamp(48px, 4.6vw, 68px); padding-top: clamp(52px, 5.5vw, 80px); }
.ft-shelf { min-width: 0; scroll-margin-top: calc(var(--ft-nav, 88px) + 96px); }
.ft-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.ft-shelf-head h2 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.ft-shelf-head p { margin-top: 5px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.ft-shelf-nav { display: flex; gap: 8px; flex-shrink: 0; }
.ft-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s var(--ease), opacity .15s var(--ease); }
.ft-arrow svg { width: 18px; height: 18px; }
.ft-arrow:not(:disabled):hover { border-color: #9aa3ae; }
.ft-arrow:disabled { opacity: .35; cursor: default; }

.ft-track { --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(320px, 28vw, 400px); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 4px var(--edge) 14px; scrollbar-width: none; }
.ft-track::-webkit-scrollbar { display: none; }

.ft-card { position: relative; min-width: 0; scroll-snap-align: start; scroll-margin-top: calc(var(--ft-nav, 88px) + 96px); }
.ft-card:has(.ft-stretch:focus-visible) .ft-card-media { outline: 2px solid var(--focus); outline-offset: 3px; }
.ft-card-media { position: relative; aspect-ratio: 1540 / 900; overflow: hidden; border-radius: 14px; background: var(--silver); border: 1px solid #dde2e8; box-shadow: 0 1px 2px #1c1f2a0d; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.ft-card:hover .ft-card-media { border-color: #c3cad3; box-shadow: 0 1px 2px #1c1f2a12, 0 14px 28px -18px #1c1f2a66; transform: translateY(-2px); }
.ft-card-body { padding: 14px 2px 0; }
.ft-card-title { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.ft-card-title h3 { min-width: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ft-card-toggle { position: relative; z-index: 2; display: inline-flex; align-items: center; margin-left: auto; }
.ft-card-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ft-card-instead { margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--green); }
.ft-card-why { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* Searching or filtering: the same cards become one ranked grid */
.ft-shelves.is-results { width: min(var(--wrap), 100%); margin-inline: auto; padding: 24px var(--gutter) 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 24px; }
.ft-shelves.is-results .ft-shelf,
.ft-shelves.is-results .ft-track { display: contents; }
.ft-shelves.is-results .ft-shelf-head { display: none; }

/* Closing */
.ft-cta { margin-top: clamp(80px, 8vw, 120px); }
.ft-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.6vw, 48px); border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ft-cta-inner .ft-body { margin-top: 8px; max-width: 32em; }
.ft-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1100px) {
    .ft-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ft-search-form { flex-basis: 300px; }
}

/* Hero stacked on a wide screen: the prompt sits beside the open buttons instead of below them */
@media (min-width: 901px) and (max-width: 1100px) {
    .ft-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
    .ft-ask-box { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 900px) {
    .ft-featured-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84vw, 400px); gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .ft-featured-grid::-webkit-scrollbar { display: none; }
    .ft-feature { scroll-snap-align: start; }
}

@media (max-width: 760px) {
    .ft-hero { padding-top: 40px; padding-bottom: 28px; gap: 24px; }
    .ft-hero-lead { margin-top: 14px; }
    .ft-hero-title { font-size: clamp(38px, 11vw, 48px); }
    .ft-ask { padding: 18px; border-radius: 18px; }
    .ft-ask-open-row { grid-template-columns: minmax(0, 1fr); }
    .ft-toolbar { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ft-toolbar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 4px 8px; }
    .ft-search-form { flex: none; }
    .ft-filters-wrap { margin-inline: calc(var(--gutter) * -1); }
    .ft-filters { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
    .ft-filters-wrap.fade-start .ft-filters, .ft-filters-wrap.fade-end .ft-filters, .ft-filters-wrap.fade-start.fade-end .ft-filters { -webkit-mask-image: none; mask-image: none; }
    .ft-filter-step { display: none; }
    .ft-featured { margin-top: 16px; }
    .ft-feature { padding: 10px 10px 0; border-radius: 16px; }
    .ft-feature-body { padding: 14px 8px 18px; }
    .ft-feature-title h3 { font-size: 17.5px; }
    .ft-shelf, .ft-card { scroll-margin-top: calc(var(--ft-nav, 88px) + 16px); }
    .ft-shelf-nav { display: none; }
    .ft-shelf-head { margin-bottom: 14px; }
    .ft-shelf-head p { font-size: 15px; }
    .ft-track { grid-auto-columns: 84vw; gap: 14px; }
    .ft-results-head { padding-top: 28px; }
    .ft-shelves.is-results { gap: 32px; }
}

@media (hover: none) {
    .ft-card:hover .ft-card-media, .ft-feature:hover .ft-feature-media { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ft *, .ft *::before, .ft *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}