/* File To Inbox — public landing page styles.
   Self-contained design system (tokens + Bootstrap 5 bridge + page components),
   vendored from the Claude Design "File To Inbox" project. Loaded ONLY by the
   home page (templates/shopify_fti/static/index.html.twig), alongside Bootstrap
   5.3 + Bootstrap Icons. Keep this off the rest of the site, which uses css/app.css. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================= Tokens */
:root{
    /* Violet (primary brand) */
    --violet-50:#F5F2FE;
    --violet-100:#EBE4FD;
    --violet-200:#D8CBFB;
    --violet-300:#BCA6F5;
    --violet-400:#9C7BEE;
    --violet-500:#7E54E4;
    --violet-600:#6A3FD4;
    --violet-700:#5832B2;
    --violet-800:#472A8E;
    --violet-900:#392372;
    --violet-950:#241349;

    /* Neutrals (warm, faintly violet-tinted slate) */
    --neutral-0:#FFFFFF;
    --neutral-50:#F8F8FB;
    --neutral-100:#F1F1F6;
    --neutral-200:#E5E4ED;
    --neutral-300:#D0CFDC;
    --neutral-400:#A3A2B6;
    --neutral-500:#72718A;
    --neutral-600:#545369;
    --neutral-700:#3E3D52;
    --neutral-800:#2A2939;
    --neutral-900:#1A1925;
    --neutral-950:#0F0E17;

    /* Semantic hues */
    --green-50:#ECFBF3;
    --green-500:#1FA46A;
    --green-600:#168A58;
    --amber-50:#FEF6E7;
    --amber-500:#C98A12;
    --red-50:#FDEEEE;
    --red-500:#D7453B;
    --red-600:#BB342C;
    --blue-50:#EBF3FE;
    --blue-500:#2E73D6;

    /* Semantic aliases */
    --brand:var(--violet-600);
    --brand-hover:var(--violet-700);
    --brand-active:var(--violet-800);
    --brand-gradient:linear-gradient(135deg, #7A4FE0 0%, #5832B2 55%, #3C2575 100%);
    --brand-gradient-soft:linear-gradient(135deg, var(--violet-50) 0%, var(--violet-100) 100%);
    --brand-subtle:var(--violet-50);
    --brand-subtle-200:var(--violet-100);
    --brand-contrast:var(--neutral-0);

    --text-strong:var(--neutral-900);
    --text-body:var(--neutral-700);
    --text-muted:var(--neutral-500);
    --text-faint:var(--neutral-400);
    --text-on-brand:var(--neutral-0);
    --text-link:var(--violet-600);

    --surface-page:var(--neutral-50);
    --surface-card:var(--neutral-0);
    --surface-sunken:var(--neutral-100);
    --surface-inverse:var(--neutral-950);
    --surface-tint:var(--violet-50);

    --border-subtle:var(--neutral-200);
    --border-default:var(--neutral-300);
    --border-strong:var(--neutral-400);
    --border-brand:var(--violet-300);

    --success:var(--green-600);
    --success-surface:var(--green-50);
    --warning:var(--amber-500);
    --warning-surface:var(--amber-50);
    --danger:var(--red-600);
    --danger-surface:var(--red-50);
    --info:var(--blue-500);
    --info-surface:var(--blue-50);

    --focus-ring:var(--violet-400);

    /* Typography */
    --font-sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Radii */
    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-full:999px;

    /* Shadows — soft, low-contrast, faint violet cast */
    --shadow-xs:0 1px 2px rgba(36, 19, 73, 0.06);
    --shadow-sm:0 1px 3px rgba(36, 19, 73, 0.08), 0 1px 2px rgba(36, 19, 73, 0.04);
    --shadow-md:0 4px 12px rgba(36, 19, 73, 0.08), 0 2px 4px rgba(36, 19, 73, 0.04);
    --shadow-lg:0 12px 32px rgba(36, 19, 73, 0.12), 0 4px 8px rgba(36, 19, 73, 0.05);
    --shadow-brand:0 8px 24px rgba(106, 63, 212, 0.28);

    /* Motion */
    --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

    /* Layout */
    --container-max:1120px;
    --section-gap:6rem;
}

/* ===================================================== Bootstrap bridge */
:root{
    --bs-primary:#6A3FD4;
    --bs-primary-rgb:106, 63, 212;
    --bs-link-color:var(--violet-600);
    --bs-link-color-rgb:106, 63, 212;
    --bs-link-hover-color:var(--violet-700);

    --bs-body-color:#3E3D52;
    --bs-body-color-rgb:62, 61, 82;
    --bs-body-bg:#FFFFFF;
    --bs-emphasis-color:#1A1925;
    --bs-heading-color:#1A1925;
    --bs-secondary-color:#72718A;
    --bs-tertiary-color:#A3A2B6;
    --bs-border-color:#E5E4ED;
    --bs-secondary-bg:#F1F1F6;

    --bs-body-font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --bs-font-monospace:'JetBrains Mono', ui-monospace, monospace;
    --bs-body-font-size:1rem;
    --bs-body-font-weight:400;
    --bs-body-line-height:1.65;

    --bs-border-radius:12px;
    --bs-border-radius-sm:8px;
    --bs-border-radius-lg:16px;
    --bs-border-radius-xl:24px;
    --bs-border-radius-xxl:24px;
    --bs-border-radius-pill:999px;
}

h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6{
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.12;
    color:var(--bs-heading-color);
    text-wrap:balance;
}
h4, h5, h6, .h4, .h5, .h6{ font-weight:700; letter-spacing:-0.01em; }
p{ text-wrap:pretty; }

.btn{
    --bs-btn-font-weight:600;
    --bs-btn-font-family:var(--bs-body-font-family);
    --bs-btn-border-radius:12px;
    letter-spacing:-0.01em;
    transition:transform .12s cubic-bezier(.22, 1, .36, 1), filter .2s, background-color .2s, color .2s, box-shadow .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.5rem; --bs-btn-font-size:1.0625rem; --bs-btn-border-radius:12px; }

.btn-primary{
    --bs-btn-bg:var(--violet-600); --bs-btn-border-color:var(--violet-600);
    --bs-btn-hover-bg:var(--violet-700); --bs-btn-hover-border-color:var(--violet-700);
    --bs-btn-active-bg:var(--violet-800); --bs-btn-active-border-color:var(--violet-800);
    --bs-btn-disabled-bg:var(--violet-600); --bs-btn-disabled-border-color:var(--violet-600);
    --bs-btn-color:#FFFFFF; --bs-btn-hover-color:#FFFFFF; --bs-btn-active-color:#FFFFFF;
    box-shadow:var(--shadow-brand);
}
.btn-primary:hover{ box-shadow:0 10px 28px rgba(106, 63, 212, .34); }

.btn-outline-primary{
    --bs-btn-color:var(--violet-700); --bs-btn-border-color:var(--border-default);
    --bs-btn-bg:#FFFFFF;
    --bs-btn-hover-bg:var(--violet-50); --bs-btn-hover-border-color:var(--violet-300);
    --bs-btn-hover-color:var(--violet-700);
    --bs-btn-active-bg:var(--violet-100); --bs-btn-active-border-color:var(--violet-300);
    --bs-btn-active-color:var(--violet-800);
    box-shadow:var(--shadow-xs);
}
.btn-light{ --bs-btn-bg:#FFFFFF; --bs-btn-border-color:var(--border-default); --bs-btn-hover-bg:var(--neutral-50); }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus{
    border-color:var(--violet-400);
    box-shadow:0 0 0 .25rem rgba(106, 63, 212, .20);
    outline:0;
}
.btn-primary:focus-visible{ box-shadow:var(--shadow-brand), 0 0 0 .25rem rgba(106, 63, 212, .30); }

.form-control, .form-select{ --bs-border-radius:8px; border-color:var(--border-default); padding:.625rem .875rem; }
.form-label{ font-weight:500; color:var(--bs-body-color); margin-bottom:.375rem; }

.card{
    --bs-card-border-color:var(--border-subtle);
    --bs-card-border-radius:16px;
    --bs-card-inner-border-radius:15px;
    --bs-card-bg:#FFFFFF;
    box-shadow:var(--shadow-xs);
}
.card.card-elevated{ border-color:var(--border-subtle); box-shadow:var(--shadow-md); }
.card.card-tinted{ background:var(--surface-tint); border-color:var(--violet-100); box-shadow:none; }

.badge{ font-weight:600; letter-spacing:-0.01em; padding:.35em .7em; border-radius:999px; }
.badge.badge-brand{ background:var(--violet-50); color:var(--violet-700); }

/* Brand utilities */
.text-brand{ color:var(--brand) !important; }
.bg-brand{ background:var(--brand) !important; color:#FFFFFF; }
.bg-brand-gradient{ background:var(--brand-gradient) !important; color:#FFFFFF; }
.bg-tint{ background:var(--surface-tint) !important; }
.bg-page{ background:var(--surface-page) !important; }
.bg-ink{ background:var(--surface-inverse) !important; color:#FFFFFF; }
.shadow-brand{ box-shadow:var(--shadow-brand) !important; }
.shadow-soft{ box-shadow:var(--shadow-md) !important; }
.shadow-soft-lg{ box-shadow:var(--shadow-lg) !important; }
.rounded-xl{ border-radius:var(--radius-xl) !important; }

.eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--brand);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; opacity:.5; }
.eyebrow.eyebrow-on-dark{ color:var(--violet-300); }

.icon-tile{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:12px;
    background:var(--violet-50); color:var(--brand); font-size:22px; flex:none;
}
.icon-tile-solid{ background:var(--brand); color:#FFFFFF; }
.icon-tile-lg{ width:56px; height:56px; font-size:26px; }

.section{ padding:var(--section-gap) 0; }

/* Brand lockup (HTML logo) */
.fti-logo{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.fti-logo .fti-word{ font-weight:800; letter-spacing:-0.02em; color:var(--text-strong); line-height:1; }
.fti-logo .fti-word .accent{ color:var(--brand); }
.fti-logo.on-dark .fti-word{ color:#FFFFFF; }
.fti-logo.on-dark .fti-word .accent{ color:var(--violet-300); }

/* ================================================= Landing page chrome */
body{ background:var(--surface-page); }
html{ scroll-behavior:smooth; }

.navbar-blur{ background:rgba(255, 255, 255, .82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }
.nav-link{ color:var(--text-body); font-weight:500; }
.nav-link:hover{ color:var(--brand); }

.hero{ position:relative; overflow:hidden; }
.hero-glow{ position:absolute; inset:0; pointer-events:none; }
.hero-glow::before{ content:""; position:absolute; top:-180px; right:-160px; width:620px; height:620px;
    background:radial-gradient(closest-side, rgba(122, 79, 224, .22), rgba(122, 79, 224, 0)); }
.hero-glow::after{ content:""; position:absolute; bottom:-220px; left:-180px; width:560px; height:560px;
    background:radial-gradient(closest-side, rgba(106, 63, 212, .12), rgba(106, 63, 212, 0)); }
.hero h1{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); }

.mock{ background:#FFFFFF; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mock-bar{ display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.mock-dot{ width:10px;height:10px;border-radius:50%;background:#E5E4ED; }
.mock-url{ margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.dropzone{ border:2px dashed var(--border-brand); border-radius:var(--radius-md); background:var(--surface-tint); padding:22px 16px; text-align:center; }
.file-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); }
.file-ic{ width:30px;height:30px;border-radius:var(--radius-xs);background:var(--violet-50);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none; }
.file-name{ font-family:var(--font-mono); font-size:13px; color:var(--text-strong); }
.file-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.dropbox-chip{ position:absolute; right:-14px; bottom:-18px; display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:#FFFFFF; border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }

.step-num{ position:absolute; top:18px; right:22px; font-weight:800; font-size:2.25rem; color:var(--violet-100); line-height:1; }
.trust-strip{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:#FFFFFF; }
.footer-link{ color:var(--violet-200); text-decoration:none; font-size:.9rem; }
.footer-link:hover{ color:#FFFFFF; }

.whatsnew-card{ background:#FFFFFF; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.whatsnew-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.badge-new{ background:var(--violet-600); color:#FFFFFF; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:999px; }

.dest-card{ position:relative; background:#FFFFFF; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); padding:20px; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out); }
.dest-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-brand); }
.dest-card .badge-new{ position:absolute; top:14px; right:14px; }
.dest-ic{ width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none; }

@media (max-width:991px){
    .dropbox-chip{ right:8px; }
}