/* The free tool pages (template-parts/tool.php, root .tp) and their hub (template-parts/tools-hub.php, root .ih.th),
   routed by inc/tools.php and loaded by gs_tool_assets() or gs_tools_hub_assets() after the kit, product.css (the
   shared finale and its card) and integration.css (the catalogue's cards, .ih-grid and .ih-card, which the hub and a
   tool page's More free tools wear, their top row aligned to the top here). Only the type's own atoms live here: the room under the sticky
   nav, the eyebrow (centred, with its link), the stage the tool stands on and the privacy line under it, the guide a
   page may carry (page.guide), the examples a page may lead with (page.examples, with the hero's link down to the
   tool's own section) and the finale motto's wrap. The tool itself brings its own stylesheet
   (assets/css/tool-<name>.css, its own or a shared component's). Every section is a k- part of the landing kit;
   nothing moves. */

/* the page starts under the sticky nav with the hero's own padding, as a product page does; an anchor lands clear */
main.gs-tool{padding-top:0}
.tp [id],.th [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ==== a tool page ==================================================================================================== */

/* the hero: the words centred, then the tool full width under them (3.9: the tool is the page's stage) */
.tp .k-hero{padding:48px 0 96px}
.tp-hero .k-h1{max-width:16em}
.tp-hero .k-hero-dek{max-width:64ch;text-wrap:pretty}
/* the eyebrow: "Free tools / <name>", the type's words a link to the hub while the hub is served; centred like the
   words under it, so a long name that wraps on a phone does not put its second line on the left, and the separator
   travels with the name (.tp-eye-n), so a wrap reads "/ SUBJECT LINE GENERATOR" and never ends a line on the slash */
.tp-hero .k-eyebrow{justify-content:center}
.tp-eye-n{display:inline-flex;align-items:center;gap:10px}
.tp-eye-a{color:inherit;text-decoration:none}
.tp-eye-a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tp-eye-a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.tp-stage{max-width:var(--k-wrap);margin:40px auto 0;padding:0 var(--k-gutter)}
/* the privacy line under the tool: a lock and one quiet sentence */
.tp-priv{margin:18px auto 0;max-width:80ch;font:400 14px/1.5 var(--sans);color:var(--mute);text-align:center;text-wrap:balance}
.tp .k-h2{text-wrap:balance}
.tp-priv svg{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;color:var(--mute)}

/* the hand-off: the kit's block, its words with the calls under them */
.tp-hand .k-btns{margin-top:30px}
.tp-hand-solo .k-blk-in{grid-template-columns:minmax(0,1fr)}

/* the guide (page.guide): "In this guide" beside a 720 px reading column, each entry its H2, the kit's .k-p in the
   text ink rather than the block's quiet one (the kit's own --k-sub hook, as a ground sets it), plain bullets, and a
   link drawn as a link. The list of entries stays in view under the nav while the guide is read; under 1000 px it
   sits above the column. */
.tp-guide{--k-sub:var(--k-text)}
.tp-g{display:grid;grid-template-columns:240px minmax(0,720px);gap:64px;justify-content:center;align-items:start}
.tp-g-toc{position:sticky;top:calc(var(--nav-h) + 24px)}
.tp-g-toc-h{margin:0 0 12px;font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tp-g-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:tpg}
.tp-g-toc li{counter-increment:tpg}
.tp-g-toc a{display:flex;align-items:baseline;gap:12px;padding:6px 0;font:500 15px/1.35 var(--sans);color:var(--ink);text-decoration:none}
.tp-g-toc a::before{content:counter(tpg,decimal-leading-zero);flex:none;min-width:20px;font:500 12px/1 var(--mono);color:var(--mute)}
.tp-g-toc a:hover{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tp-g-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.tp-g-col{display:grid;gap:64px;min-width:0}
.tp-g-sec{min-width:0}
.tp-g-h2{margin:0;font:600 clamp(28px,2.6vw,36px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink2);text-wrap:balance}
.tp-g-sec .k-p+.k-p{margin-top:16px}
.tp-g-sec .k-p a{color:var(--ink2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ai) 55%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}
.tp-g-sec .k-p a:hover{text-decoration-color:currentColor}
.tp-g-sec .k-p a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.tp-g-list{display:grid;gap:10px;margin:18px 0 0;padding:0 0 0 22px;font:400 17.5px/1.55 var(--sans);color:var(--k-text)}
.tp-g-list li{padding-left:4px;text-wrap:pretty}
.tp-g-list li::marker{color:var(--mute)}

/* a page that leads with examples (page.examples, the subject line generator): the hero's one link down to the tool,
   the examples as hairline cards of lines, a {slot} in a line drawn as a slot to fill, and the tool's own section
   after them, its head centred over the stage */
.tp-jump{margin-top:28px}
.tp-jump .k-btn svg{display:block;flex:none;width:18px;height:18px}
.tp-ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-top:48px}
.tp-ex-g{min-width:0;margin:0;padding:20px 22px 12px;border:1px solid var(--line);border-radius:12px;background:var(--k-card,var(--panel))}
.tp-ex-h{margin:0;font:600 17px/1.3 var(--sans);color:var(--ink2);text-wrap:balance}
.tp-ex-note{margin:4px 0 0;font:400 14px/1.5 var(--sans);color:var(--mute)}
.tp-ex-lines{margin:14px 0 0;padding:0;list-style:none}
.tp-ex-lines li{padding:10px 0;border-top:1px solid var(--line);font:500 15.5px/1.45 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.tp-ex-var{padding:0 2px;border-radius:4px;background:var(--k-ai-soft);color:var(--k-ai-ink);font-weight:600}
.tp-ex-after{max-width:72ch;margin:32px 0 0;font:400 16px/1.6 var(--sans);color:var(--k-text,var(--ink));text-wrap:pretty}
.tp-ex-after a{color:var(--ink2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ai) 55%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}
.tp-ex-after a:hover{text-decoration-color:currentColor}
.tp-ex-after a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

/* the shared finale's motto, on a tool page and the hub: balanced, so no word stands alone on its last line on a phone
   (feature.css does the same for the feature pages) */
.tp .k-motto,.th .k-motto{text-wrap:balance}

/* More free tools (.tp-more): the other tools served on the host, as the hub's cards, after the FAQ */
.tp-more .ih-grid{margin-top:40px}

/* ==== the hub ======================================================================================================== */
.th .k-hero-dek{max-width:60ch}
/* a card's top row aligned to its top, so a name on two lines keeps its Coming pill or arrow level with the
   neighbours'; the offsets centre a one-line name (20.8 px), the pill (22 px) and the arrow (18 px) on the 36 px tile
   (the same cards on a tool page's More free tools) */
.th .ih-card-top,.tp-more .ih-card-top{align-items:flex-start}
.th .ih-card-n,.tp-more .ih-card-n{padding-top:7px}
.th .ih-card-top .k-pill{margin-top:7px}
.th .ih-card-go,.tp-more .ih-card-go{margin-top:9px}

/* ==== widths ========================================================================================================= */
@media (max-width:1000px){
  .tp-g{grid-template-columns:minmax(0,1fr);gap:40px;max-width:calc(720px + 2 * var(--k-gutter))}
  .tp-g-toc{position:static}
}
@media (max-width:760px){
  .tp .k-hero{padding:28px 0 72px}
  .tp-stage{margin-top:28px}
  .tp-priv{text-align:left}
  .tp-g-col{gap:48px}
  .tp-g-h2{font-size:28px}
  .tp-g-list{font-size:16.5px}
}