/* Free Bedline tools: use the same Nunito, cream, amber, paper and navy as the iPhone app. */
.tool-page { --night:#141d34; --muted:#465b76; --mint:#e9f5f0; --peach:#fef1e0; color:var(--night); }
.tool-page :is(h1,h2,h3,p) { margin-top:0; }
.tool-page a { text-decoration-thickness:1px; }
.tools-container { width:min(calc(100% - 2.5rem), 1050px); margin:auto; }
.tool-nav { display:flex; align-items:center; gap:1.25rem; justify-content:space-between; padding:1.5rem 0; flex-wrap:wrap; }
.tool-brand { display:inline-flex; align-items:center; gap:.7rem; font-size:1.4rem; font-weight:800; text-decoration:none; }
.tool-brand img { width:44px; height:44px; border-radius:12px; }
.tool-links { display:flex; gap:1.25rem; flex-wrap:wrap; font-weight:800; color:var(--muted); }
.tool-links a:hover,.tool-page a:hover { color:var(--deep-amber); }
.tool-hero { padding:3rem 0 1.5rem; max-width:870px; }
.tool-eyebrow { display:inline-flex; font-size:.8rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--deep-amber); margin-bottom:1rem; }
.tool-hero h1 { font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.09; letter-spacing:-.045em; margin-bottom:1.25rem; }
.tool-hero p { font-size:clamp(1.05rem,2vw,1.35rem); color:var(--muted); max-width:720px; }
.tool-hero em { color:var(--deep-amber); font-style:normal; }
.tool-card { border-radius:28px; padding:clamp(1.4rem,3vw,2.8rem); background:var(--paper); border:1px solid var(--separator); box-shadow:0 8px 35px #1c100708; margin:1.5rem 0 2rem; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.tool-page label { display:block; font-weight:800; margin-bottom:.5rem; }
.tool-page input[type=range] { accent-color:var(--amber); width:100%; cursor:pointer; min-height:40px; }
.tool-page input[type=time],.tool-page select { width:100%; min-height:54px; padding:.8rem 1rem; border:1px solid #cbbfb0; border-radius:14px; background:white; color:var(--night); font:inherit; font-weight:800; }
.tool-control { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.tool-control strong { white-space:nowrap; color:var(--deep-amber); }
.tool-result { margin-top:1.5rem; padding:clamp(1.5rem,4vw,3rem); border-radius:24px; background:var(--night); color:white; }
.tool-result p { color:#d3dcef; }
.tool-result .metric { display:block; font-size:clamp(3rem,9vw,5.6rem); line-height:1.1; font-weight:800; color:#ffd57b; letter-spacing:-.04em; }
.tool-result .secondary-metric { display:block; font-weight:800; font-size:clamp(1.5rem,4vw,2rem); }
.tool-note { font-size:.9rem; color:var(--muted); line-height:1.5; }
.tool-result .tool-note { color:#d3dcef; }
.tool-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.tool-button { min-height:50px; border-radius:999px; border:0; padding:.8rem 1.4rem; background:var(--amber); color:white; cursor:pointer; font:inherit; font-weight:800; display:inline-flex; justify-content:center; align-items:center; text-align:center; text-decoration:none; }
.tool-button:hover { background:var(--deep-amber); color:white !important; }
.tool-button.secondary { background:#ffffff; border:1px solid #ddd0c1; color:var(--night); }
.tool-button.secondary:hover { background:var(--peach); color:var(--night)!important; }
.tool-result .tool-button.secondary { background:transparent; border:1px solid #77839c; color:white; }
.tool-result .tool-button.secondary:hover { background:#34415e; color:white!important; }
.tool-cta { margin:2.5rem 0; display:grid; grid-template-columns:1fr auto; gap:1.25rem; align-items:center; background:var(--mint); border-radius:24px; padding:clamp(1.5rem,4vw,2.5rem); }
.tool-cta h2 { font-size:1.5rem; margin-bottom:.5rem; }
.tool-cta p { margin:0; }
.tool-explainer { max-width:800px; margin:3rem 0; }
.tool-explainer h2 { font-size:1.65rem; margin:2.2rem 0 .75rem; }
.tool-explainer h3 { font-size:1.15rem; margin:1.5rem 0 .5rem; }
.tool-explainer p { color:#384960; }
.tool-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.tool-tile { display:block; border-radius:22px; padding:1.5rem; border:1px solid var(--separator); background:var(--paper); text-decoration:none; }
.tool-tile .tool-tile-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:var(--peach); font-size:1.7rem; margin-bottom:1rem; }
.tool-tile strong { display:block; font-size:1.15rem; line-height:1.3; }
.tool-tile p { margin:.6rem 0 0; color:var(--muted); font-size:.96rem; }
.tool-plan { display:grid; gap:.5rem; padding:1.2rem 0; border-bottom:1px solid #34415e; }
.tool-plan:last-of-type { border:0; }
.tool-plan strong { font-size:2rem; color:#ffd57b; line-height:1.2; }
.choice { display:block; text-align:left; width:100%; min-height:60px; margin:.65rem 0; padding:1rem 1.25rem; border:1px solid #d6cbbc; border-radius:16px; background:white; color:var(--night); font:inherit; font-weight:800; cursor:pointer; }
.choice:hover,.choice:focus-visible { background:var(--peach); border-color:var(--amber); }
.tool-page :is(input,select,button,a):focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.quiz-progress { color:var(--deep-amber); font-weight:800; font-size:.9rem; }
.tool-footer { border-top:1px solid var(--separator); padding:2rem 0 3rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.tool-footer nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.tool-footer p { margin:0; color:var(--muted); }
[hidden] { display:none!important; }
@media(max-width:720px){ .tool-grid,.tool-cards,.tool-cta {grid-template-columns:1fr} .tool-hero {padding-top:1rem} .tool-actions .tool-button{flex:1 1 100%} .tool-cta .tool-button{justify-self:start} }
@media(prefers-reduced-motion:no-preference){.tool-tile,.tool-button,.choice{transition:background-color .15s,border-color .15s,transform .15s}.tool-tile:hover{transform:translateY(-3px)}}