/* KAGO Guides - inherits the Hallmark design system. Local fonts, no CDNs. */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{
  --ink:#14212E;--ink-2:#24333F;--ochre:#C6892F;--ochre-lt:#E0A94B;--clay:#B24A2E;--clay-dk:#963B22;
  --cream:#F4EEE1;--cream-2:#EDE4D2;--off:#FBF8F1;--charcoal:#2A2622;--muted:#6A6357;--rule:#D9CDB6;--on-ink:#F4EEE1;
  --font-display:'Archivo','Arial Narrow',system-ui,sans-serif;--font-body:'Source Sans 3',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);--dur-short:240ms;--dur-long:640ms;--measure:60ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--charcoal);font-family:var(--font-body);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
.wrap--article{max-width:900px}
.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.skip{position:fixed;left:1rem;top:-120px;background:var(--ink);color:var(--on-ink);padding:.75rem 1rem;z-index:99;border-radius:2px}.skip:focus{top:1rem}
.mark{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.mark img{height:30px;width:auto;display:block}
.foot-brand .mark img{height:36px;margin-bottom:.4rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--clay);color:#fff;font-family:var(--font-body);font-weight:700;font-size:.95rem;padding:.8rem 1.25rem;border-radius:2px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--clay-dk);transform:translateY(-2px)}
.btn--ochre{background:var(--ochre);color:var(--ink)}.btn--ochre:hover{background:var(--ochre-lt)}
.btn--ghost{background:transparent;border:1.5px solid currentColor}
.btn svg{width:18px;height:18px;fill:currentColor}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--cream) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;width:100%}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.1rem);align-items:center}
.nav-links a{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);position:relative}
.nav-links a:not(.btn):after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--ochre);transition:width var(--dur-short) var(--ease-out)}
.nav-links a:not(.btn):hover:after,.nav-links a[aria-current]:after{width:100%}
.nav-links a.btn{color:#fff}
.nav-toggle{display:none;background:var(--ink);color:var(--on-ink);border:0;border-radius:2px;padding:.55rem .7rem;font-weight:700;cursor:pointer}

/* content hero */
.chero{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;padding:clamp(2.6rem,6vw,4.6rem) 0}
.chero:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 92% 0%,color-mix(in srgb,var(--ochre) 20%,transparent),transparent 55%),radial-gradient(90% 80% at -10% 110%,color-mix(in srgb,var(--clay) 22%,transparent),transparent 55%);pointer-events:none}
.chero .wrap{position:relative;z-index:2}
.chero .eyebrow{color:var(--ochre-lt);margin-bottom:1rem}
.chero h1{color:var(--on-ink);font-weight:900;font-size:clamp(2.3rem,6vw,4.4rem);letter-spacing:-.04em;line-height:.94;max-width:20ch}
.chero h1 .dot{color:var(--ochre)}
.chero-sub{max-width:64ch;font-size:clamp(1.05rem,1.8vw,1.3rem);color:color-mix(in srgb,var(--on-ink) 82%,transparent);margin:1.3rem 0 0;line-height:1.45}
.crumb{font-size:.82rem;color:color-mix(in srgb,var(--on-ink) 62%,transparent);margin-bottom:1.2rem}
.crumb a{color:var(--ochre-lt);text-decoration:none;font-weight:600}.crumb a:hover{text-decoration:underline}
.meta{margin-top:1.4rem;font-size:.82rem;letter-spacing:.04em;color:color-mix(in srgb,var(--on-ink) 60%,transparent)}

/* sections */
section{padding:clamp(2.8rem,6vw,4.5rem) 0}
.tint{background:var(--cream-2)}
.lead-rule{width:52px;height:3px;background:var(--ochre);margin-bottom:1.4rem}

/* prose */
.prose{max-width:74ch}
.prose>.eyebrow{display:block;margin-bottom:.6rem}
.prose h2{font-size:clamp(1.65rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.025em;margin:2.6rem 0 1rem;padding-top:.4rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.18rem,2.4vw,1.5rem);font-weight:700;margin:1.8rem 0 .5rem;color:var(--ink-2)}
.prose p{color:var(--charcoal);margin:.9rem 0}
.prose a{color:var(--clay);font-weight:700;text-underline-offset:3px}
/* Blog hero shot. Sits between the dark chero band and the prose, full article width, so the
   picture and the headline read as one unit. radius 2px matches .btn and .cta-inline. */
.hero-shot{margin:0 0 2.2rem;line-height:0}
.hero-shot img{width:100%;height:auto;display:block;border-radius:2px}
.hero-shot figcaption{line-height:1.5;font-size:.82rem;color:var(--muted);margin-top:.5rem;font-style:italic}
.prose img{max-width:100%;height:auto;border-radius:2px}

/* .prose a is for inline links only. A button inside prose must keep its own label
   colour, otherwise .prose a wins on specificity and the text goes clay-on-clay
   (invisible) or clay-on-ochre (fails WCAG contrast). */
.prose a.btn{color:#fff}
.prose a.btn--ochre{color:var(--ink)}
.prose a.btn--ink-ghost{color:var(--on-ink)}
.prose a:hover{color:var(--clay-dk)}
.prose ul,.prose ol{margin:1rem 0 1rem 1.3rem}
.prose li{margin:.5rem 0}
.prose li::marker{color:var(--ochre)}
.prose strong{color:var(--ink);font-weight:700}
.lede{font-size:clamp(1.12rem,2vw,1.28rem);color:var(--ink-2);line-height:1.5}
.note{background:var(--off);border:1px solid var(--rule);border-left:3px solid var(--ochre);border-radius:2px;padding:1rem 1.2rem;margin:1.5rem 0;font-size:.98rem;color:var(--muted)}
.note strong{color:var(--ink)}

/* Quiet, in-flow article capture. It uses the same form language as KAGO landing pages. */
.article-lead{background:var(--off);border:1px solid var(--rule);border-top:3px solid var(--ochre);border-radius:2px;margin:2.6rem 0;padding:clamp(1.25rem,3vw,1.8rem)}
.article-lead__eyebrow{color:var(--clay);font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;margin:0 0 .65rem;text-transform:uppercase}
.prose .article-lead h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .55rem;padding:0}
.article-lead__intro{color:var(--muted);font-size:1rem;line-height:1.5;margin:0 0 1.15rem;max-width:58ch}
.article-lead .kago-lead__form{margin:0}
.article-lead .kago-lead__fields{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.article-lead .kago-lead__field{display:grid;gap:.35rem}
.article-lead .kago-lead__field--wide{grid-column:1/-1}
.article-lead .kago-lead__field label{color:var(--ink);font-family:var(--font-display);font-size:.82rem;font-weight:700;line-height:1.3}
.article-lead .kago-lead__field input{appearance:none;background:#fff;border:1px solid #9ca3a8;border-radius:2px;color:var(--ink);font:inherit;min-height:46px;padding:.7rem .75rem;width:100%}
.article-lead .kago-lead__field input:focus-visible,.article-lead .kago-lead__submit:focus-visible{outline:3px solid color-mix(in srgb,var(--ochre) 48%,transparent);outline-offset:2px}
.article-lead .kago-lead__consent{align-items:flex-start;color:var(--ink);display:flex;font-size:.82rem;font-weight:500;gap:.6rem;line-height:1.45}
.article-lead .kago-lead__consent input{accent-color:var(--clay);appearance:auto;flex:0 0 auto;height:18px;margin-top:.1rem;width:18px}
.article-lead .kago-lead__submit{background:var(--clay);border:0;border-radius:2px;color:#fff;cursor:pointer;font-family:var(--font-display);font-size:.88rem;font-weight:700;min-height:48px;padding:.85rem 1.2rem}
.article-lead .kago-lead__submit:hover{background:var(--clay-dk)}
.article-lead .kago-lead__submit:disabled{cursor:wait;opacity:.68}
.article-lead .kago-lead__status{color:var(--muted);font-size:.9rem;line-height:1.45;margin:.7rem 0 0;min-height:1.4em}
.article-lead .kago-lead__status[data-state="success"]{color:#1c6b45;font-weight:700}
.article-lead .kago-lead__status[data-state="error"]{color:#8d2d1e}
.article-lead .kago-lead__status a{color:var(--clay);font-weight:700}
.article-lead .kago-lead__trap{left:-10000px!important;position:absolute!important;top:auto!important}


/* KAGO service advert. One per article, dealt from a rotating set of 20 by factory/ads.py.
   Deliberately quieter than the lead form: this one asks for money, so it states the offer
   plainly and gets out of the way. No animation, no colour shouting, no interrupt. */
.article-ad{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--clay);border-radius:2px;margin:2.6rem 0;padding:clamp(1.15rem,2.6vw,1.5rem)}
.article-ad__eyebrow{color:var(--muted);font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.16em;margin:0 0 .5rem;text-transform:uppercase}
.prose .article-ad h2.article-ad__title{font-size:clamp(1.15rem,2.4vw,1.45rem);margin:0 0 .45rem;padding:0}
.article-ad__body{color:var(--muted);font-size:.98rem;line-height:1.5;margin:0 0 .9rem;max-width:60ch}
.article-ad__meta{align-items:baseline;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.article-ad__meta strong{color:var(--ink);font-size:1rem}
.article-ad__price{color:var(--clay);font-family:var(--font-display);font-size:.95rem;font-weight:700}
.article-ad__cta{background:var(--ink);border-radius:2px;color:#fff;display:inline-block;font-family:var(--font-display);font-size:.86rem;font-weight:700;padding:.7rem 1.1rem;text-decoration:none}
.article-ad__cta:hover{background:var(--clay)}
.article-ad__cta:focus-visible{outline:3px solid color-mix(in srgb,var(--clay) 48%,transparent);outline-offset:2px}
@media(max-width:600px){.article-ad__cta{display:block;text-align:center}}

/* table */
.tbl-scroll{overflow-x:auto;margin:1.5rem 0}
.tbl{width:100%;border-collapse:collapse;font-size:.98rem;min-width:520px}
.tbl caption{text-align:left;color:var(--muted);font-size:.9rem;margin-bottom:.55rem}
.tbl th,.tbl td{border:1px solid var(--rule);padding:.68rem .8rem;text-align:left;vertical-align:top}
.tbl thead th{background:var(--ink);color:var(--on-ink);font-family:var(--font-display);font-weight:700;letter-spacing:.01em}
.tbl tbody tr:nth-child(even){background:var(--off)}
.tbl td strong{color:var(--ink)}

/* in-content CTA */
.cta-inline{background:var(--ink);color:var(--on-ink);border-radius:4px;padding:clamp(1.6rem,4vw,2.6rem);margin:2.6rem 0;border-left:4px solid var(--ochre);position:relative;overflow:hidden}
.cta-inline:before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--ochre) 16%,transparent),transparent 60%);pointer-events:none}
.cta-inline>*{position:relative;z-index:2}
.cta-inline .eyebrow{color:var(--ochre-lt);margin-bottom:.7rem}
.cta-inline h3{color:var(--on-ink);font-size:clamp(1.35rem,3vw,1.95rem);font-weight:800;letter-spacing:-.02em}
.cta-inline p{color:color-mix(in srgb,var(--on-ink) 80%,transparent);margin:.7rem 0 1.3rem;max-width:56ch}
.cta-inline .price{color:var(--ochre-lt);font-weight:800}
.cta-inline .btnrow{display:flex;flex-wrap:wrap;gap:.8rem}
.cta-inline .btn--ink-ghost{background:transparent;border:1.5px solid color-mix(in srgb,var(--on-ink) 45%,transparent);color:var(--on-ink)}
.cta-inline .btn--ink-ghost:hover{background:color-mix(in srgb,var(--on-ink) 12%,transparent)}

/* FAQ */
.faq{display:grid;gap:.9rem;margin-top:1.5rem;max-width:74ch}
.faq details{background:var(--off);border:1px solid var(--rule);border-left:3px solid var(--ochre);border-radius:2px;padding:1.05rem 1.3rem}
.faq summary{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--ochre);font-weight:800;font-size:1.3rem}
.faq details[open] summary:after{content:"-"}
.faq details p{color:var(--muted);margin-top:.7rem}
.faq details p+p{margin-top:.6rem}

/* related guides cards */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.6rem}
.gcard{display:block;background:var(--off);border:1px solid var(--rule);border-top:3px solid var(--ochre);border-radius:2px;padding:1.4rem;text-decoration:none;transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.gcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,33,46,.12)}
.gcard h3{font-size:1.2rem;font-weight:800;margin-bottom:.4rem}
.gcard p{color:var(--muted);font-size:.95rem}
.gcard .go{display:inline-block;margin-top:.8rem;color:var(--clay);font-weight:700;font-size:.9rem}

/* Blog library variants. The base .gcards and .gcard rules remain shared with /guides/. */
.blog-feature{background:var(--off);border:1px solid var(--rule);border-top:3px solid var(--ochre);border-radius:2px;overflow:hidden}
.blog-feature__link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);min-height:390px;text-decoration:none}
.blog-feature__media{background:var(--cream-2);min-width:0;overflow:hidden}
.blog-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-long) var(--ease-out)}
.blog-feature__body{align-self:center;padding:clamp(1.5rem,4vw,3rem)}
.blog-feature__body .eyebrow{margin-bottom:.5rem}
.blog-feature__body h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;margin:.45rem 0 .85rem}
.blog-feature__body>p:not(.eyebrow):not(.blog-date){color:var(--muted);font-size:1.05rem;line-height:1.55}
.blog-feature .go{display:inline-block;margin-top:1.15rem;color:var(--clay);font-weight:700}
.blog-feature__link:hover .blog-feature__media img{transform:scale(1.025)}
.blog-library__heading{margin-top:clamp(2.8rem,6vw,4.5rem);max-width:62ch}
.blog-library__heading h2{font-size:clamp(1.65rem,3.6vw,2.5rem);font-weight:800;margin:.45rem 0 .55rem}
.blog-library__heading>p:last-child,.blog-library__empty{color:var(--muted)}
.blog-date{color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
.gcards.gcards--blog{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.35rem}
.gcard.gcard--article{display:flex;flex-direction:column;overflow:hidden;padding:0}
.gcard--article__media{aspect-ratio:16/9;background:var(--cream-2);overflow:hidden}
.gcard--article__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-long) var(--ease-out)}
.gcard--article__body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
.gcard--article__body .blog-date{margin-bottom:.6rem}
.gcard.gcard--article h3{font-size:1.25rem;margin-bottom:.55rem}
.gcard.gcard--article .go{margin-top:auto;padding-top:1rem}
.gcard--article:hover .gcard--article__media img{transform:scale(1.035)}

/* footer */
footer{background:var(--ink);color:var(--on-ink);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid color-mix(in srgb,var(--on-ink) 15%,transparent)}
.foot-brand p{color:color-mix(in srgb,var(--on-ink) 62%,transparent);max-width:34ch;margin:1rem 0 .4rem;font-size:.98rem}
.foot-endorse{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ochre-lt);font-weight:700;margin-top:1.2rem}
.foot-col h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-ink) 55%,transparent);margin-bottom:1rem}
.foot-col a,.foot-col span{display:block;color:color-mix(in srgb,var(--on-ink) 82%,transparent);text-decoration:none;margin-bottom:.6rem;font-size:.98rem}
.foot-col a:hover{color:var(--ochre-lt)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.82rem;color:color-mix(in srgb,var(--on-ink) 55%,transparent)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}.reveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .blog-feature__link{grid-template-columns:1fr;min-height:0}.blog-feature__media{aspect-ratio:16/9}.blog-feature__body{align-self:auto}
  .foot-top{grid-template-columns:1fr}
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--ink);flex-direction:column;align-items:flex-start;gap:0;padding:1rem clamp(1.25rem,5vw,4rem);display:none;border-bottom:1px solid var(--rule)}
  .nav-links.open{display:flex}.nav-links a{color:var(--on-ink);width:100%;padding:.85rem 0}.nav-links .btn{margin-top:.5rem}
  .nav-toggle{display:block}
}
@media(max-width:600px){.article-lead .kago-lead__fields{grid-template-columns:1fr}.article-lead .kago-lead__field{grid-column:1/-1}.article-lead .kago-lead__submit{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}