/* ============================================================================
   SmartDesk page — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css, shared with the other
   three product pages.

   NOTE ON SCOPING. Every page stylesheet ends up in one bundle, so a bare
   `.sc-…` rule written here would reach SmartComply, SmartBot, Website Design
   and RecLite as well. Anything this page changes about a shared class is
   scoped by this page's own id or by an `sd-` class.
   ========================================================================= */

.sd-hero {
  padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.sd-hero__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* --- The banner's capability labels ------------------------------------------- */

.sd-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.4rem + 0.6vw, 1.25rem);
  margin: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.sd-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding-inline: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}

.sd-benefit img {
  display: block;
  width: 3rem;
  height: 3rem;
}

.sd-benefit+.sd-benefit {
  border-left: 1px solid var(--border);
}

@media (max-width: 719px) {
  .sd-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
  }

  .sd-benefit:nth-child(odd) {
    border-left: 0;
  }
}

/* --- 2. Cards that explain rather than navigate --------------------------------
   The guide says to keep them explanatory, so the shared card's hover lift is
   switched off. (RecLite's stylesheet declares the same rule; both are
   identical, and it is a class only those two pages use.)                  */

.sc-card--static:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--border);
}

.sd-chal__close {
  margin: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  text-align: center;
  color: var(--ink-900);
}

.sd-chal__close em {
  font-style: normal;
  color: var(--blue-600);
}

/* --- 3. The five steps and the intake diagram ------------------------------------ */

.sd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .sd-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* On the yellow band, so each step is a white card like the questions and
   cards elsewhere on the page. */
.sd-step {
  position: relative;
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: center;
}

.sd-step__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-900);
}

.sd-step__icon {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0.6rem auto 0;
}

.sd-step__k {
  margin: 0.75rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}

.sd-step__d {
  margin: 0.45rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sd-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.6rem + 0.8vw, 1.75rem);
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sd-flow__set {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.6rem, 0.5rem + 0.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-flow__set li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}

.sd-flow__set img {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
}

.sd-flow__plus {
  position: absolute;
  left: calc(clamp(0.6rem, 0.5rem + 0.6vw, 1.25rem) / -2);
  top: 0.9rem;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--blue-500);
}

.sd-flow__arrow {
  flex: none;
  color: var(--blue-500);
}

.sd-flow__hub {
  margin: 0;
  padding: 0.7rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--blue-500);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color: #fff;
}

/* Submission availability, deliberately its own line: the guide's repeated
   caution is that 24/7 means submission, not staffing. */
.sd-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: max-content;
  max-width: 100%;
  margin: clamp(1rem, 0.85rem + 0.7vw, 1.5rem) auto 0;
  padding: 0.7rem clamp(0.9rem, 0.8rem + 0.6vw, 1.35rem);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
}

.sd-hours__icon {
  flex: none;
  color: var(--blue-600);
}

/* --- 5. Benefits on the dark band ------------------------------------------------ */

.sc-out__title>.sd-panel__icon {
  filter: invert(1) brightness(100);
}

.sd-panel__icon {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
}

.sd-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-list__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.sd-list__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sd-list__k {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
}

.sd-list__d {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #C8D8F4;
}

.sd-shot {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg);
}

/* The portal is a phone: tall and narrow, so it is held to its own size
   rather than stretched to the panel's width. */
.sd-shot--phone {
  max-width: 15rem;
}

/* --- 6. AI assistance ------------------------------------------------------------- */

.sd-ai__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.sd-ai__step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(0.9rem, 0.8rem + 0.6vw, 1.25rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sd-ai__step .sd-step__n {
  margin: 0.1rem 0 0;
}

.sd-ai__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.sd-ai__text .sd-list__k {
  color: var(--blue-700);
}

.sd-ai__text .sd-list__d {
  color: var(--text-secondary);
}

.sd-example {
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.sd-example__pair {
  display: grid;
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .sd-example__pair {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.sd-example__side {
  min-width: 0;
}

.sd-example__k {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

/* The step badge centres itself in the cards above, where it sits alone over
   the title. Here it leads a line, so the auto margin has to go. */
.sd-example__k .sd-step__n {
  margin: 0;
}

.sd-example__body {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-900);
}

/* Text, not a control: the send happens in SmartDesk, not on this page. */
.sd-example__action {
  width: max-content;
  margin: 0.7rem 0 0 auto;
  padding: 0.45rem 1rem;
  border-radius: var(--r-md);
  background: var(--blue-500);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}

.sd-example__arrow {
  display: grid;
  place-items: center;
  color: var(--blue-500);
}

@media (max-width: 899px) {
  .sd-example__arrow svg {
    transform: rotate(90deg);
  }
}

.sd-know {
  display: grid;
  gap: clamp(1rem, 0.85rem + 1vw, 1.75rem);
  align-items: center;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border-radius: var(--r-2xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}

@media (min-width: 900px) {
  .sd-know {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.sd-know__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-900);
}

.sd-know__d {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sd-know__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-know__steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}

.sd-know__steps img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.sd-know__arrow {
  display: none;
}

@media (min-width: 620px) {
  .sd-know__steps li {
    position: relative;
  }

  .sd-know__arrow {
    position: absolute;
    left: -1.1rem;
    top: 1rem;
    display: block;
    transform: translateX(-50%);
    color: var(--blue-500);
  }
}

/* --- 7. The walkthrough ------------------------------------------------------------
   Screenshots rather than a video placeholder, and no play button, because no
   recording exists yet — see the note in the page component.               */

.sd-walk {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 960px) {
  .sd-walk {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.sd-walk__shots {
  display: grid;
  gap: 0.85rem;
  padding: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}

.sd-walk__shot {
  margin: 0;
}

.sd-walk__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* A phone screenshot stretched to the column would be over a thousand pixels
   tall; it keeps its own size and centres instead. */
.sd-walk__shot--phone img {
  max-width: 15rem;
  margin-inline: auto;
}

.sd-walk__shot figcaption {
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}

.sd-walk__steps ol {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-walk__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(0.85rem, 0.75rem + 0.5vw, 1.15rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sd-walk__steps .sd-step__n {
  margin: 0.15rem 0 0;
}

.sd-walk__steps img {
  display: block;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.sd-walk__steps .sd-list__k {
  color: var(--blue-700);
}

.sd-walk__steps .sd-list__d {
  color: var(--text-secondary);
}

.sd-walk__cta {
  display: flex;
  margin-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
}

/* --- 8. The FAQ, introduction beside the accordion -----------------------------------
   Same layout as RecLite's, and the same reason for the second scrim: this
   section is short, so the shared vertical scrim lets the photograph reach the
   left column's text. The horizontal one holds that column and lets the
   picture read on the right, behind the opaque question cards.            */

.sd-faq__grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}

@media (min-width: 960px) {
  .sd-faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.sd-faq__intro>* {
  min-width: 0;
}

.sd-faq__lead {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.sd-faq__list {
  max-width: none;
  margin-top: 0;
}

#sd-faq .sc-faq__bg {
  object-position: 72% 58%;
}

#sd-faq.sc-faq::after {
  background:
    linear-gradient(90deg,
      rgb(242 247 255 / .94) 0%,
      rgb(242 247 255 / .88) 34%,
      rgb(242 247 255 / .35) 52%,
      rgb(242 247 255 / 0) 66%),
    linear-gradient(180deg,
      rgb(242 247 255 / .95) 0%,
      rgb(242 247 255 / .88) 40%,
      rgb(242 247 255 / .74) 70%,
      rgb(242 247 255 / .62) 88%,
      rgb(242 247 255 / .93) 97%,
      rgb(242 247 255 / 1) 100%);
}

@media (max-width: 959px) {
  #sd-faq.sc-faq::after {
    background: linear-gradient(180deg,
        rgb(242 247 255 / .97) 0%,
        rgb(242 247 255 / .95) 45%,
        rgb(242 247 255 / .82) 74%,
        rgb(242 247 255 / .66) 90%,
        rgb(242 247 255 / .95) 98%,
        rgb(242 247 255 / 1) 100%);
  }
}

/* --- 9. The demo topics --------------------------------------------------------------- */

.sd-topics {
  display: grid;
  gap: 0.75rem;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.sd-topics li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}

.sd-topics img {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}