/* Website design request page. Uses the shared theme variables so light and dark themes both work. */
.website-request{max-width:1120px}
.wr-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:28px}
.wr-form{display:grid;gap:22px;min-width:0}
.wr-group{border:1px solid var(--edge,#b8bada);border-radius:18px;padding:22px 22px 8px;margin:0;background:var(--surface,#f0f1fc);min-width:0}
.wr-group legend{padding:0 8px;font-size:17px;font-weight:760;color:var(--ink,#202239)}
.wr-field{display:grid;gap:7px;margin:0 0 16px}
.wr-field>label,.wr-label{font-size:15px;font-weight:650;color:var(--ink,#202239)}
.wr-req{color:var(--accent,#3119e5)}
.wr-opt{font-weight:500;color:var(--subtle,#2f3256);font-size:13px}
.wr-field input[type=text],.wr-field input[type=email],.wr-field input[type=url],.wr-field select,.wr-field textarea{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink,#202239);background:var(--canvas,#dbddf7);border:1.5px solid var(--control-edge,#6b6ea2);border-radius:12px}
.wr-field textarea{min-height:140px;resize:vertical;line-height:1.55}
.wr-field input:focus-visible,.wr-field select:focus-visible,.wr-field textarea:focus-visible,.wr-check input:focus-visible{outline:3px solid var(--accent,#3119e5);outline-offset:2px}
.wr-help{margin:0;font-size:13.5px;line-height:1.5;color:var(--subtle,#2f3256)}
.wr-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.wr-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;cursor:pointer}
.wr-check input{width:20px;height:20px;accent-color:var(--accent,#3119e5);flex:none}
.wr-error{margin:0;padding:12px 14px;border-radius:12px;border:1.5px solid #4630e8;background:#ebe9fe;color:#2b16c7;font-weight:600}
:root[data-theme=dark] .wr-error{background:#201196;color:#b6adfd;border-color:#b6adfd}
.wr-submit{justify-self:start;min-height:52px;padding:14px 26px;font-size:17px;font-weight:700}
.wr-private{margin:0;font-size:14px;line-height:1.6;color:var(--subtle,#2f3256)}
.wr-side{position:sticky;top:24px;border:1px solid var(--edge,#b8bada);border-radius:18px;padding:22px;background:var(--surface,#f0f1fc)}
.wr-side h2{margin:0 0 12px;font-size:20px}
.wr-side ol{margin:0 0 14px;padding-left:20px;display:grid;gap:12px;line-height:1.55}
.wr-note{margin:0;font-size:14px;line-height:1.6;color:var(--subtle,#2f3256)}
.wr-result{margin-top:30px;border:2px solid var(--accent,#3119e5);border-radius:18px;padding:22px;background:var(--surface,#f0f1fc)}
.wr-result textarea{width:100%;box-sizing:border-box;margin:10px 0 14px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.55;color:var(--ink,#202239);background:var(--canvas,#dbddf7);border:1.5px solid var(--control-edge,#6b6ea2);border-radius:12px;resize:vertical}
.wr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wr-status{margin:10px 0 0;font-weight:600}
.wr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:860px){.wr-layout{grid-template-columns:minmax(0,1fr)}.wr-side{position:static;order:2}}
@media(max-width:520px){.wr-checks{grid-template-columns:minmax(0,1fr)}.wr-group{padding:18px 16px 6px;border-radius:14px}.wr-submit{width:100%;justify-self:stretch}}
@media print{.wr-form,.wr-side{display:none}}
.wr-hp{display:none!important}
.wr-back{margin:0 0 8px;font-size:15px}
.wr-back a{text-decoration:none;font-weight:650}

.tool-ad-space{box-sizing:border-box;display:block;width:100%;max-width:970px;min-width:0;margin:48px auto;clear:both;padding:20px 0 0;border-top:1px solid var(--edge,#b8bada)}
.tool-ad-label{margin:0 0 12px;color:var(--subtle,#464975);font-size:12px;font-weight:600;letter-spacing:.12em;line-height:1.5;text-align:center;text-transform:uppercase}
.tool-ad-placeholder{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:250px;padding:20px;border:1px dashed var(--control-edge,#6b6ea2);border-radius:12px;background:var(--surface,#f0f1fc);color:var(--subtle,#464975);text-align:center;overflow-wrap:anywhere}
.tool-ad-placeholder span{font-size:14px;line-height:1.6;font-weight:500}
@media(max-width:640px){.tool-ad-space{margin:32px auto}.tool-ad-placeholder{min-height:250px;padding:16px}}
@media print{.tool-ad-space{display:none!important}}
.tool-walkthrough ol{padding-inline-start:1.5rem}.tool-walkthrough li{margin-block:.65rem;line-height:1.7}.guide-screenshot{margin:1.5rem 0}.guide-screenshot img{display:block;width:100%;height:auto;border:1px solid var(--edge,#b8bada);border-radius:12px}.guide-screenshot figcaption{font-size:.875rem;line-height:1.6;margin-top:.6rem}

/* Hidden until a real, approved ad unit replaces the placeholder (remove this rule at that point). */
.tool-ad-space[data-ad-state="placeholder"]{display:none!important}