/* ==========================================================================
   TechniPrix POS — public pages
   --------------------------------------------------------------------------
   Sign in, sign up and pricing. HAND-WRITTEN, NOT COMPILED.

   This project has no asset build step: no package.json, no tailwind.config.js,
   no webpack.mix.js, no vite.config.js. `public/css/tailwind/app.css` was
   committed as a build artefact and cannot be regenerated, so a Tailwind class
   that is not already in it produces no rule, no error and no console warning.

   The pages that use THIS file therefore use no Tailwind at all. They are new
   documents with no inherited markup, so there is nothing to work around —
   plain CSS is not a fallback here, it is the correct tool. It also means these
   pages cannot break when core's compiled output changes, and they load without
   the 856K of vendor CSS and 17M of vendor JS the in-app pages pull in.

   No external requests: no CDN, no Google Fonts, no icon font. Every icon is an
   inline SVG in the markup. A merchant on a slow connection in Nairobi gets one
   stylesheet and no third-party round trips.

   Palette is the TechniPrix mark: navy #001F3E, M-Pesa green #00A551.
   ========================================================================== */

:root {
    --tp-navy:        #001F3E;
    --tp-navy-800:    #06294B;
    --tp-navy-700:    #0D3358;
    --tp-navy-600:    #17456E;
    --tp-navy-400:    #6E8AA6;

    --tp-green:       #00A551;
    --tp-green-700:   #008642;
    --tp-green-100:   #E4F6EC;

    --tp-ink:         #0B1721;
    --tp-muted:       #5A6B7B;
    --tp-faint:       #8496A6;
    --tp-line:        #DFE5EB;
    --tp-line-soft:   #EDF1F5;
    --tp-bg:          #F5F7FA;
    --tp-white:       #FFFFFF;
    --tp-danger:      #B3261E;
    --tp-danger-bg:   #FDECEA;

    --tp-radius:      12px;
    --tp-radius-lg:   18px;
    --tp-shadow:      0 1px 2px rgba(11, 23, 33, .05), 0 8px 24px -12px rgba(11, 23, 33, .18);
    --tp-shadow-lg:   0 2px 4px rgba(11, 23, 33, .04), 0 24px 48px -24px rgba(11, 23, 33, .30);

    --tp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* --- reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.tp {
    margin: 0;
    font-family: var(--tp-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tp-ink);
    background: var(--tp-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tp h1, .tp h2, .tp h3, .tp h4, .tp p, .tp ul, .tp ol, .tp figure { margin: 0; }
.tp ul, .tp ol { padding: 0; list-style: none; }
.tp img, .tp svg { display: block; max-width: 100%; }
.tp a { color: inherit; text-decoration: none; }
.tp button { font: inherit; }

/* --- brand mark -------------------------------------------------------- */

.tp-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}
.tp-mark__img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.tp-mark__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.tp-mark__name span { font-weight: 400; opacity: .72; }

/* ==========================================================================
   Split shell — used by sign in and sign up
   ========================================================================== */

.tp-split { display: flex; min-height: 100vh; }

/* Left: the navy panel. Hidden below 900px so a phone gets the form only. */
.tp-split__aside {
    display: none;
    width: 42%;
    max-width: 560px;
    flex: 0 0 auto;
    padding: 40px;
    background: var(--tp-navy);
    background-image:
        radial-gradient(120% 90% at 8% 0%,  rgba(0, 165, 81, .22), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(23, 69, 110, .85), transparent 60%);
    color: var(--tp-white);
    flex-direction: column;
    justify-content: space-between;
}

.tp-split__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tp-white);
}

.tp-split__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tp-line-soft);
}
.tp-split__body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 20px 56px;
}
.tp-split__inner { width: 100%; max-width: 420px; }
.tp-split__inner--wide { max-width: 620px; }

/* The mark repeats above the form so a phone (where the aside is hidden)
   still sees the brand. On desktop the aside already carries it. */
.tp-formmark { display: inline-flex; margin-bottom: 20px; }

@media (min-width: 900px) {
    /* Sticky so the pitch and the reassurance line stay put while a long
       form scrolls. height:100vh rather than min-height, or the sticky box
       grows to the form's height and there is nothing left to stick. */
    .tp-split__aside {
        display: flex;
        padding: 44px 48px;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    .tp-split__topbar { border-bottom: 0; padding: 26px 40px 0; }
    .tp-split__body { align-items: center; padding: 24px 40px 72px; }
    .tp-formmark { display: none; }
}

/* Aside content ---------------------------------------------------------- */

.tp-aside__pitch { margin-top: 40px; }
.tp-aside__lede {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    max-width: 15ch;
}
.tp-aside__sub {
    margin-top: 14px;
    font-size: 15px;
    color: rgba(255, 255, 255, .74);
    max-width: 34ch;
}

.tp-ladder { margin-top: 32px; display: grid; gap: 2px; }
.tp-ladder li {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.tp-ladder li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tp-ladder__tier {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tp-green);
}
.tp-ladder__what { font-size: 14.5px; color: rgba(255, 255, 255, .88); }

.tp-aside__foot {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tp-aside__foot svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.tp-h1 {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
}
.tp-lede { margin-top: 8px; color: var(--tp-muted); font-size: 15px; }
.tp-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tp-faint);
}
.tp-small { font-size: 13.5px; color: var(--tp-muted); }
.tp-link { color: var(--tp-green-700); font-weight: 600; }
.tp-link:hover { text-decoration: underline; }
.tp-link--quiet { color: var(--tp-muted); font-weight: 500; }
.tp-link--quiet:hover { color: var(--tp-ink); text-decoration: underline; }

/* ==========================================================================
   Forms
   ========================================================================== */

.tp-form { margin-top: 26px; }
.tp-form + .tp-form { margin-top: 30px; }

.tp-fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.tp-fieldset__legend {
    display: block;
    width: 100%;
    padding: 0 0 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--tp-line-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tp-faint);
}

.tp-grid { display: grid; gap: 16px; }
@media (min-width: 620px) {
    .tp-grid--2 { grid-template-columns: 1fr 1fr; }
    .tp-grid__full { grid-column: 1 / -1; }
}

.tp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tp-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tp-ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.tp-label__opt { font-weight: 400; font-size: 12.5px; color: var(--tp-faint); }

.tp-input,
.tp-select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    font: inherit;
    font-size: 15px;
    color: var(--tp-ink);
    background: var(--tp-white);
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
    -webkit-appearance: none;
    appearance: none;
}
.tp-input::placeholder { color: #A9B6C2; }
.tp-input:hover, .tp-select:hover { border-color: #C6D0DA; }
.tp-input:focus, .tp-select:focus {
    border-color: var(--tp-green);
    box-shadow: 0 0 0 3px rgba(0, 165, 81, .16);
}

.tp-select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

.tp-hint { font-size: 12.5px; color: var(--tp-faint); }

/* Password field with a reveal button ----------------------------------- */

.tp-password { position: relative; }
.tp-password .tp-input { padding-right: 46px; }
.tp-reveal {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--tp-faint);
    border-radius: 0 10px 10px 0;
}
.tp-reveal:hover { color: var(--tp-ink); }
.tp-reveal svg { width: 19px; height: 19px; }

/* Checkbox --------------------------------------------------------------- */

.tp-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: var(--tp-muted);
    cursor: pointer;
}
.tp-check input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--tp-green);
    flex: 0 0 auto;
}

/* Inline field feedback (availability checks) ---------------------------- */

.tp-note { font-size: 12.5px; min-height: 1em; }
.tp-note--ok   { color: var(--tp-green-700); }
.tp-note--bad  { color: var(--tp-danger); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    text-align: center;
    /* A two-word label must not break across lines inside a fixed-height
       button — "Sign / in" at 390px. Buttons here are all short. */
    white-space: nowrap;
}
.tp-btn--block { width: 100%; }
.tp-btn--primary { background: var(--tp-green); color: #fff; }
.tp-btn--primary:hover { background: var(--tp-green-700); }
.tp-btn--navy { background: var(--tp-navy); color: #fff; }
.tp-btn--navy:hover { background: var(--tp-navy-700); }
.tp-btn--ghost {
    background: transparent;
    color: var(--tp-ink);
    border-color: var(--tp-line);
}
.tp-btn--ghost:hover { border-color: #C6D0DA; background: var(--tp-bg); }
.tp-btn--onnavy {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}
.tp-btn--onnavy:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255,255,255,.6); }
.tp-btn--sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }

.tp-btn:focus-visible {
    outline: 2px solid var(--tp-green);
    outline-offset: 2px;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.tp-alert {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--tp-radius);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.tp-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.tp-alert--bad  { background: var(--tp-danger-bg); color: var(--tp-danger); }
.tp-alert--good { background: var(--tp-green-100); color: var(--tp-green-700); }
.tp-alert__title { font-weight: 600; }
.tp-alert ul { margin-top: 5px; }
.tp-alert li { margin-top: 2px; }
.tp-alert li::before { content: "– "; }

/* ==========================================================================
   Pricing page
   ========================================================================== */

.tp-page { min-height: 100vh; display: flex; flex-direction: column; }

.tp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 18px 20px;
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
}
.tp-nav__links { display: flex; align-items: center; gap: 10px; }

.tp-hero {
    background: var(--tp-navy);
    background-image:
        radial-gradient(90% 120% at 10% -10%, rgba(0, 165, 81, .20), transparent 55%),
        radial-gradient(70% 90% at 95% 110%, rgba(23, 69, 110, .9), transparent 60%);
    color: #fff;
}
.tp-hero__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px 96px;
}
.tp-hero__title {
    margin-top: 52px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.025em;
    font-weight: 700;
    max-width: 18ch;
}
.tp-hero__sub {
    margin-top: 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, .76);
    max-width: 60ch;
}
@media (min-width: 760px) {
    .tp-hero__title { font-size: 42px; }
}

/* The ladder, stated on the hero ---------------------------------------- */

.tp-rungs {
    margin-top: 34px;
    display: grid;
    gap: 12px;
}
@media (min-width: 820px) { .tp-rungs { grid-template-columns: repeat(3, 1fr); } }

.tp-rung {
    padding: 16px 18px;
    border-radius: var(--tp-radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
.tp-rung__tier {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tp-green);
}
.tp-rung__what { margin-top: 5px; font-size: 14.5px; color: rgba(255, 255, 255, .9); }

/* Cards ------------------------------------------------------------------ */

.tp-plans {
    max-width: 1160px;
    margin: -64px auto 0;
    padding: 0 20px 64px;
    width: 100%;
    display: grid;
    gap: 20px;
    align-items: stretch;
}
@media (min-width: 900px) { .tp-plans { grid-template-columns: repeat(3, 1fr); } }

.tp-plan {
    background: var(--tp-white);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow);
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tp-plan--featured {
    border-color: var(--tp-navy);
    box-shadow: var(--tp-shadow-lg);
}
.tp-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-plan__name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tp-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--tp-navy);
    color: #fff;
    white-space: nowrap;
}
.tp-plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.tp-plan__amount {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.tp-plan__per { font-size: 14px; color: var(--tp-muted); }
.tp-plan__blurb {
    margin-top: 12px;
    font-size: 14.5px;
    color: var(--tp-muted);
}
.tp-plan__cta { margin-top: 22px; }

.tp-feats { margin-top: 24px; margin-bottom: 22px; display: grid; gap: 11px; }
.tp-feat { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; align-items: start; }
.tp-feat svg { width: 18px; height: 18px; margin-top: 2px; }
.tp-feat--on  { color: var(--tp-ink); }
.tp-feat--on  svg { color: var(--tp-green); }
.tp-feat--off { color: var(--tp-faint); }
.tp-feat--off svg { color: #C3CDD6; }

.tp-caps {
    /* auto so the caps block sits on the card's floor whatever the blurb and
       feature list did above it, and the three cards line up across. */
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--tp-line-soft);
    display: grid;
    gap: 8px;
}
.tp-cap {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--tp-muted);
}
.tp-cap__v { color: var(--tp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Trial strip ------------------------------------------------------------ */

.tp-strip {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px 56px;
    width: 100%;
}
.tp-strip__inner {
    background: var(--tp-navy);
    color: #fff;
    border-radius: var(--tp-radius-lg);
    padding: 26px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.tp-strip__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tp-strip__sub { margin-top: 5px; font-size: 14.5px; color: rgba(255, 255, 255, .74); max-width: 56ch; }

/* Notes / footnote ------------------------------------------------------- */

.tp-notes {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px 56px;
    width: 100%;
    display: grid;
    gap: 14px;
}
@media (min-width: 820px) { .tp-notes { grid-template-columns: repeat(3, 1fr); } }
.tp-note-card {
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    background: var(--tp-white);
    padding: 18px 20px;
}
.tp-note-card h3 { font-size: 14.5px; font-weight: 700; }
.tp-note-card p { margin-top: 6px; font-size: 13.5px; color: var(--tp-muted); }

/* Page footer ------------------------------------------------------------ */

.tp-foot {
    margin-top: auto;
    border-top: 1px solid var(--tp-line);
    background: var(--tp-white);
}
.tp-foot__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--tp-faint);
}
.tp-foot__version { font-family: var(--tp-mono); }

/* Utilities -------------------------------------------------------------- */

.tp-stack-8  > * + * { margin-top: 8px; }
.tp-stack-16 > * + * { margin-top: 16px; }
.tp-stack-24 > * + * { margin-top: 24px; }
.tp-center { text-align: center; }
.tp-vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}