:root { --navy:#061a36; --navy-2:#0a2d57; --cream:#fff8e9; --paper:#fffdf7; --orange:#f04a1d; --yellow:#f6aa16; --teal:#0f9cab; --purple:#8540a8; --ink:#10223d; --muted:#586779; --line:rgba(16,34,61,.14); --shadow:0 22px 60px rgba(3,21,45,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f4f8fb; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
button,input { font:inherit; }
button { cursor:pointer; }
.container { width:min(1060px,calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:fixed; top:-60px; left:20px; z-index:999; padding:10px 16px; border-radius:8px; background:white; }
.skip-link:focus { top:12px; }
.tool-header { background:var(--paper); border-bottom:1px solid var(--line); }
.nav-wrap { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--navy); color:white; font-size:13px; font-weight:900; transform:rotate(-3deg); }
.brand strong,.brand small { display:block; }
.brand small { color:var(--muted); }
.tool-nav { display:flex; gap:22px; }
.tool-nav a { color:var(--navy); font-size:14px; font-weight:800; text-decoration:none; }
.tool-hero { position:relative; overflow:hidden; padding:72px 0; background:linear-gradient(112deg,var(--navy),var(--navy-2)); color:white; }
.tool-hero::after { content:""; position:absolute; right:-70px; bottom:-190px; width:350px; height:350px; border:65px solid rgba(133,64,168,.22); border-radius:50%; }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.4fr .6fr; align-items:center; gap:70px; }
.eyebrow { margin:0 0 7px; color:var(--teal); font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.tool-hero .eyebrow { color:#74e1e8; }
h1,h2 { margin-top:0; line-height:1.06; letter-spacing:-.035em; }
.tool-hero h1 { margin-bottom:18px; font-size:clamp(42px,6vw,70px); }
.tool-hero p:not(.eyebrow) { max-width:690px; margin-bottom:0; color:rgba(255,255,255,.76); font-size:18px; }
.hero-card { display:grid; gap:8px; padding:25px; border:1px solid rgba(255,255,255,.15); border-radius:22px; background:rgba(255,255,255,.09); transform:rotate(2deg); }
.hero-card strong { color:var(--yellow); font-size:21px; line-height:1.2; }
.hero-card span { color:rgba(255,255,255,.75); }
.builder-section { padding:70px 0 96px; }
.input-card { padding:34px; border:1px solid var(--line); border-radius:28px; background:white; box-shadow:var(--shadow); }
.input-card > label { display:block; margin-bottom:10px; font-size:25px; font-weight:900; letter-spacing:-.02em; }
.task-input-row { display:flex; gap:10px; }
.task-input-row input { min-width:0; min-height:58px; flex:1; padding:0 19px; border:2px solid #cbd5df; border-radius:15px; color:var(--ink); font-size:18px; }
.task-input-row input:focus { outline:3px solid rgba(15,156,171,.2); border-color:var(--teal); }
.task-input-row button,.primary-action { border:0; border-radius:999px; background:var(--orange); color:white; font-weight:900; box-shadow:0 10px 24px rgba(240,74,29,.22); }
.task-input-row button { min-width:170px; padding:0 24px; }
.preferences { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:25px; }
fieldset { margin:0; padding:0; border:0; }
legend { margin-bottom:9px; color:var(--muted); font-size:13px; font-weight:800; }
.choice-row { display:flex; gap:7px; }
.choice-row button { min-height:39px; flex:1; border:1px solid #cbd5df; border-radius:999px; background:white; color:var(--ink); font-size:13px; font-weight:800; }
.choice-row button.selected { border-color:var(--teal); background:#eafafa; color:#086d77; }
.examples { margin:35px 0; }
.examples > p { margin-bottom:12px; font-weight:850; }
.example-list { display:flex; flex-wrap:wrap; gap:9px; }
.example-list button { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--ink); font-weight:750; }
.example-list button:hover { border-color:var(--purple); background:#f7effa; }
.message { color:#a52b0e; font-weight:800; }
.plan { margin-top:48px; padding:38px; border-radius:28px; background:white; box-shadow:var(--shadow); }
.plan-header { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; }
.plan-header h2 { margin:0; font-size:clamp(32px,5vw,48px); }
.progress-wrap { text-align:right; }
.progress-wrap strong,.progress-wrap span { display:block; }
.progress-wrap strong { color:var(--purple); font-size:24px; }
.progress-wrap span { color:var(--muted); font-size:12px; font-weight:750; }
.progress-track { height:9px; margin:20px 0 26px; overflow:hidden; border-radius:999px; background:#e8edf1; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--purple)); transition:width .25s ease; }
.start-card { display:grid; gap:3px; margin-bottom:22px; padding:18px 21px; border-left:6px solid var(--yellow); border-radius:13px; background:var(--cream); }
.start-card span { color:var(--orange); font-size:11px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.start-card strong { font-size:19px; }
.start-card small { color:var(--muted); }
.step-list { display:grid; gap:10px; padding:0; list-style:none; counter-reset:steps; }
.step-item { counter-increment:steps; display:grid; grid-template-columns:34px 24px 1fr auto; align-items:center; gap:11px; min-height:61px; padding:10px 12px; border:1px solid var(--line); border-radius:15px; }
.step-item::before { content:counter(steps); display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--navy); color:white; font-size:13px; font-weight:900; }
.step-item input[type="checkbox"] { width:20px; height:20px; accent-color:var(--teal); }
.step-text { min-width:0; padding:6px 8px; border:1px solid transparent; border-radius:8px; color:var(--ink); font-weight:700; }
.step-text:focus { outline:none; border-color:var(--teal); background:#f4fafa; }
.step-item.completed .step-text { color:var(--muted); text-decoration:line-through; }
.step-controls { display:flex; gap:4px; }
.step-controls button { width:30px; height:30px; border:0; border-radius:8px; background:#edf2f5; color:var(--navy); font-weight:900; }
.step-controls .remove { color:var(--orange); }
.add-step-row { display:flex; gap:9px; margin-top:19px; }
.add-step-row input { min-width:0; min-height:47px; flex:1; padding:0 14px; border:1px solid #cbd5df; border-radius:12px; }
.add-step-row button { padding:0 18px; border:0; border-radius:12px; background:var(--navy); color:white; font-weight:850; }
.plan-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:27px; padding-top:22px; border-top:1px solid var(--line); }
.plan-actions button { min-height:48px; padding:0 18px; }
.secondary-action { border:2px solid var(--teal); border-radius:999px; background:white; color:var(--navy); font-weight:850; }
.primary-action { padding-inline:23px !important; }
.status { margin-bottom:0; color:var(--teal); font-size:13px; font-weight:800; text-align:right; }
footer { padding:38px 0; background:#031329; color:white; }
footer .container { display:flex; justify-content:space-between; }
footer span { color:rgba(255,255,255,.62); }
@media (max-width:760px) {
  .hero-grid { grid-template-columns:1fr; gap:35px; }
  .hero-card { max-width:400px; }
  .tool-nav a:first-child { display:none; }
  .preferences { grid-template-columns:1fr; gap:20px; }
  .task-input-row { flex-direction:column; }
  .task-input-row button { min-height:52px; }
  .plan { padding:25px 18px; }
  .plan-header { align-items:flex-start; flex-direction:column; }
  .progress-wrap { text-align:left; }
  .step-item { grid-template-columns:30px 22px 1fr; }
  .step-controls { grid-column:3; }
  .plan-actions { flex-direction:column; }
  .status { text-align:center; }
}
@media (max-width:480px) { .container { width:min(100% - 28px,1060px); } .brand small { display:none; } .tool-hero { padding:53px 0; } .input-card { padding:24px 18px; } footer .container { flex-direction:column; gap:7px; } }
@page { size:A4; margin:14mm; }
@media print {
  body { background:white; }
  body > header,.tool-hero,.input-card,.examples,.message,body > footer,.add-step-row,.plan-actions,.status { display:none !important; }
  .builder-section { padding:0; }
  .container { width:100%; }
  .plan { display:block !important; margin:0; padding:0; box-shadow:none; }
  .plan-header { padding:14px 16px; border-bottom:5px solid var(--yellow); border-radius:12px 12px 0 0; background:var(--navy) !important; color:white; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .plan-header .eyebrow { color:#74e1e8; }
  .plan-header h2 { color:white; font-size:25pt; }
  .progress-wrap strong { color:var(--yellow); }
  .progress-wrap span { color:rgba(255,255,255,.72); }
  .progress-track { margin:12px 0 18px; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .start-card { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .step-list { gap:7px; }
  .step-item { break-inside:avoid; min-height:48px; padding:7px 10px; }
  .step-controls { display:none; }
  .step-item { grid-template-columns:31px 23px 1fr; }
  .step-text { border:0; }
}