/* Revision 9 marketing composition. The owner-requested Flight Deck experiment
   supplies the pale outer canvas and navy/light hierarchy, not replacement UI
   controls. This file applies only to the four special marketing pages. */
.www-marketing { --www-canvas:#dce4e9; --www-signal:#67c9eb; }
.www-marketing .www-marketing-main { margin-block:24px 0; }
.www-marketing .www-band-white { --www-band-fill:#fff; }
.www-marketing .www-band-steel { --www-band-fill:var(--www-canvas); }
.www-marketing .www-chapter { margin:0; padding-block:80px; }
.www-marketing .www-section-heading { margin:0 0 40px; }
.www-marketing .www-section-heading h2 { font-size:36px; line-height:1.2; max-width:30ch; }
.www-marketing .www-eyebrow { margin:0 0 18px; font-size:11px; line-height:1.5; letter-spacing:.12em; font-weight:600; }
.www-marketing .www-cta-group { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:26px 0 0; }
.www-marketing .www-cta-group .dpu-btn { min-width:132px; }
.www-marketing .www-band-navy { color:var(--dpu-soft-blue); }
.www-marketing :is(.www-band-navy,.www-story-reverse,.www-catalog > .www-section-heading) { background-image:radial-gradient(ellipse 65% 100% at 50% 0,rgba(64,125,157,.14),transparent 75%); }
.www-marketing .www-band-navy :is(h1,h2,h3),.www-marketing .www-story-reverse :is(h2,h3) { color:#fff; }
.www-marketing .www-band-navy .www-eyebrow,.www-marketing .www-story-reverse .www-eyebrow { color:var(--www-signal); }
.www-marketing .www-band-navy p.www-eyebrow { color:var(--www-signal); }
.www-marketing .www-band-navy .www-lead,.www-marketing .www-band-navy > .www-section-heading > p:not(.www-eyebrow) { color:#c2d4df; }
.www-marketing .www-band-navy p a:not(.dpu-btn),.www-marketing .www-story-reverse p a:not(.dpu-btn) { color:#fff; text-decoration:underline; }
.www-marketing .www-band-navy p a:not(.dpu-btn):hover,.www-marketing .www-story-reverse p a:not(.dpu-btn):hover { color:var(--www-signal); }
.www-marketing .www-band-navy a.www-inverse-action { color:#fff; border-color:#648296; background:transparent; }
.www-marketing .www-band-navy a.www-inverse-action:hover { background:#24485f; border-color:#8cadc2; }
.www-marketing :is(.www-hero,.www-configure,.www-builder,.www-edition,.www-story-reverse) a:focus-visible { outline-color:#87d7f1; }

/* The navy introduction and the light schedule read as one product stage. */
.www-marketing .www-hero { display:block; padding:64px 0 56px; }
.www-marketing .www-hero-copy { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:none; }
.www-marketing .www-hero h1 { font-size:64px; line-height:1.04; max-width:10ch; margin:0; }
.www-marketing .www-hero .www-lead { font-size:18px; line-height:1.7; margin:0; }
.www-marketing .www-hero .www-experience { font-size:14px; line-height:1.7; color:#a8bfce; margin:12px 0 0; }
.www-marketing .www-hero .www-framework-links { margin-top:22px; gap:4px 18px; }
.www-marketing .www-hero .www-framework-links > span { color:#c2d4df; }
.www-marketing .www-hero .www-framework-links a { color:#fff; text-decoration:none; }
.www-marketing .www-hero .www-framework-links a:hover { color:var(--www-signal); text-decoration:underline; }
.www-marketing .www-hero-media { margin:44px auto 0; max-width:1024px; }
.www-marketing .www-screen-caption { display:block; padding:11px 16px; background:#092234; color:#c2d4df; font-size:11px; line-height:1.5; font-weight:500; letter-spacing:.045em; }
.www-marketing .www-screen { position:relative; display:block; overflow:hidden; background:#fff; }
.www-marketing .www-screen img { position:absolute; width:var(--screen-width); max-width:none; height:auto; left:var(--screen-left); top:var(--screen-top); display:block; }
.www-marketing :is(.www-hero-media,.www-story-media,.www-builder-media) a { display:block; }

/* Customer proof is a single white interlude, with all identities visible. */
.www-marketing .www-trust { margin:0; padding:48px 0; border:0; }
.www-marketing .www-trust h2 { font-size:21px; }
.www-marketing .www-logo-grid { row-gap:8px; }

/* Three bounded priorities on a visible outer canvas. The middle chapter uses
   the inverse treatment to distinguish the complex-scenario application. */
.www-marketing .www-stories { display:grid; gap:28px; }
.www-marketing .www-story { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:36px; padding:40px; background:#fff; border:1px solid #c3d0da; border-radius:6px; }
.www-marketing .www-story-copy,.www-marketing .www-story-media { grid-column:auto; grid-row:auto; }
.www-marketing .www-story-frame { display:block; border:1px solid #b8c8d3; border-radius:4px; overflow:hidden; }
.www-marketing .www-story h2 { font-size:34px; line-height:1.15; margin:0 0 22px; }
.www-marketing .www-story p { font-size:16px; line-height:1.7; }
.www-marketing .www-story .www-eyebrow { font-size:11px; }
.www-marketing .www-story-reverse { background:var(--dpu-navy); border-color:var(--dpu-navy); color:#d5e3eb; }
.www-marketing .www-story-reverse .www-screen-caption { background:#092234; }
.www-marketing .www-home-content { gap:24px 48px; }
.www-marketing .www-home-content > .www-section-heading { padding:0; border:0; }
.www-marketing .www-home-content > .section { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; border-top:3px solid var(--dpu-navy); padding-top:24px; }
.www-marketing .www-home-content > .section h2 { margin-bottom:18px; }
.www-marketing .www-home-content > .section > .image-right { height:260px; justify-content:flex-start; }
.www-marketing .www-home-content > .section > .image-right img { object-position:left center; }
.www-marketing .www-home-content > .section > ul { margin-top:0; align-self:stretch; align-content:start; }
.www-marketing .www-builder { grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:56px; }
.www-marketing .www-builder h2 { font-size:38px; }
.www-marketing .www-builder .www-eyebrow { font-size:11px; color:var(--www-signal); }
.www-marketing .www-home-tutorials .www-tutorial-group { background:#fff; border:1px solid #c3d0da; border-top:3px solid var(--dpu-navy); padding:28px; }
.www-marketing .www-home-tutorials .www-tutorial-groups { gap:24px; }
.www-marketing .www-news #news-list { margin:0; }

/* The title and first decision share one navy introduction on every lander. */
.www-marketing .www-editions-band { padding:56px 0 64px; }
.www-marketing .www-editions-band .dpu-page-heading { text-align:center; margin:0 auto 36px; max-width:920px; }
.www-marketing .www-editions-band h1 { font-size:42px; line-height:1.15; margin:0; text-wrap:balance; }
.www-marketing .www-edition-grid { max-width:1040px; gap:24px; }
.www-marketing .www-edition { padding:30px 32px; border:1px solid #2c485b; border-top:3px solid #e3bc5e; border-radius:5px; background:#061a29; color:#d2e1e8; }
.www-marketing .www-edition-pro { border-top-color:var(--dpu-blue); }
.www-marketing .www-edition :is(h2,h3) { color:#fff; }
.www-marketing .www-edition > h2 + p { color:#adc4d2; border-color:#2c485b; }
.www-marketing .www-edition .www-price-separator { color:#adc4d2; }
.www-marketing .www-edition p a:not(.dpu-btn) { color:#9cdef6; }
.www-marketing .www-edition p a:not(.dpu-btn):hover { color:#fff; }
.www-marketing .www-edition .www-card-actions { padding-top:24px; }

/* A dark title rail introduces one light, skimmable component workspace. */
.www-marketing .www-catalog { display:block; }
.www-marketing .www-catalog > .www-section-heading { background:var(--dpu-navy); padding:36px; margin:0; border-radius:5px 5px 0 0; text-align:center; }
.www-marketing .www-catalog > .www-section-heading h2 { color:#fff; font-size:34px; line-height:1.2; max-width:34ch; margin:0 auto 18px; text-wrap:balance; }
.www-marketing .www-catalog > .www-section-heading > p { color:#c2d4df; font-size:15px; }
.www-marketing .www-catalog > .www-section-heading .www-eyebrow { color:var(--www-signal); font-size:11px; }
.www-marketing .www-component-list { grid-template-columns:minmax(0,1fr); gap:1px; margin:0; background:var(--dpu-line); border:1px solid #b8c8d3; border-radius:0 0 5px 5px; align-items:start; }
.www-marketing .www-component-row { border:0; border-radius:0; background:#fff; }
.www-marketing .www-component-row[open] { grid-column:1/-1; }
.www-marketing .www-component-row > summary { grid-template-columns:202px minmax(0,1fr) 16px; gap:28px; padding:22px 28px; box-sizing:border-box; }
.www-marketing .www-component-row .thumb { width:202px; height:152px; box-sizing:border-box; border:1px solid #b8c8d3; border-radius:3px; overflow:hidden; background:#fff; }
.www-marketing .www-component-row .thumb img { object-fit:cover; object-position:left top; }
.www-marketing .www-component-row .view-title { font-size:20px; }
.www-marketing .www-labels .label { font-size:11px; font-weight:600; letter-spacing:0; border-radius:4px; border:1px solid transparent; }
.www-marketing .www-labels .label-lite { color:#6a5013; background:#fff5d9; border-color:#e7d49b; }
.www-marketing .www-labels .label-pro { color:#075685; background:#e8f3fa; border-color:#b9d6e8; }
.www-marketing .www-configure { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; text-align:center; }
.www-marketing .www-configure > .www-section-heading { text-align:left; margin:0; }
.www-marketing .www-configure > .www-section-heading h2 { font-size:32px; }
.www-marketing .www-tools { align-items:stretch; }
.www-marketing .www-tool { padding:0 24px; }
.www-marketing .www-tool .action-button { min-width:0; width:100%; max-width:216px; }
.www-marketing .www-tutorial-chapter > .www-section-heading { text-align:center; }
.www-marketing .www-tutorial-chapter > .www-section-heading h2 { max-width:none; }
.www-marketing .www-tutorials { gap:36px; }
.www-marketing .www-tutorial { background:#fff; border:1px solid #c3d0da; border-top:3px solid var(--dpu-navy); padding:24px; }
.www-marketing .www-tutorial-copy { padding-top:24px; }
.www-marketing .www-tutorial-media { height:auto; aspect-ratio:auto; }
.www-marketing .www-tutorial-media > a { position:relative; display:block; width:calc(100% - 2px); height:auto; aspect-ratio:var(--tutorial-ratio,1.6); overflow:hidden; border:1px solid #b8c8d3; border-radius:3px; box-sizing:content-box; background:#fff; }
.www-marketing .www-tutorial-window { position:absolute; display:block; overflow:hidden; width:100%; height:100%; inset:0; }
.www-marketing .www-tutorial-window img { position:absolute; display:block; max-width:none; width:var(--tutorial-image-width); height:var(--tutorial-image-height); left:var(--tutorial-image-left); top:var(--tutorial-image-top); }
.www-marketing .www-tutorial-archive { margin-top:40px; }

@media(max-width:1050px) {
 .www-marketing .www-component-row > summary { grid-template-columns:202px minmax(0,1fr) 16px; gap:22px; padding:20px; }
 .www-marketing .www-configure { display:block; }
 .www-marketing .www-configure > .www-section-heading { text-align:center; margin:0 0 36px; }
 .www-marketing .www-configure > .www-section-heading h2 { max-width:none; }
}
@media(max-width:900px) {
 .www-marketing .www-hero-copy { gap:32px; }
 .www-marketing .www-hero h1 { font-size:54px; }
 .www-marketing .www-story { grid-template-columns:1fr; padding:32px; gap:28px; }
 .www-marketing .www-story-media { width:100%; max-width:740px; }
 .www-marketing .www-component-list { grid-template-columns:minmax(0,1fr); }
 .www-marketing .www-component-row > summary { grid-template-columns:202px minmax(0,1fr) 16px; min-height:0; }
 .www-marketing .www-builder { grid-template-columns:1fr; gap:32px; }
 .www-marketing .www-builder-copy { max-width:600px; }
}
@media(max-width:720px) {
 .www-marketing .www-chapter { padding-block:48px; }
 .www-marketing .www-section-heading { margin-bottom:28px; }
 .www-marketing .www-section-heading h2 { font-size:30px; }
 .www-marketing .www-hero { padding:44px 0 36px; }
 .www-marketing .www-hero-copy { display:block; }
 .www-marketing .www-hero h1 { font-size:48px; margin-bottom:24px; }
 .www-marketing .www-hero .www-lead { font-size:17px; }
 .www-marketing .www-hero-media { margin-top:32px; }
 .www-marketing .www-screen-caption { padding:9px 12px; font-size:10px; letter-spacing:0; }
 .www-marketing .www-trust { padding-block:36px; }
 .www-marketing .www-story { padding:24px; gap:24px; }
 .www-marketing .www-story h2 { font-size:30px; }
 .www-marketing .www-story p { font-size:15px; }
 .www-marketing .www-story .www-screen-caption { font-size:10px; }
 .www-marketing .www-home-content { gap:36px; }
 .www-marketing .www-home-content > .section > .image-right { height:auto; }
 .www-marketing .www-builder h2 { font-size:32px; }
 .www-marketing .www-home-tutorials .www-tutorial-group { padding:24px; }
 .www-marketing .www-editions-band { padding:40px 0; }
 .www-marketing .www-editions-band h1 { font-size:32px; }
 .www-marketing .www-edition { padding:26px 22px; }
 .www-marketing .www-catalog > .www-section-heading { padding:28px 24px; }
 .www-marketing .www-component-row > summary { grid-template-columns:202px minmax(0,1fr) 12px; gap:12px; padding:16px 12px; }
 .www-marketing .www-component-row .view-title { font-size:18px; }
 .www-marketing .www-component-row .summary-text { font-size:13px; }
 .www-marketing .www-configure > .www-section-heading h2 { font-size:30px; }
 .www-marketing .www-tool { padding:0; }
 .www-marketing .www-tool + .www-tool { padding-top:28px; margin-top:28px; }
 .www-marketing .www-tutorial { padding:20px; }
 .www-marketing .www-tutorial-media { height:auto; }
 .www-marketing .www-tutorials { gap:28px; }
}
@media(max-width:540px) {
 .www-marketing .www-hero .www-cta-group .dpu-btn { min-width:122px; }
 .www-marketing .www-catalog > .www-section-heading { padding:28px 20px; }
 .www-marketing .www-catalog > .www-section-heading h2 { font-size:28px; }
 .www-marketing .www-component-row > summary { grid-template-columns:minmax(0,1fr) 12px; padding:18px; }
 .www-marketing .www-component-row .thumb { grid-column:1; grid-row:1; width:202px; height:152px; }
 .www-marketing .www-component-row .summary-text { grid-column:1/-1; grid-row:2; }
 .www-marketing .www-component-row > summary::after { grid-column:2; grid-row:1; }
}