/* The mockup scoped its tokens to .ch-scope so a light and a dark example
 * could sit side by side on one page. A real page has one scope — the
 * document — so the same tokens are declared on :root as well, or anything
 * outside a scoped block (the footer, most obviously) loses its colours.
 */
/* The site shell. Extracted from design/site-shell-mockup.html, which stays
 * as the reference for what every page type is meant to look like.
 *
 * Plain CSS on purpose: this site has no build step, so what is written here
 * is what the browser receives. Custom properties carry the palette and both
 * appearances; nothing here depends on a preprocessor or a framework.
 */


/* ==========================================================================
   cleverhelper.net — SITE SHELL — static design mockup
   --------------------------------------------------------------------------
   HOW THIS DROPS INTO THE REAL SITE
   Everything the site uses is prefixed  .ch-
   Everything that only annotates this mockup is prefixed  .mk-   (delete it)

   Copy the .ch- rules into public/css/shell.css and link it after
   bootstrap.min.css in base.html.twig. No element selectors outside
   .ch-prose and .ch-table, so nothing fights Bootstrap 4.
   No JavaScript anywhere: both menus and the FAQ are <details> elements.
   No webfonts, no CDN, no icon font. Every icon is inline SVG.

   RELATIONSHIP TO design/pub-viewer-mockup.html
   Same palette, same two typefaces, same radius grammar. The tool's own CSS
   (.pv-) keeps working unchanged: the alias block at the end of the light and
   dark token lists maps every --pv- name onto the shell's --ch- token, so the
   shell owns the colours and the tool inherits them. One change is deliberate
   and supersedes the tool mockup: the header wordmark is the SITE, not the
   tool. Reason in the notes at the foot of this page.
   ========================================================================== */

/* --- tokens: light ------------------------------------------------------ */
:root,
.ch-scope{
  --ch-desk:#e7e9ef;          /* the surface pages sit on */
  --ch-card:#ffffff;
  --ch-well:#f2f4f8;
  --ch-ink:#15233d;
  /* A surface that stays dark in both appearances. Named for the job
   * it does, not for a colour, because --ch-ink inverts and these
   * blocks must not. */
  --ch-inverse:#15233d;
  --ch-inverse-deep:#0e1930;
  --ch-inverse-ink:#ffffff;
  --ch-inverse-ink-2:#b9c5de;
  --ch-ink-2:#4b5a78;
  --ch-ink-3:#7f8ba3;
  --ch-rule:#cfd5e1;
  --ch-action:#1f49d6;        /* the only accent on the whole site */
  --ch-action-ink:#ffffff;
  --ch-action-hover:#1638ae;
  --ch-action-soft:#e2e8fc;
  --ch-ok:#1a6b4c;
  --ch-warn:#bd1467;
  --ch-warn-soft:#fce4ef;
  --ch-lift:0 1px 0 rgba(21,35,61,.05), 0 12px 26px -14px rgba(21,35,61,.45);
  --ch-lift-sm:0 1px 0 rgba(21,35,61,.05), 0 5px 12px -8px rgba(21,35,61,.4);
  --ch-serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style","Noto Serif",Georgia,serif;
  --ch-sans:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* aliases: pub-viewer.css keeps working verbatim and follows the shell */
  --pv-desk:var(--ch-desk);   --pv-card:var(--ch-card);   --pv-well:var(--ch-well);
  --pv-ink:var(--ch-ink);     --pv-ink-2:var(--ch-ink-2); --pv-ink-3:var(--ch-ink-3);
  --pv-rule:var(--ch-rule);   --pv-guide:var(--ch-action); --pv-guide-ink:var(--ch-action-ink);
  --pv-guide-hover:var(--ch-action-hover); --pv-guide-soft:var(--ch-action-soft);
  --pv-ok:var(--ch-ok);       --pv-margin:var(--ch-warn);
  --pv-serif:var(--ch-serif); --pv-sans:var(--ch-sans);
}

/* --- tokens: dark ------------------------------------------------------- */
:root:has(.ch-scope--dark),
.ch-scope--dark{
  --ch-desk:#0e121a;
  --ch-card:#19202c;
  --ch-well:#131923;
  --ch-ink:#e8ecf5;
  --ch-inverse:#1b2946;
  --ch-inverse-deep:#080b11;
  --ch-inverse-ink:#ffffff;
  --ch-inverse-ink-2:#b9c5de;
  --ch-ink-2:#a9b4c8;
  --ch-ink-3:#7d8798;
  --ch-rule:#2d3647;
  --ch-action:#8aa5ff;
  --ch-action-ink:#0e121a;
  --ch-action-hover:#a6baff;
  --ch-action-soft:#1d2740;
  --ch-ok:#6fd3a8;
  --ch-warn:#ff7fb8;
  --ch-warn-soft:#2d1b28;
  --ch-lift:0 0 0 1px rgba(255,255,255,.04), 0 14px 30px -16px rgba(0,0,0,.8);
  --ch-lift-sm:0 0 0 1px rgba(255,255,255,.04), 0 6px 14px -9px rgba(0,0,0,.8);
}

/* in production put .ch-scope--auto on the body element and drop the forced classes */
@media (prefers-color-scheme:dark){
  /* .ch-scope has to be in this list, not only :root. The light block declares
   * the tokens on .ch-scope as well, so any element carrying that class
   * re-declares the light palette on itself and overrides what it inherited —
   * which left the hero light while the article around it went dark. */
  :root,
  .ch-scope,
  .ch-scope--auto{
    --ch-desk:#0e121a;--ch-card:#19202c;--ch-well:#131923;
    --ch-ink:#e8ecf5;--ch-ink-2:#a9b4c8;--ch-ink-3:#7d8798;--ch-rule:#2d3647;
    --ch-inverse:#1b2946;--ch-inverse-deep:#080b11;
    --ch-inverse-ink:#ffffff;--ch-inverse-ink-2:#b9c5de;
    --ch-action:#8aa5ff;--ch-action-ink:#0e121a;--ch-action-hover:#a6baff;--ch-action-soft:#1d2740;
    --ch-ok:#6fd3a8;--ch-warn:#ff7fb8;--ch-warn-soft:#2d1b28;
    --ch-lift:0 0 0 1px rgba(255,255,255,.04), 0 14px 30px -16px rgba(0,0,0,.8);
    --ch-lift-sm:0 0 0 1px rgba(255,255,255,.04), 0 6px 14px -9px rgba(0,0,0,.8);
  }

}

/* --- base --------------------------------------------------------------- */
:root,
.ch-scope{background:var(--ch-desk);color:var(--ch-ink);font-family:var(--ch-sans);
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;}

.ch-scope *,.ch-scope *::before,.ch-scope *::after{box-sizing:border-box;}

.ch-scope :where(a){color:var(--ch-action);text-underline-offset:.18em;}

.ch-scope :focus-visible{outline:3px solid var(--ch-action);outline-offset:2px;border-radius:3px;}

.ch-wrap{max-width:70rem;margin:0 auto;padding:0 1.15rem;}

.ch-wrap--narrow{max-width:46rem;}

.ch-h1{font-family:var(--ch-serif);font-weight:700;line-height:1.08;letter-spacing:-.012em;
  font-size:clamp(1.95rem,1.35rem+2.7vw,3rem);margin:0 0 .55rem;}

.ch-h2{font-family:var(--ch-serif);font-weight:700;line-height:1.18;margin:0 0 .5rem;
  font-size:clamp(1.42rem,1.18rem+1.2vw,1.95rem);}

.ch-deck{color:var(--ch-ink-2);font-size:1.12rem;margin:0 0 1.4rem;max-width:52ch;}

.ch-small{font-size:.87rem;color:var(--ch-ink-3);}

/* German and Italian make long words. Never let one blow a box open. */
.ch-scope :where(h1,h2,h3,p,li,a,button,span,td,th){overflow-wrap:break-word;}

.ch-scope [lang="de"]{hyphens:auto;}

/* ==========================================================================
   HEADER — the same three things at one tool and at twenty
   ========================================================================== */
.ch-bar{background:var(--ch-card);border-bottom:1px solid var(--ch-rule);}

.ch-bar__in{max-width:70rem;margin:0 auto;padding:.55rem 1.15rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .6rem;}

.ch-mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ch-ink);min-width:0;}

.ch-mark:hover{text-decoration:none;color:var(--ch-ink);}

.ch-mark svg{flex:none;color:var(--ch-action);}

.ch-mark__t{display:block;font-family:var(--ch-serif);font-weight:700;font-size:1.25rem;
  line-height:1.05;letter-spacing:-.014em;}

/* the promise, in miniature, on every page of the site */
.ch-mark__s{display:block;font-family:var(--ch-sans);font-size:.715rem;font-weight:400;
  line-height:1.2;color:var(--ch-ink-3);margin-top:.16rem;max-width:19ch;}

/* narrow screens: cap it so the wordmark keeps the buttons on the same row */
@media (min-width:48rem){.ch-mark__s{max-width:none;}}

.ch-navset{display:flex;align-items:center;gap:.25rem;flex:none;margin-left:auto;}

.ch-navlink{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;min-height:44px;
  border-radius:8px;border:1px solid transparent;text-decoration:none;color:var(--ch-ink);
  font-size:.92rem;font-weight:600;white-space:nowrap;}

.ch-navlink:hover{background:var(--ch-well);color:var(--ch-action);text-decoration:none;}

/* one dropdown component, used by both the language menu and the topic menu */
.ch-drop{position:relative;}

.ch-drop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .7rem;min-height:44px;border:1px solid var(--ch-rule);border-radius:8px;
  background:var(--ch-card);color:var(--ch-ink);font-size:.92rem;font-weight:600;white-space:nowrap;}

.ch-drop>summary::-webkit-details-marker{display:none;}

.ch-drop>summary:hover{border-color:var(--ch-action);color:var(--ch-action);}

.ch-drop__chev{transition:transform .15s ease;}

.ch-drop[open] .ch-drop__chev{transform:rotate(180deg);}

.ch-drop__menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:30;min-width:16rem;
  background:var(--ch-card);border:1px solid var(--ch-rule);border-radius:10px;
  box-shadow:var(--ch-lift);padding:.35rem;margin:0;list-style:none;}

.ch-drop__menu a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem .7rem;border-radius:7px;text-decoration:none;color:var(--ch-ink);font-size:.95rem;}

.ch-drop__menu a:hover{background:var(--ch-well);text-decoration:none;}

.ch-drop__menu a[aria-current="true"]{color:var(--ch-action);font-weight:650;}

.ch-drop__note{color:var(--ch-ink-3);font-size:.78rem;font-weight:400;}

.ch-drop__sep{border-top:1px solid var(--ch-rule);margin:.3rem .5rem;}

.ch-drop__lbl{display:none;}

@media (min-width:26rem){.ch-drop__lbl{display:inline;}}

/* ==========================================================================
   LANGUAGES — a language version of the site is born complete

   Nothing is published in a language until its content for that language is
   written, so there is no "exists but untranslated" state to design for: a
   page is served in a language or it simply is not there. A directory lists
   only what exists in the language being read, and therefore always looks
   whole. The switcher lists only languages this page genuinely has, and
   hreflang matches it exactly.

   Never a URL for a language that has no page, and never a redirect to the
   homepage instead. A link landing on something other than what was asked
   for is the Soft 404 pattern that cost this domain three months of
   impressions. At launch there is one language, so there is no switcher
   at all — see .ch-bar, which is built so nothing looks missing without it.
   ========================================================================== */
/* a short aside in the flow of a page; not language-specific */
.ch-note{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 1.15rem;max-width:48rem;
  padding:.65rem .85rem;border-left:3px solid var(--ch-rule);border-radius:0 8px 8px 0;
  background:var(--ch-well);font-size:.93rem;line-height:1.5;color:var(--ch-ink-2);}

.ch-note svg{flex:none;color:var(--ch-ink-3);margin-top:.15rem;}

.ch-note b{color:var(--ch-ink);font-weight:650;}

/* ==========================================================================
   BREADCRUMB — full trail on a wide screen, one back link on a phone
   ========================================================================== */
.ch-crumbs{background:var(--ch-card);border-bottom:1px solid var(--ch-rule);}

.ch-crumbs__in{max-width:70rem;margin:0 auto;padding:.5rem 1.15rem;font-size:.88rem;
  color:var(--ch-ink-2);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-height:40px;}

.ch-crumbs a{color:var(--ch-ink-2);text-decoration:none;}

.ch-crumbs a:hover{color:var(--ch-action);text-decoration:underline;}

.ch-crumbs__sep{color:var(--ch-ink-3);}

.ch-crumbs__here{color:var(--ch-ink-3);}

.ch-crumbs__back{display:none;align-items:center;gap:.4rem;font-weight:650;min-height:40px;}

.ch-crumbs__back svg{flex:none;}

@media (max-width:46rem){
  .ch-crumbs__full{display:none;}

  .ch-crumbs__back{display:inline-flex;}

}

/* ==========================================================================
   THE TRANSFORM CHIP — the site's one repeated device.
   Every tool is a transformation you can name: what goes in, what comes out.
   Radius grammar, inherited from the tool: paper 2px, controls 8px,
   data labels 4px. The chip is a data label.
   ========================================================================== */
.ch-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.33rem .5rem;
  border:1px solid var(--ch-rule);border-radius:4px;background:var(--ch-card);
  font-family:var(--ch-sans);font-size:.78rem;font-weight:650;line-height:1.1;
  color:var(--ch-ink-2);justify-self:start;}

.ch-chip svg{flex:none;color:var(--ch-ink-3);}

.ch-chip__out{color:var(--ch-action);}

.ch-chip--lg{font-size:.92rem;padding:.42rem .65rem;gap:.5rem;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ch-sans);font-size:1rem;font-weight:650;line-height:1.2;
  padding:.8rem 1.3rem;min-height:50px;border-radius:8px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background-color .14s ease,border-color .14s ease;}

.ch-btn svg{flex:none;}

.ch-btn--primary{background:var(--ch-action);color:var(--ch-action-ink);}

.ch-btn--primary:hover{background:var(--ch-action-hover);color:var(--ch-action-ink);text-decoration:none;}

.ch-btn--quiet{background:var(--ch-card);color:var(--ch-ink);border-color:var(--ch-rule);}

.ch-btn--quiet:hover{border-color:var(--ch-action);color:var(--ch-action);text-decoration:none;}

/* ==========================================================================
   THE PROMISE — the loudest object on the site, and the only loud one.
   Full block on the homepage and the privacy page; the header subtitle
   everywhere else, because on a tool page the tool states it itself.
   ========================================================================== */
.ch-promise{background:var(--ch-inverse);color:var(--ch-inverse-ink);border-radius:10px;padding:1.15rem 1.25rem;
  display:flex;gap:.85rem;align-items:flex-start;}



.ch-promise svg{flex:none;margin-top:.2rem;color:#9db4ff;}

.ch-promise__t{font-family:var(--ch-serif);font-weight:700;line-height:1.16;margin:0 0 .35rem;
  font-size:clamp(1.22rem,1.02rem+1.05vw,1.7rem);}

.ch-promise__s{margin:0;font-size:.96rem;color:#c3cde6;}

.ch-promise__s a{color:#fff;}

.ch-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:1.2rem 0 0;padding:0;}

.ch-checks li{display:flex;gap:.4rem;align-items:flex-start;font-size:.9rem;
  color:var(--ch-ink-2);line-height:1.3;}

.ch-checks svg{flex:none;color:var(--ch-ok);margin-top:.1rem;}

/* ==========================================================================
   THE DIRECTORY — rows grouped by topic, never cards.
   Rows survive 20 entries; a card grid of 20 unrelated tools is a link farm.
   ========================================================================== */
.ch-jump{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 2rem;padding:0;}

.ch-jump a{display:block;padding:.45rem .75rem;border:1px solid var(--ch-rule);border-radius:8px;
  background:var(--ch-card);font-size:.88rem;font-weight:600;color:var(--ch-ink-2);text-decoration:none;}

.ch-jump a:hover{border-color:var(--ch-action);color:var(--ch-action);text-decoration:none;}

/* The mockup had a row of topic links above the first group, which gave it
 * its air. With one tool that row would have a single item and is not
 * shown, so the spacing has to be the group's own — otherwise the first
 * heading collides with whatever is above it. */
.ch-group{margin:2.4rem 0;}
.ch-group + .ch-group{margin-top:2.8rem;}

.ch-group__h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1.2rem;
  flex-wrap:wrap;margin:0 0 .25rem;}

.ch-group__t{font-family:var(--ch-serif);font-weight:700;font-size:1.35rem;line-height:1.2;margin:0;}

.ch-group__l{font-size:.9rem;font-weight:600;}

.ch-group__d{margin:0 0 .7rem;color:var(--ch-ink-2);font-size:.95rem;max-width:62ch;}

.ch-dir{list-style:none;margin:0;padding:0;border-top:1px solid var(--ch-rule);}

.ch-dir__i{border-bottom:1px solid var(--ch-rule);}

.ch-dir__a{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.95rem .5rem;
  text-decoration:none;color:inherit;}

.ch-dir__a:hover{background:var(--ch-well);text-decoration:none;}

.ch-dir__a:hover .ch-dir__t{color:var(--ch-action);}

.ch-dir__b{min-width:0;}

.ch-dir__t{display:block;font-family:var(--ch-serif);font-weight:700;font-size:1.14rem;
  line-height:1.25;color:var(--ch-ink);}

.ch-dir__d{display:block;font-size:.93rem;line-height:1.45;color:var(--ch-ink-2);max-width:60ch;
  margin-top:.12rem;}

@media (min-width:42rem){
  .ch-dir__a{grid-template-columns:10.5rem minmax(0,1fr);gap:.2rem 1.5rem;align-items:baseline;
    padding:1rem .5rem;}

}

/* variants, shown only on a hub page: the sibling searches one engine answers */
.ch-dir__v{display:flex;flex-wrap:wrap;gap:.3rem .9rem;list-style:none;margin:.5rem 0 0;padding:0;}

@media (min-width:42rem){.ch-dir__v{margin-left:12rem;}}

.ch-dir__v a{font-size:.89rem;color:var(--ch-ink-2);text-decoration:none;
  border-bottom:1px solid var(--ch-rule);}

.ch-dir__v a:hover{color:var(--ch-action);border-color:var(--ch-action);}

.ch-dir__vw{padding:0 .5rem .95rem;}

/* the honest state when there is exactly one tool */
.ch-feature{background:var(--ch-card);border:1px solid var(--ch-rule);border-radius:12px;
  box-shadow:var(--ch-lift-sm);padding:1.4rem 1.35rem;}

.ch-feature__t{font-family:var(--ch-serif);font-weight:700;line-height:1.15;margin:.7rem 0 .4rem;
  font-size:clamp(1.5rem,1.2rem+1.4vw,2.05rem);}

.ch-feature__d{color:var(--ch-ink-2);margin:0 0 1.2rem;max-width:56ch;}

.ch-soon{margin:1.6rem 0 0;padding:1.05rem 1.15rem;border:1px dashed var(--ch-rule);border-radius:10px;}

.ch-soon__t{font-weight:650;margin:0 0 .4rem;font-size:.98rem;}

.ch-soon__l{list-style:none;margin:0;padding:0;color:var(--ch-ink-2);font-size:.94rem;}

.ch-soon__l li{padding:.18rem 0;display:flex;gap:.55rem;align-items:baseline;}

/* ==========================================================================
   TOOL PAGE — the shell is thin here on purpose
   ========================================================================== */
.ch-top{padding:1.6rem 0 1.2rem;}

.ch-top__id{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 .75rem;}

.ch-tool{padding:0 0 2rem;}

/* the placeholder standing in for the tool that is designed separately */
.ch-slot{border:2px dashed var(--ch-action);border-radius:10px;background:var(--ch-action-soft);
  color:var(--ch-ink-2);text-align:center;padding:2.4rem 1.2rem;min-height:17rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;}

.ch-slot__t{font-family:var(--ch-sans);font-weight:650;font-size:1.02rem;color:var(--ch-ink);margin:0;}

.ch-slot__d{margin:0;font-size:.9rem;max-width:44ch;}

/* ==========================================================================
   ADVERTISING — two slots per page, never above the tool, never on
   About / Privacy / Contact / 404. Labelled in plain words, not in tiny grey.
   ========================================================================== */
.ch-ad{margin:1.8rem 0;}

.ch-ad__l{display:block;font-size:.74rem;color:var(--ch-ink-3);margin:0 0 .35rem;}

.ch-ad__box{border:1px dashed var(--ch-rule);border-radius:6px;background:var(--ch-well);
  color:var(--ch-ink-3);text-align:center;font-size:.82rem;line-height:1.4;
  padding:1.3rem 1rem;display:flex;flex-direction:column;justify-content:center;min-height:110px;}

.ch-ad--rail .ch-ad__box{min-height:250px;}

/* ==========================================================================
   THE ARTICLE — the reason the page exists in search
   ========================================================================== */
.ch-article{background:var(--ch-card);border-top:1px solid var(--ch-rule);padding:2.4rem 0 3rem;}

.ch-article__grid{display:grid;gap:2.2rem;}

.ch-article__grid>*{min-width:0;}

@media (min-width:62rem){
  .ch-article{padding:3.4rem 0 4rem;}

  .ch-article__grid{grid-template-columns:minmax(0,1fr) 19.5rem;gap:3rem;align-items:start;}

}

.ch-prose{font-family:var(--ch-serif);font-size:1.1rem;line-height:1.72;color:var(--ch-ink);max-width:64ch;}

.ch-prose p{margin:0 0 1.05rem;}

.ch-prose h2{font-family:var(--ch-serif);font-weight:700;line-height:1.18;letter-spacing:-.008em;
  font-size:clamp(1.38rem,1.15rem+1.05vw,1.8rem);margin:2.5rem 0 .75rem;
  padding-top:1.5rem;border-top:1px solid var(--ch-rule);}

.ch-prose>h2:first-child{margin-top:0;padding-top:0;border-top:0;}

.ch-prose h3{font-family:var(--ch-sans);font-weight:650;font-size:1.04rem;line-height:1.35;
  margin:1.7rem 0 .4rem;}

.ch-prose ul,.ch-prose ol{margin:0 0 1.05rem;padding-left:1.3rem;}

.ch-prose li{margin-bottom:.45rem;}

.ch-prose strong{font-weight:700;}

.ch-prose__lead{font-size:1.2rem;color:var(--ch-ink-2);}

/* the one claim worth setting apart */
.ch-pull{background:var(--ch-well);border:1px solid var(--ch-rule);border-left:3px solid var(--ch-action);
  border-radius:0 8px 8px 0;padding:1.05rem 1.2rem;margin:1.6rem 0;
  font-family:var(--ch-serif);font-size:1.1rem;line-height:1.6;color:var(--ch-ink);}

/* what makes a variant page not a duplicate: say it out loud, at the top */
/* Neutral, not warning: this line says what the page is about, and red
     made a scope note read as something having gone wrong. */
  .ch-scopeline{border-left:3px solid var(--ch-rule);background:var(--ch-well);
  border-radius:0 8px 8px 0;padding:.9rem 1.1rem;margin:0 0 1.5rem;
  font-family:var(--ch-sans);font-size:.97rem;line-height:1.55;color:var(--ch-ink);}

.ch-tablewrap{overflow-x:auto;max-width:100%;margin:1.4rem 0 1.7rem;}

.ch-table{width:100%;border-collapse:collapse;font-family:var(--ch-sans);font-size:.94rem;
  line-height:1.45;min-width:20rem;}

.ch-table th,.ch-table td{text-align:left;vertical-align:top;padding:.62rem 1rem .62rem 0;
  border-bottom:1px solid var(--ch-rule);}

.ch-table thead th{font-size:.82rem;font-weight:650;color:var(--ch-ink-3);
  border-bottom:2px solid var(--ch-ink-3);padding-bottom:.45rem;}

.ch-table tbody th{font-weight:650;color:var(--ch-ink);}

.ch-table caption{caption-side:bottom;text-align:left;font-size:.84rem;color:var(--ch-ink-3);
  padding-top:.6rem;}

.ch-yes{color:var(--ch-ok);font-weight:650;}

.ch-no{color:var(--ch-warn);font-weight:650;}

.ch-toc{font-family:var(--ch-sans);}

@media (min-width:62rem){.ch-toc{position:sticky;top:1.2rem;}}

.ch-toc__t{font-size:.85rem;font-weight:650;color:var(--ch-ink-3);margin:0 0 .55rem;}

.ch-toc__l{list-style:none;margin:0 0 1.6rem;padding:0;border-left:1px solid var(--ch-rule);}

.ch-toc__l a{display:block;padding:.4rem .85rem;font-size:.92rem;line-height:1.35;
  text-decoration:none;color:var(--ch-ink-2);margin-left:-1px;border-left:2px solid transparent;}

.ch-toc__l a:hover{color:var(--ch-action);border-left-color:var(--ch-action);}

.ch-qa{margin-top:2.5rem;border-top:1px solid var(--ch-rule);max-width:64ch;}

.ch-qa details{border-bottom:1px solid var(--ch-rule);}

.ch-qa summary{list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;padding:.95rem 0;min-height:52px;
  font-family:var(--ch-sans);font-weight:650;font-size:1rem;color:var(--ch-ink);}

.ch-qa summary::-webkit-details-marker{display:none;}

.ch-qa summary:hover{color:var(--ch-action);}

.ch-qa summary svg{flex:none;color:var(--ch-ink-3);transition:transform .15s ease;}

.ch-qa details[open] summary svg{transform:rotate(180deg);}

.ch-qa__a{padding:0 0 1.1rem;margin:0;max-width:60ch;color:var(--ch-ink-2);
  font-family:var(--ch-serif);font-size:1.05rem;line-height:1.7;}

/* ==========================================================================
   CROSS-LINKING — two mechanisms, both deliberately small
   1. .ch-sib  the other searches ONE engine answers (a tab-like set)
   2. .ch-next at most three tools, chosen by the situation the visitor is in
   ========================================================================== */
.ch-sib{border:1px solid var(--ch-rule);border-radius:10px;background:var(--ch-card);
  padding:.85rem 1rem;margin:0 0 1.5rem;}

.ch-sib__t{font-size:.87rem;color:var(--ch-ink-3);margin:0 0 .55rem;}

.ch-sib__l{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0;}

.ch-sib__l a{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:8px;
  border:1px solid var(--ch-rule);background:var(--ch-card);color:var(--ch-ink);
  font-size:.9rem;font-weight:600;text-decoration:none;}

.ch-sib__l a:hover{border-color:var(--ch-action);color:var(--ch-action);text-decoration:none;}

.ch-sib__l a[aria-current="page"]{background:var(--ch-inverse);color:var(--ch-inverse-ink);border-color:transparent;}

/* The current page in the sibling strip reads as a filled chip. In the dark
 * appearance the inverse surface is no longer distinct from the page, so it
 * takes the accent instead. Written as a media query rather than hung off a
 * .ch-scope--dark class: that class exists only in the mockup, where two
 * appearances sit side by side, and a rule scoped to it never fires here. */
@media (prefers-color-scheme: dark) {
  .ch-sib__l a[aria-current="page"] { background: var(--ch-action); color: var(--ch-action-ink); }
}

.ch-next{background:var(--ch-well);border-top:1px solid var(--ch-rule);padding:2rem 0 2.2rem;}

.ch-next__t{font-family:var(--ch-serif);font-weight:700;font-size:1.3rem;line-height:1.2;margin:0 0 .25rem;}

.ch-next__d{margin:0 0 .9rem;color:var(--ch-ink-2);font-size:.95rem;max-width:60ch;}

/* ==========================================================================
   FOOTER — the one element on every page
   ========================================================================== */
.ch-foot{background:var(--ch-inverse-deep);color:var(--ch-inverse-ink-2);padding:2.4rem 0 2.8rem;font-size:.92rem;}

.ch-foot{border-top:1px solid var(--ch-rule);}

.ch-foot a{color:#fff;text-decoration:none;}

.ch-foot a:hover{text-decoration:underline;}

.ch-foot__grid{display:grid;gap:1.7rem;}

@media (min-width:48rem){
  .ch-foot__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:2.6rem;}

}

.ch-foot__promise{font-family:var(--ch-serif);font-size:1.16rem;line-height:1.45;color:#fff;
  margin:0 0 .5rem;max-width:30ch;}

.ch-foot__sub{margin:0;color:#9aa8c4;font-size:.9rem;max-width:44ch;}

.ch-foot__h{font-size:.8rem;color:#8c9ab7;margin:0 0 .55rem;}

.ch-foot__l{list-style:none;margin:0;padding:0;}

.ch-foot__l li{margin-bottom:.42rem;}

.ch-foot__langs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;}

.ch-foot__langs a{display:block;padding:.4rem .7rem;border:1px solid rgba(255,255,255,.2);
  border-radius:7px;font-size:.87rem;}

.ch-foot__langs a:hover{border-color:#fff;text-decoration:none;}

.ch-foot__langs a[aria-current="true"]{background:rgba(255,255,255,.12);border-color:transparent;}

.ch-foot__fine{margin:1.7rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  color:#8c9ab7;font-size:.85rem;max-width:66ch;}

/* ==========================================================================
   PRIVACY — on a site selling privacy this page is a selling page
   ========================================================================== */
.ch-yesno{display:grid;gap:1rem;margin:1.7rem 0;}

@media (min-width:44rem){.ch-yesno{grid-template-columns:1fr 1fr;gap:1.2rem;}}

.ch-yesno__c{border:1px solid var(--ch-rule);border-radius:10px;background:var(--ch-card);
  padding:1.05rem 1.15rem;font-family:var(--ch-sans);}

.ch-yesno__c--keep{border-top:3px solid var(--ch-ok);}

.ch-yesno__c--see{border-top:3px solid var(--ch-ink-3);}

.ch-yesno__t{display:flex;align-items:center;gap:.45rem;font-weight:650;font-size:1rem;margin:0 0 .6rem;}

.ch-yesno__c--keep .ch-yesno__t svg{color:var(--ch-ok);}

.ch-yesno__c--see .ch-yesno__t svg{color:var(--ch-ink-3);}

.ch-yesno__l{list-style:none;margin:0;padding:0;font-size:.94rem;color:var(--ch-ink-2);line-height:1.5;}

.ch-yesno__l li{padding:.3rem 0;border-top:1px solid var(--ch-rule);}

.ch-yesno__l li:first-child{border-top:0;padding-top:0;}

/* a real three-step sequence, so numbers are honest here */
.ch-test{background:var(--ch-inverse);color:var(--ch-inverse-ink);border-radius:10px;padding:1.35rem 1.4rem;margin:1.8rem 0;}



.ch-test__t{font-family:var(--ch-serif);font-weight:700;font-size:1.32rem;line-height:1.2;margin:0 0 .35rem;}

.ch-test__s{margin:0 0 1rem;color:#c3cde6;font-size:.96rem;max-width:52ch;}

.ch-test__l{counter-reset:ct;list-style:none;margin:0;padding:0;font-family:var(--ch-sans);}

.ch-test__l li{counter-increment:ct;position:relative;padding:.45rem 0 .45rem 2.5rem;
  color:#dfe6f5;font-size:.96rem;line-height:1.5;}

.ch-test__l li::before{content:counter(ct);position:absolute;left:0;top:.5rem;
  width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:650;color:#9db4ff;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ch-field{margin:0 0 1.15rem;max-width:34rem;}

.ch-field__l{display:block;font-size:.93rem;font-weight:650;margin:0 0 .32rem;}

.ch-field__h{display:block;font-size:.85rem;color:var(--ch-ink-3);margin:.3rem 0 0;}

.ch-input{display:block;width:100%;font-family:var(--ch-sans);font-size:1rem;line-height:1.4;
  padding:.7rem .8rem;min-height:48px;border:1px solid var(--ch-rule);border-radius:8px;
  background:var(--ch-card);color:var(--ch-ink);}

.ch-input--area{min-height:9.5rem;resize:vertical;}

/* ==========================================================================
   404
   ========================================================================== */
.ch-gone{padding:2.6rem 0 1.4rem;}

.ch-gone__url{display:inline-block;font-family:var(--ch-sans);font-size:.88rem;
  background:var(--ch-well);border:1px solid var(--ch-rule);border-radius:4px;
  padding:.25rem .5rem;color:var(--ch-ink-2);margin:0 0 1.1rem;overflow-wrap:anywhere;}

/* ==========================================================================
   SMALL SCREENS, TOUCH, REDUCED MOTION
   ========================================================================== */
@media (max-width:30rem){
  .ch-mark__t{font-size:1.1rem;}

  .ch-mark__s{font-size:.68rem;}

  .ch-bar__in{padding:.5rem .9rem;gap:.35rem;}

  .ch-navlink{padding:.5rem .45rem;}

  .ch-drop>summary{padding:.5rem .55rem;}

  .ch-wrap{padding:0 .9rem;}

}

@media (prefers-reduced-motion:reduce){
  .ch-scope *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}

}

/* ==========================================================================
   MOCKUP CHROME — delete everything below this line when shipping
   ========================================================================== */
*{box-sizing:border-box;}

body{margin:0;background:#f5f6f8;color:#15233d;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:16px;line-height:1.55;}

@media (prefers-color-scheme:dark){
  body{background:#0b0e14;color:#dce3ef;}

  .mk-index a{background:#1a2230;color:#cfd8e8;border-color:#2b344a;}

  .mk-foot h2{color:#dce3ef;}

  .mk-foot code{background:#1f2836;}

  }

.mk-top h1{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:1.65rem;margin:0 0 .3rem;}

.mk-top p{margin:0 0 1rem;max-width:64ch;color:#5b6a84;}

.mk-index a{display:block;text-decoration:none;font-size:.8rem;padding:.3rem .6rem;border-radius:99px;
  border:1px solid #dbe0e9;background:#f7f8fb;color:#3f4d68;}

.mk-index a:hover{border-color:#1f49d6;color:#1f49d6;}

.mk-note b{color:#15233d;}

@media (prefers-color-scheme:dark){.mk-note b{color:#dce3ef;}}

.mk-foot h2{font-size:1.05rem;color:#15233d;margin:1.6rem 0 .4rem;}

.mk-foot ul{margin:0;padding-left:1.1rem;}

.mk-foot li{margin-bottom:.35rem;}

.mk-foot code{background:#eef0f5;padding:.08em .35em;border-radius:3px;font-size:.85em;}

@media (min-width:66rem){.mk-cols{grid-template-columns:1fr 1fr 1fr;gap:1.2rem;}}

@media (prefers-color-scheme:dark){.mk-cap{color:#9fabc0;}}

/* force the phone layout inside the phone frame */
.mk-phone .ch-h1{font-size:1.75rem;}

.mk-phone .ch-article__grid{grid-template-columns:1fr;}



/* A state is hidden by the `hidden` attribute, but any later `display:` rule
 * beats the browser's default for it — which showed two states stacked on top
 * of each other instead of one. This is the one place !important earns its
 * keep: hidden must mean hidden regardless of what a component declares. */
[hidden] { display: none !important; }

/* The ad slot has to hold its height before anything fills it, or the article
 * jumps down the moment the advert lands and the visitor loses their line.
 * The mockup put this on an inner box that the templates do not render. */
.ch-ad { min-height: 250px; display: flex; align-items: center; justify-content: center; }
.ch-ad--rail { min-height: 600px; }
/* The rail is a sidebar on a desk and stacks under the article on a phone,
 * where 600px of reserved space is a whole screen of nothing. Reserve the
 * height only where the slot is actually beside something. */
@media (max-width: 60rem) { .ch-ad--rail { min-height: 280px; } }

/* The page itself. The mockup had no single body to style — each section was a
 * separate demo — so this is the one rule the design file could not contain. */
.ch-page { margin: 0; background: var(--ch-desk); color: var(--ch-ink);
  font-family: var(--ch-sans); -webkit-text-size-adjust: 100%; }

/* The sibling strip sits between the tool and the article, and in the mockup
 * each of those was a separate demo section with its own padding. On a real
 * page they are neighbours and need the gap declared here. */
.ch-sib { margin: 2rem 0; }