/* Gutenberg content added to an application page appears beneath the tool.
 * The application shell intentionally makes WordPress blocks full viewport
 * width. Reset that behaviour only inside this editorial region. */
.wto-page-editor-content { box-sizing:border-box; width:min(100% - clamp(2rem, 7vw, 5rem), 74rem); max-width:74rem; margin:clamp(3rem, 7vw, 6rem) auto 0; padding:clamp(2rem, 5vw, 4rem) 0 0; border-top:1px solid color-mix(in srgb, var(--wto-text, #18364d) 18%, transparent); color:var(--wto-text, #18364d); text-align:left !important; }
.wto-page-editor-content__inner { box-sizing:border-box; width:100%; max-width:100%; margin:0; text-align:left !important; }
.wto-tool-breadcrumbs { display:flex; justify-content:center; gap:.55rem; width:min(100% - 2rem,72rem); margin:.7rem auto clamp(1.5rem,3vw,2.5rem); font-size:.9rem; color:var(--wto-muted,#527084); }
.wto-tool-breadcrumbs a { color:var(--wto-accent,#168bd1); text-decoration:none; }
.wto-tool-breadcrumbs a:hover { text-decoration:underline; }
.wto-page-editor-content *, .wto-page-editor-content *::before, .wto-page-editor-content *::after { box-sizing:border-box; }
body.wto-learning-shell .wto-page-editor-content .wp-block-group,
body.wto-learning-shell .wto-page-editor-content .wp-block-column { width:auto !important; max-width:100% !important; flex:initial !important; }
.wto-page-editor-content .wp-block-group { width:100% !important; max-width:100% !important; margin-right:0 !important; margin-left:0 !important; text-align:left !important; }
.wto-page-editor-content h2, .wto-page-editor-content h3, .wto-page-editor-content h4 { max-width:none; margin-left:0!important; margin-right:0!important; color:var(--wto-text, #18364d); line-height:1.2; text-align:left !important; }
.wto-page-editor-content h2 { position:relative; margin-top:2.75rem; padding-bottom:.72rem; border-bottom:1px solid color-mix(in srgb, var(--wto-text, #18364d) 14%, transparent); font-size:clamp(1.7rem, 3vw, 2.15rem); }
.wto-page-editor-content h2::after { content:""; position:absolute; left:0; bottom:-1px; width:3.15rem; height:3px; border-radius:999px; background:var(--wto-accent, #168bd1); }
.wto-page-editor-content h3 { margin-top:1.75rem; font-size:clamp(1.3rem, 2.4vw, 1.7rem); }
.wto-page-editor-content p { max-width:none; margin-left:0!important; margin-right:0!important; color:var(--wto-subtext, #527084); line-height:1.75; text-align:left !important; }
/* Lists must use the complete editorial column. A character-width cap makes
 * ordinary bullet items look as if they contain manual line breaks. */
.wto-page-editor-content :is(ul, ol, .wp-block-list) { width:100% !important; max-width:none !important; }
.wto-page-editor-content li { width:auto !important; max-width:none !important; margin-left:0!important; margin-right:0!important; color:var(--wto-subtext, #527084); line-height:1.75; text-align:left !important; }
.wto-page-editor-content :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container){text-align:left!important;justify-content:flex-start!important;align-items:stretch!important}.wto-page-editor-content :is(.has-text-align-center,.has-text-align-right){text-align:left!important}.wto-page-editor-content :is(ul,ol,.wp-block-list,.wp-block-quote,figure){margin-left:0!important;margin-right:0!important}.wto-page-editor-content>.wto-page-editor-content__inner>:is(h2,h3,h4,p,ul,ol,.wp-block-list,.wp-block-quote){margin-left:0!important;margin-right:0!important}
.wto-page-editor-content a { color: var(--wto-accent, #168bd1); }
.wto-page-editor-content figure { margin: 2rem 0; }
.wto-page-editor-content img { max-width: 100%; height: auto; border-radius: .6rem; }
/* Add this class to a Gutenberg Image block when an instructional graphic should fill the page content area. */
.wto-page-editor-content figure.wp-block-image.wto-content-width-image { width: 100% !important; max-width: 100% !important; }
.wto-page-editor-content figure.wp-block-image.wto-content-width-image img { display: block; width: 100% !important; max-width: none !important; height: auto !important; }
/* Some tool pages append a Gutenberg infographic directly below their shortcode.
 * Keep those instructional images centered and full-width in that same way. */
.wto-tool-content figure.wp-block-image.wto-content-width-image { width: 100% !important; max-width: 100% !important; margin: 2rem auto !important; }
.wto-tool-content figure.wp-block-image.wto-content-width-image img { display: block; width: 100% !important; max-width: none !important; height: auto !important; }
/* Keep portrait instructional infographics centered without stretching them
 * beyond their intended 900px artwork width. */
.wto-page-editor-content figure.wp-block-image.wto-infographic-centered { width: min(100%, 900px) !important; max-width: 900px !important; margin: 2rem auto !important; }
.wto-page-editor-content figure.wp-block-image.wto-infographic-centered img { display: block; width: 100% !important; height: auto !important; }
.wto-page-editor-content .wp-block-table { overflow-x: auto; }
.wto-page-editor-content table { width: 100%; border-collapse: collapse; }
.wto-page-editor-content th, .wto-page-editor-content td { padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--wto-text, #18364d) 18%, transparent); text-align: left; }
.wto-page-editor-content th { background: color-mix(in srgb, var(--wto-accent, #168bd1) 11%, transparent); }
.wto-page-editor-content .wp-block-quote { margin: 2rem 0; padding: 1rem 1.25rem; border-left: .3rem solid var(--wto-accent, #168bd1); background: color-mix(in srgb, var(--wto-accent, #168bd1) 8%, transparent); }
.wto-page-editor-content .wp-block-columns { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; width:100% !important; max-width:100% !important; gap:1.25rem; margin:2rem 0; text-align:left !important; }
.wto-page-editor-content .wp-block-column { min-width:0; width:auto !important; padding:1.35rem; border:1px solid color-mix(in srgb,var(--wto-text,#18364d) 16%,transparent); border-radius:.8rem; background:color-mix(in srgb,var(--wto-bg,#fff) 88%,var(--wto-accent,#168bd1)); text-align:left !important; }
.wto-page-editor-content .wp-block-column :is(h2,h3,h4,p,li) { max-width:none; text-align:left !important; }
.wto-page-editor-content .wp-block-column h3:first-child { margin-top:0; }
.wto-page-editor-content .wto-tool-content__cta { margin:3.25rem 0 0; padding:clamp(1.5rem,4vw,2.5rem); border-radius:1rem; background:color-mix(in srgb,var(--wto-accent,#168bd1) 11%,var(--wto-bg,#fff)); border:1px solid color-mix(in srgb,var(--wto-accent,#168bd1) 25%,transparent); }
.wto-page-editor-content .wto-tool-content__cta h2 { margin-top:0; }
.wto-page-editor-content .wto-tool-content__cta a { font-weight:700; }
.wto-latency {
    width: min(100%, 1120px);
    margin: auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid 
color-mix(in srgb, var(--wto-muted) 42%, transparent);
    border-radius: 18px;
    background: 
color-mix(in srgb, var(--wto-bg) 88%, #000);
    box-shadow: 0 1.5rem 3rem #0002;
    outline: 0;
}

/* Editorial pages must use the full readable column. Do not constrain normal
 * paragraphs to a character count: that made otherwise ordinary copy look
 * like it contained manual line breaks on wider screens. */
body.wto-learning-shell .wto-page-editor-content .wto-tool-content :is(p, li) {
	max-width: none !important;
	width: auto !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal;
}

/* Gutenberg columns are used as information cards. Keep every card's content
 * comfortably away from its edge, including headings and lists. */
body.wto-learning-shell .wto-page-editor-content .wp-block-columns > .wp-block-column {
	padding: clamp(1.25rem, 2vw, 1.8rem) !important;
}
body.wto-learning-shell .wto-page-editor-content .wp-block-columns > .wp-block-column > :first-child {
	margin-top: 0 !important;
}
body.wto-learning-shell .wto-page-editor-content .wp-block-columns > .wp-block-column > :last-child {
	margin-bottom: 0 !important;
}

/* Replace these three editable placeholders with screenshots in Gutenberg. */
.wto-page-editor-content .wto-how-it-works-screens {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	margin-top: 1.25rem;
}
.wto-page-editor-content .wto-how-it-works-screens .wp-block-column {
	background: transparent;
}
body.wto-learning-shell .wto-page-editor-content .wto-screenshot-placeholder {
	display: grid;
	place-items: center;
	min-height: 11rem;
	padding: 1.25rem !important;
	border: 2px dashed color-mix(in srgb, var(--wto-accent, #168bd1) 45%, transparent);
	border-radius: .75rem;
	background: color-mix(in srgb, var(--wto-accent, #168bd1) 7%, var(--wto-bg, #fff));
	text-align: center !important;
}
/* This selector intentionally carries the same Gutenberg column specificity
 * so placeholder text does not touch the dashed frame before an image is
 * added in the editor. */
body.wto-learning-shell .wto-page-editor-content .wp-block-columns.wto-how-it-works-screens > .wp-block-column.wto-screenshot-placeholder {
	padding: 1.25rem !important;
}
.wto-page-editor-content .wto-screenshot-placeholder p {
	margin: 0 !important;
	max-width: none !important;
	text-align: center !important;
}
.wto-page-editor-content .wto-screenshot-placeholder p + p {
	margin-top: .5rem !important;
}

/* Final editorial CTA: this is intentionally more generous than the small
 * information cards, while its links stay compact and centred as one action
 * row instead of looking like body copy pressed against the card edge. */
body.wto-learning-shell .wto-page-editor-content .wto-tool-content__cta {
	margin: 3rem 0 0 !important;
	padding: clamp(1.75rem, 4vw, 2.75rem) !important;
	text-align: center !important;
}
body.wto-learning-shell .wto-page-editor-content .wto-tool-content__cta :is(h2, h3, p) {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
body.wto-learning-shell .wto-page-editor-content .wto-tool-content__cta h2 {
	margin-bottom: .8rem !important;
}
body.wto-learning-shell .wto-page-editor-content .wto-tool-content__cta p {
	margin-bottom: 1rem !important;
}
body.wto-learning-shell .wto-page-editor-content .wto-tool-content__cta a {
	display: inline-block;
	margin: .15rem .35rem !important;
	font-size: .92rem;
	line-height: 1.45;
	text-align: center !important;
}
@media (max-width: 700px) { .wto-page-editor-content { width:min(100% - 1.5rem, 74rem); margin-top:3rem; padding-top:2rem; } .wto-page-editor-content .wp-block-columns { grid-template-columns:1fr !important; } }