.planner-page{background:#fcfaf7}.planner-heading{max-width:1360px;margin:auto;padding:55px 5% 32px}.planner-heading h1{font-size:clamp(40px,5vw,68px);max-width:800px;margin:20px 0;letter-spacing:-.05em}.planner-heading>p{max-width:650px;color:#56616a;line-height:1.75;font-size:18px}.planner-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:18px;font-size:13px;margin-top:24px}.planner-toolbar button{background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:#394953;padding:8px 0}.planner-toolbar #save-status{margin-right:auto;color:#476350}.planner-preview{border:1px solid #e7c9b0;background:#fff0e3;padding:13px 18px;border-radius:12px;max-width:1224px;margin:0 auto 25px;font-size:14px;line-height:1.6}

/* The design handed over from /website-templates. Deliberately NOT .planner-preview: that box is
   the "nothing is sent" warning, and a visitor who just chose a design should not be told twice in
   the same orange. Green reads as confirmation, and both can be on screen at once.
   This MUST stay at top level - it was first written next to the mobile .planner-preview override
   inside @media(max-width:650px), so it only styled phones and did nothing on desktop. */
.planner-handoff{border:1px solid #bcd9c4;background:#f1f8f3;padding:13px 18px;border-radius:12px;max-width:1224px;margin:0 auto 25px;font-size:14px;line-height:1.6;color:#1f3d2b}.planner-layout{display:grid;grid-template-columns:175px minmax(0,1fr) 270px;gap:24px;max-width:1360px;padding:0 5% 80px;margin:auto;align-items:start}.planner-steps{position:sticky;top:106px;display:flex;flex-direction:column;gap:5px}.planner-steps button{display:flex;gap:10px;text-align:left;border:0;border-radius:10px;background:none;color:#56616a;padding:12px 10px;font-size:13px;line-height:1.4;min-height:44px}.planner-steps button span{font-size:11px;padding-top:2px;font-variant-numeric:tabular-nums}.planner-steps button[aria-current]{background:#ffead8;color:#823500;font-weight:700}.planner-steps button:disabled{color:#7a7a7a;cursor:default}.planner-panel{background:white;border:1px solid #e9e4dd;border-radius:24px;min-width:0;overflow:hidden;box-shadow:0 12px 32px #202b3405}.planner-panel-top{padding:28px 32px 24px;border-bottom:1px solid #eee9e3;scroll-margin-top:95px}.planner-panel-top h2{font-size:32px;letter-spacing:-1px;margin:12px 0 20px}.planner-panel-top progress{display:block;width:100%;height:6px;border:0;border-radius:6px;overflow:hidden;accent-color:#ad4300;background:#eee}.planner-panel-top progress::-webkit-progress-bar{background:#eee}.planner-panel-top progress::-webkit-progress-value{background:#ad4300;border-radius:6px}.planner-panel form{padding:28px 32px}.planner-panel label{font-size:14px;font-weight:600;line-height:1.55}.planner-field{display:block;margin-bottom:23px}.planner-field input,.planner-field textarea,.planner-field select{display:block;width:100%;border:1px solid #cdd2d4;background:#fff;border-radius:10px;min-height:48px;padding:13px 14px;font-size:16px;line-height:1.5;margin-top:8px}.planner-field textarea{min-height:108px}.planner-field small{display:block;color:#56616a;font-weight:400;font-size:12px;line-height:1.65;margin-top:8px}.optional{color:#667078;font-size:11px;font-weight:400;margin-left:6px}.required{color:#a33e00}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.planner-question{border:0;padding:0;margin:0 0 30px;min-width:0}.planner-question legend{font-size:18px;font-weight:650;margin:0 0 16px;padding:0;line-height:1.5}.planner-question>p,.field-help,.review-intro{font-size:14px;line-height:1.75;color:#56616a;margin:0 0 18px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.planner-panel .choice{display:flex;align-items:flex-start;gap:10px;border:1px solid #dce0e1;border-radius:12px;padding:14px;cursor:pointer;margin:0;min-height:52px;font-weight:500;font-size:13px;background:#fff}.choice:has(input:checked){border-color:#ad4300;background:#fff5ec}
/* One follow-up per selected system, inline, rather than a popup on every tick. */
.integration-row{border:1px solid #e4e7e8;border-radius:12px;padding:14px;margin:0 0 10px;background:#fcfcfb}
.integration-row>strong{display:block;font-size:14px;font-weight:650;margin-bottom:10px;color:#202b34}
.integration-choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.integration-choices .choice{font-size:12px;padding:11px 12px;min-height:44px}
/* Nothing here is priced automatically, so the note has to say so plainly. */
.integration-note{margin:14px 0 0;padding:13px 15px;border-radius:10px;font-size:13px;line-height:1.6;border:1px solid #d9dfe0;background:#f6f8f8;color:#39454c}
@media(max-width:650px){.integration-choices{grid-template-columns:1fr}}

/* A requested launch date is never rejected, so this reads as guidance rather than an error. */
.launch-notice{margin:-14px 0 23px;padding:13px 15px;border-radius:10px;font-size:13px;line-height:1.6;border:1px solid #edccb0;background:#fff6ee;color:#5a4633}
.launch-notice.launch-unrealistic,.launch-notice.launch-past{border-color:#e0b4a4;background:#fff1ec;color:#6b3a2a}

/* The per-page cost sits at the end of the row so a client can scan prices down the column. */
.page-price{margin-left:auto;padding-left:10px;font-size:11px;font-weight:600;color:#56616a;white-space:nowrap;align-self:center}
.choice:has(input:checked) .page-price{color:#93400e}
.custom-page-row+.field-help strong{color:#39454c}.planner-panel input[type=radio],.planner-panel input[type=checkbox]{width:18px;height:18px;min-width:18px;flex:0 0 18px;padding:0;margin:2px 0 0;accent-color:#ad4300}.choice input:focus-visible{outline-offset:3px}.choice a{color:#93400e;text-decoration:underline}.addon{margin-bottom:24px!important}.addon strong{display:block}.package-picker{display:grid;gap:16px}.package-option{display:block;position:relative;border:1px solid #dce0e1;border-radius:17px;padding:24px;cursor:pointer;margin:0!important}.package-option.is-selected{border:2px solid #ad4300;background:#fff9f3;padding:23px}.package-option>input{float:right}.package-option>.eyebrow{font-size:10px;display:block;margin-bottom:12px}.package-option>strong{font-size:27px;letter-spacing:-.8px;display:block}.package-price{display:block;font-size:18px;color:#93400e;margin:10px 0 16px}.package-option p{font-size:14px;font-weight:400;line-height:1.7;color:#56616a}.package-option ul{font-size:14px;font-weight:500;padding-left:18px;line-height:1.8}.package-picker+.field-help{margin-top:22px}.planner-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #eee;padding-top:24px;margin-top:28px}.planner-actions .button{font-size:14px;gap:8px;padding:16px 20px;min-height:48px;margin-left:auto;line-height:1.5}.planner-back{border:1px solid #dce0e1;border-radius:50px;padding:14px 20px;background:#fff;color:#202b34;min-height:48px}.planner-error{color:#963400;background:#fff4e9;border-radius:10px;font-size:14px;line-height:1.7;scroll-margin-top:110px}.planner-error:not(:empty){padding:15px;margin:20px 0}.planner-summary{position:sticky;top:106px;border:1px solid #e4dbd1;background:#fff8ef;padding:25px;border-radius:20px}.planner-summary .eyebrow{font-size:10px}.planner-summary h2{font-size:27px;line-height:1.2;letter-spacing:-1px;margin:18px 0}.planner-summary dl{font-size:13px}.planner-summary dl>div{display:flex;gap:12px;justify-content:space-between;margin:15px 0}.planner-summary dd{margin:0;white-space:nowrap}.planner-summary p{font-size:13px;line-height:1.8;color:#56616a;margin-top:18px}.order-total{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #dfd3c6;margin-top:22px;padding-top:22px;font-size:13px;align-items:center}.order-total strong{font-size:25px;letter-spacing:-.8px}.summary-note{border-top:1px solid #dfd3c6;padding-top:17px}.summary-pages{overflow-wrap:anywhere}.upload-box{padding:24px;border:1px dashed #b3b7b9;border-radius:14px;background:#fafafa;margin:18px 0}.upload-box input[type=file]{display:block;max-width:100%;font-size:13px;padding:12px 0;background:none;border:0}.upload-box p{font-size:12px;line-height:1.7;color:#56616a}.file-grid{display:grid;gap:10px;margin:15px 0 25px}.file-preview{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid #e0e3e4;border-radius:12px;font-size:12px;min-width:0}.file-preview img{width:56px;height:56px;object-fit:cover;border-radius:7px}.file-preview>div{min-width:0;flex:1}.file-preview strong{display:block;overflow-wrap:anywhere}.file-preview small{display:block;margin-top:5px}.file-preview button{background:none;border:0;width:44px;height:44px;font-size:24px;flex-shrink:0}.palette-picker{display:grid;gap:10px;margin-top:16px}.palette-option{display:flex;align-items:center;gap:12px;border:1px solid #dce0e1;padding:16px;border-radius:12px;margin:0!important;cursor:pointer}.palette-option:has(input:checked){border-color:#ad4300}.swatches{display:flex;margin-left:auto;border:1px solid #ddd;border-radius:9px;overflow:hidden}.swatches i{width:24px;height:32px}.color-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.color-fields input[type=color]{width:100%;height:50px;padding:4px}.color-fields input[data-hex]{width:100%;font-size:14px}.template-picker{display:grid;grid-template-columns:1fr 1fr;gap:14px}.template-option{border:1px solid #ddd;border-radius:14px;overflow:hidden}.template-mini{height:125px;background:#f0f1f1;overflow:hidden;position:relative;pointer-events:none}.template-mini iframe{width:1280px;height:900px;border:0;transform:scale(.18);transform-origin:top left;pointer-events:none}.template-option .choice{border:0!important;border-radius:0;font-size:12px;padding:12px!important}.template-option>a{display:block;padding:0 12px 13px;font-size:12px;text-decoration:underline;color:#93400e}.completion-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
/* The plan card carries the page count at desktop width. Below 650px the layout stacks and that
   card sits thousands of pixels down the page, so the count rides with the picker instead. */
.page-count-mobile{display:none}
@media(max-width:650px){.page-count-mobile{display:block;position:sticky;top:6px;z-index:3;background:#fff3e7;border:1px solid #edccb0;padding:12px 14px;border-radius:10px;font-size:13px;font-weight:650;margin-bottom:16px}}
.plan-pages{border-top:1px solid #dfd3c6;margin-top:18px;padding-top:16px}
.plan-pages p{font-size:13px;line-height:1.6;color:#394349;margin:0 0 4px}
.plan-pages strong{font-weight:650}
.plan-pages-note{color:#56616a;font-size:12px!important;margin-top:8px!important}.locked-pages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.locked-pages>span{background:#f0f3f1;border:1px solid #d7dfda;padding:13px;border-radius:10px;font-size:14px}.locked-pages small{display:block;font-size:10px;margin:5px 0 0 15px;color:#56616a}.selected-pages{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.selected-pages button{border:1px solid #d4d9da;background:white;border-radius:20px;padding:10px 13px;font-size:12px;min-height:44px}.selected-pages p{font-size:13px;color:#56616a}.page-category{border-bottom:1px solid #e4e4e4}.page-category>summary{padding:18px 0;cursor:pointer;font-size:15px;font-weight:650;min-height:48px}.page-category .choice-grid{padding-bottom:20px}.custom-page-row{display:flex;gap:12px;align-items:end;margin-top:25px}.custom-page-row label{margin:0;flex:1}.custom-page-row .button{font-size:13px;padding:14px}.custom-page-row+.field-help{margin-top:15px}.review-section{border-bottom:1px solid #e5e5e5;padding-bottom:24px;margin-bottom:24px}.review-section h3{font-size:20px;display:flex;justify-content:space-between;gap:12px;margin-bottom:20px}.review-section button{background:none;border:0;color:#93400e;font-size:13px;text-decoration:underline;min-height:32px}.review-section dl{margin:0}.review-section dl>div{margin:15px 0}.review-section dt{font-size:12px;color:#56616a;margin-bottom:5px}.review-section dd{margin:0;font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.review-section p{font-size:14px;line-height:1.8}.acknowledgements{background:#fff8ef;padding:20px;border-radius:15px}.acknowledgements h3{font-size:20px}.acknowledgements ul{padding-left:20px;font-size:14px;line-height:1.8}.acknowledgements .choice{margin-top:14px}.acknowledgements>p{font-size:14px;line-height:1.8;margin:15px 0}#checkout-availability{font-size:14px;line-height:1.7;margin-top:20px;color:#56616a}.planner-completion{max-width:780px;margin:30px auto 90px;padding:45px;background:white;border:1px solid #e5dfd9;border-radius:24px}.planner-completion h2{font-size:38px;letter-spacing:-1.5px;margin:20px 0}.planner-completion p{font-size:16px;line-height:1.8;margin:20px 0;color:#56616a}.planner-completion a{margin-top:15px}.planner-page [hidden]{display:none!important}.planner-page .choice[hidden]{display:none!important}.planner-noscript{padding:35px;background:#fff0e3;max-width:800px;margin:30px auto;line-height:1.8}
@media(max-width:1100px){.planner-layout{grid-template-columns:145px minmax(0,1fr);gap:18px}.planner-summary{grid-column:2;position:static;grid-row:1}.planner-panel{grid-column:2}.planner-steps{grid-row:1 / span 2}.planner-summary h2{font-size:22px}.planner-summary dl,.summary-pages,.summary-note{display:none}.planner-summary{padding:18px 24px}.planner-summary .order-total{margin-top:12px;padding-top:12px}.planner-summary p{margin-top:10px}.planner-summary .eyebrow{display:none}}
@media(max-width:650px){.planner-heading{padding:35px 5% 26px}.planner-heading h1{font-size:43px}.planner-heading>p{font-size:16px}.planner-layout{display:flex;flex-direction:column;padding:0 4% 50px;gap:16px}.planner-steps{position:static;flex-direction:row;overflow:auto;max-width:100%;width:100%;padding-bottom:5px}.planner-steps button{white-space:nowrap;padding:10px;font-size:12px}.planner-summary{width:100%;order:1;padding:17px 20px}.planner-panel{width:100%;order:2}.planner-summary h2{font-size:23px;margin:0}.planner-summary .order-total{display:flex}.planner-panel-top{padding:24px 20px;scroll-margin-top:80px}.planner-panel form{padding:24px 20px}.planner-panel-top h2{font-size:29px}.field-pair{grid-template-columns:1fr;gap:0}.choice-grid{grid-template-columns:1fr}.template-picker{gap:10px}.template-mini{height:100px}.template-mini iframe{transform:scale(.115)}.template-option .choice{display:block}.template-option .choice input{float:left;margin-right:7px}.template-option>a{font-size:11px}.planner-panel .choice{padding:15px;font-size:14px}.package-option{padding:20px}.package-option.is-selected{padding:19px}.planner-preview{margin:0 4% 18px;font-size:13px}.planner-handoff{margin:0 4% 18px;font-size:13px}.page-count{top:70px}.palette-option{flex-wrap:wrap;font-size:12px}.swatches{margin-left:0}.custom-page-row{flex-wrap:wrap}.custom-page-row label{flex-basis:100%}.planner-actions{gap:10px}.planner-actions .button{font-size:13px;padding:14px 17px}.planner-back{padding:13px 17px;font-size:13px}.planner-completion{margin:20px 4% 60px;padding:28px}.planner-completion h2{font-size:30px}.planner-toolbar{gap:10px 20px}.planner-toolbar #save-status{flex-basis:100%}}
@media(max-width:1100px){.planner-summary{position:sticky;top:85px;z-index:4}.planner-summary>p{display:none}.planner-panel-top{scroll-margin-top:230px}}
@media(max-width:650px){.planner-summary{top:70px;padding:10px 16px}.planner-summary h2{font-size:17px}.planner-summary .order-total{margin-top:5px;padding-top:5px}.planner-summary .order-total strong{font-size:22px}.planner-panel-top{scroll-margin-top:205px}.page-count{position:static}}
/* Full-spectrum custom palette controls. Native picker supports mouse and touch. */
.custom-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.custom-color-card{min-width:0;margin:0;padding:16px;border:1px solid #d5dade;border-radius:14px;background:#fafbfc}
.custom-color-card legend{font-size:15px;font-weight:650;padding:0 5px}
.custom-color-card .color-swatch-label{display:block;margin:0}
.custom-color-card input[type=color]{display:block;width:100%;height:92px;min-height:92px;margin:0;padding:5px;border:1px solid #89949c;border-radius:10px;background:white;cursor:pointer}
.custom-color-card input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.custom-color-card input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.custom-color-card input[type=color]::-moz-color-swatch{border:0;border-radius:5px}
.custom-color-card>small{display:block;font-size:11px;color:#52616b;margin:8px 0 15px;line-height:1.5}
.custom-color-card .color-hex-label{margin:0 0 12px;font-size:12px}
.custom-color-card input:not([type=color]){width:100%;min-width:0;padding:10px 8px;margin-top:5px;border:1px solid #89949c;border-radius:7px;font-size:16px;background:#fff;color:#202b34}
.custom-color-card .color-rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.custom-color-card .color-rgb label{font-size:12px;margin:0}
@media(max-width:480px){.custom-color-grid{grid-template-columns:1fr}}
/* Web address fields show the https:// prefix so nobody has to guess the format. */
.url-field{display:flex;align-items:stretch;margin-top:8px;border:1px solid #cdd2d4;border-radius:10px;background:#fff;overflow:hidden}
.url-field:focus-within{outline:3px solid #ad4300;outline-offset:2px}
.url-prefix{display:flex;align-items:center;padding:0 10px;background:#f2f4f5;border-right:1px solid #cdd2d4;color:#56616a;font-size:14px;font-weight:600;white-space:nowrap}
.url-field input{border:0!important;border-radius:0!important;margin-top:0!important;min-width:0;flex:1}
.url-field input:focus-visible{outline:none}
@media(max-width:480px){.url-prefix{font-size:12px;padding:0 8px}}
/* Industry design picker: five concepts per industry, explorable full size before choosing. */
.template-picker{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.template-option{display:flex;flex-direction:column;border:1px solid #ddd;border-radius:14px;overflow:hidden;background:#fff}
.template-option.is-selected{border:2px solid #ad4300;background:#fff9f3}
/* Previews are 840x570 files. Declaring 1400x950 upscaled them 1.67x and cropped the edges. */
.template-art{display:block;width:100%;aspect-ratio:840/570;height:auto;object-fit:contain;object-position:top center;background:#f0f1f1}
.template-meta{padding:14px 14px 0}
.template-meta strong{display:block;font-size:15px;line-height:1.35}
.template-meta small{display:block;font-size:12px;color:#56616a;margin-top:6px}
.template-option .choice{border:0!important;border-radius:0;font-size:13px;padding:12px 14px!important}
.template-actions{display:flex;align-items:center;gap:14px;padding:0 14px 14px;margin-top:auto}
.template-actions button{background:none;border:1px solid #d4d9da;border-radius:50px;padding:10px 14px;font-size:12px;min-height:44px}
.template-actions a{font-size:12px;text-decoration:underline;color:#93400e}
.template-preview{width:min(1100px,94vw);max-width:none;border:0;border-radius:20px;padding:20px}
.template-preview::backdrop{background:#202b3488}
.template-preview-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.template-preview-top h2{font-size:22px;letter-spacing:-.5px;margin:0}
.template-preview-top p{font-size:13px;color:#56616a;margin:6px 0 0}
.template-preview-actions{display:flex;align-items:center;gap:12px}
.template-preview-actions a{font-size:13px;text-decoration:underline;color:#93400e}
#template-preview-iframe{display:block;width:100%;height:min(68vh,720px);border:1px solid #e3e3e3;border-radius:12px;background:#fff}
.template-preview .button{margin-top:16px}
@media(max-width:650px){.template-picker{grid-template-columns:1fr}.template-preview{padding:14px}#template-preview-iframe{height:58vh}}

.template-description{font-size:12px;line-height:1.55;margin:9px 0;color:#39454c}