/* ============================================================================
 * PORTFOLIO VARIANT  -  presentation overrides
 * ----------------------------------------------------------------------------
 * Loaded only by portfolio.html. Every rule is scoped under
 * [data-deck-variant="portfolio"] so nothing here can reach index.html, even
 * though both pages share styles.css.
 *
 * Nothing in this file invents a new visual language. Surfaces, gradients,
 * radii, strokes and shadows are lifted from treatments already in the deck
 * (the .tq__card recipe in particular) so the portfolio cut reads as the same
 * designer's work.
 * ========================================================================== */

/* ---------------------------------------------------------------- logo rule
 * The cover keeps the Disney lockup, so the case study still opens by saying
 * this was Disney Advertising work. Every later slide drops the persistent
 * corner mark: a portfolio case study does not need to re-brand itself on
 * each page, and the corner is better spent as breathing room.
 *
 * Product logos that live inside screenshots are artwork, not shell, and are
 * untouched by this rule. */
[data-deck-variant="portfolio"] .atlas-slide .rpx__logo,
[data-deck-variant="portfolio"] .atlas-slide .sup__logo,
[data-deck-variant="portfolio"] .atlas-slide .usc__logo,
[data-deck-variant="portfolio"] .atlas-slide .sar__logo,
[data-deck-variant="portfolio"] .atlas-slide .mpl__logo,
[data-deck-variant="portfolio"] .atlas-slide .clo__logo,
[data-deck-variant="portfolio"] .atlas-slide .tq__logo,
[data-deck-variant="portfolio"] .atlas-slide .wln__logo,
[data-deck-variant="portfolio"] .atlas-slide .rcd__brand,
[data-deck-variant="portfolio"] .atlas-slide .cw__brand,
[data-deck-variant="portfolio"] .atlas-slide .frw__brand,
[data-deck-variant="portfolio"] .atlas-slide .wpc__brand,
[data-deck-variant="portfolio"] .atlas-slide .rlp__brand {
  display: none;
}

/* -------------------------------------------------------- shared deck tokens
 * Named here once so the portfolio slides below cannot drift from the deck.
 * Values are read off existing slides, not invented:
 *   surface / border / shadow  -> .tq__card
 *   header origin 63 / 88      -> .rcd__header, .frw__header
 *   title 56 / subtitle 36     -> the deck's established hierarchy */
[data-deck-variant="portfolio"] .pf {
  --pf-card-surface: linear-gradient(41.24deg, #303946 1%, #202833 12.3%, #27313D 63.2%);
  --pf-card-border: rgba(75, 90, 107, 0.4);
  --pf-card-shadow: 0 10px 14px rgba(0, 0, 0, 0.32),
                    inset 0 1px 12px rgba(255, 255, 255, 0.08);
  --pf-card-radius: 16px;
  --pf-eyebrow: rgba(255, 255, 255, 0.56);

  position: absolute;
  inset: 0;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  color: #FFFFFF;
  text-rendering: geometricPrecision;
}

/* Header block matches the origin and rhythm the other slides already use. */
[data-deck-variant="portfolio"] .pf__header {
  position: absolute;
  left: 63px;
  top: 88px;
  width: 1794px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-deck-variant="portfolio"] .pf__title {
  margin: 0;
  font-size: 56px;
  font-weight: var(--font-heading);
  line-height: 56px;
  letter-spacing: 0;
}
[data-deck-variant="portfolio"] .pf__subtitle {
  margin: 0;
  width: 1300px;
  font-size: 36px;
  font-weight: var(--font-subheading);
  line-height: 56px;
  color: rgba(255, 255, 255, 0.86);
}

/* ------------------------------------------------------------- card cluster
 * One row of equal cards. Four is the widest the row is designed for; the
 * grid keeps the gutters identical whether the slide uses three or four. */
[data-deck-variant="portfolio"] .pf__cards {
  position: absolute;
  left: 63px;
  top: 300px;
  width: 1794px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
[data-deck-variant="portfolio"] .pf__cards--three {
  grid-template-columns: repeat(3, 1fr);
}
[data-deck-variant="portfolio"] .pf__card {
  box-sizing: border-box;
  min-height: 520px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border: 1px solid var(--pf-card-border);
  border-radius: var(--pf-card-radius);
  background: var(--pf-card-surface);
  box-shadow: var(--pf-card-shadow);
}
[data-deck-variant="portfolio"] .pf__eyebrow {
  margin: 0;
  font-size: 24px;
  font-weight: var(--font-body);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-eyebrow);
}
[data-deck-variant="portfolio"] .pf__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-deck-variant="portfolio"] .pf__list li {
  font-size: 32px;
  font-weight: var(--font-label);
  line-height: 42px;
}
/* Secondary line inside a card, for the one case that needs a qualifier. */
[data-deck-variant="portfolio"] .pf__note {
  margin: 0;
  font-size: 26px;
  font-weight: var(--font-body);
  line-height: 34px;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------- outcome conclusion (4 cards)
 * Editorial outcome summaries: left-aligned icon → title → supporting copy.
 * Same row placement and card footprint as the prior summary pass. */
[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__header--outcome {
  top: 88px;
  gap: 10px;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__subtitle--outcome {
  width: 1794px;
  max-width: 1794px;
  font-size: 32px;
  line-height: 42px;
  color: rgba(255, 255, 255, 0.72);
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__cards--outcome {
  top: 320px;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: stretch;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__card--outcome {
  box-sizing: border-box;
  min-height: 0;
  height: 290px;
  padding: 30px 24px 30px;
  gap: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Displayed icon is 28px. The extra 4px comes out of the gap below
   * the icon so the title and body stay where they are. */
  width: calc(28px / var(--atlas-scale, 1));
  height: calc(28px / var(--atlas-scale, 1));
  flex: 0 0 calc(28px / var(--atlas-scale, 1));
  margin: 0 0 calc(20px - 4px / var(--atlas-scale, 1));
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__card-icon img {
  display: block;
  width: calc(28px / var(--atlas-scale, 1));
  height: calc(28px / var(--atlas-scale, 1));
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__card-title {
  margin: 0 0 10px;
  max-width: 100%;
  font-size: calc(20px / var(--atlas-scale, 1));
  font-weight: var(--font-heading);
  line-height: 1.25;
  letter-spacing: 0;
  color: #ffffff;
  white-space: nowrap;
  text-align: left;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-outcome[data-atlas-slide-id="portfolio-outcome"]
  .pf__card-copy {
  display: block;
  margin: 0;
  max-width: 100%;
  width: 100%;
  font-size: calc(18px / var(--atlas-scale, 1));
  font-weight: var(--font-body);
  font-style: normal;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
}

/* ------------------------------------------------------------------- cover
 * One positioning line under the date. The cover lays its elements out with
 * absolute top values off the same 160px left margin (title 518, presenter
 * 664, date ending at 798), so this line has to be placed the same way; left
 * in normal flow it lands at the top of the stage above the title.
 *
 * Sized below the presenter name so it reads as a caption, not a third title. */
[data-deck-variant="portfolio"] .cov__positioning {
  position: absolute;
  left: 160px;
  top: 846px;
  margin: 0;
  width: 1180px;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  font-size: 32px;
  font-weight: var(--font-body);
  line-height: 44px;
  color: rgba(255, 255, 255, 0.78);
}

/* Role metadata, one line, deliberately quiet. Sits below the positioning
 * statement at Roman 400 / 24px against the cover's muted text colour, so the
 * reading order stays title, positioning line, then this. Intentionally not a
 * card: it is project metadata, not a claim. */
[data-deck-variant="portfolio"] .cov__meta {
  position: absolute;
  left: 160px;
  top: 926px;
  margin: 0;
  width: 1180px;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: var(--font-caption);
  line-height: 32px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.52);
}

/* 2026-09-18: the ecosystem line that sat below the three steps was removed.
 * It named internal systems, which an external reader cannot decode, and the
 * three steps already carry the whole point on their own. No replacement copy,
 * so the space below the cards is simply left open. */

/* The shared rule caps this subtitle at 1300px, which was tuned to the old
 * 114 character sentence. The context line is shorter but still broke with
 * "with." orphaned on a second line, so the box is widened to hold it on one
 * line. Widening the text box rather than reducing the type size, and rather
 * than rewording the approved copy. */
[data-deck-variant="portfolio"] .atlas-slide--rate-card-data .rcd__subtitle {
  width: 1620px;
}

/* ------------------------------------------------------- title consistency
 * The original deck sets three titles in the Black face (connected-workflows,
 * line-need, why-pricing) and the rest in Heavy. The portfolio run keeps only
 * connected-workflows of those three, which left one 800 headline among eleven
 * at 600. Normalised to Heavy so the title treatment does not jump mid deck.
 * The original keeps its mix; this rule cannot reach it. */
[data-deck-variant="portfolio"] .atlas-slide--connected-workflows .cw__title,
[data-deck-variant="portfolio"] .atlas-slide--connected-workflows .cw__subtitle {
  font-weight: var(--font-heading);
}

/* --------------------------------------- "Previous design" / "Back" controls
 * .atlas-stage is pointer-events: none for the whole deck, and historically
 * only [data-atlas-enter] on the closing slide opted back in. These two
 * controls were added later and never did, so a mouse click on them hit
 * .atlas-stage-wrap instead of the button and nothing happened. The handler,
 * the markup and the cloned step-wizard prototype were all fine, which is why
 * Tab then Enter already worked and the automated check (which calls .click()
 * in JS) never caught it. Opting the two buttons back in makes the existing
 * interaction reachable by pointer. Nothing else about it changes.
 * Scoped to the portfolio deck so index.html is untouched. */
[data-deck-variant="portfolio"] .atlas-slide--connected-workflows .cw__toggle,
[data-deck-variant="portfolio"] .atlas-slide--connected-workflows .cw__back {
  pointer-events: auto;
}

/* --------------------------------------------------------- product showcase
 * 2026-09-18: the single slide that carried both captures side by side is now
 * two slides, one idea each, so each capture is the hero rather than half a
 * pair. The frame treatment (thin stroke, generous radius, soft drop shadow)
 * is unchanged and is the same one the deck already uses on the rate-card-data
 * screenshots, so the captures still read as one family.
 *
 * The header block ends near y=208. Starting the hero at 288 and running it
 * 724px tall leaves a 68px foot, and at the captures' 1.6 ratio that comes out
 * 1158px wide inside the 1794px content column. Height drives the size and the
 * width follows, so the aspect ratio is never forced. */
[data-deck-variant="portfolio"] .pf__hero {
  position: absolute;
  left: 63px;
  top: 288px;
  width: 1794px;
  height: 724px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
[data-deck-variant="portfolio"] .pf__hero img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--pf-card-border);
  border-radius: var(--pf-card-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  object-fit: contain;
  object-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}

/* The two showcase slides run longer titles than the card slides, so the
 * subtitle gets the header's full measure rather than the 1300px default. */
[data-deck-variant="portfolio"] .atlas-slide--pf-product .pf__subtitle {
  width: 1794px;
}

/* ------------------------------------------- FINAL DESIGN showcase pair
 * List ("Find the Rate Card you need") and Detail ("Manage pricing
 * inside the Rate Card") share one template so flipping between them
 * does not jump: same header rhythm, same 1794 x 796 product viewport,
 * same frame chrome, same hover-only scrollbar.
 *
 * The figure is a capped product window (overflow: auto). The capture
 * scales to the frame width and scrolls vertically inside it. */
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__header,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__header {
  top: 72px;
  gap: 8px;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__eyebrow--final,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__eyebrow--final {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: var(--font-heading);
  line-height: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B7F0C8;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__subtitle,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__subtitle {
  line-height: 48px;
}

/* Full content-column width, tall capped height. Header ends ~224 with
 * eyebrow rhythm; 20px gap under subtitle → top 244. 48px foot → height 788. */
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport {
  left: 63px;
  top: 244px;
  width: 1794px;
  height: 788px;
  transform: none;
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--pf-card-border);
  border-radius: var(--pf-card-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  background: #ffffff;
  /* Resting: no visible scrollbar (Firefox). */
  scrollbar-width: none;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport:hover,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 40, 51, 0.45) transparent;
}

/* WebKit / Blink: hide track until hover. */
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport::-webkit-scrollbar,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport:hover::-webkit-scrollbar,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport:hover::-webkit-scrollbar-track,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport:hover::-webkit-scrollbar-track {
  background: transparent;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport:hover::-webkit-scrollbar-thumb,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport:hover::-webkit-scrollbar-thumb {
  background: rgba(32, 40, 51, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-list"]
  .pf__hero--viewport img,
[data-deck-variant="portfolio"]
  .atlas-slide--pf-product[data-atlas-slide-id="portfolio-product-detail"]
  .pf__hero--viewport img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Scrollable product window: one <img>, natural height, no tile/stretch. */
  object-fit: contain;
  object-position: top center;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

/* --------------------------------------------- before / after compare pair
 * Shared left/right template for slides 7 and 8.
 *   eyebrow + title + subtitle
 *   left  ~63%  product window (16:10)
 *   right ~35%  interaction model
 * Same geometry on both slides so PREVIOUS → CURRENT reads as a state flip. */
[data-deck-variant="portfolio"] .atlas-slide--pf-compare {
  background: #020024;
}

[data-deck-variant="portfolio"] .pf-compare {
  --pf-card-surface: linear-gradient(41.24deg, #303946 1%, #202833 12.3%, #27313D 63.2%);
  --pf-card-border: rgba(75, 90, 107, 0.55);
  --pf-card-shadow: 0 10px 14px rgba(0, 0, 0, 0.32),
                    inset 0 1px 12px rgba(255, 255, 255, 0.08);
  --pf-card-radius: 16px;
  --pf-shot-w: 1130px;
  --pf-shot-h: 706px; /* 16:10 */
  --pf-shot-left: 63px;
  --pf-shot-top: 300px;
  --pf-model-left: 1240px;
  --pf-model-top: 300px;
  --pf-model-w: 617px;
  --pf-unit-w: 156px;
  --pf-unit-h: 152px;
  --pf-unit-gap: 10px;
  --pf-arrow-w: 28px;
  --pf-wizard: #FF7666;
  --pf-connected: #B7F0C8;

  position: absolute;
  inset: 0;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  color: #FFFFFF;
  text-rendering: geometricPrecision;
}

[data-deck-variant="portfolio"] .pf-compare__header {
  position: absolute;
  left: 63px;
  top: 72px;
  width: 1794px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-deck-variant="portfolio"] .pf-compare__eyebrow {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: var(--font-heading);
  line-height: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-deck-variant="portfolio"] .pf-compare--previous .pf-compare__eyebrow {
  color: var(--pf-wizard);
}

[data-deck-variant="portfolio"] .pf-compare--current .pf-compare__eyebrow {
  color: var(--pf-connected);
}

[data-deck-variant="portfolio"] .pf-compare__title {
  margin: 0;
  font-size: 56px;
  font-weight: var(--font-heading);
  line-height: 56px;
  letter-spacing: 0;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .pf-compare__subtitle {
  margin: 0;
  max-width: 1500px;
  font-size: 36px;
  font-weight: var(--font-subheading);
  line-height: 48px;
  color: rgba(255, 255, 255, 0.86);
}

/* Product window. Same box on both slides. */
[data-deck-variant="portfolio"] .pf-compare__shot {
  position: absolute;
  left: var(--pf-shot-left);
  top: var(--pf-shot-top);
  width: var(--pf-shot-w);
  height: var(--pf-shot-h);
  margin: 0;
}

[data-deck-variant="portfolio"] .pf-compare__frame {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--pf-card-border);
  border-radius: 18px;
  background: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

[data-deck-variant="portfolio"] .pf-compare__frame img {
  display: block;
  width: 100%;
  height: 100%;
  /* Assets are 16:10. Contain preserves aspect ratio with no stretch. */
  object-fit: contain;
  object-position: top center;
  background: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

/* Live previous-design mount retained as unused fallback; Slide A now uses
 * a crisp 2x static capture (portfolio-ui-previous-wizard.png). */
[data-deck-variant="portfolio"] .pf-compare__prev-mount {
  display: none;
}

[data-deck-variant="portfolio"] .pf-compare__frame--previous {
  background-color: #f7f9fa;
  background-image: none;
  background-repeat: no-repeat;
}

[data-deck-variant="portfolio"] .pf-compare__frame--previous img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
  background-repeat: no-repeat;
}

/* Right-side interaction model. Same region box on both slides. */
[data-deck-variant="portfolio"] .pf-compare__model {
  position: absolute;
  left: var(--pf-model-left);
  top: var(--pf-model-top);
  width: var(--pf-model-w);
  height: var(--pf-shot-h);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Previous + Current: top-align with screenshot, left-align as one unit. */
[data-deck-variant="portfolio"] .pf-compare__model--wizard,
[data-deck-variant="portfolio"] .pf-compare__model--connected {
  align-items: flex-start;
  justify-content: flex-start;
}

[data-deck-variant="portfolio"] .pf-compare__model-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 40px;
}

[data-deck-variant="portfolio"] .pf-compare__model-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

[data-deck-variant="portfolio"] .pf-compare__model-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-deck-variant="portfolio"] .pf-compare__model-icon--structured {
  width: 36px;
  height: 36px;
}

[data-deck-variant="portfolio"] .pf-compare__model-label {
  margin: 0;
  font-size: 28px;
  font-weight: var(--font-heading);
  line-height: 1;
}

[data-deck-variant="portfolio"] .pf-compare__model--wizard .pf-compare__model-label {
  color: var(--pf-wizard);
}

[data-deck-variant="portfolio"] .pf-compare__model--connected .pf-compare__model-label {
  color: var(--pf-connected);
}

/* Previous + Current: shared two-line interaction copy (subtitle type scale). */
[data-deck-variant="portfolio"] .pf-compare__model-copy {
  margin: 0;
  max-width: none;
  overflow: visible;
  font-size: 36px; /* same as .pf-compare__subtitle */
  font-weight: var(--font-subheading);
  line-height: 48px;
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
  white-space: normal;
}

/* Blue bidirectional glyph: the only interaction device on Current. */
[data-deck-variant="portfolio"] .pf-compare__copy-arrow {
  color: #2997FF;
  font-weight: var(--font-heading);
}

/* Keep each statement on one line (mirrors Previous two-line copy). */
[data-deck-variant="portfolio"] .pf-compare__model-line {
  white-space: nowrap;
}

/* Unused legacy flow / unit diagram styles (Current is typography-only). */
[data-deck-variant="portfolio"] .pf-compare__flow,
[data-deck-variant="portfolio"] .pf-compare__flow-item,
[data-deck-variant="portfolio"] .pf-compare__flow-icon,
[data-deck-variant="portfolio"] .pf-compare__flow-label,
[data-deck-variant="portfolio"] .pf-compare__flow-arrow {
  display: none;
}

[data-deck-variant="portfolio"] .pf-compare__units {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pf-unit-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

[data-deck-variant="portfolio"] .pf-compare__unit {
  box-sizing: border-box;
  width: var(--pf-unit-w);
  height: var(--pf-unit-h);
  padding: 18px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-stack icon then label so every card shares the same icon y. */
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid var(--pf-card-border);
  border-radius: var(--pf-card-radius);
  background: var(--pf-card-surface);
  box-shadow: var(--pf-card-shadow);
  opacity: 1;
}

[data-deck-variant="portfolio"] .pf-compare__model--wizard .pf-compare__unit {
  border-color: rgba(255, 118, 102, 0.45);
  background: linear-gradient(41.24deg, #3a4554 1%, #2a3340 12.3%, #323c4a 63.2%);
}

[data-deck-variant="portfolio"] .pf-compare__model--connected .pf-compare__unit {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
}

/* Fixed 48px icon cell + fixed two-line label cell so Rate Card Details /
 * Line Items / Premiums share one icon centerline and one label band. */
[data-deck-variant="portfolio"] .pf-compare__unit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

[data-deck-variant="portfolio"] .pf-compare__unit-icon img {
  display: block;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  object-position: center;
}

[data-deck-variant="portfolio"] .pf-compare__step-num {
  filter: brightness(0) saturate(100%) invert(62%) sepia(48%) saturate(1800%)
          hue-rotate(325deg) brightness(105%) contrast(101%);
}

[data-deck-variant="portfolio"] .pf-compare__unit-label {
  margin: 0;
  width: 100%;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-heading);
  line-height: 22px;
  color: #FFFFFF;
}

[data-deck-variant="portfolio"] .pf-compare__arrow {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--pf-arrow-w);
  height: 14px;
  flex: 0 0 var(--pf-arrow-w);
  border: 0;
  opacity: 1;
  background: transparent;
}

[data-deck-variant="portfolio"] .pf-compare__arrow--forward {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 3px,
    #c4c8d4 3px,
    #c4c8d4 calc(100% - 1px),
    transparent calc(100% - 1px)
  );
  background-size: 100% 2px;
  background-position: center left;
  background-repeat: no-repeat;
}

[data-deck-variant="portfolio"] .pf-compare__arrow--forward::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #c4c8d4;
}

[data-deck-variant="portfolio"] .pf-compare__arrow--bidirectional {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 3px,
    #2997FF 3px,
    #2997FF calc(100% - 3px),
    transparent calc(100% - 3px)
  );
  background-size: 100% 2px;
  background-position: center left;
  background-repeat: no-repeat;
}

[data-deck-variant="portfolio"] .pf-compare__arrow--bidirectional::before,
[data-deck-variant="portfolio"] .pf-compare__arrow--bidirectional::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}

[data-deck-variant="portfolio"] .pf-compare__arrow--bidirectional::before {
  left: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid #2997FF;
}

[data-deck-variant="portfolio"] .pf-compare__arrow--bidirectional::after {
  right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #2997FF;
}

/* --------------------------------------------- Figma 52358:1052 workflow
 * Portfolio-only rebuild of the future-rate-card slide. Absolute positions
 * and dimensions are taken from the Figma frame. Shared .frw rules in
 * styles.css continue to drive index.html and are left alone. */
[data-deck-variant="portfolio"] .atlas-slide--pf-frw {
  background: #020024;
}

[data-deck-variant="portfolio"] .atlas-slide--pf-frw .frw,
[data-deck-variant="portfolio"] .atlas-slide--pf-frw .frw__header,
[data-deck-variant="portfolio"] .atlas-slide--pf-frw .frw__workflow,
[data-deck-variant="portfolio"] .atlas-slide--pf-frw .frw__brand {
  display: none !important;
}

[data-deck-variant="portfolio"] .pf-frw {
  position: absolute;
  inset: 0;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  color: #FFFFFF;
  text-rendering: geometricPrecision;
}

[data-deck-variant="portfolio"] .pf-frw__header {
  position: absolute;
  left: 63px;
  top: 88px;
  width: 1828px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-deck-variant="portfolio"] .pf-frw__title {
  margin: 0;
  width: 1727px;
  font-size: 56px;
  font-weight: var(--font-heading);
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .pf-frw__subtitle {
  margin: 0;
  width: 1808px;
  font-size: 36px;
  font-weight: var(--font-heading);
  line-height: 56px;
  letter-spacing: 0;
  color: #FFFFFF;
}

[data-deck-variant="portfolio"] .pf-frw__step {
  position: absolute;
  /* Workflow group nudged up toward the subtitle for calmer vertical rhythm. */
  top: 340px;
  display: flex;
  align-items: center;
  height: 236px;
}

/* Narrower equal cards, even gaps, recentered as one matched set. */
[data-deck-variant="portfolio"] .pf-frw__step--1 { left: 255px; }
[data-deck-variant="portfolio"] .pf-frw__step--2 { left: 795px; }
[data-deck-variant="portfolio"] .pf-frw__step--3 { left: 1335px; }

/* Colored side rails removed: decorative only, no information value. */

[data-deck-variant="portfolio"] .pf-frw__card {
  position: relative;
  box-sizing: border-box;
  width: 330px;
  height: 236px;
  display: block;
  padding: 0;
  border: 1.2px solid #4b5a6b;
  border-radius: 19.2px;
  background: linear-gradient(
    33.651905432085904deg,
    rgb(48, 57, 70) 0.9976%,
    rgb(32, 40, 51) 21.967%,
    rgb(39, 49, 61) 104.5%
  );
  box-shadow:
    0 12px 16.8px rgba(0, 0, 0, 0.32),
    inset 0 1.2px 14.4px rgba(255, 255, 255, 0.08);
  overflow: visible;
}

/* Fixed optical stack: icon zone + two-line title zone. */
[data-deck-variant="portfolio"] .pf-frw__card-inner {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 270px;
  gap: 14px;
  overflow: visible;
}

/* Shared icon zone: same box, same centerline on every card. */
[data-deck-variant="portfolio"] .pf-frw__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  margin: 0;
}

[data-deck-variant="portfolio"] .pf-frw__icon img {
  display: block;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Optical icon scales: equal visual mass, not identical SVG bounds. */
[data-deck-variant="portfolio"] .pf-frw__step--1 .pf-frw__icon img {
  width: 92px;
  height: 92px;
}

[data-deck-variant="portfolio"] .pf-frw__step--2 .pf-frw__icon img {
  width: 76px;
  height: 76px;
}

[data-deck-variant="portfolio"] .pf-frw__step--3 .pf-frw__icon img {
  width: 86px;
  height: 86px;
}

/* Shared two-line title zone: identical height / rhythm on every card. */
[data-deck-variant="portfolio"] .pf-frw__card-title {
  box-sizing: border-box;
  margin: 0;
  width: 270px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: var(--font-label);
  line-height: 36px;
  text-align: center;
  white-space: normal;
  color: #f5f7fa;
}

[data-deck-variant="portfolio"] .pf-frw__step--1 .pf-frw__card-title {
  color: #eceeee;
}

[data-deck-variant="portfolio"] .pf-frw__support {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  /* Shared box under every card. Wide enough for each sentence on one
   * line at 26/34 so the three blocks share one calm baseline. */
  width: 510px;
  max-width: 510px;
  min-height: 34px;
  font-size: 26px;
  font-weight: var(--font-heading);
  line-height: 34px;
  text-align: center;
  color: #b8bcc7;
  transform: translateX(-50%);
}

[data-deck-variant="portfolio"] .pf-frw__support--1,
[data-deck-variant="portfolio"] .pf-frw__support--2,
[data-deck-variant="portfolio"] .pf-frw__support--3 {
  top: 599px;
}

[data-deck-variant="portfolio"] .pf-frw__support--1 { left: 420px; }
[data-deck-variant="portfolio"] .pf-frw__support--2 { left: 960px; }
[data-deck-variant="portfolio"] .pf-frw__support--3 { left: 1500px; }

[data-deck-variant="portfolio"] .pf-frw__arrow {
  position: absolute;
  top: 447px;
  width: 181.8px;
  height: 22.23px;
  display: block;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

[data-deck-variant="portfolio"] .pf-frw__arrow--1 { left: 599.1px; }
[data-deck-variant="portfolio"] .pf-frw__arrow--2 { left: 1139.1px; }

[data-deck-variant="portfolio"] .pf-frw__brand {
  position: absolute;
  left: 1826px;
  top: 997px;
  width: 36px;
  height: 41px;
  display: block;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Portfolio deck normally hides corner marks; Figma 52358:1052 includes
 * this brand lockup, so keep it visible on this slide only. */
[data-deck-variant="portfolio"] .atlas-slide--pf-frw .pf-frw__brand {
  display: block;
}

/* ==========================================================================
 * Portfolio: Why pricing gets complicated (.wpcf)
 * Self-contained copy so the portfolio cut does not depend on uncommitted
 * styles.css changes. Selectors gated under [data-deck-variant="portfolio"].
 * ========================================================================== */
[data-deck-variant="portfolio"] .atlas-slide--why-pricing:has(.wpcf) {
  background: #020024;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf {
  position: absolute;
  inset: 0;
  color: #ffffff;
  font-family: var(--font-family-inspire);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__header {
  position: absolute;
  left: 63px;
  top: 88px;
  width: 1828px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__title,
[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__subtitle {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-family-inspire);
  font-weight: var(--font-heading); /* InspireTWDC Heavy 600 */
  letter-spacing: 0;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__title {
  width: 1727px;
  font-size: 56px;
  line-height: 1;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__subtitle {
  width: 1808px;
  font-size: 36px;
  line-height: 56px;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__columns {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel {
  position: absolute;
  top: 294px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 500px;
  height: 480px;
  padding: 48px 16px 4px;
  border-radius: 18px;
  background: #202735;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(84, 92, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--negotiation {
  left: 141px;
  border: 2px solid #cb6f5f;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--priced {
  left: 717px;
  border: 2px solid #7c89ad;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--changes {
  left: 1293px;
  border: 2px solid #7a7df9;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 415px;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  overflow: visible;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__col-title {
  margin: 0;
  font-family: var(--font-family-inspire);
  font-size: 28px;
  font-weight: var(--font-heading);
  line-height: normal;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--negotiation .wpcf__col-title {
  color: #d18b7f;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--priced .wpcf__col-title {
  color: #a5b5e1;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__panel--changes .wpcf__col-title {
  color: #7a7df9;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__col-sub {
  margin: 0;
  width: 431px;
  height: 51px;
  color: #c8cdd8;
  font-family: var(--font-family-inspire);
  font-size: 22px;
  font-weight: var(--font-heading);
  line-height: 26px;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 32px;
  width: 415px;
  padding: 15px 16px;
  border-radius: 8px;
  background: #2f3745;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__icon-wrap {
  display: flex;
  flex: 0 0 80px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 16px;
  border-radius: 48px;
  background: #24303c;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__icon {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: visible;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__icon img {
  display: block;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__icon--users img {
  position: absolute;
  top: 0;
  left: -7.58765px;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item-copy {
  display: flex;
  flex-direction: column;
  gap: 8.2px;
  width: 271px;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item-title,
[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item-sub {
  margin: 0;
  width: 271px;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item-title {
  color: #ffffff;
  font-family: var(--font-family-inspire);
  font-weight: var(--font-heading);
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__item-sub {
  color: #c8cdd8;
  font-family: var(--font-family-inspire);
  font-weight: var(--font-caption); /* InspireTWDC Roman 400 */
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__bracket {
  position: absolute;
  top: 799px;
  left: 380px;
  display: block;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__takeaway {
  position: absolute;
  top: 876px;
  left: calc(50% + 5.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 862px;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__takeaway-kicker,
[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__takeaway-line {
  display: block;
  font-family: var(--font-family-inspire);
  font-size: 28px;
  font-weight: var(--font-heading);
  line-height: normal;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__takeaway-kicker {
  color: #db9d6e;
}

[data-deck-variant="portfolio"] .atlas-slide--why-pricing .wpcf__takeaway-line {
  color: #c8cdd8;
}

/* ============================================================
 * Same product. Different applicable rate. (portfolio case study)
 * Keep the pumpkin / shelf illustration and branching wire.
 * Progressive reveal order is unchanged; portfolio autoplay is
 * owned by initAtlasSameAdRate in app.js. Align both rate
 * outcomes as equal evidence, and keep copy minimal.
 * ============================================================ */

/* Subtitle: case-study framing, allow wrap if needed. */
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__subtitle {
  white-space: normal;
  max-width: 1600px;
  color: rgba(255, 255, 255, 0.92);
}

/* Rates are the evidence. Make them the strongest accent on the page. */
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__rate-value {
  font-size: 40px;
  line-height: 40px;
  font-weight: var(--font-label);
  letter-spacing: 0.01em;
}

[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__rate {
  height: 48px;
  gap: 10px;
}

/* Deal labels stay secondary to the rate. */
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__deal {
  font-size: 32px;
  line-height: 38px;
  font-weight: var(--font-label);
}

[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__placement {
  font-size: 28px;
  line-height: 34px;
  font-weight: var(--font-body);
  color: rgba(236, 238, 238, 0.78);
}

/* Equal column rhythm for both outcomes (shared left edge + stack). */
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--upfront .sar__rate,
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--scatter .sar__rate {
  top: 78px;
  left: 280px;
}

[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--upfront .sar__deal,
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--scatter .sar__deal {
  top: 136px;
  left: 280px;
}

[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--upfront .sar__placement,
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__copy--scatter .sar__placement {
  top: 176px;
  left: 280px;
  font-size: 28px;
  line-height: 34px;
}

/* Footnote stays quiet. */
[data-deck-variant="portfolio"] .atlas-slide--same-ad-rate .sar__footnote {
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  line-height: 24px;
  font-style: italic;
  font-weight: 400;
}

/* ------------------------------------------- closing: clean portfolio ending
 * Appendix links and divider are removed from the portfolio closing slide.
 * Title, subtitle, and CTA sit as one left-aligned editorial group, vertically
 * composed so the slide does not feel stuck at the top. CTA is true inline-flex
 * (label + arrow) so the arrow can never overlap the text. */
[data-deck-variant="portfolio"] .atlas-slide--closing .clo--portfolio-end {
  pointer-events: none;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__content {
  position: absolute;
  left: 63px;
  top: 50%;
  transform: translateY(-52%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: auto;
  max-width: 1400px;
  pointer-events: none;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__title {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  margin: 0;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__subtitle {
  position: static;
  margin: 0;
  width: auto;
  max-width: 980px;
  font-family: "InspireTWDC", "MultiplaneTWDC Display", "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: var(--font-subheading);
  line-height: 48px;
  color: rgba(255, 255, 255, 0.86);
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__cta {
  position: static;
  left: auto;
  top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 93px;
  margin-top: 12px;
  padding: 24px 40px;
  box-sizing: border-box;
  pointer-events: auto;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__cta-label {
  display: block;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 33.6px;
  line-height: 1.2;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__arrow--cta {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: block;
  transition: transform 160ms ease;
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__cta:hover .clo__arrow--cta {
  transform: translateX(4px);
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__cta:hover {
  filter: brightness(1.12);
}

[data-deck-variant="portfolio"] .atlas-slide--closing .clo__cta:focus-visible {
  outline: 2px solid #4F80E0;
  outline-offset: 6px;
  border-radius: 12px;
}

/* Appendix UI is not part of the portfolio ending. Keep shared appendix
 * slide markup in the DOM for deep links, but hide any leftover closing
 * affordances if markup drifts. */
[data-deck-variant="portfolio"] .atlas-slide--closing .clo__rule,
[data-deck-variant="portfolio"] .atlas-slide--closing .clo__appendix,
[data-deck-variant="portfolio"] .atlas-slide--closing .clo__row {
  display: none !important;
}