/* appotto — shared design system for solution & article pages.
   Tokens copied verbatim from index.html so new pages are pixel-consistent.
   Logical properties throughout => works in RTL (he) and LTR (en/fr). */

:root{
  --paper:#F2F0E9; --paper-2:#E9E6DB; --card:#FBFAF5;
  --ink:#14231D; --ink-soft:#4A5A52;
  --pine:#14523F; --pine-deep:#0D362A;
  --brass:#A87F3D; --brass-btn:#8F6A2C;--brass-ink:#7A5A24;
  --line:rgba(20,35,29,.16); --line-dark:rgba(242,240,233,.22);
  --maxw:1160px;
  --serif:"Frank Ruhl Libre","David Libre",Georgia,serif;
  --sans:"Heebo","Segoe UI",system-ui,Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--sans);font-size:17px;line-height:1.75;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
::selection{background:var(--pine);color:var(--paper)}
a{color:var(--pine)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px}
.skip{position:absolute;top:-60px;inset-inline-start:16px;z-index:100;background:var(--pine);color:var(--paper);padding:10px 18px;border-radius:0 0 8px 8px;text-decoration:none;font-weight:700;transition:top .2s}
.skip:focus{top:0}

/* header — matches the homepage exactly */
header.site{position:sticky;top:0;z-index:50;background:rgba(242,240,233,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:27px;color:var(--ink);text-decoration:none;direction:ltr;letter-spacing:.01em;line-height:1;display:inline-block}
.wordmark i{font-style:normal;color:var(--brass)}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{color:var(--ink-soft);text-decoration:none;font-size:15.5px;font-weight:500}
nav.main a:hover{color:var(--pine)}
.btn{display:inline-block;background:var(--pine);color:var(--paper);text-decoration:none;font-weight:700;font-size:16px;padding:12px 26px;border:1px solid var(--pine-deep);border-radius:8px;box-shadow:0 2px 0 var(--pine-deep);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--pine-deep)}
.btn:active{transform:translateY(0);box-shadow:0 1px 0 var(--pine-deep)}
.btn.brass{background:var(--brass-btn);border-color:var(--brass-ink);box-shadow:0 2px 0 var(--brass-ink);color:#fff}
.btn.brass:hover{box-shadow:0 4px 0 var(--brass-ink)}
/* colour must be restated here: `nav.main a` (0,1,2) outranks `.btn` (0,1,0)
   and would otherwise paint the button's label grey-on-green (1.25:1). */
nav.main .btn{padding:10px 22px;color:var(--paper)}
nav.main .btn:hover{color:var(--paper)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;color:var(--ink)}
.menu-btn svg{display:block}
.langs{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em}
.langs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.langs a:hover{color:var(--pine)}
.langs a[aria-current]{color:var(--brass-ink);border-bottom-color:var(--brass)}
.langs span{color:var(--ink-soft);opacity:.45}
@media(max-width:840px){
  nav.main{display:none;position:absolute;top:70px;inset-inline:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:22px 24px;gap:20px;align-items:flex-start}
  nav.main.open{display:flex}
  nav.main a{font-size:18px}
  .menu-btn{display:block}
}

/* shared type */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);display:flex;align-items:center;gap:14px;font-weight:500}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}
h1,h2,h3{font-family:var(--serif);color:var(--ink);text-wrap:balance;line-height:1.12}
section{padding:clamp(52px,7vw,86px) 0}

/* breadcrumb */
.crumbs{font-size:13.5px;color:var(--ink-soft);padding:18px 0 0}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--pine);text-decoration:underline}
.crumbs span{opacity:.5;margin:0 8px}

/* page hero */
.phero{padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,44px);border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(32px,5.2vw,56px);font-weight:900;margin:18px 0 18px}
.phero h1 em{font-style:normal;color:var(--pine);position:relative;white-space:nowrap}
.phero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.04em;height:.09em;background:var(--brass);opacity:.55}
.phero .lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch}
.phero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.more{font-weight:500;color:var(--pine);text-decoration:none;font-size:16px;border-bottom:1px solid var(--brass);padding-bottom:2px}
.more:hover{color:var(--brass-ink)}

/* the direct-answer block: what AI engines quote */
.answer{background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--brass);border-radius:10px;padding:22px 26px;margin:0 0 34px;font-size:17.5px;line-height:1.7}
.answer strong{color:var(--pine)}

/* prose */
.prose{max-width:74ch}
.prose h2{font-size:clamp(24px,3.2vw,32px);font-weight:700;margin:44px 0 14px;padding-top:28px;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.prose h3{font-size:21px;font-weight:700;margin:28px 0 8px}
.prose p{margin-bottom:16px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:0;list-style:none}
.prose li{padding-inline-start:26px;position:relative;margin-bottom:9px}
.prose li::before{content:"—";position:absolute;inset-inline-start:0;color:var(--brass);font-weight:700}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n) ".";font-family:var(--mono);font-size:14px}
.prose strong{color:var(--pine)}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:30px 0}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.fcard h3{font-size:19px;margin-bottom:7px}
.fcard p{font-size:15px;color:var(--ink-soft);line-height:1.65;margin:0}

/* proof badges */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.badge{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--pine);border:1px solid var(--pine);border-radius:999px;padding:5px 14px;background:rgba(20,82,63,.05)}
.badge.gold{color:var(--brass-ink);border-color:var(--brass);background:rgba(168,127,61,.07)}

/* FAQ — the GEO workhorse */
.faq{border-top:1px solid var(--line);margin-top:46px;padding-top:8px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-family:var(--serif);font-weight:700;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brass);font-size:22px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--ink-soft)}

/* closing CTA band */
.cta-band{background:var(--pine-deep);color:var(--paper);text-align:center}
.cta-band h2{color:var(--paper);font-size:clamp(26px,4vw,40px);font-weight:900;margin-bottom:14px}
.cta-band p{color:rgba(242,240,233,.75);max-width:56ch;margin:0 auto 26px}

/* ── articles ─────────────────────────────── */
/* byline: author + dates. Author is the ORGANISATION, never a personal name. */
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:16px}
.byline .sep{opacity:.4}
.byline .author{color:var(--brass-ink)}

.art-fig{margin:30px 0}
.art-fig img{border-radius:10px;border:1px solid var(--line);width:100%}
.art-fig figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:9px;font-style:italic}

/* comparison tables — AI engines quote these disproportionately */
.prose .tbl{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
.prose th,.prose td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line);
  border-inline-start:1px solid var(--line);vertical-align:top}
.prose th:first-child,.prose td:first-child{border-inline-start:none}
.prose thead th{background:var(--pine);color:var(--paper);font-family:var(--serif);
  font-weight:700;font-size:16px;border-bottom:none}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody th{font-weight:700;color:var(--pine);background:rgba(20,82,63,.04)}

/* callout inside an article */
.callout{background:var(--paper-2);border:1px solid var(--line);border-inline-start:3px solid var(--pine);
  border-radius:8px;padding:18px 22px;margin:24px 0;font-size:16px}
.callout strong{color:var(--pine)}

/* sources — external citations build trust, they do not leak rank */
.sources{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)}
.sources h2{font-family:var(--serif);font-size:19px;margin-bottom:10px;border:none;padding:0;color:var(--ink)}
.sources ol{padding-inline-start:20px}
.sources li{margin-bottom:6px}

/* article index listing */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.art-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 24px 26px;
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.art-card:hover{transform:translateY(-4px);border-color:var(--pine);box-shadow:0 18px 34px -22px rgba(20,35,29,.4)}
.art-card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink)}
.art-card h2{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.25;border:none;padding:0;margin:0}
.art-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0}
.art-card .date{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 38px;font-size:14.5px;color:var(--ink-soft)}
.foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.foot-brand p{max-width:34ch;margin-top:10px}
footer nav{display:flex;flex-direction:column;gap:9px}
footer nav strong{color:var(--ink);font-size:14px;margin-bottom:2px}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--pine);text-decoration:underline}
.foot-bottom{max-width:var(--maxw);margin:34px auto 0;padding:20px 24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}