/* Mycora — shared styles for SEO content pages (landing/guide pages).
   The calculator app (index.html) is self-contained; these pages link this file. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  --paper-0:#f8fcfb; --paper-1:#eef4f3; --paper-2:#e2ecea; --paper-3:#d2e0dd;
  --ink-900:#0c1f22; --ink-700:#213b3e; --ink-500:#4a6164; --ink-400:#6d8588; --line:#c9dbd8;
  --teal-700:#0c3b40; --teal-600:#115e63; --teal-500:#1c8a8a; --teal-400:#35b5ad; --teal-300:#5ed9cb;
  --teal-200:#b3e3dc; --teal-100:#d2ece8; --teal-50:#e4f4f1;
  --cyan-600:#0f9e8d; --cyan-500:#16c2b0; --amber-500:#e0a52f; --amber-600:#bf851c;
  --clay-600:#be4329; --clay-700:#9c3622; --abyss:#0b2a2e;
  --font-display:'Spectral',Georgia,serif; --font-sans:'Hanken Grotesk',system-ui,sans-serif; --font-mono:'Spline Sans Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper-1);color:var(--ink-700);font-family:var(--font-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(16px,5vw,32px)}
h1,h2,h3{font-family:var(--font-display);color:var(--ink-900);line-height:1.12;letter-spacing:-0.02em;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.5vw,2rem);margin-top:1.8em}
h3{font-size:1.3rem;margin-top:1.5em}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--teal-600);text-decoration:none}
a:hover{color:var(--teal-700);text-decoration:underline}
strong{color:var(--ink-900)}

/* header */
.site-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(16px,5vw,32px);background:color-mix(in oklab,var(--paper-1) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--paper-3)}
.site-head img{height:30px;display:block}
.site-head .cta{font-family:var(--font-sans);font-size:14px;font-weight:600;color:#fff;background:var(--teal-600);
  padding:9px 16px;border-radius:10px}
.site-head .cta:hover{background:var(--teal-700);text-decoration:none}

/* breadcrumb */
.crumb{font-size:13px;color:var(--ink-400);margin:24px 0 8px}
.crumb a{color:var(--ink-500)}

/* hero */
.hero{padding:8px 0 4px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600)}
.lede{font-size:1.2rem;color:var(--ink-500);max-width:60ch}

/* tables */
table{width:100%;border-collapse:collapse;margin:1em 0;font-size:15px}
th[scope=col]{text-align:left;color:var(--ink-500);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
td,th[scope=row]{padding:10px;border-bottom:1px solid var(--paper-3);vertical-align:top;text-align:left}
th[scope=row]{font-family:var(--font-display);font-weight:600;color:var(--ink-900);white-space:nowrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:baseline}

/* callout */
.note{display:flex;gap:12px;padding:16px;border-radius:12px;background:var(--teal-50);border:1px solid var(--teal-200);border-left:4px solid var(--teal-500);margin:1.2em 0}
.note.warn{background:#f9edc9;border-color:#f5dfa3;border-left-color:var(--amber-500)}
.note.danger{background:#f4dccf;border-color:#ecc3b6;border-left-color:var(--clay-600)}
.note .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:700}
.note p{margin:0;font-size:15px}

/* cta card */
.cta-card{margin:2em 0;padding:28px;border-radius:16px;background:var(--abyss);color:#dff3ef;text-align:center;
  box-shadow:0 12px 28px rgba(12,40,44,.18)}
.cta-card h2{color:#fff;margin:0 0 .3em}
.cta-card p{color:#a9cfca;margin:0 0 1.2em}
.cta-card a.btn{display:inline-block;background:var(--teal-300);color:#072024;font-weight:700;font-family:var(--font-sans);
  padding:13px 26px;border-radius:12px;box-shadow:0 0 24px rgba(94,217,203,.45)}
.cta-card a.btn:hover{background:#7fe9da;text-decoration:none}

/* faq */
details.faq{border-bottom:1px solid var(--paper-3);padding:2px 0}
details.faq summary{cursor:pointer;font-weight:600;color:var(--ink-900);font-size:1.05rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--cyan-600);font-family:var(--font-mono);font-size:1.3em}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:0 0 14px;color:var(--ink-500)}

/* related chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0}
.chips a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--paper-0);
  border:1px solid var(--line);color:var(--ink-700);font-size:14px;font-weight:600}
.chips a:hover{border-color:var(--teal-500);text-decoration:none}

/* footer */
.site-foot{margin-top:3em;padding:28px clamp(16px,5vw,32px);border-top:1px solid var(--paper-3);background:var(--paper-0)}
.site-foot .wrap{max-width:760px}
.site-foot p{font-size:13px;color:var(--ink-400);margin:.3em 0}
.site-foot a{color:var(--ink-500)}
.disclaimer{margin-top:2.5em;padding-top:1.2em;border-top:1px solid var(--paper-3);font-size:13px;color:var(--ink-400)}

/* footer nav */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:32px;align-items:start}
.foot-brand img{display:block;margin-bottom:10px}
.foot-brand p{font-size:14px;color:var(--ink-500);max-width:30ch}
.foot-col h4{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);margin:0 0 10px}
.foot-col a{display:block;font-size:14px;color:var(--ink-700);padding:3px 0}
.foot-col a:hover{color:var(--teal-600);text-decoration:none}
.foot-varieties{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.foot-varieties h4{grid-column:1 / -1}
.foot-legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--paper-3)}
.foot-legal p{font-size:12px;color:var(--ink-400);margin:0}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr;gap:24px}}
/* ad slot — minimal, clearly labelled, blends with paper */
.ad-slot{max-width:760px;margin:32px auto 0;padding:0 clamp(16px,5vw,32px)}
.ad-slot .ad-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-400);text-align:center;margin:0 0 6px}
.ad-slot ins{display:block;min-height:90px;background:var(--paper-2);border-radius:10px}
/* bottom anchor ad — slim, dismissible, fixed to viewport */
#mc-anchor{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;
  min-height:62px;padding:6px 40px 6px 12px;background:color-mix(in oklab,var(--paper-0) 96%,transparent);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(12,40,44,.10)}
#mc-anchor ins{max-width:728px;width:100%}
#mc-anchor-x{position:absolute;top:4px;right:8px;width:26px;height:26px;border:none;border-radius:50%;
  background:var(--paper-2);color:var(--ink-500);font-size:18px;line-height:1;cursor:pointer}
#mc-anchor-x:hover{background:var(--paper-3);color:var(--ink-900)}