/*
 * basgro marketing site and sign-in, dark premium (ADR-014 amendment 2).
 * Layout and components only: every colour comes from tokens.css, which the
 * page loads first with data-theme="dark". Headings use --display (Inter
 * for Latin, IBM Plex Sans Arabic for Arabic). Gold is kept for the one
 * gateway moment on the page: the button that starts building.
 */

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--app); color: var(--ink); font: 400 16px/1.7 var(--ui); }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1:lang(en), h2:lang(en), h3:lang(en) { letter-spacing: -.025em; }
h2 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.muted { color: var(--mute); }
.small { font-size: 13px; line-height: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -48px; z-index: 10; background: var(--ink); color: var(--app); padding: 8px 16px; border-radius: 8px; }
.skip:focus { top: 16px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.grad-text { color: var(--brand); }

/* Brand: the full basgro wordmark */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 34px; width: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font: 600 15px/22px var(--ui); cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--control); }
.btn-secondary:hover { background: var(--hover); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; border: 0; background: var(--gateway); color: var(--on-gateway); cursor: pointer; flex-shrink: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gateway) 18%, transparent); transition: background .15s ease; }
.icon-btn:hover { background: var(--gateway-hover); }

/* Public site */
.site { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(70% 50% at 85% 0%, color-mix(in srgb, var(--glow-1) 22%, transparent), transparent 70%), radial-gradient(50% 40% at 0% 30%, color-mix(in srgb, var(--glow-2) 10%, transparent), transparent 70%), var(--app); }
.site-header { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px clamp(16px, 5vw, 64px); background: color-mix(in srgb, var(--app) 80%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; }
.site-nav a, .site-tools a:not(.btn), .site-tools button { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-tools a:not(.btn):hover, .site-tools button:hover { color: var(--ink); }
.site-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 15px; }
.site-tools form { margin: 0; }
.site-tools button { background: none; border: 0; font: inherit; cursor: pointer; padding: 4px; }
.site-main { flex: 1; overflow-x: clip; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 64px); }

.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-block: clamp(48px, 8vw, 96px) 64px; }
.hero-copy { flex: 1 1 460px; display: grid; gap: 24px; min-width: 0; }
.eyebrow { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); background: color-mix(in srgb, var(--raise) 70%, transparent); border: 1px solid var(--line); padding: 6px 16px 6px 8px; border-radius: 999px; }
[dir="rtl"] .eyebrow { padding: 6px 8px 6px 16px; }
.orb { width: 20px; height: 20px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 12px var(--glow-2); flex-shrink: 0; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.15; font-weight: 600; text-wrap: balance; }
.lead { margin: 0; font-size: clamp(17px, 2vw, 19px); line-height: 1.75; color: var(--mute); max-width: 52ch; }
.prompt { display: grid; gap: 14px; border: 1px solid var(--line-2); border-radius: 24px; padding: 18px 20px; background: color-mix(in srgb, var(--pane) 85%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow-2) 8%, transparent), 0 30px 80px color-mix(in srgb, var(--glow-1) 14%, transparent); transition: border-color .15s ease; }
.prompt:focus-within { border-color: var(--focus); }
.prompt label { font-size: 14px; color: var(--mute); }
.prompt textarea { border: 0; outline: none; resize: none; min-height: 60px; font: 400 18px/28px var(--ui); color: var(--ink); background: transparent; }
.prompt textarea::placeholder { color: var(--faint); }
.prompt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
.kinds label { position: relative; }
.kinds input { position: absolute; opacity: 0; inset: 0; }
.kinds span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; cursor: pointer; }
.kinds label:hover span { background: var(--hover); }
.kinds input:checked + span { background: var(--sel); color: var(--brand); border-color: var(--brand); }
.kinds input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.hero-visual { flex: 1 1 440px; position: relative; min-height: 540px; min-width: 0; margin: 0; }
.ribbon { position: absolute; top: 110px; inset-inline: -10%; height: 220px; transform: rotate(-14deg); background: linear-gradient(90deg, var(--glow-1), var(--glow-2), var(--glow-3)); filter: blur(70px); opacity: .32; border-radius: 999px; }
.window { position: relative; margin-inline-start: auto; width: min(100%, 470px); background: var(--pane); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); }
.window-body { padding: 20px; display: grid; gap: 14px; }
.window-head { display: flex; justify-content: space-between; align-items: center; }
.window-head strong { font: 600 18px/1.4 var(--display); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { display: grid; gap: 6px; font-size: 13px; }
.tile i { display: block; height: 96px; border-radius: 14px; background: linear-gradient(160deg, var(--raise), color-mix(in srgb, var(--glow-1) 60%, var(--raise))); }
.tile:nth-child(2) i { background: linear-gradient(160deg, var(--raise), color-mix(in srgb, var(--glow-2) 45%, var(--raise))); }
.tile:nth-child(3) i { background: linear-gradient(160deg, var(--raise), color-mix(in srgb, var(--glow-3) 45%, var(--raise))); }
.tile small { color: var(--mute); }
.checkout { min-height: 40px; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.building { position: absolute; bottom: 10px; inset-inline-start: 0; width: min(72%, 290px); background: var(--raise); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.building ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.building strong { font-size: 15px; font-weight: 600; }
.building li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--mute); }
.building li::before { content: ""; width: 20px; height: 20px; border-radius: 999px; box-sizing: border-box; border: 2px solid var(--control); flex-shrink: 0; }
.building li.done { color: var(--ink-2); }
.building li.done::before { content: "✓"; border: 0; background: var(--brand); color: var(--on-brand); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.building li.now { color: var(--ink); }
.building li.now::before { border-color: var(--brand); border-top-color: transparent; animation: mk-spin .9s linear infinite; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; padding-block: 24px 64px; }
.step { padding: 28px; display: grid; gap: 10px; align-content: start; background: color-mix(in srgb, var(--pane) 80%, transparent); border: 1px solid var(--line); border-radius: 22px; }
.step span { font-size: 14px; font-weight: 600; color: var(--brand); }
.step h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--mute); }
.examples { padding-block: 24px 64px; display: grid; gap: 18px; }
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.project { background: var(--pane); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none; display: grid; }
.project:hover { border-color: var(--line-2); color: var(--ink); }
.project-thumb { height: 96px; background: var(--signal); }
.project-body { padding: 14px 16px; display: grid; gap: 6px; }
.project-body strong { font-weight: 600; }
.project-meta { font-size: 13px; color: var(--mute); }
.trust { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--pane) 60%, transparent); color: var(--ink-2); }
.trust ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 40px; padding-block: 22px; font-size: 15px; }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 10px var(--glow-2); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 24px; font-size: 13px; color: var(--mute); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--mute); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.auth-legal { margin: 0; font-size: 13px; line-height: 1.8; color: var(--mute); }
.auth-legal a { color: var(--ink-2); }

/* Pricing */
.pricing { display: grid; gap: 48px; padding-block: 56px 72px; }
.pricing .intro { display: grid; gap: 12px; max-width: 68ch; }
.pricing h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.2; font-weight: 600; text-wrap: balance; }
.pricing h2 { font-size: 22px; margin-bottom: 12px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--pane); }
.plan.featured { border: 1.5px solid var(--brand); background: linear-gradient(180deg, var(--sel), var(--pane) 60%); box-shadow: 0 30px 80px color-mix(in srgb, var(--glow-1) 18%, transparent); }
.plan-flag { position: absolute; inset-block-start: -13px; inset-inline-start: 24px; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 600; padding: 2px 12px; border-radius: 999px; }
.plan h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.price { font: 600 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.price small { font: 400 15px var(--ui); color: var(--mute); }
.points { color: var(--brand); font-weight: 600; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.plan li::before { content: "✓"; color: var(--brand); margin-inline-end: 8px; }
.plan .btn { margin-top: auto; }
.note { color: var(--mute); font-size: 14px; margin: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.panel { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--pane); min-width: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: start; font-size: 13px; font-weight: 500; color: var(--mute); padding: 8px 0; border-bottom: 1px solid var(--line); }
td { padding: 12px 0; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.panel table td:last-child, .panel table th:last-child { text-align: end; }
details { border-bottom: 1px solid var(--line); padding-block: 14px; }
details:last-child { border-bottom: 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; color: var(--mute); }

/* Sign-in pages */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--app); }
.auth-story { flex: 1 1 420px; position: relative; overflow: hidden; background: var(--app); border-inline-end: 1px solid var(--line); padding: clamp(24px, 5vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-story::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--glow-1) 35%, transparent), transparent 70%), radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--glow-3) 14%, transparent), transparent 70%), radial-gradient(40% 40% at 60% 30%, color-mix(in srgb, var(--glow-2) 10%, transparent), transparent 75%); }
.auth-story > * { position: relative; }
.auth-story h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; font-weight: 600; max-width: 16ch; }
.auth-story p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--ink-2); max-width: 42ch; }
.auth-story .small { color: var(--mute); }
/* Athar waves from the foot of the story panel, below the words (never over them): at most 380px tall, so the 840px picture stays sharp on dense screens. The credit line sits in the opposite corner. */
.auth-story > .small { position: absolute; inset-block-end: clamp(24px, 5vw, 56px); inset-inline-start: clamp(24px, 5vw, 56px); margin: 0; }
.auth-story .athar-story { align-self: flex-end; margin-block-end: calc(-1 * clamp(24px, 5vw, 56px)); margin-inline-end: clamp(0px, 3vw, 32px); height: min(380px, 40vh); width: auto; filter: drop-shadow(0 24px 36px color-mix(in srgb, var(--glow-1) 35%, transparent)); animation: mk-bob 3s ease-in-out infinite; pointer-events: none; }
@keyframes mk-bob { 50% { transform: translateY(-6px); } }
.auth-panel { flex: 1 1 420px; display: flex; flex-direction: column; padding: clamp(16px, 4vw, 40px); gap: 24px; background: var(--pane); }
.auth-tools { display: flex; justify-content: flex-end; gap: 12px; font-size: 14px; color: var(--mute); }
.auth-tools form { margin: 0; }
.auth-tools button { background: none; border: 0; font: inherit; color: var(--mute); cursor: pointer; padding: 4px 6px; min-height: 32px; }
.auth-tools button:hover { color: var(--ink); }
.auth-tools button.is-active { color: var(--ink); font-weight: 600; }
.auth-card { width: min(100%, 440px); margin: auto; display: grid; gap: 18px; }
.auth-card h2 { font-size: 28px; line-height: 1.3; font-weight: 600; }
.auth-card .intro { margin: 0; color: var(--mute); }
.auth-form { display: grid; gap: 16px; }
.field-group { display: grid; gap: 8px; }
.field-group label { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.field-shell { display: flex; align-items: center; gap: 8px; min-height: 50px; padding-inline: 14px; border: 1px solid var(--control); border-radius: 14px; background: var(--raise); transition: border-color .15s ease, box-shadow .15s ease; }
.field-shell:hover { border-color: var(--mute); }
.field-shell:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.field-shell:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.field-shell input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 400 16px/24px var(--ui); min-height: 46px; }
.field-shell input::placeholder { color: var(--faint); }
/* Browsers paint fields they fill in themselves; keep them on the theme. */
.field-shell input:-webkit-autofill, .field-shell input:-webkit-autofill:hover, .field-shell input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 1000px var(--raise) inset; transition: background-color 9999s ease-out; }
.field-shell input:disabled { cursor: not-allowed; color: var(--mute); }
.field-icon { color: var(--mute); font-size: 15px; }
.field-hint { color: var(--mute); font-size: 13px; }
.password-toggle { background: none; border: 0; color: var(--mute); cursor: pointer; min-width: 44px; min-height: 44px; font: 500 13px var(--ui); border-radius: 10px; }
.password-toggle:hover { color: var(--ink); }
.auth-submit { min-height: 52px; border: 0; border-radius: 14px; background: var(--brand); color: var(--on-brand); font: 600 16px/22px var(--ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease; }
.auth-submit:hover { background: var(--brand-hover); }
.auth-submit[disabled] { opacity: .7; cursor: progress; }
.auth-alt { margin: 0; font-size: 14px; color: var(--mute); }
.auth-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.auth-status, .auth-error { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; }
.auth-status p, .auth-error p { margin: 0; }
.auth-status { background: var(--success-soft); color: var(--success); }
.auth-error { background: var(--danger-soft); color: var(--danger); }
.auth-security { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.auth-security::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--success); }
.auth-honeypot { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.google-sign-in { display: grid; gap: 8px; justify-items: start; }
.google-error { color: var(--danger); margin: 0; }

@keyframes mk-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    /* On phones the story is a short header: words beside a smaller Athar. */
    .auth-story { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; padding: 18px 16px 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .auth-story > .brand, .auth-story > div { grid-column: 1; }
    .auth-story > div { padding-bottom: 18px; gap: 8px !important; }
    .auth-story h1 { font-size: 24px; }
    .auth-story p { font-size: 14px; line-height: 1.6; }
    .auth-story .small { display: none; }
    .auth-story .athar-story { grid-column: 2; grid-row: 1 / span 2; height: 150px; align-self: end; margin: 0 0 -2px; }
    .site-header { position: static; }
    .site-nav { order: 3; width: 100%; }
    .hero-visual { min-height: 500px; }
    .brand img { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}