/* ==========================================================================
   Digitaly marketing site
   --------------------------------------------------------------------------
   Layers on top of digitaly.css — same tokens, same buttons, same icons — so
   the public site and the product no longer look like two different companies.

   The old marketing pages pulled Tailwind from a CDN and hand-rolled a second
   colour system. That is gone: one stylesheet, no external script, no render-
   blocking CDN on the first page a visitor ever sees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page frame
   -------------------------------------------------------------------------- */
.mk {
    background: var(--surface);
    /* The nav drawer is parked off-canvas at translateX(100%), which puts a
       310px-wide box past the edge of the viewport and makes the whole page
       scroll sideways on a phone -- the drawer itself peeks in at the edge.
       `clip` rather than `hidden`: hidden would turn body into a scroll
       container and break the sticky header. */
    overflow-x: clip;
}

.wrap {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--s5);
}
.wrap-tight { max-width: 860px; }

.section { padding-block: var(--s12); }
@media (min-width: 768px) {
    .section { padding-block: 88px; }
}
.section-tint { background: var(--surface-2); }
.section-brand { background: var(--brand-tint); }

.section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--s10); }
.section-head .eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--brand-strong);
    margin-bottom: var(--s3);
}
.section-head h2 { font-size: var(--text-3xl); line-height: 1.25; }
.section-head p { color: var(--ink-2); margin-top: var(--s3); font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   2. Navbar
   -------------------------------------------------------------------------- */
.mk-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.mk-nav-in {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: 68px;
}
.mk-logo { display: flex; align-items: center; flex: none; }
.mk-logo img { height: 34px; width: auto; }

.mk-links { display: flex; align-items: center; gap: var(--s2); }
.mk-links a {
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}
.mk-links a:hover { background: var(--surface-2); color: var(--ink); }

.mk-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }

.mk-burger { display: none; }

@media (max-width: 880px) {
    .mk-links { display: none; }
    .mk-actions .btn-secondary { display: none; }
    .mk-burger { display: inline-flex; }
}

/* Mobile sheet. Anchored to the start edge so it opens on the reader's side. */
.mk-sheet {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(310px, 84vw);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);
    padding: var(--s5);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    overflow-y: auto;
}
[dir="ltr"] .mk-sheet { transform: translateX(-100%); }
.mk-sheet.open, [dir="ltr"] .mk-sheet.open { transform: translateX(0); }
.mk-sheet a {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.mk-sheet a:hover { background: var(--surface-2); }
.mk-sheet .sheet-head { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
.mk-sheet hr { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.hero {
    padding-block: var(--s12) var(--s12);
    background:
        radial-gradient(900px 420px at 85% -10%, var(--brand-tint), transparent 70%),
        var(--surface);
    overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-block: 88px 96px; } }

.hero-grid {
    display: grid;
    gap: var(--s10);
    align-items: center;
}
/* A grid item defaults to min-width:auto, so it refuses to shrink below the
   widest thing inside it and silently pushes the column past the viewport
   instead of wrapping. */
.hero-grid > * { min-width: 0; }
@media (min-width: 960px) {
    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s12); }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 6px var(--s3);
    border-radius: var(--r-full);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
    color: var(--brand-strong);
    font-size: var(--text-xs);
    font-weight: 700;
}

.hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-top: var(--s4);
}
.hero h1 .hl { color: var(--brand-strong); }
.hero-sub {
    font-size: var(--text-lg);
    color: var(--ink-2);
    margin-top: var(--s5);
    max-width: 52ch;
    line-height: 1.75;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s5);
    font-size: var(--text-sm);
    color: var(--ink-3);
}
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .icon { color: var(--ok); }

/* The handle field is the promise of the product, made concrete.
   LTR like the .input-group in the store editor: the prefix must sit to the
   left of the value so the whole thing reads as one URL. */
.handle-demo {
    display: flex;
    align-items: stretch;
    direction: ltr;
    max-width: 440px;
    margin-top: var(--s8);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.handle-demo .pre {
    display: flex;
    align-items: center;
    padding-inline: var(--s4);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: var(--text-sm);
    font-weight: 700;
    direction: ltr;
    border-inline-end: 1px solid var(--line);
    white-space: nowrap;
}
.handle-demo input {
    flex: 1;
    /* An <input> carries an intrinsic width of ~20 characters. min-width:0
       lets it shrink while flexing but the intrinsic size still counts toward
       the row's min-content, which pinned this field at 438px and dragged the
       entire hero column off the side of every phone. width:0 drops it. */
    min-width: 0;
    width: 0;
    border: 0;
    padding: var(--s3) var(--s4);
    font: inherit;
    font-weight: 700;
    direction: ltr;
    text-align: left;
    background: transparent;
    color: var(--ink);
}
.handle-demo input:focus { outline: none; }
.handle-demo:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* The CTA is an <a class="btn">, and the wrapper already clips the corners. */
.handle-demo .btn { border-radius: 0; flex: none; }

/* On a phone the prefix and the button together leave the field about four
   characters wide, so "yasmine" reads as "yasm". Drop the button onto its own
   row and give the name the whole width. */
@media (max-width: 520px) {
    .handle-demo { flex-wrap: wrap; }
    .handle-demo input { flex: 1 0 auto; padding-block: var(--s4); }
    .handle-demo .btn {
        flex: 1 0 100%;
        border-top: 1px solid var(--line);
    }
}

/* --------------------------------------------------------------------------
   4. Store mock (the hero's right column)
   -------------------------------------------------------------------------- */
.mock {
    width: min(340px, 100%);
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mock-bar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.mock-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-bar .url {
    margin-inline-start: var(--s2);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink-3);
    direction: ltr;
}
.mock-body { padding: var(--s6) var(--s5) var(--s8); text-align: center; }
.mock-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-inline: auto;
    background: linear-gradient(135deg, var(--brand) 0%, #10b981 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: var(--text-xl);
}
.mock-name { font-weight: 800; margin-top: var(--s3); }
.mock-bio { font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; }
.mock-tiles { display: grid; gap: var(--s3); margin-top: var(--s5); text-align: start; }
.mock-tile {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.mock-tile .ico {
    width: 34px; height: 34px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
}
.mock-tile .t { font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.mock-tile .p { font-size: var(--text-xs); color: var(--ink-3); }
.mock-tile.is-buy { border-color: var(--brand-line); background: var(--brand-tint); }

/* --------------------------------------------------------------------------
   5. Logo / trust strip
   -------------------------------------------------------------------------- */
.rails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s3) var(--s6);
}
.rail-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-2);
}
.rail-chip .icon { color: var(--brand-strong); }

/* --------------------------------------------------------------------------
   6. Steps / feature cards
   -------------------------------------------------------------------------- */
.grid-3 { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-2 { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.mk-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s6);
    height: 100%;
}
.mk-card h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.mk-card p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.75; }
.mk-card .ico {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    margin-bottom: var(--s4);
}

.step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: var(--text-sm);
    margin-bottom: var(--s4);
}

/* --------------------------------------------------------------------------
   7. Creator cards (social proof)
   -------------------------------------------------------------------------- */
.creator {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.creator:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.creator img,
.creator .fallback {
    width: 52px; height: 52px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
}
.creator .fallback {
    background: var(--brand-tint);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    font-weight: 800;
}
.creator .n { font-weight: 700; font-size: var(--text-sm); }
.creator .h { font-size: var(--text-xs); color: var(--ink-3); direction: ltr; }

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */
.price-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 760px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* The recommended plan is marked by border + badge, never colour alone. */
.price-card.featured {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-md);
}
.price-badge {
    position: absolute;
    top: -13px;
    inset-inline-start: var(--s6);
    background: var(--brand);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 4px var(--s3);
    border-radius: var(--r-full);
}
.price-name { font-size: var(--text-lg); font-weight: 800; }
.price-desc { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--s2); min-height: 2.6em; }
.price-amount {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin-top: var(--s5);
    direction: rtl;
}
.price-amount .v { font-size: var(--text-3xl); font-weight: 800; line-height: 1; }
.price-amount .u { font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }
.price-yearly { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--s2); }
.price-trial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--s4);
    padding: 4px var(--s3);
    border-radius: var(--r-full);
    background: var(--ok-bg);
    color: var(--ok);
    font-size: var(--text-xs);
    font-weight: 700;
}
.price-feats { list-style: none; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s3); }
.price-feats li {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.price-feats .icon { flex: none; margin-top: 3px; color: var(--ok); }
.price-feats li.off { color: var(--ink-3); }
.price-feats li.off .icon { color: var(--line-strong); }
.price-card .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   8b. The value stack
   --------------------------------------------------------------------------
   One row per thing Digitaly does, priced against the foreign tool a creator
   would otherwise rent to do it. The point of the layout is the last two rows:
   a long column of separate charges, then one line underneath it.
   -------------------------------------------------------------------------- */
.stack {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s4) var(--s5);
}
@media (min-width: 640px) {
    .stack { padding: var(--s5) var(--s6); }
}

.stack-row {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--line);
}
.stack-row:last-child { border-bottom: 0; }

.stack-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand-strong);
}

/* min-width:0 so a long tool name wraps instead of shoving the price off the
   edge of a phone. */
.stack-what { flex: 1 1 auto; min-width: 0; }
.stack-what strong { display: block; font-weight: 700; line-height: 1.4; }
/* Direct child only. The tool names inside carry .ltr spans of their own, and
   a descendant selector here broke each one onto its own line. */
.stack-what > span {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-3);
    margin-top: 2px;
}

.stack-cost {
    flex: none;
    font-weight: 700;
    /* Left to the page's RTL direction: the amount carries its own .ltr span,
       so "شهرياً" stays to the left of it and the pair reads as Arabic. Making
       the whole cost LTR put the unit on the wrong side of the number.
       Tabular figures keep the column aligned down the card. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stack-sum {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s2);
    padding-top: var(--s5);
    border-top: 2px solid var(--ink);
    font-weight: 700;
}
.stack-sum .icon { flex: none; color: var(--danger); }
.stack-sum .stack-what { color: var(--ink-2); }
.stack-sum .stack-cost { color: var(--danger); font-size: var(--text-lg); }

.stack-ours {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s5);
    padding: var(--s5);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
}
.stack-ours .icon { flex: none; color: var(--brand-strong); }
.stack-ours .stack-what strong { font-size: var(--text-base); }
.stack-ours .stack-cost { color: var(--brand-strong); font-size: var(--text-xl); }

/* Under ~420px the price cannot share a line with the label without one of
   them being squeezed to a couple of characters, so it drops underneath.
   A grid rather than flex-wrap: wrapping distributes items by their content
   width before shrinking them, which pushed the one long label onto its own
   line and left its icon stranded above it. */
@media (max-width: 419px) {
    .stack-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        column-gap: var(--s4);
        row-gap: var(--s2);
    }
    .stack-row .stack-icon { grid-row: span 2; }
    .stack-row .stack-cost { grid-column: 2; }

    .stack-sum, .stack-ours { flex-wrap: wrap; }
    .stack-sum .stack-cost, .stack-ours .stack-cost {
        width: 100%;
        padding-inline-start: 32px;
    }
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s3); }
.faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s4) var(--s5);
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: var(--text-base);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    margin-inline-start: auto;
    width: 10px; height: 10px;
    border-inline-end: 2px solid var(--ink-3);
    border-block-end: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.8; margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   10. Final CTA
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--brand-strong) 0%, #10b981 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: var(--s10) var(--s6);
    text-align: center;
}
.cta-band h2 { color: #fff; font-size: var(--text-3xl); }
.cta-band p { color: rgba(255,255,255,.92); margin-top: var(--s3); font-size: var(--text-lg); }
.cta-band .btn { margin-top: var(--s6); }
.cta-band .btn-on-brand {
    background: #fff;
    color: var(--brand-strong);
    border-color: #fff;
}
.cta-band .btn-on-brand:hover { background: var(--brand-tint); color: var(--brand-strong); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.mk-foot {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    padding-block: var(--s10) var(--s6);
    margin-top: var(--s12);
}
.foot-grid { display: grid; gap: var(--s8); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.mk-foot h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: var(--s3); }
.mk-foot ul { list-style: none; display: grid; gap: var(--s2); }
.mk-foot a { color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); }
.mk-foot a:hover { color: var(--brand-strong); text-decoration: underline; }
.mk-foot .tag { color: var(--ink-3); font-size: var(--text-sm); max-width: 34ch; line-height: 1.7; }
.foot-base {
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
    .mk-sheet, .faq summary::after, .creator { transition: none; }
}