/* SMKlog site pages (about, pricing, tracking, the legal pages and the other
   pages in the site root), on top of guides.css since 28.09.2026. Header,
   footer, tokens, type and the article column come from guides.css; this file
   carries only the components these pages were built from (plan cards, the
   tracking form and its result, legal text, accuracy cards, the extension
   page) in the shared tokens, so both themes read. */

/* the pages' own <style> blocks were written against the old stylesheet's
   names; they resolve to the shared tokens */
:root{--navy:var(--fg);--ink:var(--fg);--blue:var(--link);--surface:var(--card);--soft-blue:var(--tint);--radius:8px;
  --shadow:0 18px 40px rgba(9,27,69,.10);--shadow-soft:0 8px 24px rgba(9,27,69,.06)}
:root[data-theme=dark]{--shadow:0 18px 40px rgba(0,0,0,.35);--shadow-soft:0 8px 24px rgba(0,0,0,.25)}

/* ---- intro: a side column for the founder card or a product screenshot */
.page-intro.has-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:48px;align-items:center}
.intro-main{min-width:0}
.intro-aside{min-width:0;display:flex;justify-content:flex-end}
.intro-aside>*,.intro-aside img{min-width:0;max-width:100%}
.page-intro .under-cta{margin:14px 0 0;color:var(--muted);font-size:14px;font-weight:600}
.page-intro .lp-example-lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:760px}
.page-intro .lp-example-note{color:var(--muted);max-width:760px}
.page-intro .search-box{box-shadow:none;margin-top:6px}
.hero4-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;color:var(--muted);font-size:14px;font-weight:600}
.hero4-trust span{display:inline-flex;align-items:center;gap:8px}
.hero4-trust svg{fill:var(--good)}

/* ---- wide pages keep the whole container for their card grids */
.article-layout.no-rail.wide{grid-template-columns:minmax(0,1fr)}
.wide .article-body .content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-body .page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:40px;align-items:start}
.article-body .two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.article-body .stacked{margin-top:20px}
.article-body [id]{scroll-margin-top:20px}

/* long rows in the full container read badly: two columns of questions, and a
   measure on free-standing paragraphs (:where keeps any component rule ahead) */
.wide .article-body .lp-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
:where(.wide .article-body) p{max-width:820px}
/* grids written for the old full width, fitted to the article column */
.article-body .about-facts,.article-body .lane4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- cards and lists */
.article-body .page-kicker{display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--link);margin:0 0 10px}
.article-body .page-card h2{font-size:23px;margin:0 0 10px}
.icon-chip{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--link);background:var(--tint);border-radius:50%;font-size:20px;margin-bottom:12px}
.article-body .plain-list,.article-body .numbered-list{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none}
.article-body .plain-list li,.article-body .numbered-list li{margin:0;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.article-body .plain-list strong,.article-body .numbered-list strong{display:block;color:var(--fg);margin-bottom:4px}
.section-head{max-width:780px;margin-bottom:24px}
.section-head p{font-size:17px}
.btn.secondary{background:var(--link);color:var(--bg);border-color:transparent}
.btn.secondary:hover{background:var(--fg);color:var(--bg);text-decoration:none}
.btn.block,.block{width:100%}
/* whole-card links: the card lifts, its text is not underlined */
a.search-hit:hover,a.search-starter:hover,a.mcp-listing:hover{text-decoration:none}

/* ---- tracking: the form and the result app.js writes into it */
.article-body .form-card{padding:24px}
.smk-form{display:grid;gap:12px}
.smk-form input,.smk-form select,.smk-form textarea{width:100%;min-height:48px;padding:12px 14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px}
.smk-form input:focus,.smk-form select:focus,.smk-form textarea:focus{border-color:var(--link)}
.tracking-result{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.tracking-result.ok{border-color:var(--good);background:var(--good-bg)}
.tracking-result.err{border-color:var(--bad-line);background:var(--bad-bg)}
.tracking-result p{margin:0}
.tracking-result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.tracking-result-head span{color:var(--link);font-size:13px;font-weight:700;text-transform:uppercase}
.tracking-result-head strong{color:var(--fg);font-size:15px}
.tracking-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.tracking-status-grid div{padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.tracking-status-grid span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}
.tracking-status-grid b{display:block;margin-top:4px;color:var(--fg);font-size:14px}
.article-body .tracking-timeline{list-style:none;margin:14px 0 0;padding:2px 0 2px 6px;display:grid}
.tracking-timeline .tt-row{position:relative;display:flex;gap:12px;margin:0;padding:0 0 16px 18px}
.tracking-timeline .tt-row::before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.tracking-timeline .tt-row:last-child::before{display:none}
.tracking-timeline .tt-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--bg)}
.tracking-timeline .tt-done .tt-dot{background:var(--good)}
.tracking-timeline .tt-move .tt-dot{background:var(--link)}
.tracking-timeline .tt-alert .tt-dot{background:var(--bad)}
.tracking-timeline .tt-body{display:grid;gap:2px;min-width:0}
.tracking-timeline .tt-body b{color:var(--fg);font-size:13.5px}
.tracking-timeline .tt-row:first-child .tt-body b{font-size:15px}
.tracking-timeline .tt-done:first-child .tt-body b{color:var(--good)}
.tracking-timeline .tt-alert .tt-body b{color:var(--bad)}
.tracking-timeline .tt-body span{color:var(--muted);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.tracking-timeline .tt-body small{color:var(--muted);font-size:11.5px}
.tracking-timeline-note{margin-top:12px;padding:12px;border-left:3px solid var(--link);color:var(--muted);background:var(--bg);border-radius:0 7px 7px 0}

/* ---- legal text: one long document, read in the column, not a card */
.article-body .legal-wrap{max-width:none;margin:0}
.article-body .legal-card{border:0;border-radius:0;background:none;padding:0;box-shadow:none}
.article-body .legal-card h3{font-family:"Libre Baskerville",Georgia,serif;font-size:21px;letter-spacing:-.02em;line-height:1.3;margin:34px 0 10px}
.article-body .legal-card>h3:first-child{margin-top:0}
.article-body .legal-card ul{padding-left:22px}
.article-body .legal-card p,.article-body .legal-card li{font-size:inherit;line-height:inherit}
.article-body .legal-card p{margin:0 0 14px}

/* ---- estimate accuracy: a coloured edge per confidence level */
.article-body .accuracy-card{border-left:4px solid var(--line)}
.accuracy-card h3{display:flex;align-items:center;gap:9px}
.accuracy-dot{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 auto}
.article-body .accuracy-green{border-left-color:var(--good)}
.article-body .accuracy-amber{border-left-color:#d99100}
.article-body .accuracy-red{border-left-color:var(--bad)}
.dot-green{background:#2fbf71}.dot-amber{background:#f2a900}.dot-red{background:#e5484d}

@media(max-width:900px){
  .page-intro.has-aside{display:block}
  .intro-aside{justify-content:flex-start;margin-top:30px}
  .wide .article-body .content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-body .page-hero-grid,.article-body .two-column,.wide .article-body .lp-faq-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wide .article-body .content-grid{grid-template-columns:1fr}
  .page-intro .lp-example-lead{font-size:16px}
  .tracking-status-grid,.article-body .about-facts,.article-body .lane4-grid{grid-template-columns:1fr}
}