/* ========================================================================== The Search Foundry – Tools section Layers on top of the main brand stylesheet and reuses its variables. Every class is prefixed tt- so nothing collides with site styles. ========================================================================== */ .tt-body{background:var(--cream)} .tt-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;font-size:.8rem;font-weight:600;text-decoration:none} .tt-skip:focus{left:16px} .tt-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .tt-body :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} /* ---------- HERO ---------- The hero carries id="hero" so the site's components.js treats it like the homepage hero (transparent nav over it, solid once scrolled past). These rules cancel the homepage-only #hero styles from site.css. */ #hero.tt-hero{min-height:0;display:block;align-items:initial;background:#080F1E} #hero.tt-hero::before{top:0;bottom:0;left:0;right:0;width:auto;z-index:auto; background:radial-gradient(ellipse 45% 90% at 100% 20%,rgba(249,115,22,.10) 0%,transparent 65%), radial-gradient(ellipse 40% 80% at 0% 100%,rgba(43,127,255,.14) 0%,transparent 65%)} .tt-hero{position:relative;z-index:0;overflow:hidden;background:#080F1E;padding:136px 0 80px;color:#fff} .tt-hero::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 45% 90% at 100% 20%,rgba(249,115,22,.10) 0%,transparent 65%), radial-gradient(ellipse 40% 80% at 0% 100%,rgba(43,127,255,.14) 0%,transparent 65%)} .tt-hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:56px 56px;mask-image:linear-gradient(to right,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(to right,transparent 30%,#000 100%)} .tt-hero .wrap{position:relative;z-index:1} .tt-tool .tt-hero{padding-bottom:128px} .tt-hero .hero-kicker{margin-bottom:20px} .tt-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;font-size:.74rem;font-weight:500} .tt-crumbs li{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.35)} .tt-crumbs li+li::before{content:'/';color:rgba(255,255,255,.2)} .tt-crumbs a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s} .tt-crumbs a:hover{color:#fff} .tt-crumbs [aria-current]{color:rgba(255,255,255,.7)} .tt-hero__title{font-family:var(--f-body);font-size:clamp(2.3rem,4.2vw,4rem);font-weight:700;line-height:1.06;letter-spacing:-.03em;color:#fff;max-width:880px;margin-bottom:22px} .tt-hero__title .serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:rgba(255,255,255,.5)} .tt-hero__lead{font-size:1.02rem;line-height:1.75;color:rgba(255,255,255,.55);max-width:640px;margin-bottom:28px} .tt-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .tt-badges li{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.55);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:inline-flex;align-items:center;gap:7px} .tt-badges li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0} .tt-badges strong{color:#fff;font-weight:600} /* ---------- SECTIONS ---------- */ .tt-section{padding:88px 0} .tt-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap} .tt-title-sm{font-size:clamp(1.8rem,2.6vw,2.6rem)} /* ---------- CHIPS ---------- */ .tt-chips{display:flex;flex-wrap:wrap;gap:8px} .tt-chip{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--border2);padding:9px 14px;border-radius:8px;transition:border-color .2s,color .2s,transform .2s} .tt-chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)} .tt-chip__n{font-size:.68rem;font-weight:600;color:var(--muted);background:var(--cream);border-radius:999px;padding:2px 7px} .tt-chip--all{background:var(--ink);color:#fff;border-color:var(--ink)} .tt-chip--all:hover{background:var(--blue);border-color:var(--blue);color:#fff} /* ---------- HUB ---------- */ .tt-hub{padding-top:56px} .tt-hub .tt-chips{margin-bottom:56px} .tt-hub__cat{scroll-margin-top:96px} .tt-hub__cat+.tt-hub__cat{margin-top:72px;padding-top:56px;border-top:1px solid var(--border2)} .tt-hub__cat-title{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px} .tt-hub__cat-title a{color:var(--ink);text-decoration:none;transition:color .2s} .tt-hub__cat-title a:hover{color:var(--blue)} .tt-hub__cat-desc{font-size:.92rem;line-height:1.7;color:var(--muted);max-width:560px} .tt-empty{font-size:.95rem;color:var(--muted);padding:40px 0} .tt-empty a{color:var(--blue)} /* ---------- CARDS ---------- */ .tt-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tt-card{position:relative;background:#fff;border:1px solid var(--border2);border-radius:12px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s,transform .25s,border-color .25s} .tt-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s} .tt-card:hover{box-shadow:0 10px 32px rgba(13,45,107,.09);transform:translateY(-3px);border-color:rgba(43,127,255,.25)} .tt-card:hover::before{transform:scaleX(1)} .tt-card__meta{font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)} .tt-card__title{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1.3} .tt-card__title a{color:var(--ink);text-decoration:none} .tt-card__title a::after{content:'';position:absolute;inset:0;border-radius:12px} .tt-card:hover .tt-card__title a{color:var(--blue)} .tt-card__desc{font-size:.86rem;line-height:1.65;color:var(--muted);flex:1} .tt-card__link{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--blue);margin-top:4px;transition:gap .2s} .tt-card:hover .tt-card__link{gap:10px} /* ---------- WHY ---------- */ .tt-why{background:#fff} .tt-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border:1px solid var(--border2);border-radius:12px;overflow:hidden} .tt-why__item{padding:36px 30px;background:var(--cream);border-right:1px solid var(--border)} .tt-why__item:last-child{border-right:none} .tt-why__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;background:#fff;border:1px solid var(--border2);font-size:1.1rem;margin-bottom:18px} .tt-why__item h3{font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-bottom:10px} .tt-why__item p{font-size:.86rem;line-height:1.75;color:var(--muted)} /* ---------- TOOL STAGE ---------- */ .tt-stage{position:relative;z-index:2;margin-top:-80px} .tt-app{background:#fff;border:1px solid var(--border2);border-radius:14px;box-shadow:0 24px 64px rgba(13,31,60,.12);padding:36px;min-height:240px} .tt-placeholder{display:flex;align-items:center;justify-content:center;min-height:200px;border:1.5px dashed var(--border2);border-radius:10px;color:var(--muted);font-size:.85rem;font-weight:500} /* ---------- STEPS ---------- */ .tt-steps{background:var(--cream)} .tt-steps__list{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:40px;border:1px solid var(--border2);border-radius:12px;overflow:hidden;background:var(--border)} .tt-steps__item{counter-increment:step;background:#fff;padding:32px 28px;position:relative;margin:0 1px 1px 0} .tt-steps__item::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--f-serif);font-size:2.6rem;line-height:1;color:rgba(13,45,107,.12);margin-bottom:16px} .tt-steps__item h3{font-size:.98rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px} .tt-steps__item p{font-size:.86rem;line-height:1.7;color:var(--muted)} /* ---------- CONTENT + ASIDE ---------- */ .tt-content{background:#fff} .tt-content__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:72px;align-items:start} .tt-content__grid--single{grid-template-columns:minmax(0,760px)} .tt-prose{color:#33425b;font-size:1rem;line-height:1.8;max-width:760px} .tt-prose>*+*{margin-top:1.1em} .tt-prose h2{font-size:clamp(1.45rem,2vw,1.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink);margin-top:2.2em} .tt-prose h2:first-child{margin-top:0} .tt-prose h3{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:1.8em} .tt-prose h2+*,.tt-prose h3+*{margin-top:.6em} .tt-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tt-prose a:hover{color:var(--blue-dk)} .tt-prose strong{color:var(--ink)} .tt-prose ul,.tt-prose ol{padding-left:1.3em} .tt-prose li+li{margin-top:.45em} .tt-prose li::marker{color:var(--orange)} .tt-prose blockquote{border-left:2px solid var(--orange);padding:4px 0 4px 20px;color:var(--ink);font-style:italic} .tt-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--cream);border:1px solid var(--border2);border-radius:5px;padding:1px 6px} .tt-prose pre{background:var(--ink);color:#e6edf7;border-radius:10px;padding:20px 22px;overflow-x:auto;font-size:.84rem;line-height:1.65} .tt-prose pre code{background:none;border:0;padding:0;color:inherit} .tt-prose table{width:100%;border-collapse:collapse;font-size:.88rem;display:block;overflow-x:auto} .tt-prose th,.tt-prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border2);vertical-align:top} .tt-prose th{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--cream)} .tt-prose .tt-callout{background:var(--cream);border:1px solid var(--border2);border-left:3px solid var(--blue);border-radius:8px;padding:18px 20px;font-size:.93rem} .tt-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px} .tt-aside__card{background:var(--cream);border:1px solid var(--border2);border-radius:12px;padding:24px} .tt-aside__card--dark{background:var(--navy);border-color:var(--navy)} .tt-aside__card--dark .tt-aside__head{color:var(--orange)} .tt-aside__card--dark .tt-aside__text{color:rgba(255,255,255,.55)} .tt-aside__card--dark .btn-primary{margin-top:6px;font-size:.78rem;padding:11px 18px} .tt-aside__head{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .tt-aside__text{font-size:.84rem;line-height:1.7;color:var(--muted);margin-bottom:12px} .tt-aside__link{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--blue);text-decoration:none} .tt-author{display:flex;align-items:center;gap:12px;margin-bottom:12px} .tt-author img{border-radius:50%;object-fit:cover} .tt-author__name{display:block;font-size:.95rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em} .tt-author__name:hover{color:var(--blue)} .tt-author__role{display:block;font-size:.76rem;color:var(--muted)} .tt-checks{list-style:none;display:flex;flex-direction:column;gap:9px} .tt-checks li{display:flex;gap:10px;font-size:.84rem;color:var(--ink);line-height:1.5} .tt-checks li::before{content:'';flex-shrink:0;width:16px;height:16px;margin-top:2px;border-radius:50%; background:rgba(43,127,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B7FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center/12px no-repeat} /* ---------- FAQ ---------- */ .tt-faq{background:var(--cream)} .tt-content+.tt-faq,.tt-hub+.tt-faq{border-top:1px solid var(--border)} .tt-faq__layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:72px;align-items:start} .tt-faq__list{border-top:1px solid var(--border2)} .tt-faq__item{border-bottom:1px solid var(--border2)} .tt-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0} .tt-faq__item summary::-webkit-details-marker{display:none} .tt-faq__item summary h3{font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.45;transition:color .2s} .tt-faq__item summary:hover h3{color:var(--blue)} .tt-faq__icon{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--border2);background:#fff;transition:background .2s,border-color .2s} .tt-faq__icon::before,.tt-faq__icon::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s} .tt-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)} .tt-faq__item[open] .tt-faq__icon{background:var(--ink);border-color:var(--ink)} .tt-faq__item[open] .tt-faq__icon::before,.tt-faq__item[open] .tt-faq__icon::after{background:#fff} .tt-faq__item[open] .tt-faq__icon::after{transform:translate(-50%,-50%) rotate(0)} .tt-faq__a{padding:0 48px 24px 0;font-size:.92rem;line-height:1.8;color:var(--muted)} .tt-faq__a a{color:var(--blue)} /* ---------- RELATED / OTHERS / CTA ---------- */ .tt-related{background:#fff;border-top:1px solid var(--border)} .tt-others{padding:0 0 72px;background:var(--cream)} .tt-others .s-eyebrow{margin-bottom:16px} .tt-cta{background:var(--cream);padding:24px 0 96px} .tt-related+.tt-cta{background:#fff} /* ---------- RESPONSIVE ---------- */ @media(max-width:1100px){ .tt-grid{grid-template-columns:repeat(2,1fr)} .tt-content__grid{grid-template-columns:1fr;gap:48px} .tt-aside{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .tt-faq__layout{grid-template-columns:1fr;gap:28px} } @media(max-width:1000px){ .tt-hero{padding:112px 0 64px} .tt-tool .tt-hero{padding-bottom:104px} .tt-section{padding:64px 0} .tt-why__grid{grid-template-columns:1fr} .tt-why__item{border-right:none;border-bottom:1px solid var(--border)} .tt-why__item:last-child{border-bottom:none} .tt-app{padding:24px 20px} } @media(max-width:640px){ .tt-grid{grid-template-columns:1fr} .tt-hero__lead{font-size:.95rem} .tt-stage{margin-top:-64px} .tt-section__head{align-items:flex-start} .tt-faq__a{padding-right:0} } @media(prefers-reduced-motion:reduce){ .tt-card,.tt-card::before,.tt-chip,.tt-faq__icon::after{transition:none} } /* ========================================================================== MOBILE LAYER FOR TOOL UIs The tools were built as standalone pages, each with its own wrappers and generous padding. Inside the site layout that stacks up on phones, so below 720px we flatten wrapper padding, let every flex/grid child shrink, and keep form controls, media and code inside the card. Wide tables scroll sideways. ========================================================================== */ .tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* site.css styles every