/* ==========================================================================
   Support hub

   Only the patterns this page adds. The banner, the FAQ accordion, the section
   headings and the closing CTA come from stylesheets already linked, and the
   band pattern is shared with the Company hub.

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100; --ps-color-neutral-2-000 is reserved for the
   closing CTA. No dark band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §2 Quick actions — one screen of labelled tiles, no sales copy between them
   -------------------------------------------------------------------------- */
.actions{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.actions__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.actions__title{color:var(--ps-color-neutral-3-500);margin:0}
.actions__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.action-tile__link{
  position:relative;height:100%;
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:18px;
  transition:border-color .25s ease-out;
}
.action-tile__link:hover{border-color:var(--ps-color-neutral-2-500)}
.action-tile__name{grid-column:1;font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.action-tile__desc{grid-column:1;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.action-tile__lock{
  grid-column:1;margin-top:8px;
  font:500 10px/15px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.action-tile__lock::before{content:"\25CF";margin-right:6px;color:var(--ps-color-brand-400)}
.action-tile__arrow{
  grid-column:2;grid-row:1 / span 3;
  display:flex;margin-top:4px;color:var(--ps-color-neutral-2-900);
  transition:transform .2s ease-out,color .2s ease-out;
}
.action-tile__arrow svg{width:13px;height:11px;fill:currentColor}
.action-tile__link:hover .action-tile__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

@media (min-width:640px){.actions{padding-block:64px}.actions__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.actions{padding-block:80px}.actions__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.actions__head,.actions__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §3 Tool selector
   -------------------------------------------------------------------------- */
.tools{background:var(--sv-white);padding-block:48px}
.tools__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px;text-align:center}
.tools__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.tools__lead{color:var(--ps-color-secondary-5-500);margin:0 auto;max-width:62ch}
.tools__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.tool-tile__link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:13px 12px 13px 15px;background:var(--sv-white);
  transition:border-color .25s ease-out,background-color .25s ease-out;
}
.tool-tile__link:hover{border-color:var(--ps-color-neutral-2-500);background:var(--ps-color-neutral-2-000)}
.tool-tile__name{font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.tool-tile__arrow{display:flex;flex:none;color:var(--ps-color-neutral-2-900);transition:transform .2s ease-out,color .2s ease-out}
.tool-tile__arrow svg{width:12px;height:10px;fill:currentColor}
.tool-tile__link:hover .tool-tile__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

@media (min-width:640px){.tools{padding-block:64px}.tools__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.tools{padding-block:80px}.tools__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1350px){.tools__head,.tools__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §4 Downloads band — shares .band with the Company hub
   -------------------------------------------------------------------------- */
.band--downloads{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}

/* --------------------------------------------------------------------------
   §5 Install and licensing
   -------------------------------------------------------------------------- */
.install{background:var(--sv-white);padding-block:48px}
.install__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.install__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.install__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.install__grid{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:20px}
.install-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;transition:border-color .25s ease-out;
}
.install-card:hover{border-color:var(--ps-color-neutral-2-500)}
.install-card__heading{color:var(--ps-color-neutral-3-500);margin:0 0 14px}
.install-card__body{color:var(--ps-color-secondary-5-500);margin:0 0 14px}
.install-card__body:last-of-type{margin-bottom:18px}
.install-card__body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
  border-radius:4px;padding:1px 5px;overflow-wrap:anywhere;
}
.install-card__defs{margin:0 0 18px}
.install-card__defs dt{
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);margin-top:14px;
}
.install-card__defs dt:first-child{margin-top:0}
.install-card__defs dd{
  margin:4px 0 0;font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.install-card__list{list-style:none;margin:0 0 16px;padding:0}
.install-card__list li{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
  font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.install-card__list li:last-child{border-bottom:0}
.install-card__list--plain li{display:block}
.install-card__key{font-weight:500;color:var(--ps-color-neutral-3-500)}
.install-card__val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.install-card__warn{
  margin:0;padding:12px 14px;
  background:var(--ps-color-neutral-2-000);
  border-left:2px solid var(--ps-color-brand-500);border-radius:0 8px 8px 0;
  font:500 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.install-card__link{align-self:flex-start;margin-top:auto}

@media (min-width:640px){.install{padding-block:64px}.install-card{padding:28px 26px}}
@media (min-width:1024px){.install{padding-block:80px}.install__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.install__head,.install__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §6 Release table
   -------------------------------------------------------------------------- */
.releases{background:var(--ps-color-neutral-2-100);border-top:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.releases__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.releases__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:24ch}
.releases__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
/* min-width:0 matters: a grid item defaults to min-width:auto, which lets it
   grow to its content and defeats the scroller inside it. Without this the
   620px table pushes the whole page sideways below about 640px. */
.releases__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0}

.rel-filter{
  display:flex;flex-direction:column;gap:16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:20px;margin-bottom:20px;
}
.rel-filter[hidden]{display:none}
.rel-filter__selects{display:grid;grid-template-columns:1fr;gap:14px}
.rel-filter__field,.rel-filter__search{display:flex;flex-direction:column;gap:6px;min-width:0}
.rel-filter__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.rel-filter__select,.rel-filter__input{
  width:100%;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
  background-color:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;
  padding:10px 12px;transition:border-color .2s ease-out;
}
.rel-filter__select{
  appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.rel-filter__select:hover,.rel-filter__input:hover{border-color:var(--ps-color-neutral-2-500)}
.rel-filter__select:focus-visible,.rel-filter__input:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:1px}
.rel-filter__search-field{position:relative;display:flex;align-items:center}
.rel-filter__search-icon{position:absolute;left:12px;fill:var(--ps-color-neutral-2-900);pointer-events:none}
.rel-filter__input{padding-left:34px}
.rel-filter__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--ps-color-neutral-2-300);
}
.rel-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.rel-filter__clear{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.rel-filter__clear[hidden]{display:none}

.rel-table__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.rel-table__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.rel-table{
  width:100%;min-width:620px;border-collapse:collapse;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.rel-table[hidden]{display:none}
.rel-table th,.rel-table td{
  text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.rel-table thead th{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-000);white-space:nowrap;
}
.rel-table tbody tr:last-child th,.rel-table tbody tr:last-child td{border-bottom:0}
.rel-table tbody tr{transition:background-color .2s ease-out}
.rel-table tbody tr:hover{background:var(--ps-color-neutral-2-000)}
.rel-table__product{font-weight:500;color:var(--ps-color-neutral-3-500);white-space:nowrap}
.rel-table__note{
  display:block;margin-top:3px;white-space:normal;
  font:400 11px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.rel-table__ver{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap}
.rel-table__plat{text-align:center}
.rel-table__yes{color:var(--ps-color-success-800,#2e7d32);font-size:15px}
.rel-table__no{color:var(--ps-color-neutral-2-500)}

.rel-empty{
  margin-top:20px;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:24px 22px;
}
.rel-empty[hidden]{display:none}
.rel-empty__text{margin:0;color:var(--ps-color-secondary-5-500);font:400 15px/23px var(--ps-font);letter-spacing:normal}
.releases__footnote{
  margin:20px 0 0;font:400 12px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.releases__links{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px}

@media (min-width:640px){
  .releases{padding-block:64px}
  .rel-filter{padding:22px 24px}
  .rel-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .releases{padding-block:80px}
  .rel-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);gap:18px 24px;align-items:end}
  .rel-filter__foot{grid-column:1 / -1}
}
@media (min-width:1350px){.releases__head,.releases__wrap{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §7 Documentation
   -------------------------------------------------------------------------- */
.docs{background:var(--sv-white);padding-block:48px}
.docs__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px;text-align:center}
.docs__title{color:var(--ps-color-neutral-3-500);margin:0}
.docs__grid{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:20px}
.docs-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;transition:border-color .25s ease-out;
}
.docs-card:hover{border-color:var(--ps-color-neutral-2-500)}
.docs-card__heading{color:var(--ps-color-neutral-3-500);margin:0 0 10px}
.docs-card__body{color:var(--ps-color-secondary-5-500);margin:0 0 14px;flex:1 1 auto}
.docs-card__meta{
  margin:0 0 16px;font:500 11px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.docs-card__link{align-self:flex-start}

@media (min-width:640px){.docs{padding-block:64px}.docs-card{padding:28px 26px}}
@media (min-width:1024px){.docs{padding-block:80px}.docs__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.docs__head,.docs__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §8 Who helps you
   -------------------------------------------------------------------------- */
.who{background:var(--ps-color-neutral-2-100);border-top:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.who__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.who__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.who__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.who__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;counter-reset:none;
}
.who-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  border-top-width:2px;border-top-color:var(--ps-color-brand-500);
  padding:24px 22px;
}
.who-card__tag{
  display:block;margin-bottom:12px;
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.who-card__body{margin:0 0 18px;flex:1 1 auto;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.who-card__link{align-self:flex-start}

@media (min-width:640px){.who{padding-block:64px}.who-card{padding:28px 26px}}
@media (min-width:1024px){.who{padding-block:80px}.who__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.who__head,.who__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §9 Contacts, with the pending panel

   The panel itself is css/pending.css, shared with /partners/. It is visible to
   the client on purpose: a reserved slot, not an error.
   -------------------------------------------------------------------------- */
.contacts{background:var(--sv-white);padding-block:48px}
.contacts__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.contacts__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.contacts__lead{color:var(--ps-color-secondary-5-500);margin:0}
.contacts__body{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:24px}
.contacts__sub{
  margin:0 0 16px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.contacts__routes{list-style:none;margin:0;padding:0}
.contacts__routes li{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.contacts__routes li:last-child{border-bottom:0}
.contacts__route-name{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.contacts__route-detail{font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.contacts__route-link{
  margin-top:3px;align-self:flex-start;
  font:500 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.contacts__route-link:hover{color:var(--ps-color-brand-500)}

/* .pending lives in css/pending.css — /partners/ uses it too. */

@media (min-width:640px){.contacts{padding-block:64px}}
@media (min-width:1024px){
  .contacts{padding-block:80px}
  .contacts__body{grid-template-columns:7fr 5fr;gap:40px}
}
@media (min-width:1350px){.contacts__head,.contacts__body{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   Support round (2026-09-24)
   -------------------------------------------------------------------------- */
/* §5 the OS-list label (SUPPORT-06), the CodeName line (SUPPORT-05) and the
   three platform links (SUPPORT-55) */
.install-card__label{
  margin:0 0 6px;
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.install-card__codename{margin-top:14px}
.install-card__codename code{word-break:break-all}
.install-card__links,.docs-card__links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto}
.install-card__links .install-card__link,.docs-card__links .docs-card__link{margin-top:0}

/* §6 six columns now (SUPPORT-09); the count line is held (SUPPORT-08), so the
   filter foot shows only while "Clear filters" does */
.rel-table{min-width:760px}
.rel-table__pkg{white-space:nowrap}
.rel-table__mark{font-weight:400;color:var(--ps-color-neutral-2-900)}
.rel-filter__foot{justify-content:flex-end}
.rel-filter__foot:not(:has(.rel-filter__clear:not([hidden]))){display:none}
.releases__footnote p{margin:6px 0 0}
.releases__legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.releases__legend .rel-table__yes{font-size:13px}
/* "TCAD notes for the 2025 Baseline (Simulation Standard)" is wider than a
   phone; let the release links wrap, as the Solutions evaluation CTA does */
@media (max-width:639.98px){
  .releases__links .ps-btn{max-width:100%}
  .releases__links .ps-btn__text{white-space:normal;min-width:0}
}

/* §7 "In the support portal · Portal account needed" as two tags (SUPPORT-64) */
.docs-card__meta span + span::before{content:"\00B7";margin:0 6px}

/* §8 the text link under Route 3's button (SUPPORT-12) */
.who-card__text-link{
  align-self:flex-start;margin-top:10px;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.who-card__text-link:hover{color:var(--ps-color-brand-500)}

/* §9 four contacts, and no pending panel beside them (SUPPORT-15, 101) */
.contacts__route-detail a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (min-width:1024px){
  .contacts__body{grid-template-columns:1fr}
  .contacts__routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .contacts__routes li:nth-last-child(2){border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .action-tile__link,.action-tile__arrow,.tool-tile__link,.tool-tile__arrow,
  .install-card,.docs-card,.rel-table tbody tr,.rel-filter__select,
  .rel-filter__input,.contacts__route-link{transition:none}
}