/* ==========================================================================
   W3 SMS — home page fixes

   Loaded after style.css and redesign.css, and only where those two are
   demonstrably wrong. Nothing here restyles the design; it repairs it, so the
   restore point in storage/backups/ still applies to the two files it covers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   "Watch Demo" — the play circle sat on top of the label

   .video-button is an inline-flex row and .play-button is a 44px circle with
   no flex guard, so in a tight row it was shrunk toward zero while its arrow,
   positioned absolutely inside it, stayed put and landed across the "W" of
   "Watch". The label read "▶atch Demo".
   -------------------------------------------------------------------------- */

.banner-section .video-button {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.banner-section .play-button {
    /* Never shrink, never grow, always 44px. */
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}

/* The alternative shown when no demo video is configured. */
.banner-section .video-button--plain {
    align-self: center;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    transition: border-color .2s ease;
}

.banner-section .video-button--plain:hover {
    border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   The headline's typed word

   The plugin ships with typeSpeed 200 and typeDelay 200; the call at the end
   of assets/js/type.js passes 8600 and 6200. At that rate the first character
   appears after six seconds and the next 8.6 seconds later, so the headline
   read "Bulk SMS Marketing Software For" and then stopped. home.js restarts
   the plugin at a usable speed; this keeps the line from collapsing while it
   waits, which made the whole hero jump.
   -------------------------------------------------------------------------- */

.hero-typer {
    display: inline-block;
    min-width: 1ch;
    min-height: 1em;
    vertical-align: baseline;
}

/* A caret, so the gap before the first character reads as "about to type"
   rather than as a sentence that was never finished. */
.hero-typer::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: .92em;
    margin-left: 3px;
    background: currentColor;
    opacity: .85;
    vertical-align: text-bottom;
    animation: w3-caret 1.1s steps(1) infinite;
}

@keyframes w3-caret {
    0%, 45%   { opacity: .85; }
    50%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Hero proof figures

   Three fixed boxes became however many the platform can actually evidence,
   so the row has to hold one, two or three without going ragged.
   -------------------------------------------------------------------------- */

.banner-section .hero-proof {
    flex-wrap: wrap;
}

.banner-section .hero-proof > div {
    flex: 1 1 140px;
    min-width: 0;
}

.banner-section .hero-proof strong {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Narrow screens

   The buttons sat in a row with a 50px gap, which on a phone pushed the
   second one off the side.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .banner-section .demo-btn-group {
        flex-wrap: wrap;
        gap: 18px;
    }

    .banner-section .demo-btn-group .theme-btn {
        width: 100%;
        justify-content: center;
    }

    .banner-section .hero-proof > div {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Stats bar

   Each figure now carries a line saying what it is measured against, because
   a number on its own is what the section had before and it meant nothing.
   -------------------------------------------------------------------------- */

.stats-section .stat-item {
    height: 100%;
}

.stats-section .stat-note {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    line-height: 1.4;
    opacity: .68;
}

/* The counter renders its own currency prefix, so nothing should wrap
   between it and the digits. */
.stats-section .counter {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Channels

   The one decision a first-time buyer has to make - masking, non-masking or
   voice - and the rate is what they compare, so the rate is the largest thing
   on the card rather than the third row of a list of three equal numbers.

   Each channel carries its own accent so the three read as three products
   instead of one card printed three times, and the cheapest is marked,
   because that is the single most useful thing this row can say.
   -------------------------------------------------------------------------- */

.channels-section .channel-card {
    --ch: #2563eb;
    --ch-soft: rgba(37, 99, 235, .10);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 26px;
    border: 1px solid rgba(16, 33, 46, .10);
    border-radius: 18px;
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.channels-section .channel-card--indigo  { --ch: #4f46e5; --ch-soft: rgba(79, 70, 229, .10); }
.channels-section .channel-card--emerald { --ch: #0d9488; --ch-soft: rgba(13, 148, 136, .10); }
.channels-section .channel-card--violet  { --ch: #7c3aed; --ch-soft: rgba(124, 58, 237, .10); }

.channels-section .channel-card:hover {
    transform: translateY(-5px);
    border-color: var(--ch);
    box-shadow: 0 22px 48px rgba(16, 33, 46, .12);
}

/* The cheapest channel is lifted a little, permanently. */
.channels-section .channel-card.is-cheapest {
    border-color: var(--ch);
    box-shadow: 0 14px 34px rgba(16, 33, 46, .09);
}

.channel-card__flag {
    position: absolute;
    top: -12px;
    left: 28px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--ch);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- the head */

.channel-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.channel-card__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ch-soft);
    color: var(--ch);
    font-size: 1.35rem;
}

.channel-card__title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.3;
}

.channel-card__for {
    display: block;
    margin-top: 2px;
    color: var(--ch);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.channel-card__desc {
    margin: 0 0 22px;
    font-size: .95rem;
    line-height: 1.65;
    opacity: .74;
}

/* ---------------------------------------------------------------- the rate */

.channel-card__rate {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--ch-soft);
}

.channel-card__rate-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
}

.channel-card__rate-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ch);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.channel-card__rate-unit {
    font-size: .86rem;
    opacity: .68;
}

/* --------------------------------------------------------------- the specs */

.channel-card__specs {
    margin: 0;
    padding: 4px 2px 0;
}

.channel-card__specs > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(16, 33, 46, .08);
}

.channel-card__specs > div:last-child { border-bottom: 0; }

.channel-card__specs dt {
    font-size: .9rem;
    font-weight: 400;
    opacity: .66;
}

.channel-card__specs dd {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- the CTA */

.channel-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* Pushed to the foot so three cards of different text lengths still line
       their buttons up. */
    margin-top: auto;
    padding: 13px 20px;
    border: 1px solid var(--ch);
    border-radius: 12px;
    color: var(--ch);
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.channel-card__cta i { font-size: .82rem; transition: transform .18s ease; }

.channel-card__cta:hover {
    background: var(--ch);
    color: #fff;
}

.channel-card__cta:hover i { transform: translateX(3px); }

/* The cheapest card leads with a filled button rather than an outline. */
.channels-section .channel-card.is-cheapest .channel-card__cta {
    background: var(--ch);
    color: #fff;
}

.channels-section .channel-card.is-cheapest .channel-card__cta:hover {
    filter: brightness(1.08);
}

.channel-row { margin-top: 6px; }

@media (max-width: 575.98px) {
    .channels-section .channel-card { padding: 26px 20px 22px; }
    .channel-card__rate-value { font-size: 1.7rem; }
    .channel-card__flag { left: 20px; }
}

/* --------------------------------------------------------------------------
   API panel

   The parameter list is the part a developer actually reads; the old panel had
   no such list because it documented an endpoint that does not exist.
   -------------------------------------------------------------------------- */

.api-params {
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.api-param {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: .9rem;
}

.api-param code {
    flex: 0 0 118px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(13, 110, 253, .14);
    color: inherit;
    font-size: .86rem;
}

.api-param span {
    opacity: .78;
}

/* The sample URL is long by nature - it carries five query parameters - so it
   wraps instead of forcing the code window to scroll sideways. */
.api-showcase .code-body code {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .api-param {
        flex-direction: column;
        gap: 4px;
    }

    .api-param code {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Coverage

   Was thirty country flags taken from the top of lang/countrylist.json. These
   are the five networks a Bangladeshi number can actually be on.
   -------------------------------------------------------------------------- */

.operator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.operator-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    background: #fff;
}

.operator-name {
    font-weight: 600;
    font-size: 1.02rem;
}

.operator-prefix {
    font-size: .85rem;
    opacity: .62;
    letter-spacing: .02em;
}

.operator-card--note {
    grid-column: 1 / -1;
    background: rgba(13, 110, 253, .06);
    border-color: rgba(13, 110, 253, .18);
}

@media (max-width: 400px) {
    .operator-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */

.final-cta .cta-link {
    color: inherit;
    font-size: .88rem;
    opacity: .8;
    text-decoration: underline;
}

.final-cta .cta-link:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Banner headings on the About and Blog pages

   Both used an <h4> for the line naming the page, which left neither with an
   <h1>. Promoted to <h1> for the search engines and held at the size they
   were drawn at, so nothing on screen moves.
   -------------------------------------------------------------------------- */

.about-banner .page-title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
}

/* ==========================================================================
   Capability cards — "Everything you need to scale messaging"

   Two things were wrong before this. The grid was three columns for four
   cards, so the fourth sat alone on a second row looking like a mistake. And
   the icon was drawn as a filled blue circle behind the picture, while the
   uploaded pictures are themselves filled orange circles - the two stacked
   into the blue rings on screen.
   ========================================================================== */

.features-v2 .feature-grid {
    display: grid;
    gap: 22px;
    /* Fills the row at any count: four cards go four-up, six go three-up. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.features-v2 .feature-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features-v2 .feature-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 30px 26px 28px;
    border: 1px solid rgba(16, 33, 46, .09);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* A hairline of brand colour along the top, drawn only on hover, so the
   resting grid stays quiet and the card still answers the pointer. */
.features-v2 .feature-card-v2::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0c6ba8, #4fa8dd);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.features-v2 .feature-card-v2:hover {
    transform: translateY(-4px);
    border-color: rgba(12, 107, 168, .35);
    box-shadow: 0 20px 44px rgba(16, 33, 46, .11);
}

.features-v2 .feature-card-v2:hover::before {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   The icon

   A tinted square, not a filled circle - an uploaded icon that is already a
   coloured circle then sits inside it instead of fighting it.
   -------------------------------------------------------------------------- */

.features-v2 .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(12, 107, 168, .12), rgba(79, 168, 221, .16));
    color: #0c6ba8;
    font-size: 1.35rem;
}

.features-v2 .feature-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.features-v2 .feature-card-v2 h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
}

.features-v2 .feature-card-v2 p {
    margin: 6px 0 0;
    font-size: .93rem;
    line-height: 1.62;
    opacity: .72;
}

@media (max-width: 1199px) {
    .features-v2 .feature-grid,
    .features-v2 .feature-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .features-v2 .feature-grid,
    .features-v2 .feature-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .features-v2 .feature-grid,
    .features-v2 .feature-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .features-v2 .feature-card-v2 { padding: 24px 20px; }
}