/* Draw & Color (tablet landing), 02.10.2026.
   Navy #174A7E + turquoise #D2F9F6 on pure white, Fredoka body, Poppins Black 900
   display. Every rule is scoped with `:root[data-portal-theme] body.dc-page` so
   the shared portal theme (which colours the whole page with !important) cannot
   repaint the component. Page decoration only: no new dependencies. */
:root[data-portal-theme] body.dc-page {
  --dc-navy: #174A7E;
  --dc-ink: #17324D;
  --dc-turq: #D2F9F6;
  --dc-turq-soft: #EDFCFA;
  --dc-line: rgba(23, 74, 126, .16);
  --dc-content: 1380px;
  /* The shared theme paints borders from --brand-surface and body copy from
     --brand-ink; point both at the approved pairs. */
  --brand-ink: #17324D;
  --brand-paper: #FFFFFF;
  --brand-surface: #174A7E;
  background: #fff;
  overflow-x: hidden;
  font-family: 'Fredoka', system-ui, sans-serif !important;
}
:root[data-portal-theme] body.dc-page :is(input, select, textarea, button, optgroup, option) { font-family: inherit !important; }
:root[data-portal-theme] body.dc-page :is(.dc-btn, .dc-eraser) :is(span, strong, em, svg) { color: inherit !important; font-family: inherit !important; }
:root[data-portal-theme] body.dc-page .dc-step-num { color: #fff !important; }

:root[data-portal-theme] body.dc-page :is(h1, h2, h3) {
  color: var(--dc-navy) !important;
  font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif !important;
  font-weight: 900 !important;
}
:root[data-portal-theme] body.dc-page h1 { font-size: clamp(40px, 5.1vw, 74px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; }
:root[data-portal-theme] body.dc-page h2 { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.07; margin: 0 0 14px; }
:root[data-portal-theme] body.dc-page h3 { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.2; margin: 0 0 8px; }
:root[data-portal-theme] body.dc-page p { margin: 0 0 12px; color: var(--dc-ink) !important; }

:root[data-portal-theme] body.dc-page .dc-wrap { width: min(var(--dc-content), 100% - 48px); margin: 0 auto; }
:root[data-portal-theme] body.dc-page .dc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root[data-portal-theme] body.dc-page .dc-eyebrow { font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; color: var(--dc-navy) !important; }
:root[data-portal-theme] body.dc-page .dc-lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; max-width: 30em; }
:root[data-portal-theme] body.dc-page .dc-sub { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; }
:root[data-portal-theme] body.dc-page .dc-note { font-size: 16px; line-height: 1.6; }

/* buttons, links and form controls ---------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 28px; border-radius: 999px; border: 0;
  background: var(--dc-navy) !important; color: #fff !important;
  font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif !important;
  font-weight: 900; font-size: 18px; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
:root[data-portal-theme] body.dc-page .dc-btn:hover { background: #123c68 !important; transform: translateY(-1px); }
:root[data-portal-theme] body.dc-page .dc-btn.ghost { background: #fff !important; color: var(--dc-navy) !important; box-shadow: inset 0 0 0 2px var(--dc-navy); }
:root[data-portal-theme] body.dc-page .dc-btn.big { font-size: 20px; padding: 16px 34px; }
:root[data-portal-theme] body.dc-page .dc-textlink { color: var(--dc-navy) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
:root[data-portal-theme] body.dc-page .dc-open { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--dc-navy) !important; font-weight: 600; text-decoration: none; }
:root[data-portal-theme] body.dc-page .dc-open:hover, :root[data-portal-theme] body.dc-page .dc-open:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
:root[data-portal-theme] body.dc-page :is(a, button, input, select, summary):focus-visible { outline: 3px solid #0a2540 !important; outline-offset: 3px; }

:root[data-portal-theme] body.dc-page .dc-search { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: center; margin: 0 0 6px; }
:root[data-portal-theme] body.dc-page .dc-field { flex: 1 1 360px; display: block; }
:root[data-portal-theme] body.dc-page .dc-label { display: block; font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif; font-weight: 900; font-size: 15px; color: var(--dc-navy) !important; margin: 0 0 7px; }
:root[data-portal-theme] body.dc-page .dc-input { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 2px solid var(--dc-navy) !important; border-radius: 14px; background: #fff !important; }
:root[data-portal-theme] body.dc-page .dc-input input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--dc-ink) !important; }
:root[data-portal-theme] body.dc-page .dc-input input::placeholder { color: #5c7794; }
:root[data-portal-theme] body.dc-page .dc-input svg { flex: none; width: 22px; height: 22px; }
:root[data-portal-theme] body.dc-page .dc-select { display: block; }
:root[data-portal-theme] body.dc-page .dc-select select { appearance: none; min-height: 54px; padding: 0 46px 0 20px; border: 2px solid var(--dc-navy) !important; border-radius: 14px; background: #fff !important; color: var(--dc-navy) !important; font: inherit; font-size: 17px; font-weight: 600; }
:root[data-portal-theme] body.dc-page .dc-select span.dc-caret { position: absolute; }
:root[data-portal-theme] body.dc-page .dc-select { position: relative; }
:root[data-portal-theme] body.dc-page .dc-select::after { content: "\25BE"; position: absolute; right: 18px; bottom: 16px; color: var(--dc-navy); pointer-events: none; }
:root[data-portal-theme] body.dc-page .dc-clear { min-height: 48px; padding: 10px 16px; border: 0; background: none; color: var(--dc-navy) !important; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
:root[data-portal-theme] body.dc-page .dc-status { text-align: center; min-height: 26px; margin: 16px 0 0; font-size: 17px; }
:root[data-portal-theme] body.dc-page .dc-status:empty { display: none; }
:root[data-portal-theme] body.dc-page .dc-retry { margin: 8px auto 0; }
:root[data-portal-theme] body.dc-page form.dc-search > .dc-status,
:root[data-portal-theme] body.dc-page form.dc-search > .dc-btn { flex: 1 0 100%; margin: 6px 0 0; }

/* 1. hero ----------------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-hero { position: relative; background: #fff; border-radius: 0; }
:root[data-portal-theme] body.dc-page .dc-hero-art img { display: block; width: 100%; height: auto; border-radius: 0; }
@media (min-width: 720px) {
  /* The whole approved scene (Ori, Nima, tablet) is inside the first screen:
     the art is contained to the viewport remainder and kept to the right, so
     the live copy keeps its calm white column on the left. */
  :root[data-portal-theme] body.dc-page .dc-hero-art img { height: min(calc(100vh - 148px), 760px); object-fit: contain; object-position: right center; }
}
:root[data-portal-theme] body.dc-page .dc-hero-copy { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
:root[data-portal-theme] body.dc-page .dc-hero-copy-inner { width: min(var(--dc-content), 100% - 48px); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; }
:root[data-portal-theme] body.dc-page .dc-hero-copy-inner > * { max-width: min(520px, 42%); }
:root[data-portal-theme] body.dc-page .dc-hero-cta { margin-top: 8px; }
:root[data-portal-theme] body.dc-page .dc-hero-note { margin: 14px 0 0; font-size: 16px; color: var(--dc-ink) !important; }

/* 2. demo ----------------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-demo { background: linear-gradient(180deg, #fff 0, var(--dc-turq) 12%, var(--dc-turq) 88%, #fff 100%); padding: clamp(48px, 6vw, 92px) 0; }
:root[data-portal-theme] body.dc-page .dc-demo-head { text-align: center; max-width: min(100%, 900px); margin: 0 auto clamp(24px, 3vw, 40px); }
:root[data-portal-theme] body.dc-page .dc-demo-head p { margin: 0; }
:root[data-portal-theme] body.dc-page .dc-demo-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); padding: 0; margin: 0; }
:root[data-portal-theme] body.dc-page .dc-demo-grid > li { display: flex; flex-direction: column; }
:root[data-portal-theme] body.dc-page .dc-tab { position: relative; border-radius: 22px; background: #26303a; padding: 12px 12px 30px; box-shadow: 0 22px 46px rgba(23, 74, 126, .18); }
:root[data-portal-theme] body.dc-page .dc-tab-screen { position: relative; border-radius: 10px; overflow: hidden; background: #fff; }
:root[data-portal-theme] body.dc-page .dc-tab-screen img { display: block; width: 100%; height: auto; }
:root[data-portal-theme] body.dc-page .dc-tab-screen .dc-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-portal-theme] body.dc-page .dc-eraser { position: absolute; left: 58%; bottom: 17%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--dc-navy); color: #fff; font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif; font-weight: 900; font-size: clamp(11px, 1.15vw, 16px); box-shadow: 0 8px 18px rgba(10, 37, 64, .3); }
:root[data-portal-theme] body.dc-page .dc-eraser svg { width: 20px; height: 20px; }
:root[data-portal-theme] body.dc-page .dc-step-cap { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif; font-weight: 900; font-size: clamp(17px, 1.5vw, 22px); color: var(--dc-navy) !important; }
:root[data-portal-theme] body.dc-page .dc-step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--dc-navy); color: #fff; display: grid; place-items: center; font-size: 17px; }
:root[data-portal-theme] body.dc-page .dc-demo-cta { text-align: center; margin: clamp(26px, 3.4vw, 44px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-demo-art { display: block; width: 100%; max-width: 1060px; margin: 0 auto; height: auto; aspect-ratio: 1536 / 930; object-fit: cover; object-position: center; border-radius: 22px; }
:root[data-portal-theme] body.dc-page .dc-demo.has-art > .dc-wrap > .dc-demo-grid { max-width: 1060px; margin-inline: auto; }
:root[data-portal-theme] body.dc-page .dc-demo-grid .dc-step-cap { margin-top: 16px; }
:root[data-portal-theme] body.dc-page .dc-demo-phases { display: none; list-style: none; padding: 0; margin: 0; }
:root[data-portal-theme] body.dc-page .dc-phase-art { position: relative; display: block; aspect-ratio: 1 / 2; border-radius: 16px; overflow: hidden; }
:root[data-portal-theme] body.dc-page .dc-phase-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--dc-x, 50%) 50%; }

/* 3. find a page ---------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-find { padding: clamp(52px, 6vw, 96px) 0; text-align: center; }
:root[data-portal-theme] body.dc-page .dc-find-head { max-width: 46ch; margin: 0 auto clamp(22px, 3vw, 34px); }
:root[data-portal-theme] body.dc-page .dc-find .dc-search { max-width: 1000px; margin: 0 auto; text-align: left; }
:root[data-portal-theme] body.dc-page .dc-links3 { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 72px); padding: 0; margin: clamp(28px, 4vw, 46px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-links3 a { font-family: var(--brand-heading-font, 'Poppins'), system-ui, sans-serif; font-weight: 900; font-size: clamp(20px, 2vw, 30px); color: var(--dc-navy) !important; text-decoration: none; }
:root[data-portal-theme] body.dc-page .dc-links3 a:hover, :root[data-portal-theme] body.dc-page .dc-links3 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
:root[data-portal-theme] body.dc-page .dc-results { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(16px, 2vw, 26px); padding: 0; margin: clamp(24px, 3vw, 36px) auto 0; text-align: left; }
:root[data-portal-theme] body.dc-page .dc-results li { display: flex; flex-direction: column; }
:root[data-portal-theme] body.dc-page .dc-results img { display: block; width: 100%; height: auto; aspect-ratio: 17 / 22; object-fit: cover; object-position: top center; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px rgba(23, 74, 126, .16); }
:root[data-portal-theme] body.dc-page .dc-kind { display: inline-block; margin: 12px 0 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #4a6a8c !important; }
:root[data-portal-theme] body.dc-page .dc-results h3 { font-size: 18px; margin: 0 0 4px; }

/* shared section heads ---------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-section { padding: clamp(56px, 7vw, 108px) 0; }
:root[data-portal-theme] body.dc-page .dc-cols { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(26px, 4.4vw, 72px); align-items: center; }
:root[data-portal-theme] body.dc-page .dc-cols.reverse .dc-col-art { order: -1; }
:root[data-portal-theme] body.dc-page .dc-hairline { height: 1px; background: var(--dc-navy); opacity: .5; margin: clamp(30px, 4vw, 52px) 0 clamp(20px, 2.6vw, 32px); }

/* 4. coloring ------------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-coloring { background: linear-gradient(180deg, #fff 0, var(--dc-turq-soft) 16%, var(--dc-turq-soft) 84%, #fff 100%); }
:root[data-portal-theme] body.dc-page .dc-color-scene { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 26px 58px rgba(23, 74, 126, .16); }
:root[data-portal-theme] body.dc-page .dc-color-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: end; }
:root[data-portal-theme] body.dc-page .dc-color-cards > li { list-style: none; display: flex; flex-direction: column; }
:root[data-portal-theme] body.dc-page .dc-color-cards > li:first-child { grid-row: span 1; }
:root[data-portal-theme] body.dc-page .dc-page-thumb { display: block; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px rgba(23, 74, 126, .18); overflow: hidden; }
:root[data-portal-theme] body.dc-page .dc-page-thumb img { display: block; width: 100%; height: auto; }
:root[data-portal-theme] body.dc-page .dc-color-cards > li:first-child .dc-page-thumb { box-shadow: 0 26px 58px rgba(23, 74, 126, .24); }
:root[data-portal-theme] body.dc-page .dc-color-cards > li:nth-child(2) { padding-bottom: 14%; }
:root[data-portal-theme] body.dc-page .dc-mat { display: block; width: clamp(120px, 26%, 190px); margin: clamp(20px, 3vw, 34px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-collection { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); padding: 0; margin: clamp(22px, 3vw, 34px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-collection img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px rgba(23, 74, 126, .14); }
:root[data-portal-theme] body.dc-page .dc-collection h3 { font-size: 17px; margin: 10px 0 2px; }
:root[data-portal-theme] body.dc-page .dc-collection .dc-age { margin: 0 0 2px; }

/* 5. tracing -------------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-tracing .dc-col-art .dc-tab { max-width: 360px; margin: 0 auto; transform: rotate(-1.6deg); }
:root[data-portal-theme] body.dc-page .dc-tracing-cards { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); padding: 0; margin: 0; }
:root[data-portal-theme] body.dc-page .dc-tracing-cards img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px rgba(23, 74, 126, .14); }
:root[data-portal-theme] body.dc-page .dc-tracing-cards h3 { font-size: 17px; margin: 10px 0 4px; }
:root[data-portal-theme] body.dc-page .dc-age { display: inline-block; background: var(--dc-turq); color: var(--dc-navy) !important; border-radius: 999px; padding: 3px 12px; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
:root[data-portal-theme] body.dc-page .dc-task { font-size: 15px; line-height: 1.5; margin: 0 0 4px; }
:root[data-portal-theme] body.dc-page .dc-more { display: inline-block; margin: 22px 0 0; font-weight: 600; color: var(--dc-navy) !important; }

/* 6. worksheets ----------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-worksheets { background: linear-gradient(180deg, #fff 0, var(--dc-turq-soft) 6%, var(--dc-turq-soft) 94%, #fff 100%); }
:root[data-portal-theme] body.dc-page .dc-ws-head { text-align: center; max-width: 52ch; margin: 0 auto clamp(22px, 2.6vw, 32px); }
:root[data-portal-theme] body.dc-page .dc-ws-search { max-width: 1000px; margin: 0 auto clamp(30px, 4vw, 52px); text-align: left; }
:root[data-portal-theme] body.dc-page .dc-depts { list-style: none; padding: 0; margin: 0; }
:root[data-portal-theme] body.dc-page .dc-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.2vw, 48px) clamp(20px, 2.4vw, 36px); }
/* Open editorial index, exactly the 06 reference: three columns, thumbnail beside
   readable copy, no boxes or cards around a department. */
:root[data-portal-theme] body.dc-page .dc-dept { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; border-top: 0; }
:root[data-portal-theme] body.dc-page .dc-dept img { display: block; width: 96px; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 10px 22px rgba(23, 74, 126, .16); }
:root[data-portal-theme] body.dc-page .dc-dept h3 { margin: 0 0 4px; }
:root[data-portal-theme] body.dc-page .dc-dept h3 a { color: var(--dc-navy) !important; text-decoration: none; }
:root[data-portal-theme] body.dc-page .dc-dept h3 a:hover, :root[data-portal-theme] body.dc-page .dc-dept h3 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
:root[data-portal-theme] body.dc-page .dc-dept p { margin: 0 0 2px; }
:root[data-portal-theme] body.dc-page .dc-dept-art { grid-template-columns: 132px minmax(0, 1fr); }

/* 7. before you begin ----------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-help { padding: clamp(48px, 6vw, 88px) 0; }
:root[data-portal-theme] body.dc-page .dc-help-rows { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 30px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-help-rows li { padding: 18px 0; border-top: 1px solid var(--dc-turq); }
:root[data-portal-theme] body.dc-page .dc-help-rows li:last-child { border-bottom: 1px solid var(--dc-turq); }
:root[data-portal-theme] body.dc-page .dc-help-rows h3 { margin: 0 0 4px; }
:root[data-portal-theme] body.dc-page .dc-help-rows p { margin: 0; }
:root[data-portal-theme] body.dc-page .dc-help-art .dc-tab { max-width: 360px; margin: 0 auto; transform: rotate(1.2deg); }
:root[data-portal-theme] body.dc-page .dc-help-aside { text-align: center; }
:root[data-portal-theme] body.dc-page .dc-help-aside .dc-open { margin-top: 18px; }

/* 8. parents -------------------------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-parents { padding: clamp(52px, 6.5vw, 100px) 0 clamp(40px, 5vw, 80px); }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-rows { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 30px) 0 0; }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-rows li { padding: 16px 0; border-top: 1px solid var(--dc-navy); }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-rows li:last-child { border-bottom: 1px solid var(--dc-navy); }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-rows h3 { margin: 0 0 4px; }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-rows p { margin: 0; font-size: 18px; }
:root[data-portal-theme] body.dc-page .dc-parents .dc-parent-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: clamp(22px, 3vw, 32px); }
:root[data-portal-theme] body.dc-page .dc-parent-art { position: relative; max-width: min(620px, 100% - 56px); margin: 0 auto; min-width: 0; }
:root[data-portal-theme] body.dc-page .dc-parent-art img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 22px 48px rgba(23, 50, 77, .22); }
:root[data-portal-theme] body.dc-page .dc-parent-art .dc-art-back { width: 60%; position: absolute; right: 3%; top: -6%; transform: rotate(3deg); }
:root[data-portal-theme] body.dc-page .dc-parent-art .dc-art-front { width: 74%; position: relative; z-index: 1; }

/* category collection pages ---------------------------------------------- */
:root[data-portal-theme] body.dc-page .dc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; margin: 0 0 16px; }
:root[data-portal-theme] body.dc-page .dc-crumbs a { color: var(--dc-navy) !important; text-decoration: none; }
:root[data-portal-theme] body.dc-page .dc-crumbs a:hover { text-decoration: underline; }
:root[data-portal-theme] body.dc-page .dc-cathead { background: var(--dc-turq-soft); padding: clamp(24px, 3.4vw, 44px) 0 clamp(24px, 3.4vw, 40px); }
:root[data-portal-theme] body.dc-page .dc-cathead .dc-lead { max-width: 56ch; }
:root[data-portal-theme] body.dc-page .dc-list { list-style: none; padding: 0; margin: 0; }
:root[data-portal-theme] body.dc-page .dc-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: clamp(16px, 2.2vw, 30px); align-items: start; padding: clamp(18px, 2.2vw, 28px) 0; border-top: 1px solid var(--dc-line); }
:root[data-portal-theme] body.dc-page .dc-item:last-child { border-bottom: 1px solid var(--dc-line); }
:root[data-portal-theme] body.dc-page .dc-item img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 10px 22px rgba(23, 74, 126, .16); }
:root[data-portal-theme] body.dc-page .dc-item h2, :root[data-portal-theme] body.dc-page .dc-item h3 { font-size: 21px; margin: 0 0 6px; }
:root[data-portal-theme] body.dc-page .dc-item .dc-meta { font-size: 15px; color: var(--dc-ink) !important; margin: 0 0 8px; }
:root[data-portal-theme] body.dc-page .dc-item .dc-actions { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }

/* The shared style.css hides `h1 br` on phones, which would join the headline
   words in the accessible name and on screen. Keep the designed break. */
:root[data-portal-theme] body.dc-page :is(h1, h2) br { display: inline !important; }

/* footer wave belongs to the page, not the shared chrome ------------------ */
:root[data-portal-theme] body.dc-page .site-footer .footer-wave { display: block; width: 100%; height: clamp(44px, 6vw, 90px); background: #fff; }
:root[data-portal-theme] body.dc-page .site-footer .footer-wave path { fill: #174A7E; }

/* responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root[data-portal-theme] body.dc-page .dc-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-portal-theme] body.dc-page .dc-tracing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root[data-portal-theme] body.dc-page .dc-cols { grid-template-columns: 1fr; }
  :root[data-portal-theme] body.dc-page .dc-cols.reverse .dc-col-art { order: 0; }
  :root[data-portal-theme] body.dc-page .dc-demo-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  :root[data-portal-theme] body.dc-page .dc-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-portal-theme] body.dc-page .dc-color-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-portal-theme] body.dc-page .dc-parent-art { max-width: min(460px, 100% - 48px); }
}
@media (max-width: 719px) {
  :root[data-portal-theme] body.dc-page .dc-wrap, :root[data-portal-theme] body.dc-page .dc-hero-copy-inner { width: min(var(--dc-content), 100% - 32px); }
  :root[data-portal-theme] body.dc-page h1 { font-size: clamp(34px, 9.6vw, 44px); }
  :root[data-portal-theme] body.dc-page h2 { font-size: clamp(27px, 7.6vw, 38px); }
  :root[data-portal-theme] body.dc-page .dc-hero-copy { align-items: flex-start; }
  /* Phone: the live copy sits on its own calm white area and the artwork follows
     underneath, showing its lower part (whole faces, whole tablet) - nothing is
     laid over the characters and the tablet is never clipped. */
  :root[data-portal-theme] body.dc-page .dc-hero { display: flex; flex-direction: column; }
  :root[data-portal-theme] body.dc-page .dc-hero-copy { position: static; order: 1; pointer-events: auto; padding: 18px 0 0; }
  :root[data-portal-theme] body.dc-page .dc-hero-art { order: 2; margin-top: 10px; }
  :root[data-portal-theme] body.dc-page .dc-hero-copy-inner { padding-top: 0; }
  :root[data-portal-theme] body.dc-page .dc-hero-copy-inner > * { max-width: 100%; }
  :root[data-portal-theme] body.dc-page .dc-hero-art img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: center 84%; }
  :root[data-portal-theme] body.dc-page .dc-demo.has-art > .dc-wrap > .dc-demo-art,
  :root[data-portal-theme] body.dc-page .dc-demo.has-art > .dc-wrap > .dc-demo-grid { display: none; }
  :root[data-portal-theme] body.dc-page .dc-demo.has-art .dc-demo-phases { display: grid; gap: 22px; }
  :root[data-portal-theme] body.dc-page .dc-color-cards { grid-template-columns: 1fr 1fr; }
  :root[data-portal-theme] body.dc-page .dc-color-cards > li:first-child { grid-column: 1 / -1; }
  :root[data-portal-theme] body.dc-page .dc-color-cards > li:nth-child(2) { padding-bottom: 0; }
  :root[data-portal-theme] body.dc-page .dc-collection { grid-template-columns: 1fr 1fr; }
  :root[data-portal-theme] body.dc-page .dc-tracing-cards { grid-template-columns: 1fr 1fr; }
  :root[data-portal-theme] body.dc-page .dc-depts { grid-template-columns: 1fr; gap: 22px; }
  :root[data-portal-theme] body.dc-page .dc-dept img { width: 84px; }
  :root[data-portal-theme] body.dc-page .dc-links3 { gap: 12px 26px; }
  :root[data-portal-theme] body.dc-page .dc-dept, :root[data-portal-theme] body.dc-page .dc-item { grid-template-columns: 84px minmax(0, 1fr); }
  :root[data-portal-theme] body.dc-page .dc-parent-art .dc-art-back { display: none; }
  :root[data-portal-theme] body.dc-page .dc-parent-art .dc-art-front { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-portal-theme] body.dc-page * { transition: none !important; animation: none !important; }
}