/* Kestrelay overrides on top of the purchased template.
   Kept in its own file so a template update can be dropped in without
   losing our changes, and so every deviation from the theme is
   visible in one place rather than buried in a 228KB stylesheet. */

/* Menu icons. The theme has no icon slot in its nav, so this is ours. */
#mobile-menu > ul > li > a > i {
  font-size: 14px;
  margin-right: 6px;
  color: #0F6E56;
}
.sheet a svg, .mean-nav a i { color: #0F6E56; }

/* Image slots awaiting your screenshots. The label and the exact
   pixel size are drawn on the placeholder itself, so the layout can
   be judged now and each capture has an unambiguous target. */
.shot {
  position: relative;
  display: block;
  width: 100%;
  background: repeating-linear-gradient(45deg,
    #EDEFF2 0 12px, #E6E9ED 12px 24px);
  border: 1px dashed #B9C2CC;
  border-radius: 8px;
  overflow: hidden;
}
.shot::before {
  content: attr(data-name);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 700 15px/1.5 "Urbanist", sans-serif;
  letter-spacing: .04em; color: #55606B; text-align: center;
  white-space: pre-line;
}

/* The theme ships hero and pricing as photographic backgrounds. We
   have no photography and would rather not invent any, so those
   become flat brand fields. */
.hero-3.bg-cover,
.pricing-section-3.bg-cover {
  background-image: none !important;
}
.hero-3.bg-cover {
  background: linear-gradient(160deg, #F4F7F6 0%, #E8F0ED 100%);
}
.pricing-section-3 {
  background: #0B1512 !important;
}

/* Industries strip. The theme has no marquee, so this is ours. */
.marquee-strip {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%,
    #000 94%, transparent);
}
.marquee-strip .mtrack { display: flex; width: max-content; }
.marquee-strip .chip {
  padding: 12px 26px; margin-right: 12px; white-space: nowrap;
  border: 1px solid #E6E6E6; border-radius: 40px;
  font-weight: 600; color: #282C32; background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-strip .mtrack { animation: krSlide 46s linear infinite; }
  .marquee-strip:hover .mtrack { animation-play-state: paused; }
  @keyframes krSlide { to { transform: translateX(-50%); } }
}

/* The "last updated" line on legal pages. The theme has no equivalent,
   since it never anticipated a document that needs a date on it. */
.hint {
  font-size: 14px;
  color: #8B929C;
  margin-bottom: 28px;
}
.blog-post-details h2 { margin: 38px 0 14px; }
.blog-post-details h3 { margin: 26px 0 10px; }
.blog-post-details ul { padding-left: 20px; margin-bottom: 18px; }
.blog-post-details li { margin-bottom: 9px; color: #565656; }

/* The CTA above the footer is a rounded green panel. Without a gap it
   butts straight into the footer and the rounded corner reads as a
   mistake rather than a shape. */
.footer-section { margin-top: 90px; }
@media (max-width: 991px) { .footer-section { margin-top: 60px; } }

/* The footer sits on a light ground, so the wordmark is teal rather
   than the white the theme assumes against its dark footer. */
.footer-widgets-wrapper .widget-head img { max-width: 190px; }

/* The four numbered steps are a 2x2 grid, so an uneven heading pushes
   its neighbour's body text out of line. Reserving two lines keeps the
   rows aligned whatever the wording does later. */
.how-work-number-items .content h3 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 991px) {
  .how-work-number-items .content h3 { min-height: 0; display: block; }
}

/* The industries block follows the dark pricing panel, so its label
   was sitting right on the colour change with nothing to breathe. */
/* Bootstrap's pt-0 carries !important, so this is handled by dropping
   that class in the markup rather than by out-specifying it here. */
#industries-strip { padding-bottom: clamp(40px, 4vw, 64px); }

/* Ticks carry meaning in a list, so they take the brand colour rather
   than the theme's neutral grey. */
.checklist li i,
.list-items li i,
.pricing-card .checklist li i {
  color: #0F6E56;
}

/* Yearly is the same card with a bigger number, so the two tabs must
   not jump in height when you switch between them. */
.pricing-card.style1 { height: 100%; }
.tab-content .row { align-items: stretch; }

/* Four-figure yearly prices push the unit onto a second line, which
   throws the card heights out. Keep the price and its unit on one
   baseline and let the number shrink instead of wrapping. */
.pricing-card .price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}
.pricing-card .price-wrapper .text { white-space: nowrap; }
/* 48px is comfortable for $49 and too wide for $6990 in a quarter
   column, so the size follows the viewport. */
.pricing-card.style1 .pricing-card-header .price-wrapper .price {
  font-size: clamp(30px, 2.6vw, 44px);
  letter-spacing: -0.04em;
}

/* Purchase form. The subdomain is permanent once a pilot enrols
   devices, so the field shows the full address being claimed rather
   than leaving the visitor to imagine it. */
.slug-field { display: flex; align-items: stretch; }
.slug-field input { flex: 1; border-radius: 6px 0 0 6px; }
.slug-suffix {
  display: flex; align-items: center; padding: 0 16px;
  background: #F1F3F5; border: 1px solid #E6E6E6; border-left: 0;
  border-radius: 0 6px 6px 0; color: #565656;
  font-size: 15px; white-space: nowrap;
}


/* The master account grants the highest access in the tenant, so its
   explanation is set apart rather than dropped in as helper text. */
.field-group {
  padding: 20px 22px; border-radius: 8px;
  background: #F5F8F7; border-left: 3px solid #0F6E56;
}
.field-group h4 { margin: 0 0 8px; font-size: 16px; }
.group-note { margin: 0; font-size: 14.5px; color: #565656; }
.same-billing { display: flex; gap: 10px; align-items: center;
  cursor: pointer; font-size: 15px; }
.same-billing input { width: 17px; height: 17px;
  accent-color: #0F6E56; }
.plan-summary {
  padding: 22px 24px; border-radius: 10px;
  background: #F5F8F7; border: 1px solid #E1E9E6; margin-bottom: 26px;
}
.plan-summary h3 { margin: 8px 0 4px; font-size: 22px; }
.plan-summary .price { font-size: 28px; font-weight: 700; }
.plan-summary .price span { font-size: 15px; font-weight: 400;
  color: #565656; }
.plan-summary a { color: #0F6E56; font-size: 14px; }

/* Subdomain status.
   This is the only irreversible choice on the form, so the result of
   the check is a panel rather than a line of grey text under a field. */
.slug-note { margin-top: 10px; font-size: 13.5px; color: #8B929C; }
.slug-status {
  margin-top: 12px; border-radius: 8px; padding: 14px 16px;
  display: none; font-size: 14px; line-height: 1.55;
}
.slug-status.on { display: block; }
.slug-status .head {
  display: flex; align-items: center; gap: 9px; font-weight: 600;
}
.slug-status .head i { font-size: 15px; }
.slug-status .addr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600; word-break: break-all;
}
.slug-status.ok {
  background: #EEF6F3; border: 1px solid #CBE3DA; color: #1D3D34;
}
.slug-status.ok .head { color: #0F6E56; }
.slug-status.bad {
  background: #FBEDEC; border: 1px solid #F1CFCC; color: #7A2620;
}
.slug-status.bad .head { color: #C0392B; }
.slug-status.busy {
  background: #F4F5F6; border: 1px solid #E4E6E8; color: #6B7280;
}
/* The permanence warning sits inside the success panel, because the
   moment someone learns the name is theirs is the moment they care
   that it is final. */
.slug-status .warn {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid #CBE3DA;
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; color: #3F5C52;
}
.slug-status .warn i { margin-top: 3px; color: #A85416; }

/* The theme's header sits on top of this banner, so it padded 250px
   to clear itself. Our header is a solid strip above it, which left
   that clearance as empty space. */
.breadcumb-container-wrapper { padding: 96px 0 88px; }
@media (max-width: 991px) {
  .breadcumb-container-wrapper { padding: 64px 0 60px; }
}
.breadcumb-wrapper .page-heading h1 { margin-bottom: 10px; }

/* Cards in a row must be the same height whatever the copy does.
   Bootstrap already stretches the columns; this makes the card fill
   its column instead of shrinking to its own text. */
.feature-provide-box-items {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.feature-provide-box-items .content { flex: 1; }

/* The theme's icon slot holds an <img>. Named glyphs carry meaning
   that a cycled decorative SVG cannot, so the slot takes an icon font
   instead and is sized to match what the images occupied. */
.feature-provide-box-items .icon i {
  font-size: 30px;
  line-height: 1;
  color: #0F6E56;
  display: block;
}
.feature-provide-box-items:hover .icon i { color: #ffffff; }

/* The name section. Two words fused into one, so the split is shown
   rather than described: the green marks which half of the wordmark
   each definition belongs to. */
.name-section { background: #ffffff; }
.wordmark {
  text-align: center;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 44px;
}
.wordmark .w1 { color: #0F6E56; }
.wordmark .w2 { color: #C6CCD2; }
.wordmark .w3 { color: #0F6E56; }
.wordmark .w-join {
  color: #B4BBC2; font-weight: 400; margin: 0 14px;
  font-size: .6em; vertical-align: middle;
}
.name-card {
  height: 100%;
  padding: 32px 30px;
  border-radius: 12px;
  background: #F5F8F7;
  border: 1px solid #E1E9E6;
}
.name-card .icon i { font-size: 26px; color: #0F6E56; }
.name-card h3 {
  margin: 18px 0 10px; font-size: 24px; color: #0F6E56;
}
.name-card .lead-line {
  font-size: 17px; font-weight: 600; color: #282C32;
  margin-bottom: 10px;
}
.name-card p { color: #565656; font-size: 15.5px; }
.name-close {
  max-width: 44rem; margin: 40px auto 0; text-align: center;
}
.name-close p { font-size: 17px; color: #565656; }
.name-close b { color: #282C32; font-weight: 600; }
.mark-note {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid #E6E6E6;
  font-size: 15px !important; color: #8B929C !important;
}
.mark-note i { color: #0F6E56; margin-right: 8px; }

/* ---- Partner portal ---- */
.p-head { display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:26px; }
.p-head h3 { margin:0; font-size:26px; }
.p-head button { margin-left:auto; }
.p-stats { margin-bottom:34px; }
.p-stat { background:#F5F8F7; border:1px solid #E1E9E6;
  border-radius:10px; padding:20px; height:100%; }
.p-stat span { display:block; font-size:13px; color:#8B929C; }
.p-stat b { display:block; font-size:26px; font-weight:700;
  margin-top:4px; }
.p-stat em { display:block; font-style:normal; font-size:12.5px;
  color:#8B929C; margin-top:4px; }
.p-h { margin:0 0 14px; font-size:19px; }
.p-table { width:100%; border-collapse:collapse; margin-bottom:34px; }
.p-table th { text-align:left; font-size:12.5px; color:#8B929C;
  font-weight:600; padding:10px 0; border-bottom:1px solid #E6E6E6; }
.p-table td { padding:14px 0; border-bottom:1px solid #F1F4F2; }
.p-table .r { text-align:right; font-variant-numeric:tabular-nums; }

/* A three column table is unreadable dragged sideways on a phone, so
   each row restacks with its column name alongside the value. */
@media (max-width:767px) {
  .p-table thead { display:none; }
  .p-table tr { display:block; padding:12px 0;
    border-bottom:1px solid #E6E6E6; }
  .p-table td { display:flex; justify-content:space-between;
    gap:16px; border:0; padding:4px 0; text-align:right; }
  .p-table td::before { content:attr(data-l); color:#8B929C;
    font-size:12.5px; text-align:left; }
}