/* Office selection page. Publication content stays editable in DLE static 115. */
main.app-detail-page.overview-hub-page.office-download-hub {
  --oh-accent:var(--catalog-office-brand,#5b5fc7);
  --oh-paper:#fffefd;
  --oh-ink:#27272e;
  --oh-muted:#616169;
  --oh-line:#e8e8ef;
  color:var(--oh-ink);

  & .download-hub-hero {
    border:0;
    background:radial-gradient(ellipse 68% 75% at 4% 0%,#eeedf8 0%,transparent 80%),var(--oh-paper);
    box-shadow:inset 0 -1px 0 var(--oh-line);
  }
  & .download-hub-hero::before,& .download-hub-hero::after { content:none;display:none; }
  & .download-hub-hero--compact .download-hub-hero-inner {
    display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);align-items:center;gap:52px;
    padding-block:26px 38px;
  }
  & .download-hub-copy { min-width:0;max-width:650px; }
  & .download-hub-kicker {
    margin:0 0 14px;color:var(--oh-accent);font-size:11px;font-weight:600;letter-spacing:.045em;line-height:1.5;
  }
  & .download-hub-copy h1 { color:var(--oh-ink);text-wrap:balance; }
  & .download-hub-lead { max-width:600px;margin:18px 0 0;color:var(--oh-muted);font-size:16px;line-height:1.7;letter-spacing:normal; }
  & .download-hub-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:24px; }
  & :is(.download-hub-primary,.download-hub-secondary,.hub-decision-card > a) {
    display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:11px 18px;
    border:1px solid #d9d7ea;border-radius:4px;background:#f1effa;color:#3b3c5d;box-shadow:none;font-size:14px;
    font-weight:600;line-height:1.45;letter-spacing:normal;text-decoration:none;transform:none;
    transition:background-color .16s,border-color .16s;
  }
  & .download-hub-primary { color:#fff;background:#605eb0;border-color:#605eb0; }
  & .download-hub-secondary { background:transparent; }
  & :is(.download-hub-secondary,.hub-decision-card > a):hover { background:#e8e6f6;border-color:#b7b2d8;transform:none;box-shadow:none; }
  & .download-hub-primary:hover { color:#fff;background:#504e9e;border-color:#504e9e;transform:none;box-shadow:none; }
  & a:focus-visible { outline:2px solid var(--oh-accent);outline-offset:4px; }
  & .download-hub-safety { margin-top:17px;color:var(--oh-muted);font-size:12px;line-height:1.6; }
  & .download-hub-safety > span { color:var(--oh-accent);background:transparent; }
  & .oh-hero-visual { min-width:0;border:1px solid #e3e0e3;border-radius:5px;overflow:hidden;background:#faf9f8; }
  & .oh-hero-art { display:block;width:100%;height:auto;aspect-ratio:1.78;object-fit:cover; }
  & .oh-hero-apps { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;background:#fffefd;border-top:1px solid #e9e5e8; }
  & .oh-hero-apps a { display:flex;align-items:center;justify-content:center;gap:7px;color:#555764;text-decoration:none;font-size:11px;font-weight:500;line-height:1.4; }
  & .oh-hero-apps img { width:26px;height:26px;object-fit:contain; }
  & .oh-hero-apps a:not(.oh-all-apps) span { display:none; }
  & .oh-hero-apps a:hover { color:var(--oh-accent);text-decoration:underline; }
  & .oh-hero-apps a:not(.oh-all-apps) { width:38px;min-height:36px; }
  & .oh-hero-apps .oh-all-apps { margin-left:auto;min-height:36px; }
  & .hub-decision { padding-block:42px 46px;border:0;background:var(--oh-paper);box-shadow:none;scroll-margin-top:20px; }
  & .hub-section-heading { max-width:none;margin:0 0 25px; }
  & .hub-section-heading h2 { margin:0;color:var(--oh-ink);font-size:30px;font-weight:620;line-height:1.2;letter-spacing:-.018em; }
  & .hub-section-heading > p:not(.section-label) { max-width:830px;margin:12px 0 0;color:var(--oh-muted);font-size:14px;line-height:1.65; }
  & .hub-section-heading a { color:inherit;text-decoration-color:#b8b4d1;text-underline-offset:3px; }
  & .hub-decision-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;align-items:stretch; }
  & .hub-decision-card {
    --choice-accent:#615cb9;--choice-wash:#f1effa;
    display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;gap:0;padding:0 24px 24px;
    border:1px solid var(--oh-line);border-radius:5px;background:var(--oh-paper);box-shadow:none;overflow:hidden;
    transition:border-color .16s;
  }
  & .hub-decision-card:hover { border-color:#bbb8ce;box-shadow:none;background:var(--oh-paper);transform:none; }
  & .oh-choice-once { --choice-accent:#c7644b;--choice-wash:#faf0eb; }
  & .oh-choice-previous { --choice-accent:#6b8195;--choice-wash:#eef3f7; }
  & .oh-choice-art { position:relative;display:flex;justify-content:center;align-items:center;height:146px;margin:0 -24px 24px;background:var(--choice-wash);overflow:hidden;isolation:isolate; }
  & .oh-choice-art::before,& .oh-choice-art::after { content:'';position:absolute;z-index:-1;border:1px solid color-mix(in srgb,var(--choice-accent) 16%,transparent); }
  & .oh-choice-art::before { width:240px;height:240px;border-radius:50%;left:calc(50% - 120px);top:-50px; }
  & .oh-choice-art::after { width:176px;height:176px;border-radius:50%;left:calc(50% - 88px);top:-18px;background:color-mix(in srgb,var(--oh-paper) 28%,transparent); }
  & .oh-choice-art img { position:relative;z-index:1;display:block;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 10px #38395b12); }
  & .oh-choice-orbit { position:absolute;left:calc(50% - 50px);top:23px;width:100px;height:100px;background:#ffffff94;border:1px solid #ffffffd9;border-radius:20px;transform:rotate(-12deg); }
  & .oh-choice-once .oh-choice-art::before { width:190px;height:170px;border-radius:5px;left:calc(50% - 95px);top:-12px;transform:rotate(26deg); }
  & .oh-choice-once .oh-choice-art::after { width:190px;height:170px;border-radius:5px;left:calc(50% - 95px);top:-12px;transform:rotate(-20deg); }
  & .oh-choice-once .oh-choice-orbit { transform:rotate(8deg);border-radius:8px; }
  & .oh-choice-previous .oh-choice-art::before { width:105px;height:120px;left:calc(50% - 70px);top:8px;border-radius:4px;transform:rotate(-12deg);background:#ffffff50; }
  & .oh-choice-previous .oh-choice-art::after { width:105px;height:120px;left:calc(50% - 40px);top:14px;border-radius:4px;transform:rotate(12deg);background:#ffffff50; }
  & .oh-choice-previous .oh-choice-orbit { border-radius:4px;transform:none;height:112px;top:18px; }
  & .hub-decision-kicker { min-height:0;margin:0 0 7px;color:var(--oh-muted);font-size:12px;font-weight:500;line-height:1.5;text-transform:none;letter-spacing:normal; }
  & .hub-decision-card h3 { margin:0;color:var(--oh-ink);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.02em; }
  & .hub-decision-model { order:1;display:block;align-self:start;margin:12px 0 0;padding:4px 8px;border:0;border-radius:3px;background:var(--choice-wash);color:#575966;font-size:11px;font-weight:500;line-height:1.5; }
  & .hub-decision-card > .catalog-live-description { order:2;margin:17px 0 0;color:var(--oh-muted);font-size:13px;line-height:1.7; }
  & .hub-decision-card ul { order:3;display:grid;gap:8px;margin:18px 0 23px;padding:0;list-style:none; }
  & .hub-decision-card li { display:flex;align-items:start;gap:8px;color:var(--oh-ink);font-size:12px;line-height:1.5; }
  & .hub-decision-card li > span { color:var(--choice-accent);font-weight:600; }
  & .hub-decision-card > a { order:4;width:100%;margin:auto 0 0;min-height:44px; }
  & .hub-faq-layout { grid-template-columns:minmax(0,1fr);gap:12px; }
  & .hub-faq-layout .hub-section-heading { margin-bottom:12px; }
  & .hub-faq-item summary { font-size:16px;font-weight:600;line-height:1.5; }
  & .hub-faq-item p { font-size:14px;line-height:1.75; }
  @media(max-width:1100px) {
    & .download-hub-hero--compact .download-hub-hero-inner { gap:30px; }
    & .hub-decision-grid { gap:14px; }
    & .hub-decision-card { padding-inline:18px; }
    & .oh-choice-art { margin-inline:-18px;height:126px; }
    & .hub-decision-card h3 { font-size:21px; }
    & .oh-choice-art img { width:65px;height:65px; }
  }
  @media(max-width:820px) {
    & .download-hub-hero--compact .download-hub-hero-inner { grid-template-columns:minmax(0,1fr);gap:26px; }
    & .download-hub-copy { max-width:640px; }
    & .oh-hero-art { aspect-ratio:2.9;object-position:50% 48%; }
    & .oh-hero-apps a:not(.oh-all-apps) { width:auto; }
    & .oh-hero-apps a:not(.oh-all-apps) span { display:inline; }
    & .hub-decision-grid { grid-template-columns:minmax(0,1fr);gap:18px; }
    & .hub-decision-card { display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;padding:24px;overflow:visible; }
    & .oh-choice-art { grid-column:1;grid-row:1 / span 5;width:120px;height:160px;margin:0;border-radius:4px; }
    & .hub-decision-card > :not(.oh-choice-art) { grid-column:2; }
    & .hub-decision-card h3 { font-size:23px; }
    & .hub-decision-card > a { margin-top:0;max-width:240px; }
    & .hub-decision-card > .catalog-live-description { margin-top:14px; }
  }
  @media(max-width:540px) {
    & .download-hub-hero--compact .download-hub-hero-inner { padding-block:22px 28px;gap:24px; }
    & .download-hub-lead { margin-top:14px;font-size:15px; }
    & .download-hub-actions { margin-top:20px; }
    & :is(.download-hub-primary,.download-hub-secondary) { flex:1;min-width:0;padding-inline:12px;font-size:13px;gap:8px; }
    & .oh-hero-art { aspect-ratio:2.1; }
    & .oh-hero-apps { padding:8px 11px;gap:6px; }
    & .oh-hero-apps a:not(.oh-all-apps) { width:34px; }
    & .oh-hero-apps a:not(.oh-all-apps) span { display:none; }
    & .hub-decision { padding-block:30px 32px; }
    & .hub-section-heading h2 { font-size:27px; }
    & .hub-decision-card { grid-template-columns:60px minmax(0,1fr);gap:0 15px;padding:20px; }
    & .oh-choice-art { grid-column:1;grid-row:1 / span 3;width:60px;height:72px;align-self:start; }
    & .oh-choice-art img { width:44px;height:44px; }
    & .oh-choice-orbit { width:58px;height:58px;left:1px;top:5px; }
    & .oh-choice-art::before,& .oh-choice-art::after { display:none; }
    & .hub-decision-kicker { font-size:11px;margin-bottom:6px; }
    & .hub-decision-card h3 { font-size:22px; }
    & .hub-decision-model { margin-top:9px; }
    & .hub-decision-card > :is(.catalog-live-description,ul,a) { grid-column:1 / -1; }
    & .hub-decision-card > .catalog-live-description { margin-top:18px;font-size:14px;line-height:1.65; }
    & .hub-decision-card ul { margin-block:16px 20px; }
    & .hub-decision-card li { font-size:13px; }
    & .hub-decision-card > a { max-width:none; }
    & .hub-faq-item summary { font-size:15px; }
  }
  @media(prefers-reduced-motion:reduce) { & a,& .hub-decision-card { transition:none; } }
}

/* Join the existing visual-system layer to beat legacy important surfaces.
   Every selector still requires this one page's complete root class. */
@layer catalog-visual-system {
  main.app-detail-page.overview-hub-page.office-download-hub {
    & header.hub-section-heading {
      position:static!important;
      inset:auto!important;
      width:auto!important;
      height:auto!important;
      min-height:0!important;
      padding:0!important;
      border:0!important;
      background:transparent!important;
      box-shadow:none!important;
      backdrop-filter:none!important;
    }
    & header.hub-section-heading::before,
    & header.hub-section-heading::after { content:none!important; display:none!important; }
    & .hub-faq {
      --faq-ink:var(--oh-ink)!important;
      --faq-muted:var(--oh-muted)!important;
      --faq-accent:var(--oh-accent)!important;
      padding-block:40px!important;
    }
    & .hub-faq-item { border:0!important; box-shadow:none!important; }
    & .hub-faq-list > .hub-faq-item + .hub-faq-item { box-shadow:inset 0 1px 0 var(--cvs-faq-line,rgba(35,45,40,.075))!important; }
    & .hub-faq-item > summary { padding-inline:0!important; }
    & .hub-faq-item > p { padding-inline:0 32px!important; }
    @media(max-width:620px) { & .hub-faq { padding-block:32px!important; } }
  }
}