/* Design system v8: shared defaults; the site own CSS comes after. */
:root{--ink:#3D2A1E;--ink-soft:#6E5545;--ground:#FFF8F0;--surface:#FFFFFF;--line:#E9CFB5;--accent:#C2410C;--accent-ink:#FFFFFF;--focus:#9A3412;--star:#BE9A4A;--star-hot:#F2B10A;--card-radius:1.35rem;--card-shadow:0 8px 20px rgba(124,69,28,.10);--display-face:ui-rounded,system-ui,sans-serif}
:root[data-theme="dark"]{--ink:#F8FAFC;--ink-soft:#D1D9E6;--ground:#302018;--surface:#402C20;--line:#745B4A;--accent:#FDBA74;--accent-ink:#382116;--focus:#FDA4AF;--star:#C9A24A;--star-hot:#FCD34D}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#F8FAFC;--ink-soft:#D1D9E6;--ground:#302018;--surface:#402C20;--line:#745B4A;--accent:#FDBA74;--accent-ink:#382116;--focus:#FDA4AF;--star:#C9A24A;--star-hot:#FCD34D}}
body{background:var(--ground);color:var(--ink)} a{color:var(--accent)} h1,h2{font-family:var(--display-face)} .brand{display:inline-flex;align-items:center;gap:.5rem}.site-logo{width:2rem;height:2rem;fill:none;stroke:var(--logo);stroke-width:2.4;flex:none}.card,.guide-list>li{border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.card-icon,.section-icon{width:1.6rem;height:1.6rem;vertical-align:middle;margin-right:.55rem;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}.card-icon{float:left;margin-top:.1rem}.section-icon{width:1.3rem;height:1.3rem}.design-figure{display:flex;align-items:center;gap:1rem;padding:1rem;margin:1.5rem 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius)}.design-figure svg{width:88px;height:60px;stroke:var(--accent);fill:none;stroke-width:2}.rating{margin:2rem 0;padding:1rem;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}.rating-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:.25rem 0 1rem;padding:0;border:0;background:none}.rating-top .rating-status{margin:0;font-size:.95rem}.rating-top button{width:34px;height:34px;padding:4px}.rating-stars{display:flex;gap:.25rem}.rating button{width:44px;height:44px;padding:8px;background:transparent;color:var(--star);border:0;cursor:pointer;transition:color .12s ease}.rating button:hover,.rating button:focus-visible{color:var(--star-hot)}.rating-stars:hover button{color:var(--star-hot)}.rating-stars button:hover~button{color:var(--star)}.rating button[disabled]{cursor:default}.rating button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.rating svg{width:100%;height:100%;fill:currentColor}.rating-status{color:var(--ink-soft)}button:hover,.card:hover{filter:brightness(.96)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.reviews{padding:8px 0 48px}
.reviews-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:24px}
.reviews-head h2{margin:0;font-family:var(--display-face);font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.03em}
.reviews-summary{margin:0;color:var(--ink-soft);font-size:15px;font-variant-numeric:tabular-nums}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.review-card{display:flex;flex-direction:column;gap:12px;margin:0;padding:22px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface);box-shadow:var(--card-shadow)}
.review-stars{font-size:15px;letter-spacing:2px;line-height:1}
.review-stars .on{color:var(--star-hot)}
.review-stars .off{color:var(--line)}
.review-card blockquote{margin:0;color:var(--ink);font-size:15px;line-height:1.55}
.review-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px;color:var(--ink-soft);font-size:13px}
.review-avatar{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;border-radius:50%;color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em}
.review-who{display:flex;min-width:0;flex-direction:column}
.review-who strong{color:var(--ink);font-size:14px}
.review-card figcaption time{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.reviews+.rating{margin-top:0}
@media(max-width:520px){.review-grid{grid-template-columns:minmax(0,1fr)}.review-card figcaption time{display:none}}

.review-form-wrap{max-width:720px;margin:32px auto 0;padding:24px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
.review-form-wrap h3{margin:0 0 6px;font-family:var(--display-face);font-size:20px}
.review-form-lede{margin:0 0 20px;color:var(--ink-soft);font-size:14px}
.review-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end}
#review-form label{display:block;margin-top:16px;font-size:14px;font-weight:700;color:var(--ink)}
.review-form-row label{margin-top:0}
#review-form input[type=text],#review-form textarea{box-sizing:border-box;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--card-radius)/2);background:var(--ground);color:var(--ink);font:inherit}
#review-form textarea{min-height:110px;resize:vertical}
.review-rating-label{display:block;color:var(--ink-soft);font-size:14px;font-weight:650}
.review-input-stars{display:flex;gap:2px;margin-top:6px}
.review-input-stars button{min-height:40px;width:36px;padding:0;border:0;background:transparent;color:var(--line);font-size:22px;cursor:pointer}
.review-input-stars button.on{color:var(--star-hot)}
.review-form-hint{margin:8px 0 0;color:var(--ink-soft);font-size:13px}
.review-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.review-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.review-form-foot button{min-height:44px;padding:0 18px;border:0;border-radius:calc(var(--card-radius)/2);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;cursor:pointer}
.review-form-foot button[disabled]{opacity:.6;cursor:default}
.review-status{margin:0;color:var(--ink-soft);font-size:14px}
@media(max-width:560px){.review-form-row{grid-template-columns:1fr}}

/* Free Online Calc: warm utility desk, with terracotta as the sole action colour. */
:root{--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--radius-sm:.75rem;--radius-md:1.25rem;--radius-lg:2rem;--shadow-soft:0 14px 40px rgba(86,45,20,.10)}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
header,main,footer{max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
header{min-height:4.75rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--line)}
header .brand{margin-right:auto;color:var(--ink);font-weight:800;text-decoration:none;letter-spacing:-.03em}
header nav{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}header nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 .7rem;color:var(--ink);text-decoration:none;border-radius:var(--radius-sm)}header nav a:hover,header nav a:focus-visible{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.menu-toggle{display:none;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;padding:.55rem .9rem}
main{padding-block:clamp(1.25rem,4vw,3rem)}h1,h2,h3{color:var(--ink);line-height:1.08;letter-spacing:-.035em}h1{font-size:clamp(2.25rem,6vw,4.7rem);margin:.25rem 0 1rem}h2{font-size:clamp(1.65rem,3vw,2.6rem)}a{text-underline-offset:.18em}.eyebrow{margin:0;color:var(--accent);font-size:.78rem;font-weight:850;letter-spacing:.14em}
.home-tool{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(1.4rem,4vw,3.5rem);border:1px solid var(--line);border-radius:var(--radius-lg);background:radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 35%),var(--surface);box-shadow:var(--shadow-soft)}
.home-tool p{max-width:38rem}.home-tool form{display:grid;gap:.9rem;padding:1.2rem;background:var(--ground);border:1px solid var(--line);border-radius:var(--radius-md)}label{display:grid;gap:.4rem;font-weight:700}input{width:100%;box-sizing:border-box;min-height:48px;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:1.05rem}button[type="submit"]{min-height:48px;border:0;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;padding:.75rem 1rem;cursor:pointer}input:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.home-tool output{display:grid;gap:.15rem;padding:1rem;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.home-tool output strong{font-size:1.8rem}.home-tool output span{color:var(--ink-soft);font-size:.9rem}
.home-section{margin-top:clamp(3rem,7vw,6rem)}.section-heading{max-width:42rem;margin-bottom:1.4rem}.quick-grid,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}.quick-card,.card{box-sizing:border-box;min-height:9rem;padding:1.15rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.quick-card{display:flex;flex-direction:column;justify-content:space-between}.quick-card span{color:var(--accent);font-size:.9rem;font-weight:750}.quick-card:hover,.quick-card:focus-visible,.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-soft)}
.hero,.panel{padding:clamp(1.25rem,4vw,2.5rem);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}/* The reading column was 68ch - 692 px inside a 1152 px main, which on a
   desktop reads as a phone-width strip in the middle of empty space. The
   block now takes the full width and the paragraph keeps the line length:
   headings and tables get room, the text stays readable. */
.content,.home-reading{max-width:none;margin:clamp(2.5rem,6vw,5rem) auto}.content>p,.content>ul,.content>ol,.home-reading>p,.home-reading>ul,.home-reading>ol{max-width:78ch}.content h2,.home-reading h2{margin-top:2.5rem}.content p,.home-reading p{color:var(--ink-soft)}.content code,.home-reading code{display:inline-block;padding:.1rem .35rem;border-radius:.35rem;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--ink)}
.ad-slot{min-height:11rem;margin:3.5rem 0 2rem;border:1px dashed var(--line);border-radius:var(--radius-md);display:grid;place-items:center;color:var(--ink-soft);background:color-mix(in srgb,var(--surface) 72%,transparent)}.ad-slot span{font-size:.68rem;letter-spacing:.16em}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:2rem;border-top:1px solid var(--line)}footer nav{display:flex;gap:.8rem;flex-wrap:wrap}.cookie-notice{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:20;max-width:72rem;margin:auto;padding:1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft)}.cookie-notice p{margin-top:0}.cookie-notice button{min-height:44px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink)}
@media(max-width:760px){.menu-toggle{display:block}header{position:relative;flex-wrap:wrap}header nav{display:none;width:100%;padding-bottom:1rem}header .menu-toggle[aria-expanded="true"]+nav{display:grid;grid-template-columns:1fr 1fr}header nav a{border:1px solid var(--line)}.home-tool{grid-template-columns:1fr;padding:1.2rem}h1{font-size:clamp(2.1rem,12vw,3.35rem)}.quick-grid,.cards{grid-template-columns:1fr 1fr}.content,.home-reading{max-width:100%}}
@media(max-width:360px){.quick-grid,.cards{grid-template-columns:1fr}}
@media print{body header,body footer,body .ad-slot,body .consent,body .rating,body .breadcrumbs,body .actions{display:none}body{background:#fff;color:#000}.panel,.home-tool,.content{border:0;box-shadow:none;padding:0;max-width:none}body .result,body output{border:1px solid #777;background:#fff;color:#000}}
@media(prefers-reduced-motion:reduce){.quick-card,.card{transition:none}.quick-card:hover,.card:hover{transform:none}}