/* ==========================================================================
   Wayfinder Partners — Financial Leadership Readiness Checkup (page styles)
   Extends css/site.css and reuses the pd-* components from
   css/profit-diagnostic.css. This file adds only the cr-* pieces.

   IDENTITY: this tool sits above the four journeys rather than inside one, so
   it does not borrow a journey hue. Its chrome accent is deep navy (the most
   senior color in the system) and its energy comes from the signature
   gradient in the meters. That reads as a sibling of the Financial Health
   Checkup, one step more sober, which is the intent.
   ========================================================================== */

.cr-page { --accent: var(--navy); }

/* Cyan-on-white fails text contrast, so on-white accents use the darker cyan
   the cash planner established. Dark sections keep true brand cyan. */
.cr-page { --cr-cyan-text: #066E99; }
.cr-page .pd-app :focus-visible { outline-color: var(--navy); }
.cr-page .cr-cta :focus-visible { outline-color: var(--cyan); }

/* The app card gets a gradient hairline the other tools don't have: the one
   piece of chrome that marks this as the escalation layer. */
.cr-page .pd-app { position: relative; overflow: hidden; }
.cr-page .pd-app::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.cr-page .pd-progress__label { color: var(--ink-soft); }

/* Sentence-length answers read better as full-width rows. */
.cr-options { grid-template-columns: 1fr; }
.cr-options .pd-option { font-size: 15px; line-height: 1.45; }

/* ---------- Gate: the headline result, shown before any details ---------- */
.cr-teaser {
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 0 12px 12px 0;
  background: var(--mist);
  padding: 16px 20px;
  margin: 0 0 22px;
  max-width: 620px;
}
.cr-teaser__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.cr-teaser__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 18.5px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Results: the relationship display
   Two readings of two different kinds, drawn as two different shapes so they
   can never be misread as one shared axis. Demands is a three-rung ladder
   (categorical). Capability is a 0 to 100 meter (continuous).
   ========================================================================== */
.cr-relation {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  padding: clamp(20px, 3vw, 28px);
  margin: 20px 0 30px;
}
.cr-relation__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px 34px;
}
@media (max-width: 700px) { .cr-relation__pair { grid-template-columns: 1fr; gap: 26px; } }

.cr-panel__label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.cr-panel__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.cr-panel__value .cr-num { font-size: clamp(38px, 5.5vw, 52px); font-weight: 700; line-height: 1; }
.cr-panel__value .cr-den { font-size: 18px; font-weight: 600; color: var(--ink-faint); }
.cr-panel__word {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.1;
}
.cr-panel--capability .cr-panel__word {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  align-self: center;
}
.cr-panel__note {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 14px;
}

/* ---- Business demands: three ascending rungs ---- */
.cr-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
}
.cr-rung { display: grid; gap: 7px; justify-items: center; }
.cr-rung__bar {
  width: 100%;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink-faint) 20%, #fff);
  /* ascending steps: 26 / 40 / 54px */
  height: calc(26px + var(--i) * 14px);
  align-self: end;
}
.cr-rung.is-on .cr-rung__bar { background: var(--grad); }
.cr-rung__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.cr-rung.is-on .cr-rung__name { color: var(--ink); font-weight: 700; }
/* The active rung is marked by shape as well as color, so the chart never
   depends on color alone. */
.cr-rung__mark { font-size: 9px; line-height: 1; color: var(--navy); margin-top: -3px; }
.cr-ladder { grid-auto-rows: min-content; }
.cr-rung { grid-template-rows: 54px auto auto; align-content: end; }

/* ---- Finance capability: 0 to 100 meter ---- */
.cr-meter__track {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink-faint) 16%, #fff);
  overflow: visible;
}
.cr-meter__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w);
  min-width: 8px;
  border-radius: 8px;
  background: var(--grad);
}
.cr-meter__tick {
  position: absolute; top: -3px; bottom: -3px;
  width: 1px;
  background: rgba(10,25,49,.28);
}
.cr-meter__tickn {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.cr-meter__marker {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--navy);
  box-shadow: 0 2px 8px -2px rgba(10,25,49,.35);
}
/* The 0 and 100 endpoints sit on the same baseline as the 40/60/80 ticks,
   which are positioned 6px below the track. */
.cr-meter__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.cr-panel--capability .cr-panel__note { margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .cr-meter__fill { animation: crFill .9s var(--ease-out) .2s both; }
  @keyframes crFill { from { width: 0; } to { width: var(--w); } }
  .cr-meter__marker { animation: crMark .4s var(--ease-out) 1s both; }
  @keyframes crMark { from { opacity: 0; transform: scale(.4); } }
  .cr-rung__bar { animation: crRung .45s var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 90ms); transform-origin: bottom center; }
  @keyframes crRung { from { transform: scaleY(.1); opacity: 0; } }
}

/* ---- The verdict, spanning both readings ---- */
.cr-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cr-verdict__k {
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 99px;
  padding: 6px 13px;
}
.cr-verdict--gap strong { color: var(--ink); }
.cr-verdict--match { color: var(--teal); }
.cr-verdict__icon {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,180,166,.15);
  flex: none;
}
.cr-verdict__icon svg { width: 14px; height: 14px; }

/* ==========================================================================
   Results: the five dimension readings
   ========================================================================== */
.cr-dims { display: grid; gap: 10px; }
.cr-dim {
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 4px 12px 12px 4px;
  background: #fff;
  padding: 15px 18px 14px;
}
.cr-dim.is-focus {
  border-color: color-mix(in srgb, var(--navy) 22%, #fff);
  border-left-color: var(--navy);
  background: var(--mist);
}
.cr-dim__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 9px;
}
.cr-dim__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.cr-dim__tag {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border-radius: 99px;
  padding: 4px 9px;
}
.cr-dim__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  flex: none;
  white-space: nowrap;
}
.cr-dim__score span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cr-dim__bar {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink-faint) 16%, #fff);
  overflow: hidden;
}
.cr-dim__bar span {
  display: block;
  height: 100%;
  width: var(--w);
  min-width: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--navy) 45%, #fff);
}
.cr-dim.is-focus .cr-dim__bar span { background: var(--grad); }
.cr-dim__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 9px;
}
.cr-dim__band {
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  flex: none;
}
.cr-dim.is-focus .cr-dim__band { color: var(--navy); }
.cr-dim__q { font-size: 13px; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .cr-dim {
    animation: crIn .36s var(--ease-out) both;
    animation-delay: calc(80ms + var(--i) * 70ms);
  }
  .cr-dim__bar span {
    animation: crBar .5s var(--ease-out) both;
    animation-delay: calc(240ms + var(--i) * 70ms);
    transform-origin: left center;
  }
  @keyframes crBar { from { transform: scaleX(0); } }
}
@media (max-width: 520px) {
  .cr-dim__head { flex-wrap: wrap; gap: 4px 10px; }
  .cr-dim__q { display: none; }   /* the band word carries the meaning */
}

/* ==========================================================================
   Results: the personalized statement
   The symptom sentence is deliberately NOT styled as an alarm. No red, no
   warning icon, no exclamation. The pressure is in the accuracy.
   ========================================================================== */
.cr-statement {
  margin: 24px 0 4px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--mist);
  border-left: 3px solid var(--navy);
  max-width: 720px;
}
.cr-statement__body { font-size: 16px; color: var(--ink-soft); }
.cr-statement__body strong { color: var(--ink); font-weight: 600; }
.cr-symptom { color: var(--ink); font-weight: 500; }
.cr-stakes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink);
}
.cr-variant { margin-top: 14px; }

/* ---------- Recommended capabilities ---------- */
.cr-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  max-width: 720px;
}
.cr-caps li {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 16px;
  background: #fff;
}

/* ---------- Static proof point ---------- */
.cr-proof {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  max-width: 720px;
}
.cr-proof__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.cr-proof p { font-size: 15px; color: var(--ink-soft); }

/* ==========================================================================
   Results: the booking CTA
   ========================================================================== */
.cr-cta {
  position: relative;
  margin-top: 40px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 80%);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
}
.cr-cta::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.cr-cta__bg {
  position: absolute;
  right: -30px; top: -10px;
  width: 420px; height: 300px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 60%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 60%);
}
.cr-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 32px 48px;
  align-items: start;
}
.cr-cta__kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.cr-cta h3 {
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.cr-cta__body { color: var(--dark-body); font-size: 15.5px; max-width: 560px; }

/* The microcopy is welded to the button: one block, one promise. */
.cr-cta__action {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px -10px rgba(8,204,252,.4);
}
.cr-cta__book {
  background: var(--cyan);
  color: var(--navy-2);
  font-size: 16.5px;
  padding: 18px 30px;
  border-radius: 0;
  justify-content: center;
  box-shadow: none;
}
.cr-cta__book:hover { transform: none; background: #2ad6ff; }
.cr-cta__book .arrow { background: rgba(8,15,30,.16); }
.cr-cta__micro {
  background: rgba(8,204,252,.14);
  border-top: 1px solid rgba(8,204,252,.3);
  color: #DDEFF8;
  font-size: 13px;
  text-align: center;
  padding: 10px 18px;
  line-height: 1.4;
}
.cr-cta__adjust {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-faint);
  padding: 10px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.25);
}
.cr-cta__adjust:hover { color: #fff; }
.cr-cta__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cr-cta__chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-body);
  border: 1px solid var(--line-dark);
  border-radius: 99px;
  padding: 8px 14px;
}
.cr-cta__chips .chip svg { width: 15px; height: 15px; color: var(--cyan); flex: none; }
.cr-cta__steps {
  border-left: 1px solid var(--line-dark);
  padding-left: 32px;
  align-self: center;
}
.cr-cta__steps-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: 16px;
}
.cr-cta__steps ol { display: grid; gap: 14px; margin: 0; padding: 0; }
.cr-cta__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--dark-body);
  line-height: 1.45;
}
.cr-cta__steps .n {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(8,204,252,.14);
  margin-top: 1px;
}
@media (max-width: 760px) {
  .cr-cta__grid { grid-template-columns: 1fr; gap: 26px; }
  .cr-cta__steps { border-left: none; border-top: 1px solid var(--line-dark); padding-left: 0; padding-top: 22px; }
  .cr-cta__bg { opacity: .5; }
  .cr-cta__action { display: flex; }
  .cr-cta__book { font-size: 15px; padding: 16px 18px; }
}

/* ==========================================================================
   Page sections unique to this tool
   ========================================================================== */

/* The five dimensions, explained (static section) */
.cr-dimgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1000px) { .cr-dimgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cr-dimgrid { grid-template-columns: 1fr; } }
.cr-dimcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 22px 20px 20px;
  overflow: hidden;
}
.cr-dimcard::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  opacity: calc(0.35 + var(--i) * 0.16);
}
.cr-dimcard .n {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.cr-dimcard h3 { font-size: 16.5px; margin-bottom: 8px; }
.cr-dimcard p { font-size: 14.5px; color: var(--ink-soft); }

/* The pain mirror. Flat statements, no alarm styling, no adjectives. This
   section does more selling than any CTA on the page. */
.cr-mirror { max-width: 760px; }
.cr-mirror ul { display: grid; gap: 0; margin: 0; padding: 0; }
.cr-mirror li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.cr-mirror li:first-child { border-top: 1px solid var(--line); }
.cr-mirror li::before {
  content: '';
  position: absolute;
  left: 4px; top: calc(0.72em + 18px);
  width: 12px; height: 1.5px;
  background: var(--cyan);
}
.cr-mirror__close {
  margin-top: 26px;
  font-size: 16px;
  color: var(--ink-soft);
}
.on-dark .cr-mirror li { border-color: var(--line-dark); color: #fff; }
.on-dark .cr-mirror__close { color: var(--dark-body); }

/* Static example of the result, for the page (not the live tool) */
.cr-example {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 30px);
  max-width: 760px;
  margin: 0 auto;
}
.cr-example .cr-relation { margin-top: 0; }
.cr-example__cap {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

/* ==========================================================================
   Motion + touch, mirroring the Financial Health Checkup so the two tools
   feel like siblings. Everything below disappears under reduced motion.
   ========================================================================== */
.cr-page .pd-option,
.cr-page .pd-controls .btn,
.cr-page .pd-back,
.cr-page .pd-restart,
.cr-page .pd-start {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cr-options .pd-option:active { transform: scale(.985); }
.cr-options .pd-option { transition: border-color .16s, background .16s, opacity .22s, transform .18s var(--ease-out); }
.cr-options .pd-option.is-dimmed { opacity: .45; }
.cr-options .pd-option.is-chosen { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .cr-page .cr-in-fwd { animation: crStepFwd .3s var(--ease-out) both; }
  .cr-page .cr-in-back { animation: crStepBack .3s var(--ease-out) both; }
  @keyframes crStepFwd  { from { opacity: 0; transform: translateY(16px); } }
  @keyframes crStepBack { from { opacity: 0; transform: translateY(-16px); } }

  .cr-options .pd-option {
    animation: crIn .34s var(--ease-out) both;
    animation-delay: calc(60ms + var(--i, 0) * 50ms);
  }
  @keyframes crIn { from { opacity: 0; transform: translateY(12px); } }

  .cr-options .pd-option.is-chosen { animation: crChosen .32s var(--ease-out); }
  @keyframes crChosen {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.016); }
    100% { transform: scale(1); }
  }

  .cr-page .pd-gate-grid .pd-field { animation: crIn .34s var(--ease-out) both; }
  .cr-page .pd-gate-grid .pd-field:nth-child(1) { animation-delay: 60ms; }
  .cr-page .pd-gate-grid .pd-field:nth-child(2) { animation-delay: 110ms; }
  .cr-page .pd-gate-grid .pd-field:nth-child(3) { animation-delay: 160ms; }
  .cr-page .pd-gate-grid .pd-field:nth-child(4) { animation-delay: 210ms; }
  .cr-page .pd-gate-grid .pd-field:nth-child(5) { animation-delay: 260ms; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-meter__fill { width: var(--w); }
  .cr-dim__bar span { width: var(--w); }
}

/* ==========================================================================
   Mobile — tested at 390px and 430px. One question per view, no horizontal
   scroll, charts readable without zoom.
   ========================================================================== */
@media (max-width: 640px) {
  .cr-page .pd-hero .container {
    padding-top: calc(var(--header-h) + 30px);
    padding-bottom: 34px;
  }
  .cr-page .pd-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
  }
  .cr-page .pd-hero__facts strong { font-size: 14px; margin-bottom: 2px; }
  .cr-page .pd-hero__start { margin-top: 24px; }
  .cr-page .pd-start__circle { width: 46px; height: 46px; }

  .cr-page .pd-shell .container { padding-left: 14px; padding-right: 14px; }
  .cr-page .pd-app { padding: 22px 16px 24px; }
  .cr-page .pd-progress { margin-bottom: 22px; }
  .cr-page .pd-step h2 { font-size: 20px; }
  .cr-page .pd-step .pd-support { font-size: 14.5px; margin-bottom: 20px; }
  .cr-options { gap: 10px; }
  .cr-options .pd-option { padding: 14px 15px; font-size: 14.5px; gap: 10px; }

  .cr-page .pd-controls { margin-top: 26px; padding-top: 20px; gap: 10px; }
  .cr-page .pd-controls .btn { flex: 1; justify-content: center; padding: 16px 20px; }
  .cr-page .pd-back { flex: none; }
  .cr-page .pd-foot { flex-direction: column; align-items: flex-start; gap: 4px; }

  .cr-relation { padding: 18px 16px; }
  .cr-statement { padding: 18px 16px; }
  .cr-caps li { font-size: 13px; padding: 8px 13px; }
  .cr-mirror li { padding-left: 28px; }
}
/* The sticky mobile Continue bar inherits the app card's side padding. */
@media (max-width: 560px) {
  .cr-page .pd-controls { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}