/* =====================================================================
   Albatriq | the public marketing site
   ===================================================================== */

/* ---------------------------------------------------------------- header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ink-200);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 2rem; }
.site-nav { display: flex; align-items: center; gap: 1.7rem; }
.site-nav a { position: relative; color: var(--ink-700); font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: var(--brand-700); }

/* The page you are on. Colour alone is a difference somebody has to be told
   about; the rule under it is the one that reads at a glance.

   `inset-inline` rather than left/right: the bar has to run the width of the
   word whichever way the page is set, and a physical property would pin it to
   one end in English and leave it there in Arabic. */
.site-nav a.on { color: var(--brand-700); }
.site-nav a.on::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -.55rem; height: 2px;
    /* gold: the same mark that says «you are here» inside the application. */
    background: var(--gold-500); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: .7rem; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--ink-700); cursor: pointer; }

/* ---------------------------------------------------------------- hero */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(165deg, var(--brand-900) 0%, var(--brand-700) 55%, #1a4a6e 100%);
    color: #fff; padding: 5.5rem 0 6rem;
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60rem 30rem at 78% -10%, rgba(20, 184, 166, .28), transparent 60%),
      radial-gradient(40rem 24rem at 8% 110%, rgba(45, 212, 191, .16), transparent 60%);
}
.hero .container-x { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
    padding: .35rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    margin-bottom: 1.4rem;
}
/* Both, and identically: the slides look the same, but only the first is the
   document's `h1`. */
.hero h1, .hero h2 { font-size: clamp(2rem, 4vw, 3.1rem); color: #fff; margin-bottom: 1.1rem; }
.hero h1 .hl, .hero h2 .hl { color: var(--gold-400); }
.hero p.lead { font-size: 1.13rem; color: rgba(255, 255, 255, .82); max-width: 34rem; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
/* A grid of three equal columns, not a wrapping flex row. Sized by their own
   content the three figures never balanced: the third caption is the longest by
   a distance, so it alone dropped to a second line and the row read as two
   proof points and an afterthought. Equal columns let the captions wrap inside
   their own column instead, which is where the extra height belongs. */
.hero-proof {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem; margin-top: 2.6rem;
}
.hero-proof .n { font-size: 1.6rem; font-weight: 800; color: var(--gold-400); line-height: 1.2; }
.hero-proof .l { font-size: .86rem; color: rgba(255, 255, 255, .68); line-height: 1.5; }
/* On a narrow phone three columns of Arabic leave two words to a line, which is
   worse than stacking. */
@media (max-width: 560px) {
    .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
}

/* ---------------------------------------------------------------- hero slider
   Two slides for the two mandates. They are stacked in one grid cell rather
   than laid side by side, so the section is as tall as the taller slide and
   nothing below it moves when the slide changes -- a hero that grows and
   shrinks on a timer pushes the whole page around while somebody is reading.

   `transform` has no logical form, so the direction of travel is named twice.
   The outgoing slide leaves towards the start of the line and the incoming one
   arrives from the end, which is the direction the eye already reads in. */
.hero-slider { position: relative; }
.hero-track { display: grid; }
.hero-slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    /* leaving is quicker than arriving, and arriving waits: a straight
       crossfade left both headlines readable on top of each other, which looks
       like a rendering fault rather than a transition */
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.hero-slide.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .45s ease .2s, transform .45s ease .2s, visibility 0s;
}
[dir="rtl"] .hero-slide            { transform: translateX(2.5rem); }
[dir="rtl"] .hero-slide.is-leaving { transform: translateX(-2.5rem); }
[dir="ltr"] .hero-slide            { transform: translateX(-2.5rem); }
[dir="ltr"] .hero-slide.is-leaving { transform: translateX(2.5rem); }

/* a slide that is not showing must not be reachable by keyboard or read out */
.hero-slide:not(.is-active) { pointer-events: none; }

.hero-dots { display: flex; gap: .5rem; margin-top: 2.4rem; }
.hero-dot {
    width: 2.2rem; height: 4px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .28); cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .5); }
.hero-dot.is-on { background: var(--gold-400); width: 3.2rem; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Someone who has asked their system for less motion gets both slides without
   the movement -- the script also stops advancing on its own. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide.is-active { transition: opacity .2s ease; transform: none; }
}

/* the invoice slide's card: same receipt shape, with the buyer that makes it
   an invoice, and a badge saying which mandate it belongs to */
.receipt-card.invoice-card { transform: rotate(1.4deg); }
.receipt-card .rc-type {
    background: var(--brand-050); color: var(--brand-700);
    border: 1px solid var(--brand-200);
    font-weight: 800; font-size: .72rem; letter-spacing: .04em;
    padding: .3rem .6rem; border-radius: 8px; flex: 0 0 auto;
}
.receipt-card .rc-party {
    background: var(--ink-050); border-radius: 10px;
    padding: .6rem .75rem; margin-bottom: .9rem; line-height: 1.5;
}

/* a stylised receipt, drawn in CSS so it stays crisp on every screen */
.hero-visual { position: relative; }
.receipt-card {
    background: #fff; color: var(--ink-900); border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35); padding: 1.5rem 1.6rem;
    transform: rotate(-1.6deg);
}
.receipt-card .rc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px dashed var(--ink-200); padding-bottom: .9rem; margin-bottom: .9rem; }
.receipt-card .rc-title { font-weight: 800; font-size: 1rem; }
.receipt-card .rc-row { display: flex; justify-content: space-between; font-size: .88rem; padding: .3rem 0; color: var(--ink-700); }
.receipt-card .rc-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.05rem; border-top: 2px dashed var(--ink-200); margin-top: .8rem; padding-top: .8rem; }
.receipt-card .rc-stamp {
    margin-top: 1.1rem; display: flex; align-items: center; gap: .6rem;
    background: var(--ok-050); color: var(--ok-600); border-radius: 10px; padding: .6rem .85rem;
    font-weight: 700; font-size: .87rem;
}
.receipt-card .rc-qr {
    width: 62px; height: 62px; border-radius: 8px; flex: 0 0 auto;
    background:
      repeating-linear-gradient(90deg, var(--ink-900) 0 4px, #fff 4px 8px),
      repeating-linear-gradient(0deg, var(--ink-900) 0 4px, #fff 4px 8px);
    background-blend-mode: difference; opacity: .85;
}

/* ---------------------------------------------------------------- sections */
/* ---------------------------------------------------------------- page hero
   The title of an inner page, in a band of its own.

   Before this, every page opened with a centred `section-head` identical to the
   ones further down it: nothing said which page you were on, and because they
   were `<h2>` the documents had no `<h1>` at all. The band separates the two
   jobs — this names the page, `section-head` names a section inside it.

   The tint fades into the page rather than ending on a hard edge, so the band
   reads as the top of the page instead of a stripe laid across it. */
.page-hero {
    background: linear-gradient(180deg, var(--brand-050), var(--surface));
    border-bottom: 1px solid var(--ink-200);
    padding: 3.4rem 0 2.8rem; text-align: center;
}
.page-hero .kicker {
    color: var(--gold-700); font-weight: 700; font-size: .88rem;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem;
}
.page-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0 auto .55rem; max-width: 44rem; }
.page-hero p { color: var(--ink-500); font-size: 1.05rem; margin: 0 auto; max-width: 44rem; }

/* The band already gives the page its top spacing, so the first section under
   it does not need a second helping. */
.page-hero + .section { padding-top: 3rem; }

.section { padding: 5rem 0; }
.section-alt { background: #fff; }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto 3rem; }
.section-head .kicker { color: var(--gold-700); font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.section-head p { color: var(--ink-500); font-size: 1.03rem; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.feature {
    background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius);
    padding: 1.7rem; transition: .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-400); }
.feature .ico {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--gold-050); color: var(--gold-700); font-size: 1.3rem; margin-bottom: 1rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.feature p { color: var(--ink-500); font-size: .93rem; margin: 0; }

/* ---------------------------------------------------------------- how it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.step { position: relative; padding-top: 3.2rem; }
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: 0; right: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-700); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
/* the step number belongs in the corner the reader starts from */
[dir="ltr"] .step::before { right: auto; left: 0; }
.step h3 { font-size: 1rem; margin-bottom: .35rem; }
.step p { color: var(--ink-500); font-size: .91rem; margin: 0; }

/* the pricing section centres the switch; the application places it in a card head */
#pricing .cycle-switch, .section .cycle-switch { margin: 0 auto 2.4rem; }

/* ---------------------------------------------------------------- faq */
.faq-list { max-width: 46rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--ink-200); }
.faq-q {
    width: 100%; text-align: right; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--ink-900);
    padding: 1.15rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q .chev { color: var(--gold-700); transition: transform .2s; flex: 0 0 auto; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 0 1.2rem; color: var(--ink-500); font-size: .95rem; }
.faq-item.open .faq-a { display: block; }

/* ---------------------------------------------------------------- cta + footer */
.cta-band {
    background: linear-gradient(135deg, var(--brand-800), var(--gold-600));
    color: #fff; border-radius: 22px; padding: 3.2rem; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cta-band p { color: rgba(255, 255, 255, .85); max-width: 34rem; margin: 0 auto 1.8rem; }
.cta-band .btn-primary { background: #fff; color: var(--brand-800); }
.cta-band .btn-primary:hover { background: var(--ink-100); color: var(--brand-900); }

/* The outline button on the band, as a rule rather than as an inline style.

   It was `style="color:#fff;border-color:..."` on the tag, and an inline
   declaration beats a stylesheet's `:hover` — so hovering applied the ordinary
   `.btn-outline:hover` background, a near-white, while the inline `color:#fff`
   held: white text on a white button. The state was unreachable from where the
   colour was set, which is the whole reason state-dependent properties do not
   belong in a `style` attribute. */
.cta-band .btn-outline {
    color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent;
}
.cta-band .btn-outline:hover:not(:disabled) {
    color: #fff; border-color: #fff; background: rgba(255, 255, 255, .16);
}

/* A plain link on the band, for the same reason: `style="color:#fff"` on the
   tag meant `a:hover` could never reach it, so it had no hover at all. */
.cta-band a { color: #fff; }
.cta-band a:hover { color: rgba(255, 255, 255, .78); }

.site-footer { background: var(--brand-900); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 1.8rem; margin-top: 5rem; }
.site-footer .brand { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.4rem; }
.site-footer h4 { color: #fff; font-size: .96rem; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .28rem 0; }
.site-footer a { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.site-footer a:hover { color: var(--gold-400); }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.6rem; padding-top: 1.4rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .87rem;
}

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .feature-grid, .plans, .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .site-nav { display: none; }
    .site-nav.open {
        display: flex; position: absolute; top: 72px; right: 0; left: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: #fff; border-bottom: 1px solid var(--ink-200); padding: 1rem 4%;
    }
    /* Stacked, the underline sits on top of the next item. A bar down the
       leading edge is the same signal in a shape that fits a column. */
    .site-nav.open a.on::after {
        inset-inline: auto; inset-inline-start: -4%; top: 0; bottom: 0;
        width: 3px; height: auto;
    }
    .site-nav.open a { padding: .6rem 0; width: 100%; }
    .nav-toggle { display: block; }
}

/* ------------------------------------------------------------------- bundle
   The volume discount, above the module cards. Site only: the signed-in store
   prices a real basket and has no use for a ladder in the abstract.

   Two columns rather than a centred block — the saving on one side and the
   reason for it on the other. Centred, it was a wide box holding three short
   lines, and the figure that actually persuades anybody was the smallest text
   on it. */
.bundle {
    display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr;
    gap: 1.6rem; align-items: center;
    background: var(--surface); border: 1px solid var(--ink-200);
    border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-bottom: 1.6rem;
}
.bundle-figure { text-align: center; border-inline-end: 1px solid var(--ink-200); }
.bundle-price { display: flex; align-items: baseline; justify-content: center; gap: .6rem; }
.bundle-price strong { font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--ink-900); }
/* the list price, struck through: the discount is only a number next to the
   one it replaces */
.bundle-price .was { font-size: 1.15rem; color: var(--ink-400); text-decoration: line-through; }

.bundle-steps p { color: var(--ink-500); font-size: .95rem; margin: 0 0 .8rem; }
/* max-content: three short rows sized to their own text rather than stretched
   across the column, which left a hand's width of empty pill between the label
   and the figure. */
.bundle-steps ol {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .4rem; justify-items: start; grid-template-columns: max-content;
}
.bundle-steps li {
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem .8rem; border-radius: var(--radius-sm);
    background: var(--ink-050); color: var(--ink-700); font-size: .93rem;
}
.bundle-steps li.is-best { background: var(--ok-050); color: var(--ok-700); font-weight: 700; }
.bundle-off {
    flex: 0 0 3.4rem; text-align: center; font-weight: 800; font-size: 1.05rem;
    color: var(--brand-700);
}
.is-best .bundle-off { color: var(--ok-600); }

@media (max-width: 760px) {
    .bundle { grid-template-columns: 1fr; gap: 1.1rem; }
    /* the rule turns from a divider between columns into one between rows */
    .bundle-figure {
        border-inline-end: 0; border-bottom: 1px solid var(--ink-200); padding-bottom: 1.1rem;
    }
}

/* --------------------------------------------------- the modules cross-sell
   The bottom of the pricing page: what the plan does not include, named rather
   than described. Site only — inside the application the store shows the real
   cards with the subscriber's own state on them. */

/* A footnote about the plans, sitting with them. */
.price-note { text-align: center; color: var(--ink-500); font-size: .9rem; margin: 2rem auto 0; max-width: 44rem; }

/* Eight names, scannable in one look. Chips rather than cards: the cards are on
   the modules page and would compete with the plan cards directly above. */
.module-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    margin-bottom: 2.2rem;
}
.module-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--ink-200);
    color: var(--ink-700); font-weight: 600; font-size: .92rem;
    transition: border-color .15s, color .15s, transform .15s;
}
.module-chip i { color: var(--brand-600); font-size: 1.05rem; }
.module-chip:hover {
    border-color: var(--gold-400); color: var(--brand-800); transform: translateY(-2px);
}

/* The two figures that answer "what does this cost", and the way on. */
.bundle-line {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1.6rem; text-align: center;
    background: var(--surface); border: 1px solid var(--ink-200);
    border-radius: var(--radius); padding: 1.4rem 1.8rem;
    max-width: 46rem; margin-inline: auto;
}
.bundle-line .h3 { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.bundle-line .unit { font-size: .85rem; font-weight: 600; color: var(--ink-500); }
.bundle-line .was { font-size: 1rem; color: var(--ink-400); text-decoration: line-through; }
/* A hairline between the two figures, and nothing at all once they stack. */
.bundle-line .sep { width: 1px; align-self: stretch; background: var(--ink-200); }

@media (max-width: 620px) {
    .bundle-line { flex-direction: column; gap: 1rem; }
    .bundle-line .sep { display: none; }
}