/* The site's frame around every free tool (28 Oct 2026): masthead, a navy hero with the banner art (the ridges,
   the trail, the stones on it), the site's type and buttons, the footer. Loaded after each tool's own <style>, so
   the overrides at the end win at equal specificity. Frame classes are tf- prefixed: no tool uses them.
   Built by the scratchpad script tools-frame.cjs; edit here for look, there for the markup. */
:root{
  --tf-sky:#0a1729;--tf-sky-deep:#0a1523;--tf-mist:#8fa3ba;--tf-gold:#f2b84a;--tf-gold-light:#f6c96e;--tf-gold-text:#a06d14;
  --tf-wash:#f4f6f9;--tf-rule:#dfe5ec;--tf-ink:#14181d;--tf-muted:#5b6a7c;--tf-ease:cubic-bezier(.2,.7,.3,1);
  --tf-font:"Jost","Futura","Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the tools' own names for the same things */
  --bg:var(--tf-wash);--line:var(--tf-rule);--muted:var(--tf-muted);--navy:var(--tf-sky);
}
html.tf body{background:var(--tf-wash);font-family:var(--tf-font)}
html.tf body,html.tf button,html.tf input,html.tf select,html.tf textarea{font-family:var(--tf-font)}

/* ── Masthead: the site's own ─────────────────────────────────────────── */
.tf-mast{position:sticky;top:0;z-index:50;background:rgba(10,23,41,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06);color:#fff}
.tf-shell{max-width:1120px;margin:0 auto;padding:0 1.5rem;box-sizing:border-box}
.tf-mast .tf-shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem}
.tf-word{display:inline-flex;text-decoration:none;line-height:0}
.tf-lockup{height:52px;width:auto;display:block}
.tf-prod{display:flex;gap:1.4rem;margin:0 1rem;font-size:.92rem;white-space:nowrap}
.tf-prod a,.tf-fprod a{color:#fff;text-decoration:none;opacity:.82;padding-bottom:2px;border-bottom:1px solid transparent;transition:opacity .2s var(--tf-ease),border-color .2s var(--tf-ease)}
.tf-prod a:hover{opacity:1;border-bottom-color:var(--tf-gold)}
.tf-right{display:flex;align-items:center;gap:1.75rem}
.tf-login{display:flex;align-items:center;gap:.9rem;font-size:.85rem;white-space:nowrap}
.tf-login a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.tf-login a:hover{border-bottom-color:var(--tf-gold-light)}
.tf-start{display:inline-block;background:var(--tf-gold);color:var(--tf-sky);text-decoration:none;font-weight:600;border-radius:999px;padding:.65rem 1.25rem;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:background .25s var(--tf-ease),transform .3s var(--tf-ease)}
.tf-start:hover{background:var(--tf-gold-light);transform:translateY(-2px)}

/* ── Hero: the tool's name over the banner's ridges, trail and stones ─── */
.tf-hero{--art-h:clamp(8rem,17vw,14rem);position:relative;background:var(--tf-sky);color:#fff;overflow:hidden}
/* The copy lines up with the tool below it (the tools are 820px wide) and stops above the far ridge. */
.tf-copy{position:relative;z-index:2;max-width:820px;padding:2.4rem 22px calc(var(--art-h) * .92)}
.tf-back{display:inline-block;color:var(--tf-mist);text-decoration:none;font-size:.9rem;margin:0 0 1.4rem;border-bottom:1px solid transparent;transition:color .2s var(--tf-ease),border-color .2s var(--tf-ease)}
.tf-back:hover{color:#fff;border-bottom-color:var(--tf-gold)}
.tf-caps{margin:0 0 .9rem;color:var(--tf-gold);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:.8rem;line-height:1.7}
.tf-title{margin:0;font-family:var(--tf-font);font-weight:500;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;letter-spacing:-.01em;max-width:22ch;text-wrap:balance;color:#fff}
.tf-lead{margin:1.1rem 0 0;max-width:44rem;color:#c9d4e2;font-weight:300;font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.55;text-wrap:pretty}
.tf-meta{display:inline-block;margin:1.4rem 0 0;padding:.35rem .9rem;border:1px solid rgba(242,184,74,.45);border-radius:999px;color:var(--tf-gold-light);font-size:.85rem;letter-spacing:.04em}
.tf-art{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:var(--art-h);display:block;z-index:1;pointer-events:none}

/* ── Footer: the site's own ───────────────────────────────────────────── */
.tf-foot{background:var(--tf-sky-deep);color:var(--tf-mist);padding:2.25rem 0 3rem;margin-top:3rem;font-size:.95rem;line-height:1.6}
.tf-foot p{margin:0 0 .35rem}
.tf-foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.tf-foot a:hover{border-bottom-color:var(--tf-gold)}
/* The footer's sections, the same as every page of the site (28 Oct 2026): the path, free tools, questions, members. */
.tf-fgrid{display:grid;grid-template-columns:1.1fr 1.4fr 1fr 1.1fr;gap:2rem 2.25rem;padding-bottom:1.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.tf-fh{margin:0 0 .75rem !important;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tf-gold)}
.tf-fcol p{margin:0 0 .55rem}
.tf-fpath{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.tf-foot .tf-fpath a{border-bottom:none;display:inline-flex;align-items:center;gap:.55rem}
.tf-fpath a:hover b{color:var(--tf-gold-light)}
.tf-fpath i{width:9px;height:9px;border-radius:50%;flex:none}
.tf-fpath b{font-weight:600;color:#fff;min-width:4.6rem}
.tf-fpath span{color:var(--tf-mist)}
.tf-foot .tf-fgo{font-weight:600;border-bottom-color:var(--tf-gold)}
.tf-fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1.25rem;font-size:.88rem}
.tf-fbase p{margin:0}
@media(max-width:900px){.tf-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tf-fgrid{grid-template-columns:1fr;gap:1.6rem}}

@media(max-width:900px){.tf-prod{display:none}}
@media(max-width:600px){.tf-login{display:none}.tf-lockup{height:40px}.tf-start{padding:.55rem .85rem;font-size:.76rem;letter-spacing:.03em}
  .tf-copy{padding-top:1.8rem}.tf-meta{font-size:.8rem}}

/* ── The tool itself, in the site's language ──────────────────────────── */
/* Each tool's old navy bar is the hero now. */
html.tf #app > .bar,html.tf header.bar,html.tf .hdr{display:none}
/* Three tools padded the page itself, which insets the hero: the padding moves onto the tool. */
html.tf body{padding:0}
html.tf .wrap{padding-top:2.75rem;padding-left:16px;padding-right:16px}
html.tf .wrap h2{font-weight:500;letter-spacing:-.005em;line-height:1.2}
html.tf .eyebrow{font-weight:500;letter-spacing:.24em}
html.tf .eyebrow .dot{display:none}
html.tf .btn{border-radius:999px;font-weight:600;letter-spacing:.02em;transition:background .25s var(--tf-ease),transform .3s var(--tf-ease),box-shadow .3s var(--tf-ease);box-shadow:0 8px 24px rgba(242,184,74,.25)}
html.tf .btn:not(:disabled):not(.ghost):hover{background:var(--tf-gold-light);transform:translateY(-2px)}
html.tf .btn.ghost{background:transparent;color:var(--tf-sky);border:1.5px solid var(--tf-sky);box-shadow:none}
html.tf .btn.ghost:hover{background:var(--tf-sky);color:#fff}
html.tf .btn:disabled{box-shadow:none}
html.tf .q,html.tf .fieldcard,html.tf .scorecard,html.tf .owns,html.tf .card{border-radius:16px;border-color:var(--tf-rule);box-shadow:0 1px 2px rgba(10,23,41,.04)}
html.tf .verdict{border-radius:16px;background:linear-gradient(160deg,#102035 0%,var(--tf-sky) 70%)}
html.tf .verdict .k{color:var(--tf-gold);letter-spacing:.2em;font-weight:600}
html.tf input:focus-visible,html.tf textarea:focus-visible,html.tf select:focus-visible{outline:none;border-color:var(--tf-gold);box-shadow:0 0 0 3px rgba(242,184,74,.28)}

@media (prefers-reduced-motion:reduce){.tf-start,.tf-back,html.tf .btn{transition:none}.tf-start:hover,html.tf .btn:hover{transform:none}}
/* One path, four steps (28 Oct 2026): the same strip under the masthead of every product page, this page's step marked.
   Stamped by the scratchpad script onepath.cjs; change the four steps there, and on the home page and in the footer. */
.onepath{background:#0c1a2b;color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
.onepath .op-row{max-width:1120px;margin:0 auto;padding:.65rem 1.5rem;display:flex;align-items:center;gap:1.5rem;box-sizing:border-box}
.op-label{flex:none;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#f2b84a;white-space:nowrap}
.onepath ol{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.onepath li{min-width:0}
.onepath a{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#c9d4e2;padding:.35rem .7rem .35rem .4rem;border-radius:999px;border:1px solid transparent;transition:background .25s cubic-bezier(.2,.7,.3,1),border-color .25s}
.onepath a:hover{background:rgba(255,255,255,.06)}
.onepath a[aria-current]{background:rgba(255,255,255,.08);border-color:var(--c)}
.op-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600}
.op-run .op-n{color:#0a1729}
.op-t{min-width:0;line-height:1.15}
.op-t b{display:block;color:#fff;font-weight:600;font-size:.95rem}
.op-t span{display:block;font-size:.78rem;color:#8fa3ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-watch{--c:#6e4cc4}.op-learn{--c:#2f6fb8}.op-practice{--c:#2e9463}.op-run{--c:#c98f2e}
@media (max-width:900px){.op-label{display:none}}
@media (max-width:560px){.onepath .op-row{padding:.5rem .6rem}.onepath ol{gap:.15rem}
  .onepath a{flex-direction:column;gap:.25rem;padding:.35rem .15rem;border-radius:12px;text-align:center}
  .op-n{width:26px;height:26px}.op-t b{font-size:.82rem}.op-t span{display:none}}
@media (prefers-reduced-motion:reduce){.onepath a{transition:none}}
.onepath ol li{margin:0}

@media print{.onepath,.tf-mast,.tf-hero,.tf-foot{display:none}}