/* coolca.lc Guide: one stylesheet for every page under /guide/.
   Colors are the calculator's own tokens, so the Guide and the app share one look in both themes.
   Fonts are the calculator's subsets (SIL Open Font License 1.1): Jura for headings and controls,
   the coolca.lc dot face for numbers shown as the calculator shows them. Body text uses the system face. */
@font-face{font-family:'CC Jura';src:url(fonts/jura.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'coolca.lc dots';src:url(fonts/dots.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#E9EEF6; --ink2:#DDE4EF; --panel:#F6F8FC; --raise:#FFFFFF;
  --line:#CBD5E6; --bone:#0E1626; --dim:#4D5B78; --faint:#8391AB;
  --azure:#1F7BE0; --sig:#0C4F9E; --glow:rgba(31,123,224,.28); --violet:#8A3FE0;
  --inf-d1:#5C79A6; --inf-d2:#3E5C8C; --shadow:rgba(20,40,80,.22);
  --text:#26324A;
  --ui:'CC Jura',system-ui,sans-serif; --dot:'coolca.lc dots','Courier New',monospace;
  --read:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#070B14; --ink2:#060A12; --panel:#0C1322; --raise:#121B2E;
    --line:#1E2B45; --bone:#DDE5F2; --dim:#8393B4; --faint:#54637F;
    --azure:#4FA6FF; --sig:#9FD8FF; --glow:rgba(79,166,255,.32); --violet:#A876F5;
    --inf-d1:#7E97BE; --inf-d2:#526D9C; --shadow:rgba(0,0,0,.65);
    --text:#C3CEE0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#070B14; --ink2:#060A12; --panel:#0C1322; --raise:#121B2E;
  --line:#1E2B45; --bone:#DDE5F2; --dim:#8393B4; --faint:#54637F;
  --azure:#4FA6FF; --sig:#9FD8FF; --glow:rgba(79,166,255,.32); --violet:#A876F5;
  --inf-d1:#7E97BE; --inf-d2:#526D9C; --shadow:rgba(0,0,0,.65);
  --text:#C3CEE0; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--ink);color:var(--text);
  font:400 19px/1.65 var(--read);-webkit-font-smoothing:antialiased;
  padding:0 env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}   /* top inset: on the header, below */
/* the calculator's own background: engineering grid over two slowly wandering light pools (azure, violet),
   copied from index.html. Fixed behind the page, so it stays put while the article scrolls. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  --l1:color-mix(in srgb,var(--azure) 13%,transparent);--l2:color-mix(in srgb,var(--azure) 5.5%,transparent);
  --m:transparent 0px 12px,var(--l2) 12px 13px,transparent 13px 24px,var(--l2) 24px 25px,transparent 25px 36px,var(--l2) 36px 37px,transparent 37px 48px,var(--l2) 48px 49px,transparent 49px 60px,var(--l2) 60px 61px,transparent 61px 72px,var(--l2) 72px 73px,transparent 73px 84px,var(--l2) 84px 85px,transparent 85px;
  background-image:linear-gradient(var(--l1) 1px,transparent 1px),linear-gradient(90deg,var(--l1) 1px,transparent 1px),
                   linear-gradient(var(--m)),linear-gradient(90deg,var(--m));
  background-size:96px 96px;background-position:0 0;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 85%),linear-gradient(#000 calc(100% - 150px),transparent);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 85%),linear-gradient(#000 calc(100% - 150px),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 150px),transparent);mask-image:linear-gradient(#000 calc(100% - 150px),transparent)}
.bg-glow::before,.bg-glow::after{content:'';position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
.bg-glow::before{left:-22vmax;top:-26vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--azure) 22%,transparent),transparent);
  animation:glowA 7s ease-in-out infinite alternate}
.bg-glow::after{right:-24vmax;bottom:-30vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 20%,transparent),transparent);
  animation:glowB 9s ease-in-out infinite alternate}
@keyframes glowA{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(14vw,9vh,0) scale(1.1)}66%{transform:translate3d(5vw,20vh,0) scale(.93)}100%{transform:translate3d(18vw,3vh,0) scale(1.05)}}
@keyframes glowB{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-13vw,-14vh,0) scale(.92)}66%{transform:translate3d(-20vw,-4vh,0) scale(1.1)}100%{transform:translate3d(-7vw,-19vh,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.bg-glow::before,.bg-glow::after{animation:none}}
.wrap,.foot{position:relative;z-index:1}
/* the header: sticky, full width for its backdrop, with its contents on the same 880px column as the page */
.topbar{position:sticky;top:0;z-index:3;padding-top:env(safe-area-inset-top,0px)}
/* The status bar's height (iOS home-screen app; 0 in browsers) is padding inside the header, so the header sticks
   at the very top and its backdrop covers the area behind the clock while the logo and buttons sit below it. */
/* once the page has scrolled: a frosted backdrop, solid enough through the status-bar area and the header that
   nothing reads through, fading to clear over the 36px below the header */
.topbar::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 36px);pointer-events:none;z-index:-1;opacity:0;transition:opacity .25s;
  background:linear-gradient(color-mix(in srgb,var(--ink) 92%,transparent) calc(100% - 36px),transparent 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.topbar.stuck::before{opacity:1}
a{color:var(--azure);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--sig)}
a:focus:not(:focus-visible){outline:none}   /* no ring after a click or tap */

/* ---------- header: the calculator's own brand ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:880px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand>svg:not(.wm){color:var(--azure)}
.wm{display:block;height:21px;width:auto;color:var(--dim);overflow:visible;transition:color .15s}
.wm .inf-lit,.wm .inf-glow{opacity:0;transition:opacity .15s}
@media (hover:hover){.brand:hover .wm{color:var(--bone)}.brand:hover .wm .inf-lit{opacity:1}.brand:hover .wm .inf-glow{opacity:.6}}
.nav{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:20px;border:1px solid var(--line);background:var(--panel);
  color:var(--dim);font:600 14.5px/1 var(--ui);text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s,box-shadow .15s}
.pill:hover{color:var(--bone);border-color:color-mix(in srgb,var(--azure) 45%,var(--line));box-shadow:0 0 14px -4px var(--glow)}
.pill.sq{width:40px;padding:0}
svg{display:block}
button.pill:focus:not(:focus-visible){outline:none}
/* the theme button shows the theme you're in (moon: dark, sun: light), as in the calculator */
.i-sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .i-moon{display:none}:root:not([data-theme="dark"]) .i-sun{display:block}}
:root[data-theme="light"] .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:block}
/* the hub's way into the calculator */
.pill.go{color:var(--azure);border-color:color-mix(in srgb,var(--azure) 55%,var(--line));background:color-mix(in srgb,var(--azure) 9%,var(--panel))}
.pill.go:hover{color:var(--sig);border-color:var(--azure);box-shadow:0 0 18px -4px var(--glow)}

/* ---------- page ---------- */
.wrap{flex:1;width:100%;max-width:880px;margin:0 auto;padding:24px 16px 64px}
.crumbs{display:flex;gap:8px;align-items:center;margin:6px 0 12px;font:600 15px/1.2 var(--ui);color:var(--faint)}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--azure)}
.crumbs b{font-weight:600;color:var(--faint)}   /* the page you're on */
h1,h2,h3{font-family:var(--ui);color:var(--bone);font-weight:600;line-height:1.2;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(34px,7vw,54px);margin:0 0 18px}
h2{font-size:clamp(24px,4.8vw,32px);margin:52px 0 14px}
h3{font-size:clamp(20px,3.6vw,23px);margin:32px 0 10px}
p{margin:0 0 16px}
.g>p:first-of-type,.lead{font-size:clamp(20px,3.4vw,23px);line-height:1.5;color:var(--bone)}
strong,b{color:var(--bone);font-weight:600}
ul,ol{margin:0 0 18px;padding-left:1.3em}
li{margin:0 0 6px}
li::marker{color:var(--azure)}
.num{font:800 1.1em/1 var(--dot);font-variation-settings:'ROND' 100;color:var(--bone);letter-spacing:.02em;white-space:nowrap}

/* ---------- the "Open" link into the calculator ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin:30px 0 34px;padding:20px 20px 20px 26px;
  border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel),var(--ink2));position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--azure),transparent);opacity:.75}
.cta-txt{margin:0;flex:1 1 260px;font-size:17px;line-height:1.45;color:var(--dim)}
.cta-k{display:block;font:600 14.5px/1.6 var(--ui);letter-spacing:.03em;color:var(--azure)}
.cta-btn{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 18px 0 26px;border-radius:26px;white-space:nowrap;
  background:linear-gradient(160deg,#72BCFF,#2C7AE0 70%);color:#fff;font:600 17px/1 var(--ui);text-decoration:none;
  box-shadow:0 10px 26px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);transition:box-shadow .2s,background .2s}
.cta-btn svg{width:17px;height:17px}
.cta-btn:hover{color:#fff;background:linear-gradient(160deg,#8FCDFF,#3D8BF0 70%);
  box-shadow:0 14px 32px -8px var(--glow),0 0 0 4px color-mix(in srgb,var(--azure) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- figures: calculator screenshots ----------
   Small, beside the text on wider screens; a click or tap opens the full-size overlay (dialog.zoom). */
figure{float:right;position:relative;z-index:1;width:190px;margin:6px 0 16px 28px;text-align:center}
figure img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 24px 50px -28px var(--shadow);cursor:zoom-in;
  transition:box-shadow .2s}
figure img:hover{box-shadow:0 24px 50px -28px var(--shadow),0 0 0 3px color-mix(in srgb,var(--azure) 35%,transparent)}
figcaption{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--dim)}
@media (max-width:640px){figure{width:130px;margin:4px 0 12px 16px}figcaption{font-size:12px}}   /* still wrapped by the text, just smaller */
dialog.zoom{padding:0;border:0;background:none;max-width:none;max-height:none;outline:none;cursor:zoom-out;text-align:center}
dialog.zoom::backdrop{background:rgba(3,6,12,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.zoom img{display:block;height:min(86vh,1362px);width:auto;max-width:94vw;object-fit:contain;margin:0 auto;border-radius:28px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
dialog.zoom p{margin:12px auto 0;max-width:520px;font-size:15px;color:#C3CEE0}

/* ---------- tables ---------- */
.tbl{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:17.5px;line-height:1.4}
th,td{text-align:left;padding:13px 18px;vertical-align:top}
th{font:600 14.5px/1.3 var(--ui);letter-spacing:.03em;color:var(--dim);background:color-mix(in srgb,var(--azure) 6%,var(--panel));border-bottom:1px solid var(--line)}
tr+tr td{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
td:first-child{color:var(--bone)}

/* ---------- worked examples and steps ---------- */
.ex{margin:0 0 20px;padding:14px 18px;border-left:2px solid var(--azure);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--azure) 6%,transparent)}
.ex p:last-child{margin:0}
ol.steps{counter-reset:s;list-style:none;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:14px}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:.1em;width:31px;height:31px;border-radius:50%;border:1px solid color-mix(in srgb,var(--azure) 50%,var(--line));
  display:grid;place-items:center;font:600 15px/1 var(--ui);color:var(--azure);background:var(--panel)}
.key{display:inline-block;padding:1px 8px;border-radius:8px;border:1px solid var(--line);border-bottom-width:2px;background:var(--raise);
  font:600 .88em/1.4 var(--ui);color:var(--bone);white-space:nowrap}

/* ---------- FAQ ---------- */
.faq h3{margin-top:24px}

/* ---------- lists of guides (hub, "More in") ---------- */
.hub h2{margin-top:36px}
.hub h2 a{color:inherit;text-decoration:none}
.hub h2 a:hover{color:var(--azure)}
/* the hub's search */
.search{display:flex;align-items:center;gap:10px;margin:26px 0 6px;height:54px;padding:0 14px 0 18px;border:1px solid var(--line);border-radius:27px;
  background:var(--panel);color:var(--faint);cursor:text;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:color-mix(in srgb,var(--azure) 55%,var(--line));box-shadow:0 0 22px -6px var(--glow)}
.search svg{width:20px;height:20px;flex:none}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--bone);font:400 18px/1 var(--read)}
.search input::placeholder{color:var(--faint)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search kbd{font:600 13px/1 var(--ui);padding:5px 9px;border-radius:8px;border:1px solid var(--line);border-bottom-width:2px;color:var(--dim)}
.search:focus-within kbd{display:none}
.none{margin:18px 2px 0;color:var(--dim)}
[hidden]{display:none!important}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list li{margin:0}
.list a{display:grid;gap:5px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.list a:hover{border-color:color-mix(in srgb,var(--azure) 50%,var(--line));box-shadow:0 0 18px -6px var(--glow)}
.list b{font:600 20px/1.3 var(--ui);color:var(--bone)}
.list span{font-size:16.5px;line-height:1.45;color:var(--dim)}
.more{margin-top:48px;padding-top:6px;border-top:1px solid var(--line)}

.foot{width:100%;max-width:880px;margin:0 auto;padding:22px 16px 52px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  font:500 14.5px/1.5 var(--ui);color:var(--faint);text-align:center}
.foot p{margin:0}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--azure)}

@media (max-width:420px){
  body{font-size:17.5px}
  .cta{padding:16px}
  .cta-btn{width:100%;justify-content:center}
}

/* the tip chart: amounts line up on the right */
.chart th,.chart td{text-align:right;font-variant-numeric:tabular-nums}
.chart th:first-child,.chart td:first-child{text-align:left}

/* a wide figure (desktop screenshots such as the Log beside the calculator): full column width, not floated */
figure.wide{float:none;width:auto;max-width:560px;margin:28px auto 30px}
figure.wide img{border-radius:18px}

/* ---------- "Buy me a coffee": the calculator's ad-rail card, on every guide page ----------
   Wide screens: pinned to the left window edge, level with the header, as in the calculator (300 wide when
   there's room, else 160). Narrower screens: the same card at the end of the page instead. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes trace{0%{--a:0deg;opacity:1}70%{opacity:1}100%{--a:360deg;opacity:0}}
@keyframes cupPop{0%,55%{transform:none}62%{transform:scale(1.14) rotate(-9deg)}70%{transform:scale(1.06) rotate(7deg)}78%{transform:scale(1.02) rotate(-3deg)}86%,100%{transform:none}}
.rail{display:none;position:fixed;z-index:4;top:calc(10px + env(safe-area-inset-top,0px));left:16px;width:160px;height:600px}
.ad-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:14px;padding:18px 10px;text-align:center;
  border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel),var(--ink2));color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:border-color .25s,box-shadow .25s}
.ad-card:hover{color:inherit;border-color:color-mix(in srgb,var(--azure) 20%,var(--line))}
.ad-text{display:block;margin:0;font:400 12.5px/1.5 var(--ui);color:var(--dim)}
.ad-text .lead{font-weight:inherit;font-size:inherit;line-height:inherit;color:var(--bone)}   /* not the article's .lead paragraph style */
.ad-qr{display:block;width:132px;height:132px}
.ad-qr .qr{display:block;width:100%;height:100%}
.ad-note{display:block;margin:0;font:400 10.5px/1.4 var(--ui);color:var(--faint)}
.bmc-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:23px;background:#FFDD00;color:#0D0C22;
  font:700 15px/1 var(--ui);white-space:nowrap;box-shadow:0 8px 22px -10px rgba(255,221,0,.7);transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.bmc-btn::before{content:'';position:absolute;inset:-3px;border-radius:26px;padding:2px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--a),transparent 0deg 230deg,rgba(111,182,255,.4) 290deg,#BFE6FF 345deg,#fff 357deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover){.ad-card:hover .bmc-btn{transform:scale(1.06)}.ad-card:hover .bmc-btn::before{animation:trace .8s cubic-bezier(.45,.05,.25,1)}}
.bmc-cup{display:inline-block;height:22px;aspect-ratio:94/136;background:url(img/bmc-cup.webp) center/contain no-repeat;transform-origin:50% 90%;
  animation:cupPop 3.2s cubic-bezier(.3,.7,.3,1) infinite}
/* the narrow rail uses the small button, as in the calculator */
.rail .bmc-btn{height:34px;padding:0 10px;gap:5px;font-size:11.5px;border-radius:17px}
.rail .bmc-btn::before{border-radius:20px}
.rail .bmc-cup{height:16px}
/* rails need the header's width plus a rail and gutters on each side, and 600px of height */
@media (min-width:1384px) and (min-height:626px){.rail{display:block}.support-inline{display:none}}
@media (min-width:1664px) and (min-height:626px){
  .rail{width:300px}
  .rail .bmc-btn{height:46px;padding:0 22px;gap:9px;font-size:15px;border-radius:23px}
  .rail .bmc-btn::before{border-radius:26px}
  .rail .bmc-cup{height:22px}
  .rail .ad-text{font-size:14px;max-width:26ch}
  .rail .ad-qr{width:200px;height:200px}
  .rail .ad-note{font-size:11.5px}
}
/* the end-of-page card */
.support-inline{margin:56px auto 0;max-width:400px}
.support-inline .ad-card{height:auto;padding:28px 24px 22px}
.support-inline .ad-text{font-size:15px;max-width:26ch}
@media (max-width:640px){.support-inline .ad-qr,.support-inline .ad-note{display:none}}   /* no QR to scan on the phone that shows it */
@media (prefers-reduced-motion:reduce){.bmc-cup{animation:none}}

/* ---------- theme images ---------- */
figure.hero{float:none;width:auto;margin:6px 0 34px;position:static}
figure.hero img{width:100%;height:auto;border-radius:22px;cursor:default;box-shadow:0 30px 70px -40px var(--shadow)}
figure.hero img:hover{box-shadow:0 30px 70px -40px var(--shadow)}
figure.hero figcaption{text-align:right;font-size:12.5px;color:var(--faint)}

/* the closing link and the "More in" list start below any figure still floating beside the text */
.g .cta,.more{clear:both}

/* "Updated" date under a page title */
.meta{margin:-6px 0 22px;font:500 14px/1.4 var(--ui);letter-spacing:.02em;color:var(--faint)}
.g>p.meta:first-of-type{font:500 14px/1.4 var(--ui);color:var(--faint)}
.g>.meta+p{font-size:clamp(20px,3.4vw,23px);line-height:1.5;color:var(--bone)}   /* the opening paragraph keeps its lead style */
/* site pages (About, Privacy, Contact): plain reading, no lead paragraph */
.info>.meta+p{font-size:inherit;line-height:inherit;color:inherit}
.info h2{font-size:clamp(21px,4vw,26px);margin-top:40px}
/* footer: site pages */
.foot-links{margin-top:8px!important;display:flex;justify-content:center;gap:18px}

/* ---------- contact form ---------- */
.cform{display:grid;gap:18px;margin:26px 0 34px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel),var(--ink2))}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.crow{grid-template-columns:1fr}.cform{padding:18px}}
.cfield{display:grid;gap:7px}
.cfield>span{font:600 14px/1.3 var(--ui);color:var(--bone)}
.cfield i{font-style:normal;font-weight:500;color:var(--faint);margin-left:6px}
.cfield input,.cfield select,.cfield textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:var(--ink);color:var(--bone);
  font:400 17px/1.45 var(--read);padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.cfield textarea{resize:vertical;min-height:150px}
.cfield select{appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{border-color:color-mix(in srgb,var(--azure) 60%,var(--line));box-shadow:0 0 20px -6px var(--glow)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}   /* the honeypot: never seen by people */
.cfoot{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px}
.cform .cta-btn{border:0;cursor:pointer;padding:0 26px}
.cform .cta-btn:disabled{opacity:.6;cursor:default}
.cstatus{margin:0;font:500 15px/1.4 var(--ui);color:var(--dim)}
.cstatus.ok{color:#6FD3A4}
.cstatus.err{color:#FF8A8A}

/* footer: the coolca.lc wordmark, centered above the footer lines, lighting up on hover like the header's */
.foot-logo{display:inline-block;margin:6px auto 14px;color:inherit;text-decoration:none}
.foot-logo .wm{height:22px;margin:0 auto}
@media (hover:hover){.foot-logo:hover .wm{color:var(--bone)}.foot-logo:hover .wm .inf-lit{opacity:1}.foot-logo:hover .wm .inf-glow{opacity:.6}}
/* touch screens have no hover: show both logos fully lit, as the calculator does */
@media (hover:none){
  .brand .wm,.foot-logo .wm{color:var(--bone)}
  .brand .wm .inf-lit,.foot-logo .wm .inf-lit{opacity:1}
  .brand .wm .inf-glow,.foot-logo .wm .inf-glow{opacity:.6}
}

/* links inside the lead paragraph */
.lead a{text-decoration-thickness:1px}