/* Cyber Readiness Check, unit intake: parts/intake.css, verbatim, with its lines 76 to 116 (the
   form) replaced by the same rules re-keyed onto Jetpack Forms 8.3 markup (wp-port/jetpack.md 6,
   playground/mount/intake-map.css, measured identical at the four widths). Then the server error
   slot, which the prototype does not have, and the editor-only rules.
   The dialog is not inside .crc (inventory 15.2): .crc p{margin:0} would zero six margins here. */


/* Intake dialog (parts/intake.js). Self-contained: own tokens, own type and button, nothing from
   crc-page, so index-v2.html only has to link this file, the script and the dialog markup.
   Left: the price card's dark tiled ground with the reasons. Right: the form on white, fields on
   the theme's Jetpack field metrics (style.css: 1px #D4D4D8, 6px corner, 9px 12px, label 14/500). */

.intake{
	--i-blue:#183CDD; --i-navy:#071A3A; --i-night:#040A17; --i-panel:#0D2165; --i-accent:#6A9FFF;
	--i-on-blue:#D4EAFF; --i-muted:#AEBBD8; --i-ink:#18181B; --i-ink-muted:#52525B;
	--i-border:#D4D4D8; --i-surface:#F4F5FA; --i-tick:#16A34A; --i-danger:#D92D20; --i-danger-ink:#B42318;
	--i-ease:cubic-bezier(.2,.7,.2,1);
	/* The dialog itself is the full viewport and transparent; the card is centred in it with auto
	   margins, so a card taller than the screen scrolls instead of being clipped at the top.
	   border-box, or the padding adds to the 100% and pushes the card right and down. */
	position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; box-sizing:border-box;
	margin:0; padding:clamp(16px,3vw,32px); border:0; background:transparent; color:var(--i-ink);
	overflow-y:auto; overscroll-behavior:contain;
	font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-feature-settings:"cv11","ss01";
	font-size:16px; line-height:1.5; letter-spacing:-.011em; text-align:left;
	-webkit-font-smoothing:antialiased;
}
.intake[open]{display:flex}
.intake::backdrop{background:rgba(4,10,23,.8)}
.intake *,.intake *::before,.intake *::after{box-sizing:border-box}
/* :where, so every class rule below wins over the reset. */
.intake :where(h2,p,ul,li,figure,blockquote,dl,dt,dd,fieldset,legend){margin:0; padding:0}
html.intake-lock{overflow:hidden; scrollbar-gutter:stable}

/* Card */
.intake__card{position:relative; margin:auto; width:100%; max-width:1080px; display:grid;
	grid-template-columns:minmax(0,456fr) minmax(0,624fr); background:#fff; border-radius:8px;
	overflow:hidden; box-shadow:0 0 0 1px rgba(174,187,216,.14), 0 40px 90px -30px rgba(0,0,0,.7)}

.intake__close{position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; padding:0;
	display:grid; place-items:center; border:0; border-radius:6px; background:transparent;
	color:var(--i-ink-muted); cursor:pointer; transition:background-color .15s,color .15s}
.intake__close:focus-visible{outline:2px solid var(--i-blue); outline-offset:2px}
.intake__close svg{display:block}

/* Left: why this is a good choice */
.intake__why{position:relative; isolation:isolate; display:flex; flex-direction:column; gap:32px;
	padding:44px 40px 40px; background:var(--i-panel); color:#fff}
.intake__tiles{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.intake__product{font-size:15px; font-weight:600; color:var(--i-accent)}
.intake__price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:10px}
.intake__price strong{font-size:44px; font-weight:450; line-height:1; letter-spacing:-.0223em; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.intake__price span{font-size:15px; color:var(--i-muted)}
.intake__fixed{margin-top:10px; font-size:15px; color:var(--i-muted)}

.intake__reasons{list-style:none; display:grid; gap:20px}
.intake__reasons li{display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:12px}
.intake__reasons li::before{content:""; grid-row:1 / span 2; width:18px; height:18px; margin-top:2px; border-radius:50%;
	background:var(--i-tick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.5 5-5.1' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.intake__reasons strong{display:block; font-size:16px; font-weight:600; line-height:1.4; color:#fff}
.intake__reasons span{display:block; margin-top:3px; font-size:14.5px; line-height:1.5; color:var(--i-muted)}

.intake__quote{margin-top:auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; align-items:start}
/* The customer's own logo in its own colours, so it gets a white tile of its own. */
.intake__logo{grid-row:1 / span 2; width:112px; height:48px; padding:8px 11px; border-radius:4px; background:#fff; display:grid; place-items:center}
.intake__logo img{display:block; width:100%; height:auto}
.intake__quote blockquote p{font-size:15px; line-height:1.5; color:#fff}
.intake__quote figcaption{font-size:13.5px; line-height:1.4; color:var(--i-muted)}

/* Right: the form */
.intake__main{position:relative; display:flex; flex-direction:column; padding:44px 48px 36px}
.intake__step[hidden],.intake__done[hidden]{display:none}
.intake__title{padding-right:44px; font-size:30px; font-weight:450; line-height:1.1; letter-spacing:-.0223em; color:var(--i-ink)}
.intake__title:focus{outline:none}
.intake__lede{margin-top:10px; font-size:16px; color:var(--i-ink-muted)}
/* Who the call is with: initials only, no photos until there are real ones. */
.intake__who{display:flex; align-items:center; gap:12px; margin-top:18px; font-size:14px; line-height:1.45; color:var(--i-ink)}
.intake__faces{display:flex; flex:none}
.intake__faces i{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:2px solid #fff;
	background:var(--i-navy); color:#fff; font-size:13px; font-style:normal; font-weight:600; letter-spacing:0}
.intake__faces i + i{margin-left:-8px; background:var(--i-blue)}

/* Vallem WP: lines 76 to 116, re-keyed onto Jetpack's markup. .intake__form is the className on the
   jetpack/contact-form block; every field is Jetpack's own element (jetpack.md 3). */
.intake .jetpack-contact-form-container{margin-top:28px}
.intake .wp-block-jetpack-contact-form.intake__form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px;
	--jetpack--contact-form--input-height:auto}
.intake .intake__form > *{margin:0; min-width:0}
.intake .intake__form > :not(.grunion-field-width-50-wrap){grid-column:1 / -1}
.intake .wp-block-jetpack-contact-form .grunion-field-width-50-wrap{width:auto; max-width:none; flex:none}

/* Labels and the chips legend */
.intake .intake__form .grunion-field-label{display:block; margin:0 0 6px; padding:0; font-size:14px; font-weight:500; line-height:1.4; color:var(--i-ink)}
.intake .intake__form .intake__opt{font-weight:400; color:var(--i-ink-muted)}

/* The box: text inputs, and the select's wrapper (Jetpack zeroes the select's own border with !important) */
.intake .intake__form input.grunion-field:not([type="radio"]),
.intake .intake__form .contact-form__select-wrapper{display:block; width:100%; height:44px; margin:0; border:1px solid var(--i-border);
	border-radius:6px; background-color:#fff; color:var(--i-ink); font:inherit; font-size:16px; line-height:1.5;
	letter-spacing:-.011em; box-shadow:none; transition:border-color .15s}
.intake .intake__form input.grunion-field:not([type="radio"]){padding:9px 12px}
.intake .intake__form .contact-form__select-wrapper{padding:0; position:relative}
.intake .intake__form input.grunion-field:focus,
.intake .intake__form .contact-form__select-wrapper:has(select:focus){border-color:var(--i-blue); outline:2px solid rgba(24,60,221,.2); outline-offset:1px}
.intake .intake__form input.grunion-field[aria-invalid="true"],
.intake .intake__form .contact-form__select-wrapper:has(select[aria-invalid="true"]){border-color:var(--i-danger)}
.intake .intake__form input.grunion-field[aria-invalid="true"]:focus,
.intake .intake__form .contact-form__select-wrapper:has(select[aria-invalid="true"]:focus){outline-color:rgba(217,45,32,.2)}

/* Select: text in the select, chevron on Jetpack's own icon element */
.intake .intake__form .contact-form__select-wrapper select{height:42px; min-width:0; padding:9px 40px 9px 12px; font:inherit; font-size:16px;
	line-height:1.5; letter-spacing:-.011em; color:var(--i-ink); cursor:pointer}
.intake .intake__form .contact-form__select-wrapper select:invalid{color:var(--i-ink-muted)}
.intake .intake__form .contact-form__select-wrapper select option{color:var(--i-ink)}
/* The focus ring is the wrapper's; without this the UA's own ring draws inside it on keyboard focus. */
.intake .intake__form .contact-form__select-wrapper select:focus{outline:none}
.intake .intake__form .contact-form__select-wrapper .jetpack-field-dropdown__icon::after{width:16px; height:16px; inset-inline-end:12px; top:50%;
	border:0; transform:translateY(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2352525B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* Error line: Jetpack's per-field error div, filled by the theme script */
.intake .intake__form .contact-form__input-error{display:flex; gap:6px; max-height:none; margin:6px 0 0; opacity:1; overflow:visible; transform:none;
	transition:none; font-size:13.5px; line-height:1.4; color:var(--i-danger-ink)}
.intake .intake__form .contact-form__input-error:has(> span:last-child:empty){display:none}
.intake .intake__form .contact-form__input-error .contact-form__warning-icon{display:none}
.intake .intake__form .contact-form__input-error::before{content:""; flex:none; width:14px; height:14px; margin-top:2px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23D92D20'/%3E%3Cpath d='M7 3.6v4.1' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.1' r='.95' fill='white'/%3E%3C/svg%3E") center/14px no-repeat}

/* Chips */
.intake .intake__form .jetpack-field-multiple__fieldset{margin:0; padding:0; border:0; min-inline-size:0}
.intake .intake__form .grunion-field-radio-wrap .grunion-radio-options{display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px; padding:0}
.intake .intake__form .grunion-field-radio-wrap .grunion-radio-options .contact-form-field{position:relative; display:block; margin:0; cursor:pointer; font-size:inherit}
.intake .intake__form .grunion-field-radio-wrap .grunion-radio-options input.radio{position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0;
	margin:0; padding:0; border:0; opacity:0; transform:none; cursor:pointer; appearance:none}
.intake .intake__form .grunion-radio-options .grunion-radio-label{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
	border:1px solid var(--i-border); border-radius:6px; background:#fff; font-size:14px; font-weight:500; color:var(--i-ink);
	transition:border-color .15s,background-color .15s}
.intake .intake__form .grunion-radio-options .grunion-radio-label::before{content:""; flex:none; width:14px; height:14px; border-radius:50%;
	border:1.5px solid #A1A1AA; transition:border-color .15s,background .15s}
.intake .intake__form .grunion-radio-options input:checked + .grunion-radio-label{border-color:var(--i-blue); background:var(--i-on-blue)}
.intake .intake__form .grunion-radio-options input:checked + .grunion-radio-label::before{border-color:var(--i-blue); background:radial-gradient(circle,var(--i-blue) 0 3px,transparent 3.5px)}
.intake .intake__form .grunion-radio-options input:focus-visible + .grunion-radio-label{outline:2px solid rgba(24,60,221,.35); outline-offset:1px}

/* Submit and the phone line */
.intake .intake__form .wp-block-button.intake__cta{margin-top:6px; min-height:0}
.intake .intake__form .wp-block-button.intake__cta .wp-block-button__link{width:100%; min-height:0; justify-content:center; padding-block:.8em}
.intake .intake__form .wp-block-button.intake__cta .wp-block-button__link[aria-disabled="true"]{cursor:progress}
.intake .intake__form > .intake__alt{margin-top:-2px} /* 16px in the prototype, minus the 18px row gap */

/* A checked chip keeps its blue border on hover: in V2 the :checked rule out-ranks the :hover one. */
@media (hover:hover){
	.intake .intake__form input.grunion-field:not([type="radio"]):hover:not(:focus,[aria-invalid="true"]),
	.intake .intake__form .contact-form__select-wrapper:hover:not(:has(select:focus),:has(select[aria-invalid="true"])),
	.intake .intake__form .grunion-radio-options .contact-form-field:hover input:not(:checked) + .grunion-radio-label{border-color:#A1A1AA}
}
@media (max-width:600px){
	.intake .wp-block-jetpack-contact-form.intake__form{grid-template-columns:minmax(0,1fr); gap:16px}
	.intake .intake__form > .intake__alt{margin-top:0}
	.intake .intake__form .grunion-field-radio-wrap .grunion-radio-options{gap:6px}
	.intake .intake__form .grunion-radio-options .grunion-radio-label{padding:0 13px}
	.intake .intake__form .grunion-radio-options .grunion-radio-label::before{display:none}
}

.intake__alt{margin-top:16px; font-size:14px; line-height:1.5; color:var(--i-ink-muted); text-align:center}
.intake__alt a,.intake__done a{color:var(--i-ink); font-weight:500; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--i-border); text-underline-offset:3px}
@media (hover:hover){
	.intake__close:hover{background:var(--i-surface); color:var(--i-ink)}
	.intake__input:hover:not(:focus,[aria-invalid="true"]),.intake__chip:hover span,.intake__back:hover{border-color:#A1A1AA}
	.intake__back:hover{background:var(--i-surface)}
	.intake__alt a:hover,.intake__done a:hover{text-decoration-color:currentColor}
}

/* Done */
.intake__done{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex:1; padding-block:12px}
.intake__done-icon{display:grid; place-items:center; width:48px; height:48px; margin-bottom:24px; border-radius:50%; background:var(--i-tick)}
.intake__done .intake__lede{max-width:30em}
.intake__done .intake__lede b{font-weight:600; color:var(--i-ink); overflow-wrap:anywhere}
.intake__recap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 24px; width:100%; margin-top:24px; padding:18px 20px;
	border-radius:6px; background:var(--i-surface); font-size:14.5px; line-height:1.45}
.intake__recap dt{color:var(--i-ink-muted)}
.intake__recap dd{font-weight:500; color:var(--i-ink); overflow-wrap:anywhere}
.intake__back{margin-top:24px; height:44px; padding:0 18px; border:1px solid var(--i-border); border-radius:6px; background:#fff;
	color:var(--i-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:border-color .15s,background-color .15s}
.intake__back:focus-visible{outline:2px solid var(--i-blue); outline-offset:2px}
.intake__done .intake__alt{margin-top:20px; text-align:left}

/* Motion: about 200ms, a fade and a small rise. Closing is shorter. */
.intake[open] .intake__card{animation:intake-in .22s var(--i-ease) both}
.intake[open]::backdrop{animation:intake-fade .2s ease-out both}
.intake.is-closing .intake__card{animation:intake-out .14s ease-in both}
.intake.is-closing::backdrop{animation:intake-fade .14s ease-in reverse both}
.intake__done:not([hidden]){animation:intake-done .24s var(--i-ease) both}
@keyframes intake-in{from{opacity:0; transform:translateY(10px) scale(.985)}}
@keyframes intake-out{to{opacity:0; transform:translateY(6px) scale(.99)}}
@keyframes intake-fade{from{opacity:0}}
@keyframes intake-done{from{opacity:0; transform:translateY(6px)}}
@keyframes intake-rise{from{opacity:0; transform:translateY(24px)}}

/* Tablet: one column. The reasons shrink to a band of ticked lines above the form. */
@media (max-width:860px){
	.intake__card{grid-template-columns:minmax(0,1fr); max-width:620px}
	.intake__why{gap:16px; padding:24px 24px 22px}
	.intake__offer{padding-right:44px}
	.intake__price{margin-top:6px}
	.intake__price strong{font-size:30px}
	.intake__fixed{margin-top:4px; font-size:14px}
	.intake__reasons{gap:6px}
	.intake__reasons li{grid-template-columns:16px minmax(0,1fr); column-gap:10px}
	.intake__reasons li::before{grid-row:auto; width:16px; height:16px; margin-top:2px; background-size:16px}
	.intake__reasons strong{font-size:14.5px; font-weight:500}
	.intake__reasons span,.intake__quote{display:none}
	.intake__main{padding:28px 24px 28px}
	.intake__title{padding-right:0; font-size:26px}
	.intake__close{top:12px; right:12px; color:#fff}
	.intake__close:focus-visible{outline-color:#fff}
}
@media (max-width:860px) and (hover:hover){
	.intake__close:hover{background:rgba(255,255,255,.1); color:#fff}
}
/* Phone: a full-height sheet that rises from below. */
@media (max-width:600px){
	.intake{padding:0}
	.intake__card{max-width:none; min-height:100%; border-radius:0; box-shadow:none; grid-template-rows:auto 1fr}
	.intake__form{grid-template-columns:minmax(0,1fr); gap:16px}
	.intake__chiprow{gap:6px}
	.intake__chip span{padding:0 13px}
	.intake__chip span::before{display:none}
	.intake[open] .intake__card{animation-name:intake-rise}
}

@media (prefers-reduced-motion:reduce){
	.intake[open] .intake__card,.intake[open]::backdrop,.intake.is-closing .intake__card,.intake.is-closing::backdrop,.intake__done:not([hidden]){animation:none}
}

/* Vallem WP: the submission slot, Jetpack's second .contact-form__error. The prototype never sends,
   so it has no failure state; intake.js writes Jetpack's own message here, styled as .intake__error. */
.intake .intake__form .contact-form__error.show-errors{display:flex; gap:6px; width:auto; margin:6px 0 0; padding:0; border:0;
	background:none; text-wrap:wrap; font-size:13.5px; line-height:1.4; color:var(--i-danger-ink)}
.intake .intake__form .contact-form__error.show-errors::before{content:""; flex:none; width:14px; height:14px; margin-top:2px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23D92D20'/%3E%3Cpath d='M7 3.6v4.1' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.1' r='.95' fill='white'/%3E%3C/svg%3E") center/14px no-repeat}
.intake .intake__form .contact-form__error.show-errors:focus{outline:none}

/* Editor only. The block is a div there, not a dialog: show the card inline, with the form and the
   done state under each other. The canvas is an iframe, so these rules are not prefixed there, and
   core's flow gap (:root :where(.is-layout-flow) > *, 24px) prints after this file and beats the
   prototype's one-class margins. It goes, and the prototype's text margins come back. */
.editor-styles-wrapper .intake{position:relative; inset:auto; width:auto; height:auto; overflow:visible; padding:0; margin-block:2rem}
.editor-styles-wrapper .is-layout-constrained > .intake.vallem-crc-intake{max-width:1080px}
/* The close button's core/html wrapper would take the card's first grid cell; on the front end the
   button is absolute and no grid item. */
.editor-styles-wrapper .intake__card > .wp-block-html:first-child{position:absolute; top:0; right:0; z-index:2; width:68px; height:68px}
.editor-styles-wrapper .intake :where(.is-layout-flow) > *{margin-block-start:0}
.editor-styles-wrapper .intake .intake__price,.editor-styles-wrapper .intake .intake__fixed,.editor-styles-wrapper .intake .intake__lede{margin-top:10px}
.editor-styles-wrapper .intake .intake__who{margin-top:18px}
.editor-styles-wrapper .intake .intake__quote{margin-top:auto}
.editor-styles-wrapper .intake .intake__done .intake__alt{margin-top:20px}
.editor-styles-wrapper .intake .intake__done{margin-top:28px; padding-top:28px; border-top:1px dashed var(--i-border)}