/** Presentee structural additions
    Loaded last, after the DCode template's own CSS and the brand palette.
    Everything here is markup this app renders that the template has no rule
    for — not a restyle of the template. Colours live in
    colors/presentee-color.css; this file holds layout only.
*/

/** Pricing: a plan quoted after a conversation shows a phrase where the
    other cards show a number, and 60px (the template's `.plan-cost` size)
    wraps it onto two lines. */
.pricing-plans-one .plan-cost.plan-cost-text {
  font-size: 32px;
  line-height: 1.1;
  white-space: nowrap;
}

/** Secondary-page hero band (MarketingPageHeader). `#master-head` is
    `position: absolute`, so it overlays whatever sits at the top of the
    page — the home page hero has 100px of top padding via the theme's own
    `.section-padding` to clear it. This band needs the same clearance, plus
    a little more since it also carries the mobile nav's off-canvas toggle
    button at small widths. */
.page-subhead {
  padding: 150px 0 60px;
}

/** A lighter alternative to the theme's own `.section-padding` (100px top
    and bottom — 200px of pure gap wherever two sections sit back to back).
    That reads fine on the home page, where a hero-scale section justifies
    it, but stacked between two ordinary content sections on the secondary
    pages it left a gap large enough to look like missing content. */
.section-padding-sm {
  padding: 50px 0;
}

/** A plain data table (pricing's worked examples) at the theme's own body
    type scale — the theme ships no generic table styling of its own. */
.dc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.dc-table th,
.dc-table td {
  padding: 14px 6px;
  border-bottom: 1px solid var(--light-gray);
  text-align: left;
  font-size: 16px;
}

.dc-table th {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark-gray);
}

/** `.icon-box.theme-two` has no built-in row spacing — the theme normally
    uses it inside a carousel, which has its own gutter. In a wrapping grid
    (security controls, about pillars) it needs its own bottom margin so
    rows don't touch. */
.icon-box.theme-two {
  margin-bottom: 30px;
}

/** The theme's own `.icon-box.theme-two .icon` circle is
    `background: var(--heading-text-color)` (near-black) with a white icon
    on top. These icons are React components (Lucide) coloured brand blue
    directly, not the theme's icon-font glyphs the dark circle was designed
    to show off — blue-on-black reads poorly, so the circle becomes a light
    brand tint instead, matching the icon style already used in the home
    page's feature-icon row. */
.icon-box.theme-two .icon {
  background: #eff5ff;
}

/** Card height equalization: Bootstrap 4's `.row` is `display:flex` so
    every `.col-*` in it is already the same height, but the card element
    inside each column does not stretch to fill it on its own — a shorter
    body paragraph (About/Security's icon-box grid, Pricing's plan cards)
    otherwise leaves a visibly shorter card next to its row-mates. Making
    each column a flex column, and its card `flex: 1`, stretches every card
    in a row to match the tallest one and keeps each card's own CTA
    pinned to the bottom regardless of how much copy is above it.

    `flex-direction: column` is not optional here: a flex container defaults
    to `row`, so any column holding more than one child (the Support page's
    heading + accordion + footnote) laid them out side by side in narrow
    strips instead of stacking them. The single-card grids that motivated
    this rule have exactly one child each, which is why that went unnoticed. */
.services-section [class*="col-"],
.pricing-plans-one [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.icon-box.theme-two {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.pricing-plans-one .price-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.pricing-plans-one .price-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pricing-plans-one .pricing-feature-list {
  flex: 1 1 auto;
}

@media only screen and (max-width: 575px) {
  .page-subhead {
    padding: 130px 0 40px;
  }
}

/** `.dc-signin` is `min-height:100vh`, so a card with vertical margin always
    overflows the viewport by exactly that margin. The breathing room moves
    to the parent's padding, which `box-sizing: border-box` keeps inside the
    100vh instead of adding to it.
    The template's own background here is flat white; a soft brand gradient
    plus two blurred blobs (echoing the marketing hero) keeps the auth pages
    from reading as a bare form dropped on an empty page. */
.dc-signin {
  padding: 20px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eff5ff 0%, #f7fafe 45%, #ffffff 100%);
}

.dc-signin::before,
.dc-signin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(2px);
}

.dc-signin::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(0, 89, 255, 0.1) 0%, rgba(0, 89, 255, 0) 70%);
}

.dc-signin::after {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(0, 187, 228, 0.1) 0%, rgba(0, 187, 228, 0) 70%);
}

.dc-signin .signin-wrapper {
  position: relative;
  z-index: 1;
}

.signin-wrapper .box-body > p {
  margin-bottom: 12px;
}

/** Registration's card gets a little more room and less padding than the
    template's sign-in default, so its four fields sit on one screen without
    a scroll. */
.signin-wrapper.signin-wide {
  max-width: 460px;
}

.signin-wrapper.signin-wide .box-header {
  padding: 28px 0 14px;
  margin-bottom: 14px;
}

.signin-wrapper.signin-wide .form-group {
  margin-bottom: 12px;
}

.signin-wrapper.signin-wide .box-body {
  padding-top: 34px;
}

.signin-wrapper.signin-wide .box-body > p {
  margin-bottom: 14px;
}

/** One-time-code entry: wide tracking makes six digits scannable. */
.otp-input {
  letter-spacing: 0.55em;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  padding-left: 0.55em;
}

/** Field-level validation message, shown under the control it belongs to. */
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

/** Header: the template has no gap rule between the two account buttons —
    without one they render edge to edge. Applied both to the desktop bar
    and the mobile off-canvas copy (MarketingHeader renders one or the
    other depending on viewport; see its own comment). */
.navbar-right .menu-button + .menu-button {
  margin-left: 12px;
}

@media only screen and (max-width: 991px) {
  #navigation .navbar-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #navigation .navbar-right .menu-button + .menu-button {
    margin-left: 0;
    margin-top: 12px;
  }

  #navigation .navbar-right .menu-button .btn {
    width: 100%;
  }
}

/** Store badges (Google Play / App Store): both share one black badge shape
    and height so they line up, with a real gap between them — set on an
    inner row, since callers' `d-inline-block` would override it on the
    wrapper. The App Store one is dimmed and non-interactive until the iOS
    app ships. */
.store-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0;
  vertical-align: middle;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-sizing: border-box;
  height: 52px;
  min-width: 164px;
  padding: 0 18px 0 14px;
  border: 1px solid #a6a6a6;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

a.store-badge:hover,
a.store-badge:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-badge-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-badge-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.store-badge-disabled {
  opacity: 0.72;
  cursor: default;
}

/** Compact tile for the header bar, beside the text buttons. */
.store-badge-icon {
  width: 46px;
  height: 46px;
  min-width: 0;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
}

/** Feature icon row: two rows of three rather than one row of six, so each
    tile has room for its label without wrapping into the next column. */
.feature-grid .features-block {
  margin-bottom: 24px;
}

/** Pricing: `.pricing-feature-list li` is `display:table; margin:auto`,
    which centers every line independently and staggers the checkmarks
    (task: "point of second and third card... center align them at
    starting"). Centering the list itself instead, as one block, and
    letting each line lay out from its own left edge fixes that for every
    card, not only the two called out. */
.pricing-plans-one .pricing-feature-list {
  display: inline-block;
  text-align: left;
}

.pricing-plans-one .pricing-feature-list li {
  margin: 15px 0;
}

/** "Create your workspace" under the intro image used the theme's plain
    text `.link-btn` style, which reads as a link, not a call to action. */
.about-section .btn-wrapper .btn.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  background-image: linear-gradient(to bottom, #0059ff 0%, #0047d4 100%);
  color: #ffffff;
  box-shadow: 0px 0px 30px 0px rgba(0, 71, 212, 0.4);
}

.about-section .btn-wrapper .btn.link-btn:hover,
.about-section .btn-wrapper .btn.link-btn:focus {
  color: #ffffff;
  opacity: 0.92;
}

.about-section .btn-wrapper .btn.link-btn::after {
  content: none;
}

/** Feature tabs: each pane's image sits in a fixed-height frame so the
    tab bar does not jump as panes of different image proportions swap in. */
.st-tab-content .tab-pane .col-md-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.st-tab-content .tab-pane img {
  max-width: 100%;
  height: auto;
}

/** Footer: the template's footer widgets assume three or four columns of
    roughly equal weight; the simplified footer below uses exactly three. */
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.footer-columns > div {
  flex: 1 1 220px;
}

.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.footer-credit img {
  height: 18px;
  width: auto;
  border-radius: 3px;
}

/** Floating contact button, fixed to the viewport corner on every public page. */
.floating-contact {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, #0059ff 0%, #0047d4 100%);
  color: #ffffff;
  box-shadow: 0px 6px 20px 0px rgba(0, 71, 212, 0.45);
  transition: transform 200ms ease;
}

.floating-contact:hover,
.floating-contact:focus {
  color: #ffffff;
  transform: scale(1.06);
}

.floating-contact i {
  font-size: 22px;
}

@media only screen and (max-width: 575px) {
  .floating-contact {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }

  .floating-contact i {
    font-size: 18px;
  }
}