/* ============================================================
   PicomCloud landing — AdminConsole-styled rewrite
   SR 20260516 - Visual match for the PICOM365 AdminConsole login
   landing page. Pure black canvas, small top-left brand logo,
   TERMS/PRIVACY top-right, huge two-tone PICOMCLOUD wordmark,
   left-aligned login card with cream inputs, deep crimson CTA,
   centered footer line.

   All rules scoped under #admin-landing so the master page's
   cleanTheme.css/grid.css don't bleed in. Loaded LAST so it wins.
   ============================================================ */

/* Hide the master page's navbar, master-page footer, and the two
   hidden marketing divs (.first / .last) so nothing from the legacy
   MasterPage.master bleeds onto our dark canvas. Also force a black
   body bg in case cleanTheme.css tries to color it. */
body#cleanTheme { background: #000000 !important; color: #ffffff; }
body#cleanTheme > nav.navbar { display: none !important; }
body#cleanTheme > footer.paper-shadow-invert,
body#cleanTheme > footer { display: none !important; }
body#cleanTheme > div.first,
body#cleanTheme > div.last { display: none !important; }

/* SR 20260516 - MasterPage.master ends with an antiforgery <input type="text">
   that is intended to be invisible plumbing but actually renders -- the legacy
   cleanTheme.css rule `input[type='text'] { width: 40%; height: 2.5em; ... }`
   styles it as a visible rectangle in the page's bottom-left. Hide it. */
body#cleanTheme > input#antiforgery,
body#cleanTheme > input[name="antiforgery"] { display: none !important; }

/* SR 20260516 - The legacy cleanTheme.css has a global
   `footer { background-color: #efefef; margin-top: -2em; }` rule that
   bleeds into OUR #admin-landing .site-footer and makes it render as a
   light-gray rectangle below the dark canvas. Reset the footer fully
   here so it stays black and flush with the rest of the page. */
#admin-landing .site-footer {
    background-color: transparent !important;
    margin-top: 0 !important;
    padding: 28px 24px 40px !important;
}

#admin-landing,
#admin-landing * { box-sizing: border-box; }

#admin-landing {
    background: #000000;
    color: #ffffff;
    min-height: 100vh;
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    /* Subtle diagonal vignette mirroring the AdminConsole page */
    background-image:
        radial-gradient(ellipse 900px 600px at 80% 50%, rgba(255, 255, 255, 0.025), transparent 60%),
        linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

#admin-landing a { color: inherit; text-decoration: none; }
#admin-landing a:hover { color: #E2002A; }

/* ---------- Top bar ---------- */
#admin-landing .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 56px;
}

#admin-landing .brand-mark img {
    height: 34px;
    width: auto;
    display: block;
}

#admin-landing .top-links {
    display: flex;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}
#admin-landing .top-links a { color: rgba(255, 255, 255, 0.85); }
#admin-landing .top-links a:hover { color: #ffffff; }

/* ---------- Hero region ---------- */
#admin-landing .hero {
    flex: 1;
    padding: 70px 56px 40px;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}

#admin-landing .hero-title {
    /* SR 20260516 - Toned down from clamp(48px, 8vw, 104px). Was reading
       oversized on wide monitors (the 104px cap kicked in around ~1300px
       viewport width). */
    font-size: clamp(40px, 6vw, 78px);
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 28px 0;
    color: #ffffff;
}
#admin-landing .hero-title .accent { color: #E2002A; font-weight: 300; }

#admin-landing .hero-subtitle {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    max-width: 460px;
    margin: 0 0 48px 0;
    font-weight: 300;
}
#admin-landing .hero-subtitle a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}
#admin-landing .hero-subtitle a:hover {
    color: #E2002A;
    text-decoration-color: #E2002A;
}

/* ---------- Login card ---------- */
#admin-landing .login-card {
    background: #1c1c1c;
    border-radius: 4px;
    padding: 36px 36px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
#admin-landing .login-card.init { opacity: 0; }

#admin-landing .card-title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.32em;
    /* Same letter-spacing compensation as .btn-login. */
    text-indent: 0.32em;
    color: #ffffff;
    margin: 0 0 28px 0;
    text-transform: uppercase;
    text-align: center;
}

#admin-landing .card-input {
    display: block;
    width: 100%;
    background: #e8e6e0;
    border: 1px solid transparent;
    color: #1a1a1a;
    padding: 13px 16px;
    border-radius: 3px;
    font-size: 15px;
    margin-bottom: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
#admin-landing .card-input::placeholder { color: #6a6a6a; }
#admin-landing .card-input:focus {
    outline: none;
    border-color: #E2002A;
    background: #ffffff;
}

#admin-landing .card-help {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 6px 0 22px 0;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
#admin-landing .card-help a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 2px;
}
#admin-landing .card-help a:hover { color: #E2002A; text-decoration-color: #E2002A; }
#admin-landing .card-help .sep { color: rgba(255, 255, 255, 0.3); }

#admin-landing .btn-login {
    /* SR 20260516 - !important is needed here because the legacy
       cleanTheme.css has `button, .btn { width: 90%; margin: 2% auto; }`
       which can win over our scoped rule depending on cascade order, and
       leaves the red button rendering ~10% narrower than the inputs
       above it (the "clipped" look). Forcing 100% + zero horizontal margin
       guarantees the red background fills the same width as the inputs. */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    background: #DC0A29 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 24px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.32em !important;
    /* Letter-spacing applies AFTER the last character too, which leaves
       invisible trailing space and shifts centered text to the left.
       text-indent matching the letter-spacing re-centers it visually. */
    text-indent: 0.32em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    font-family: inherit;
    text-align: center !important;
    box-sizing: border-box !important;
}
#admin-landing .btn-login:hover { background: #ff1a40; }
#admin-landing .btn-login:active { transform: translateY(1px); }

#admin-landing .card-error { min-height: 22px; margin-top: 14px; }
#admin-landing .card-error .Err {
    color: #ff5e7d;
    font-size: 12.5px;
    padding: 8px 12px;
    background: rgba(226, 0, 42, 0.08);
    border: 1px solid rgba(226, 0, 42, 0.2);
    border-radius: 3px;
}
#admin-landing .card-error .noErr {
    color: #9bd0a3;
    font-size: 12.5px;
    padding: 8px 12px;
    background: rgba(110, 211, 132, 0.05);
    border: 1px solid rgba(110, 211, 132, 0.2);
    border-radius: 3px;
}

#admin-landing .card-disclaimer {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.4);
    margin: 22px 0 0 0;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#admin-landing .card-disclaimer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 2px;
}

/* ---------- "About PicomCloud" scroll cue ----------
   Persistent cue at the bottom of the hero. Two stacked chevrons in the
   brand red bounce with a staggered animation. */
#admin-landing .hero { position: relative; padding-bottom: 120px; }

#admin-landing .scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    z-index: 4;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 6px 14px;
}
#admin-landing .scroll-hint:hover,
#admin-landing .scroll-hint:focus {
    color: #ffffff;
    outline: none;
    transform: translateX(-50%) translateY(2px);
}
#admin-landing .scroll-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding-left: 0.22em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
#admin-landing .scroll-chevrons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 34px;
}
#admin-landing .scroll-chevrons .chev {
    display: block;
    width: 16px;
    height: 16px;
    border-right: 3px solid #E2002A;
    border-bottom: 3px solid #E2002A;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 4px rgba(226, 0, 42, 0.55));
    animation: admin-scroll-chev-bounce 1.6s ease-in-out infinite;
    opacity: 0;
}
#admin-landing .scroll-chevrons .chev:nth-child(1) { animation-delay: 0s; }
#admin-landing .scroll-chevrons .chev:nth-child(2) { animation-delay: 0.25s; }
@keyframes admin-scroll-chev-bounce {
    0%   { opacity: 0; transform: rotate(45deg) translate(-4px, -4px); }
    40%  { opacity: 1; transform: rotate(45deg) translate(0, 0); }
    80%  { opacity: 1; transform: rotate(45deg) translate(4px, 4px); }
    100% { opacity: 0; transform: rotate(45deg) translate(6px, 6px); }
}
@media (max-height: 600px) {
    #admin-landing .scroll-hint { display: none; }
}

/* ---------- Below-hero content sections (dark theme) ---------- */
#admin-landing .content-section {
    padding: 96px 32px;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
#admin-landing .content-section.alt { background: #0e0e0e; }

#admin-landing .content-container {
    max-width: 1180px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.85);
}

#admin-landing .section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 200;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 36px 0;
}

#admin-landing .lead {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 16px 0;
    max-width: 820px;
}
#admin-landing .lead a {
    color: #E2002A;
    text-decoration: underline;
    text-decoration-color: rgba(226, 0, 42, 0.45);
    text-underline-offset: 3px;
}
#admin-landing .lead a:hover { text-decoration-color: #E2002A; }
#admin-landing .lead strong { color: #ffffff; font-weight: 500; }
#admin-landing .accent-red { color: #E2002A; font-weight: 500; }

#admin-landing .trailing {
    margin-top: 36px;
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}
#admin-landing .trailing a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(226, 0, 42, 0.35);
    text-underline-offset: 2px;
}
#admin-landing .trailing a:hover { color: #E2002A; }

/* Cards grids */
#admin-landing .cards-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 16px 0 0 0;
}
#admin-landing .cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#admin-landing .steps-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Ideal-for card */
#admin-landing .ideal-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 22px 22px 20px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
#admin-landing .ideal-card:hover {
    border-color: rgba(226, 0, 42, 0.35);
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-2px);
}
#admin-landing .ideal-card .check {
    display: inline-flex;
    width: 32px; height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(226, 0, 42, 0.22), rgba(226, 0, 42, 0.05));
    border: 1px solid rgba(226, 0, 42, 0.35);
    color: #E2002A;
    font-size: 15px;
    margin-bottom: 14px;
}
#admin-landing .ideal-card p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.55;
}

/* How-it-works step card */
#admin-landing .step-card {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 28px 26px;
}
#admin-landing .step-card .step-num {
    position: absolute;
    top: 22px; right: 22px;
    font-size: 36px;
    font-weight: 200;
    color: rgba(226, 0, 42, 0.45);
    letter-spacing: -0.04em;
    line-height: 1;
}
#admin-landing .step-card h3 {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 12px 0;
    padding-right: 56px;
}
#admin-landing .step-card p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 10px 0;
    line-height: 1.55;
}
#admin-landing .step-card a { color: #E2002A; }

#admin-landing .cancel-strip {
    margin-top: 56px;
    text-align: center;
}
#admin-landing .cancel-strip h3 {
    color: #ffffff;
    font-weight: 200;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin: 0;
}

/* Price card */
#admin-landing .price-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 32px 28px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
#admin-landing .price-card.featured {
    border-color: rgba(226, 0, 42, 0.5);
    background: linear-gradient(180deg, rgba(226, 0, 42, 0.08), rgba(226, 0, 42, 0.02));
}
#admin-landing .price-card:hover { transform: translateY(-3px); border-color: rgba(226, 0, 42, 0.45); }
#admin-landing .price-card h3 {
    font-size: 22px;
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}
#admin-landing .price-card p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}
#admin-landing .price-card em {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-style: italic;
}

/* CTA section + button */
#admin-landing .cta-section { padding: 80px 32px; }
#admin-landing .big-cta {
    display: inline-block;
    background: #DC0A29;
    color: #ffffff;
    padding: 14px 36px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: background 0.15s ease, transform 0.12s ease;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(226, 0, 42, 0.3);
}
#admin-landing .big-cta:hover { background: #ff1a40; color: #ffffff; transform: translateY(-1px); }
#admin-landing .big-cta.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
}
#admin-landing .big-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}
#admin-landing .learn-more-buttons {
    margin-top: 36px;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Footer ---------- */
#admin-landing .site-footer {
    text-align: center;
    padding: 28px 24px 40px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    letter-spacing: 0.02em;
}
#admin-landing .site-footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 2px;
    margin-left: 18px;
}
#admin-landing .site-footer a:hover { color: #E2002A; text-decoration-color: #E2002A; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    #admin-landing .cards-4 { grid-template-columns: repeat(2, 1fr); }
    #admin-landing .cards-3 { grid-template-columns: 1fr; }
    #admin-landing .steps-3 { grid-template-columns: 1fr; }
    #admin-landing .content-section { padding: 64px 24px; }
}
@media (max-width: 720px) {
    #admin-landing .topbar { padding: 22px 24px; }
    #admin-landing .hero { padding: 40px 24px 100px; }
    #admin-landing .top-links { gap: 22px; font-size: 11.5px; letter-spacing: 0.22em; }
    #admin-landing .hero-subtitle { font-size: 15px; }
    #admin-landing .login-card { padding: 28px 24px 24px; }
    #admin-landing .cards-4 { grid-template-columns: 1fr; }
    #admin-landing .scroll-label { font-size: 11px; }
}