/* mysticalcalc.com - cool-editorial design (talaria-site-designer v1.5)
   Mystical and divination archetype. Deep magenta on warm parchment.
   Archivo heads, Inter body, IBM Plex Mono figures. Targets the
   existing class names so every page restyles from this one sheet. */
:root{
  --ink:#1A0F14; --ink2:#3D2230; --muted:#7A5C6A;
  --paper:#F9F4F6; --panel:#FFFFFF;
  --green:#BF406C; --green-dk:#91274C; --green-br:#D4607E; --mint:#E0CCD3;
  --rule:#EAD8DF; --rule2:#DBC4CD;
  --head:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:10px; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-dk);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--head);line-height:1.12;margin:0 0 .5em;color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:700}
h3{font-size:1.12rem;font-weight:600}
p{margin:0 0 1rem}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
a,button,select,input,textarea{transition:transform .12s ease,background-color .14s ease,border-color .14s ease,color .14s ease}
.btn:active,button:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---- header (light, hairline) ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,241,233,.92);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand:hover{text-decoration:none}
.brand .mk{width:40px;height:40px;border-radius:50%;display:block;flex:0 0 auto}
.brand .name{font-family:var(--head);font-weight:700;font-size:1.22rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.brand .name .accent{color:var(--green-dk)}
.brand .tag{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{color:var(--ink2);font-weight:500;font-size:.9rem;padding:9px 12px;border-radius:6px}
.nav a:hover{color:var(--green-dk);background:rgba(191,64,108,.09);text-decoration:none}
.nav a.cta{background:var(--green-dk);color:#fff}
.nav a.cta:hover{background:var(--green);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--rule2);border-radius:6px;
  width:42px;height:38px;color:var(--ink);font-size:1.2rem;cursor:pointer}
@media(max-width:760px){.menu-btn{display:block}
  .nav{position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 14px 16px;display:none;border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}.nav a{padding:13px 12px;border-bottom:1px solid var(--rule)}
  .nav a.cta{margin-top:8px;text-align:center}}

/* ---- hero (light, two column) ---- */
.hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.hero::before{display:none}
.hero .wrap{position:relative;padding:48px 22px 44px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:stretch}
.hcopy{display:flex;flex-direction:column}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:26px}.hcopy{display:block}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--green-dk);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);display:inline-block}
.hero h1{color:var(--ink);max-width:16ch}
.hero h1 em{color:var(--green-dk);font-style:normal}
.hero p.sub{font-size:1.1rem;color:var(--ink2);max-width:54ch;margin:.4rem 0 22px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-photo{width:100%;max-width:360px;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--rule);margin-top:auto}
@media(max-width:860px){.hero-photo{max-width:100%;margin-top:22px}}
.hero-grid picture{display:block}
.byline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.84rem;margin:14px 0 0}
.byline .av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);background:var(--mint)}
.byline b{color:var(--ink);font-weight:600}

/* ---- buttons (flat, tactile) ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:600;
  font-size:.94rem;padding:12px 22px;border-radius:var(--r);border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--green-dk);color:#fff}
.btn-primary:hover{background:var(--green);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--green-dk);border:1px solid var(--rule2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-dk);text-decoration:none}
.btn-block{width:100%;justify-content:center}

/* ---- trust strip ---- */
.trust{background:var(--ink);color:rgba(255,255,255,.86)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:13px 22px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust .dot{color:var(--green-br)}

/* ---- sections ---- */
section{padding:54px 0}
.section-head{max-width:62ch;margin:0 auto 32px;text-align:center}
.section-head .kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--green-dk);font-size:.72rem;margin-bottom:8px}
.section-head p{color:var(--muted)}

/* ---- tool grid cards (hairline, shadowless) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;box-shadow:none}
.card:hover{transform:translateY(-3px);border-color:var(--green);text-decoration:none}
.card .ico{width:44px;height:44px;border-radius:9px;background:var(--mint);display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.card .ico svg{width:24px;height:24px;stroke:var(--green-dk)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:.9rem;margin:0 0 14px;flex:1}
.card .go{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--green-dk)}

/* ---- inner calculator-page hero (light) ---- */
.tool-hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.tool-hero .wrap{padding:36px 22px 30px;position:relative}
.tool-hero .crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin-bottom:12px}
.tool-hero .crumbs a{color:var(--green-dk)}
.tool-hero h1{color:var(--ink)}
.tool-hero p{color:var(--ink2);max-width:62ch;margin:0}

/* ---- calculator layout + panels ---- */
.calc-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;margin-top:24px;position:relative;z-index:5}
@media(max-width:860px){.calc-layout{grid-template-columns:1fr;margin-top:18px}}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;box-shadow:0 18px 40px -30px rgba(25,31,26,.4)}
.panel h2{font-size:1.15rem;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--head);font-weight:600;font-size:.82rem;color:var(--ink2);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--rule2);border-radius:6px;
  font:inherit;font-size:1rem;background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(191,64,108,.18)}
.field .help{display:block;color:var(--muted);font-size:.76rem;margin-top:4px}

/* results: statement-style, mono figures */
.results .panel{background:var(--panel);border:1px solid var(--rule);color:var(--ink);height:100%}
.results h2{color:var(--ink)}
.answer{font-size:.92rem;color:var(--ink2);margin:0 0 4px}
.result-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.result-row:last-child{border-bottom:0}
.result-row .lbl{color:var(--muted);font-size:.88rem}
.result-row .val{font-family:var(--mono);font-weight:600;font-size:1.4rem;color:var(--ink);font-variant-numeric:tabular-nums}
.result-row.hero-result{border-bottom:2px solid var(--ink)}
.result-row.hero-result .lbl{color:var(--ink2);font-weight:600}
.result-row.hero-result .val{font-size:2.4rem;color:var(--green-dk);font-weight:700}
.note{font-size:.78rem;color:var(--muted);margin-top:13px}
.results .note{color:var(--muted)}
/* authority strip beside the tool */
.auth{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);line-height:1.7}

/* ---- prose ---- */
.prose{max-width:760px;margin:0 auto}
.prose p{color:var(--ink2)}
.lead{font-size:1.08rem;color:var(--ink2)}
.callout{background:var(--mint);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  padding:16px 18px;margin:22px 0;color:var(--ink)}
.center{text-align:center}

/* ---- tables (ruled, mono numbers) ---- */
table{width:100%;border-collapse:collapse;margin:14px 0;background:var(--panel);font-size:.96rem;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
th{font-family:var(--head);font-weight:600;font-size:.8rem;color:var(--muted);text-align:left;
  padding:12px 15px;border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.04em}
th:not(:first-child){text-align:right}
td{border-bottom:1px solid var(--rule);padding:12px 15px}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink)}
td:not(:first-child){font-family:var(--mono);text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ---- faq ---- */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:2px 18px;margin-bottom:10px;box-shadow:none}
.faq summary{font-family:var(--head);font-weight:600;font-size:1.02rem;cursor:pointer;padding:15px 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--green);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--ink2);margin:0 0 15px}

/* ---- misc blocks ---- */
.alt{background:#F0E6EC}
.supplier{background:var(--ink);border-radius:var(--r);padding:28px;text-align:center;color:#fff;margin:34px 0}
.supplier h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.supplier p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 16px}
.supplier .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.form-card{max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);padding:28px;box-shadow:none}
textarea{width:100%;padding:11px 12px;border:1px solid var(--rule2);border-radius:6px;font:inherit;
  font-size:1rem;min-height:130px;resize:vertical;background:var(--paper);color:var(--ink)}
textarea:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(191,64,108,.18)}
.ad{margin:24px auto;max-width:760px;min-height:90px;background:none;border:1px solid var(--rule);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}

/* ---- footer (dark bookend) ---- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.66);margin-top:24px;border-top:3px solid var(--green)}
.site-footer .wrap{padding:42px 22px 24px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:30px;margin-bottom:26px;align-items:start}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid .blurb{max-width:36ch;font-size:.88rem;margin-top:12px}
.foot-col h4{font-family:var(--head);font-size:.82rem;color:#fff;margin-bottom:13px;text-transform:uppercase;letter-spacing:.06em}
.foot-col a{display:block;color:rgba(255,255,255,.66);font-size:.88rem;padding:4px 0}
.foot-col a:hover{color:var(--green-br);text-decoration:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,.5)}
.disclosure{background:rgba(0,0,0,.22);color:rgba(255,255,255,.52);font-size:.74rem;text-align:center;padding:14px 22px}
.disclosure .related-mesh a{color:rgba(255,255,255,.6)}

/* === fixwave 20260630a: hero square+compact, footer logo, prose alignment, byline gap === */
.hero-grid{align-items:start}
.hero-photo{aspect-ratio:1/1;width:100%;max-width:380px;height:auto;margin-top:18px}
@media(max-width:760px){.hero-photo{max-width:100%}}
.site-footer .brand .name,.site-footer .brand .name .accent,.site-footer .name,.site-footer .name .accent{color:#fff}
.site-footer .brand svg rect{fill:#fff}
.tool-hero .wrap:not(:has(.calc-layout)):not(:has(.hero-grid)){max-width:760px}
.tool-hero + section{padding-top:24px}