/* WWW composition. Shared DayPilot UI v3 owns the shell, typography and controls;
   these rules retain site content helpers, marketing sections and quick actions. */
html { scrollbar-gutter: stable; }
.www-copy { min-width: 0; }
.www-copy .article-text { min-width: 0; overflow-x: auto; }
.www-copy :is(h1,h2,h3,h4) a { text-decoration: none; }
.www-copy :is(h1,h2,h3,h4) a:hover { text-decoration: underline; }
.www-copy li > p { padding: 0; margin: 0; }
.www-copy li > p:first-child { display: inline; }
.www-copy pre { max-width: 100%; overflow: auto; }
.www-copy img { max-width: 100%; height: auto; }
.www-copy table { max-width: 100%; border-collapse: collapse; margin-block: 24px; font-size: 14px; }
.www-copy :is(th,td) { border: 1px solid var(--dpu-line); padding: 10px 12px; text-align: start; }
.www-copy th { background: var(--dpu-wash); color: var(--dpu-ink); font-weight: 600; }
.www-copy :is(th,td) > :first-child { margin-top: 0; }
.www-copy :is(th,td) > :last-child { margin-bottom: 0; }
.www-site main :is(a,summary):focus-visible { outline: 2px solid var(--dpu-focus); outline-offset: 3px; }

/* Class-driven CMS actions remain compatible with existing authored HTML. */
.www-copy a:is(.inline-btn,.inline-btn-lighter,.inline-btn-launch,.inline-btn-lighter-launch,.inline-btn-download,.dpw-button-action):not(.dpu-btn) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%; min-height: 38px; padding: 7px 14px; margin-block: 3px;
  border: 1px solid #bbc7cf; border-radius: var(--dpu-radius); background: #fff; color: #355267;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none;
}
.www-copy a:is(.inline-btn,.inline-btn-lighter,.inline-btn-launch,.inline-btn-lighter-launch,.inline-btn-download,.dpw-button-action):not(.dpu-btn):hover {
  border-color: #90a8b8; background: #f3f7fa; color: #20415a; text-decoration: none;
}
.www-copy a:is(.inline-btn,.inline-btn-launch,.inline-btn-download,.dpw-button-action):not(.dpu-btn) {
  border-color: var(--dpu-blue); background: var(--dpu-blue); color: #fff;
}
.www-copy a:is(.inline-btn,.inline-btn-launch,.inline-btn-download,.dpw-button-action):not(.dpu-btn):is(:hover,:focus) {
  border-color: var(--dpu-blue-hover); background: var(--dpu-blue-hover); color: #fff;
}
.www-copy .dpw-button-action.disabled { opacity: .55; cursor: not-allowed; }

/* Authenticated navigation remains outside authored content. */
.www-site .dpw-body-edit {
  position: fixed; right: 18px; bottom: 18px; z-index: 2200;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 36px);
  box-sizing: border-box; padding: 10px 12px; border-radius: 999px;
  background: rgba(20,27,44,.95); color: #f5f7ff; box-shadow: 0 16px 34px rgba(13,20,33,.35);
  backdrop-filter: blur(6px); font-family: "Segoe UI",Tahoma,sans-serif;
}
.www-site .dpw-admin-overlay-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #b8c3df; }
.www-site .dpw-admin-overlay-action {
  display: inline-flex; align-items: center; justify-content: center; padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.08);
  color: #f5f7ff; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
}
.www-site .dpw-admin-overlay-action:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); color: #fff; text-decoration: none; }
.www-site .dpw-admin-overlay-action:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 2px; }


/* WWW page composition, adopted from reviewed revision 9. Shared UI v3 supplies base tokens and controls. */
.www-design { --dpu-site-width: 1160px; --dpu-site-gutter: 24px; --www-ink:var(--dpu-ink); --www-muted:var(--dpu-muted); --www-line:var(--dpu-line); --www-wash:var(--dpu-wash); }
.www-design .dpu-site-main { margin-block: 64px 88px; }
.www-design .dpu-site-footer > .dpu-container { font-size:13px; padding-block:32px 48px; }
.www-design .dpu-site-footer h2 { font-size:14px; }
.www-design .dpu-site-footer li { margin-bottom:8px; }
.www-design main :is(h1,h2,h3,h4) { color:var(--www-ink); }
.www-design main :is(h1,h2,h3) { font-weight:600; letter-spacing:-.025em; }
.www-design main :is(p,ul,ol,figure) { margin-top:0; }
.www-design main { scroll-behavior:smooth; }
.www-design main [id] { scroll-margin-top:24px; }
.www-home, .www-framework, .www-structured { color:var(--dpu-text); font-size:15px; line-height:1.65; }
:where(.www-home,.www-framework,.www-structured) a { color:var(--dpu-blue); text-underline-offset:3px; }
.www-design .www-eyebrow { font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dpu-blue); margin:0 0 16px; }
.www-hero { display:grid; grid-template-columns:minmax(300px,.64fr) minmax(0,1.36fr); align-items:center; gap:40px; padding:0 0 64px; }
.www-hero-copy { min-width:0; }
.www-design .www-hero h1 { max-width:10ch; font-size:clamp(44px,5vw,64px); line-height:1.06; letter-spacing:-.045em; margin:0 0 28px; }
.www-design .www-lead { font-size:18px; line-height:1.75; color:var(--www-muted); max-width:58ch; margin:0 0 28px; }
/* The screenshots already include their frame and shadow. Add no second one. */
.www-hero-media { min-width:0; margin:0; padding:0; border:0; background:transparent; }
.www-hero-media img { display:block; width:100%; height:auto; }
.www-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0; }
.www-design a.www-button,.www-design .www-actions a.dpu-btn { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; padding:9px 16px; border:1px solid #b3c8d6; border-radius:6px; background:white; color:#244c68; font-weight:600; font-size:14px; line-height:1.5; text-decoration:none; }
.www-design a.www-button:hover { background:#f1f6fa; border-color:#6286a1; }
.www-design a.www-primary { color:#fff; background:var(--dpu-blue); border-color:var(--dpu-blue); }
.www-design a.www-primary:hover { background:var(--dpu-blue-hover); color:white; }
.www-framework-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; margin:26px 0 0; }
.www-framework-links > span { color:var(--www-muted); margin-right:4px; }
.www-framework-links a { text-decoration:none; padding:4px 10px; background:#f1f6fa; border:1px solid #e1eaf0; border-radius:4px; }
.www-framework-links a:hover { background:#e2eef6; }
/* The hero's framework destinations are navigation, visually distinct from CTAs. */
.www-design .www-hero .www-actions { margin:28px 0 0; gap:12px; }
.www-design .www-hero .www-button { min-width:132px; min-height:44px; }
.www-design .www-hero .www-framework-links { gap:4px 16px; margin:24px 0 0; padding:0; border:0; }
.www-hero .www-framework-links > span { font-size:13px; margin-right:2px; }
.www-hero .www-framework-links a { padding:4px 0; font-size:14px; font-weight:500; border:0; background:none; border-radius:0; }
.www-hero .www-framework-links a:hover { text-decoration:underline; }
.www-section { margin-top:64px; }
.www-section-heading { margin:56px 0 24px; }
.www-section .www-section-heading { margin-top:0; }
.www-design .www-section-heading h2 { margin:0 0 9px; font-size:30px; line-height:1.25; }
.www-section-heading p { margin:0; color:var(--www-muted); font-size:16px; }
.www-trust { padding:40px 0 56px; margin:0 0 64px; border-block:1px solid var(--www-line); }
.www-design .www-trust h2 { font-size:22px; line-height:1.3; text-align:center; margin:0 0 12px; }
.www-design .www-trust-note { max-width:680px; margin:0 auto 30px; text-align:center; font-size:15px; line-height:1.7; color:var(--www-muted); }
.www-logo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row dense; gap:12px 26px; margin:0 auto; padding:0; max-width:1040px; }
.www-logo { box-sizing:border-box; display:flex; justify-content:center; align-items:center; min-width:0; height:66px; padding:0; border:0; background:transparent; }
.www-logo img { display:block; width:var(--mark-width); height:auto; max-width:94%; max-height:none; object-fit:contain; filter:grayscale(1); opacity:.78; mix-blend-mode:multiply; }
.www-logo-ink img { filter:brightness(0); opacity:.68; }
.www-logo-wide { grid-column:span 2; }
/* Widths balance dense letterforms against thin/wide wordmarks; no forced height. */
.www-logo[data-brand="Porsche"] img,.www-logo[data-brand="Volvo"] img,.www-logo[data-brand="Estée Lauder"] img { opacity:.86; }
.www-logo[data-brand="Salesforce"] img,.www-logo[data-brand="BMW"] img,.www-logo[data-brand="Thermo Fisher Scientific"] img { opacity:.92; }
/* Raster originals keep their bytes. Only their intrinsic blank margins are clipped. */
.www-logo[data-brand="JC Decaux"] img { clip-path:inset(0 0 21% 0); transform:translateY(4px); }
.www-logo[data-brand="EUSAT"] { overflow:hidden; }
.www-logo[data-brand="EUSAT"] img { width:calc(var(--mark-width) * 1.2); max-width:none; clip-path:inset(24% 8% 23% 8%); opacity:.72; }
/* The complete Home component catalog is maintained in home.tpl. */
.www-home-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 48px; margin-top:32px; }
.www-home-content > :not(.section) { grid-column:1/-1; }
.www-home-content > .www-section-heading { margin:0; padding-top:48px; border-top:1px solid var(--www-line); }
.www-design .www-home-content > .www-section-heading h2 { font-size:36px; max-width:24ch; line-height:1.18; }
.www-home-content > .section { display:flex; flex-direction:column; min-width:0; padding:0; border:0; background:transparent; }
.www-design .www-home-content > .section h2 { margin:0 0 24px; font-size:24px; line-height:1.3; }
.www-home-content > .section > .image-right { display:flex; align-items:center; justify-content:center; height:270px; margin:0 0 24px; padding:0; border:0; background:transparent; }
.www-home-content > .section > .image-right img { display:block; width:100%; height:100%; object-fit:contain; }
.www-home-content > .section > p:not(.image-right) { font-size:15px; line-height:1.75; margin:0 0 24px; }
.www-design .www-home-content > .section ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:0 20px; list-style:none; padding:16px 0 0; margin:auto 0 0; border-top:1px solid var(--www-line); font-size:14px; }
.www-home-content > .section li { min-width:0; margin:0; padding:6px 0; }
.www-home-content > .section li a { text-decoration:none; }
.www-home-content > .section li a:hover { text-decoration:underline; }
.www-home-content > .www-section { margin-top:24px; }
.www-inline-links { display:flex; flex-wrap:wrap; gap:7px 16px; list-style:none; margin:18px 0 0; padding:0; font-size:13px; }
.www-inline-links a { text-decoration:none; }
.www-inline-links a:hover { text-decoration:underline; }
/* One reading rail and one screenshot rail connect all three priorities. */
.www-stories { display:grid; gap:0; padding:0; }
.www-story { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px; align-items:center; padding:64px 0; border:0; background:transparent; }
.www-story-copy { grid-column:1; grid-row:1; }
.www-story-media { grid-column:2; grid-row:1; margin:0; min-width:0; padding:0; border:0; background:transparent; }
.www-story-copy > p:last-child { margin-bottom:0; }
.www-story-media img { width:100%; height:auto; display:block; }
.www-design .www-story h2 { font-size:36px; line-height:1.18; margin:0 0 24px; text-wrap:balance; }
.www-story p { font-size:17px; line-height:1.75; }
.www-tutorial-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:40px 48px; }
.www-tutorial-group { border-top:1px solid var(--www-line); padding-top:24px; min-width:0; }
.www-design .www-tutorial-group h3 { font-size:23px; margin:0 0 14px; }
.www-tutorial-group ul { margin:0; padding:0; list-style:none; font-size:15px; }
.www-tutorial-group li { margin:0; padding:6px 0; border:0; line-height:1.6; }
.www-tutorial-group a { text-decoration:none; }
.www-tutorial-group a:hover { text-decoration:underline; }
.www-builder { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px; align-items:center; padding:56px 0; border-block:1px solid var(--www-line); background:transparent; }
.www-design .www-builder h2 { font-size:36px; line-height:1.18; margin:0 0 24px; }
.www-builder p { font-size:17px; line-height:1.75; }
.www-builder .www-actions { margin-bottom:0; }
.www-builder-media { margin:0; min-width:0; padding:0; border:0; background:transparent; }
.www-builder-media img { width:100%; height:auto; display:block; }
.www-design .www-copy #news-list { margin-top:80px; }
.www-design #news-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.www-design #news-list > h2 { grid-column:1/-1; font-size:30px; margin:0; }
.www-design #news-list .news-item { display:flex; flex-direction:column; margin:0; padding:20px 0 0; gap:12px; border:0; border-top:1px solid var(--www-line); font-size:14px; }
.www-design #news-list .news-item > div { display:flex; flex:1; }
.www-design #news-list .news-item p.www-news-release { display:flex; flex-direction:column; align-items:flex-start; flex:1; margin:0; color:var(--www-muted); }
.www-design #news-list .www-news-release strong { display:block; margin-bottom:16px; color:var(--www-ink); font-size:17px; line-height:1.4; font-weight:600; }
.www-design #news-list .news-link { display:inline-block; margin-top:auto; text-decoration:none; }
.www-design #news-list .news-link:hover { text-decoration:underline; }
.www-design #news-list .news-item img { width:100%; height:150px; object-fit:contain; }
.www-design #news-list > a,.www-design #news-list > p { grid-column:1/-1; }
.www-component-list { display:grid; gap:14px; margin:24px 0 48px; }
.www-component-row { min-width:0; border:1px solid var(--www-line); border-radius:7px; background:#fff; }
.www-component-row > summary { display:grid; grid-template-columns:230px minmax(0,1fr) 16px; align-items:center; gap:28px; padding:18px 22px; cursor:pointer; list-style:none; }
.www-component-row > summary::-webkit-details-marker { display:none; }
.www-component-row > summary:hover { background:#f6f9fb; }
.www-component-row > summary::after { content:""; width:8px; height:8px; border-top:2px solid #678297; border-right:2px solid #678297; transform:rotate(45deg); }
.www-component-row[open] > summary::after { transform:rotate(135deg); }
.www-component-row[open] > summary { border-bottom:1px solid var(--www-line); background:#f6f9fb; }
.www-component-row .thumb { display:flex; justify-content:center; align-items:center; min-width:0; height:130px; background:#f7f9fb; }
.www-component-row .thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.www-component-row .summary-text { display:block; min-width:0; font-size:15px; line-height:1.65; }
.www-component-row .view-title { display:block; color:var(--www-ink); font-weight:600; font-size:21px; line-height:1.3; margin-bottom:10px; }
.www-labels { display:flex; gap:6px; margin:12px 0; }
.www-labels .label { font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:3px; }
.www-labels .label-lite { background:#e9f5ed; color:#27653d; }
.www-labels .label-pro { background:#e8f2fa; color:#225d83; }
.www-feature-content { padding:24px 28px; font-size:14px; }
.www-feature-content a { margin-right:8px; }
.www-feature-group { margin:20px 0 12px; }
.www-feature-group strong { font-size:16px; color:var(--www-ink); }
.www-feature-group ul { padding-left:18px; margin:12px 0 0; columns:3; column-gap:28px; }
.www-feature-group li { break-inside:avoid; padding-left:0; margin-bottom:6px; line-height:1.55; }
.www-framework-page > .dpu-page-heading { text-align:center; }
.www-framework > .www-section-heading { text-align:center; }
.www-framework > .www-section-heading h2 { max-width:34ch; margin-inline:auto; text-wrap:balance; }
.www-edition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:980px; margin-inline:auto; }
.www-edition { display:flex; flex-direction:column; min-width:0; padding:28px; text-align:center; border:1px solid var(--dpu-line); border-top:3px solid var(--dpu-line); border-radius:7px; background:#fff; }
.www-edition-pro { border-top-color:var(--dpu-blue); }
.www-design .www-edition :is(h2,h3) { margin:0 0 8px; color:var(--dpu-ink); font-size:25px; line-height:1.3; }
.www-design .www-edition > p { margin:0 0 8px; font-size:15px; line-height:1.6; }
.www-design .www-edition > h2 + p { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--dpu-line); color:var(--dpu-muted); }
.www-pricing-link { margin-left:3px; text-underline-offset:3px; }
.www-price-separator { color:var(--dpu-muted); }
.www-design .www-card-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0; padding-top:22px; }
.www-design .www-edition > .www-card-actions { margin-top:auto; margin-bottom:0; }
/* Shared dpu-btn owns appearance and states; the lander owns action alignment. */
.www-edition .action-button { min-width:104px; }
/* Exact existing launch glyph from daypilot_web_javascript/static/css/v3/site.css. */
.www-design a:is(.inline-btn-launch,.inline-btn-lighter-launch,.inline-btn-download)::before {
 content:""; flex:0 0 18px; width:18px; height:18px; background:currentColor;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6m0-6L10 14M10 5H5a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.www-tutorials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
.www-tutorial { border:0; border-top:1px solid var(--www-line); padding-top:24px; min-width:0; display:flex; flex-direction:column; }
.www-tutorial-media { box-sizing:border-box; height:300px; padding:0; border:0; background:transparent; }
.www-tutorial-media a { display:flex; align-items:center; justify-content:center; height:100%; }
.www-tutorial-media img { width:100%; height:100%; object-fit:contain; }
.www-tutorial-copy { padding:24px 0 0; flex:1; }
.www-design .www-tutorial h3 { margin:0 0 14px; font-size:21px; line-height:1.4; }
.www-tutorial h3 a { text-decoration:none; }
.www-tutorial p { font-size:15px; line-height:1.7; margin:0 0 14px; }
.www-tutorial-copy p:last-child { margin-bottom:0; }
.www-design main .www-tutorial-archive { margin:36px 0 0; padding-top:24px; border-top:1px solid var(--www-line); font-size:16px; line-height:1.8; }
.www-configure { margin-block:56px; padding:36px; border:1px solid var(--dpu-line); border-radius:8px; background:var(--dpu-soft-blue); text-align:center; }
.www-configure > .www-section-heading { margin:0 0 32px; }
.www-design .www-configure > .www-section-heading h2 { color:var(--dpu-ink); font-size:32px; }
.www-configure > .www-section-heading p { color:var(--dpu-text); }
.www-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.www-tool { display:flex; flex-direction:column; min-width:0; padding:4px 24px; }
.www-tool + .www-tool { border-left:1px solid var(--dpu-line); }
.www-design .www-tool h3 { margin:0 0 12px; color:var(--dpu-ink); font-size:22px; line-height:1.3; }
.www-design .www-tool p { font-size:15px; margin:0 0 10px; color:var(--dpu-text); }
.www-design .www-tool .www-card-actions { margin-top:auto; margin-bottom:0; padding-top:22px; }
.www-tool .action-button { min-width:216px; }
.www-framework .www-tutorial-archive { text-align:center; }
.www-structured h2 { margin:0 0 16px; font-size:23px; }
.www-structured h2 a { text-decoration:none; }
.www-structured p { margin-bottom:16px; }
.www-products-page { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.www-product-choice { min-width:0; border:1px solid var(--www-line); border-radius:8px; padding:32px; }
.www-product-choice p { font-size:15px; line-height:1.8; }
.www-product-choice:first-child:not(.www-open-with-media) { background:var(--dpu-wash); }
.www-product-choice.www-open-with-media { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:min-content 1fr; gap:16px 40px; }
.www-product-choice > .www-open-copy { min-width:0; grid-column:1; }
.www-product-choice > .www-open-media { grid-column:2; grid-row:1/3; align-self:center; margin:0; }
.www-product-choice > .www-open-media a,.www-product-choice > .www-open-media img { display:block; }
.www-product-choice > .www-open-media img { width:100%; height:auto; }
.www-product-choice :is(h2,p):last-child { margin-bottom:0; }
.www-product-choice > ul,.www-product-choice > .www-open-copy > ul { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--www-line); }
.www-product-choice > ul > li,.www-product-choice > .www-open-copy > ul > li { margin:0; }
.www-product-choice .new-label { display:inline-block; margin-left:4px; padding:1px 5px; border-radius:3px; background:var(--dpu-soft-blue); color:var(--dpu-ink); font-size:10px; }
.www-product-featured { grid-column:1/-1; background:#f1f7fb; border-color:#cddfea; }
.www-product-featured > p:not(.www-eyebrow) { max-width:82ch; font-size:16px; }
.www-product-choice .www-inline-links { gap:10px; }
.www-product-choice .www-inline-links a { display:inline-block; padding:5px 10px; border:1px solid #c6d9e5; border-radius:4px; background:white; }
.www-open-choice { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 40px; margin:40px 0; padding:28px; border:1px solid var(--www-line); border-radius:8px; }
.www-open-choice > * { grid-column:1; }
.www-open-choice .www-open-media { grid-column:2; grid-row:1/6; margin:0; align-self:center; }
.www-open-choice ul { padding-left:20px; }
.www-open-choice li { margin:5px 0; }
.www-support-page,.www-contact-page { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.www-help-card,.www-contact-card { padding:28px; border:1px solid var(--www-line); border-radius:8px; }
.www-help-number { display:block; color:#668ba5; font-size:12px; margin-bottom:14px; }
.www-help-card p:last-child { margin-bottom:0; font-size:14px; }
.www-contact-card:last-child:nth-of-type(odd) { grid-column:1/-1; max-width:100%; background:var(--www-wash); }
.www-contact-card:last-child:nth-of-type(odd) p { max-width:70ch; }
.www-design .www-reading { max-width:880px; }
.www-design .www-reading-copy { max-width:74ch; font-size:16px; line-height:1.8; }
.www-design .www-reading-copy :is(h2,h3) { line-height:1.4; }
.www-design .www-reading-copy h2 { margin-top:36px; }
.www-design .www-reading-copy li { margin-bottom:10px; }
.www-table-scroll { overflow:auto; max-width:100%; margin:24px 0; border:1px solid var(--www-line); border-radius:5px; }
.www-design .www-table-scroll table { margin:0; width:100%; font-size:13px; }
.www-design .www-table-scroll :is(th,td) { white-space:nowrap; }
/* Paint page-wide chapter bands without viewport-width layout/scrollbar overflow.
   The flat spread is clipped vertically; content stays on the existing rails. */
.www-band { background:var(--www-band-fill); box-shadow:0 0 0 100vmax var(--www-band-fill); clip-path:inset(0 -100vmax); }
.www-band-wash { --www-band-fill:var(--dpu-wash); }
.www-band-navy { --www-band-fill:var(--dpu-navy); }
.www-editions-band { padding-block:40px; }
.www-builder.www-band { padding-block:64px; border:0; }
.www-configure.www-band { padding:56px 0; border:0; border-radius:0; }
.www-design .www-band-navy:is(.www-builder,.www-configure) :is(h2,h3) { color:#fff; }
.www-design .www-band-navy:is(.www-builder,.www-configure) p { color:var(--dpu-soft-blue); }
.www-design .www-band-navy p a:not(.dpu-btn) { color:#fff; text-decoration:underline; }
.www-design .www-band-navy p a:not(.dpu-btn):hover { color:var(--dpu-soft-blue); text-decoration-thickness:2px; }
.www-band-navy .www-tool + .www-tool { border-color:#2c4e63; }
.www-band-actions { margin-top:24px; }
.www-band-actions .dpu-btn { min-width:180px; }
@media (max-width:900px) {
 .www-hero { grid-template-columns:minmax(0,1fr); gap:28px; }
 .www-hero-copy { max-width:620px; }
 .www-hero-media { max-width:720px; }
 .www-edition .www-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .www-edition .action-button { min-width:0; }
 .www-design .www-hero h1 { max-width:none; font-size:52px; }
 .www-logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 24px; }
 .www-story { gap:32px; }
 .www-design .www-story h2 { font-size:30px; }
 .www-story p { font-size:16px; }
 .www-home-content > .section > .image-right { height:210px; }
 .www-builder { gap:32px; }
 .www-design .www-builder h2 { font-size:30px; }
 .www-design #news-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .www-tutorials { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .www-feature-group ul { columns:2; }
 .www-component-row > summary { grid-template-columns:190px minmax(0,1fr) 16px; gap:20px; }
 .www-tutorial-media { height:240px; }
}
@media (max-width:720px) {
 .www-design { --dpu-site-gutter:20px; }
 .www-design .dpu-site-main { margin-block:28px 48px; }
 .www-hero { grid-template-columns:minmax(0,1fr); gap:36px; padding:8px 0 40px; }
 .www-design .www-hero h1 { font-size:48px; max-width:10ch; margin-bottom:24px; }
 .www-design .www-lead { font-size:17px; }

 .www-section { margin-top:44px; }
 .www-section-heading { margin-top:40px; }
 .www-design .www-section-heading h2 { font-size:27px; }
 .www-home-content,.www-edition-grid,.www-tutorials,.www-tools,.www-products-page,.www-support-page,.www-contact-page,.www-tutorial-groups { grid-template-columns:minmax(0,1fr); gap:24px; }
 .www-product-choice.www-open-with-media { display:flex; flex-direction:column; gap:0; }
 .www-product-choice > .www-open-media { align-self:stretch; margin:20px 0; }
 .www-configure { margin-block:44px; padding:28px 16px; }
 .www-design .www-configure > .www-section-heading h2 { font-size:27px; }
 .www-tool { padding:0; }
 .www-tool + .www-tool { border-left:0; border-top:1px solid var(--dpu-line); padding-top:24px; }
 .www-trust { margin-bottom:48px; padding:32px 0; }
 .www-logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; padding:0; }
 .www-logo { height:62px; }
 .www-logo[data-brand="EUSAT"],.www-logo:last-child { grid-column:span 2; }
 .www-home-content { margin-top:12px; row-gap:40px; }
 .www-home-content > .www-section-heading { padding-top:32px; }
 .www-design .www-home-content > .www-section-heading h2 { font-size:30px; }
 .www-home-content > .section > .image-right { height:auto; aspect-ratio:1.8; }
 .www-stories { gap:0; padding:0; }
 .www-story { grid-template-columns:minmax(0,1fr); gap:28px; padding-block:40px; }
 .www-story-copy,.www-story-media { grid-column:auto; grid-row:auto; }
 .www-design .www-story h2 { font-size:32px; }
 .www-component-row > summary { grid-template-columns:104px minmax(0,1fr) 12px; gap:14px; padding:16px; }
 .www-component-row .thumb { height:90px; }
 .www-component-row .view-title { font-size:19px; }
 .www-component-row .summary-text { font-size:14px; }
 .www-feature-content { padding:18px; }
 .www-feature-group ul { columns:1; }
 .www-tutorial-media { height:auto; }
 .www-tutorial-media a { display:block; height:auto; }
 .www-tutorial-media img { display:block; width:100%; height:auto; }
 .www-tutorial-copy { padding:20px 0 0; }
 .www-builder { grid-template-columns:minmax(0,1fr); padding:40px 0; gap:28px; }
 .www-builder.www-band { padding-block:40px; }
 .www-configure.www-band { padding:40px 0; }
 .www-editions-band { padding-block:28px; }
 .www-design #news-list { grid-template-columns:minmax(0,1fr); }
 .www-edition,.www-product-choice,.www-help-card,.www-contact-card { padding:22px; }
 .www-open-choice { display:flex; flex-direction:column; gap:0; padding:22px; margin:24px 0; }
 .www-open-choice .www-open-media { margin-top:12px; }
 .www-design .www-reading-copy { font-size:15px; }
 .www-design .dpu-page-title { font-size:30px; line-height:1.3; }
}
@media (max-width:440px) {
 /* Keep all primary destinations and the shared search control on one row.
    The brand name remains available to assistive technology beside its icon. */
 .www-site .dpu-site-header { --dpu-site-gutter:10px; }
 .www-site .dpu-site-header > .dpu-container.dpu-header-search-ready { gap:8px; }
 .www-site .dpu-site-header .dpu-header-search-ready > nav { gap:8px; }
 .www-site .dpu-header-search-ready > .dpu-brand { min-width:24px; justify-content:center; }
 .www-site .dpu-header-search-ready .www-brand-name { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
 .www-component-row > summary { grid-template-columns:minmax(0,1fr) 16px; gap:14px; }
 .www-component-row .thumb { grid-column:1; grid-row:1; width:190px; max-width:100%; height:106px; }
 .www-component-row .summary-text { grid-column:1 / -1; grid-row:2; }
 .www-component-row > summary::after { grid-column:2; grid-row:1; }
}
@media (max-width:360px) {
 .www-design .www-hero h1 { font-size:44px; }
 .www-hero .www-framework-links > span { flex-basis:100%; }
 .www-actions { gap:8px; }
 .www-design a.www-button { padding:8px 12px; }
 .www-design .www-hero .www-button { min-width:122px; }
 .www-tutorial-groups { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .www-design main { scroll-behavior:auto; } }

/* Editable pages: presentation follows semantic sections, not authored classes. */
.www-structured { min-width:0; overflow-wrap:anywhere; }
.www-structured > .www-lead { grid-column:1/-1; margin-bottom:8px; }
.www-open-choice { display:block; }
.www-open-choice.www-open-with-media { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.www-open-choice.www-open-with-media > .www-open-copy { grid-column:1; }
.www-open-choice.www-open-with-media > .www-open-media { grid-column:2; grid-row:1/span 2; margin:0; align-self:center; }
.www-design .dpu-site-main:has(.www-reading-copy) { max-width:880px; }
.www-design .www-news-copy { min-width:0; overflow-wrap:anywhere; }
.www-design #news-list .news-item > .www-news-copy { display:block; }
.www-news-copy > :first-child { margin-top:0; }
.www-news-copy > :last-child { margin-bottom:0; }
.www-news-subscribe { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:30px 0 0; font-size:14px; }
.www-news-subscribe span { color:var(--dpu-muted); }
/* Short content still places the footer at the end of the viewport. */
.www-design { min-height:100vh; display:flex; flex-direction:column; }
.www-design .dpu-site-main { width:100%; box-sizing:border-box; flex:1; }
.www-design .dpu-site-footer { margin-bottom:0; }
@media(max-width:720px) {
 .www-open-choice.www-open-with-media { display:flex; flex-direction:column; }
 .www-open-choice.www-open-with-media > .www-open-media { margin-block:16px; }
 .www-site .dpw-body-edit { left:10px; right:10px; bottom:10px; max-width:none; border-radius:16px; }
}

.www-design a.inline-btn-download::before { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M5 16v4h14v-4'/%3E%3C/svg%3E"); }
.www-content-intro { grid-column:1/-1; }

/* Obsolete editor-only label backgrounds found in legacy Products content. */
.www-copy [style*="lbl-h2.png"],
.www-copy [style*="lbl-p.png"] { background-image: none !important; }
