/* ===========================================================================
   snippedit.com - the logged-out marketing page.
   ===========================================================================

   Replaces the Finity theme (bootstrap.css + main.css), which was a bought
   template from 2020 still carrying most of its vendor demo content. Those two
   files are no longer loaded by anything.

   The page itself is index_guest.php. It came out of a Claude Design canvas,
   where the layout was expressed as inline styles on every element. Those are
   kept verbatim, so the page on screen matches the approved design value for
   value. What could NOT survive the canvas format lives here:

     - hover states. The canvas wrote them as a style-hover="" attribute, which
       is not a real thing in a browser.
     - the responsive rules. The canvas has no breakpoints at all; every grid
       is a fixed column count. Because the layout is inline, the overrides have
       to be !important to reach it.
     - the reveal-on-scroll animation, inverted so the page is not blank
       without JavaScript. See .sn-js below.
     - the two color themes, which the canvas drove from its own runtime.
   =========================================================================== */

:root {
    --bg:          #FAF7F0;
    --bg2:         #F1EADD;
    --paper:       #FFFFFF;
    --ink:         #1C1C20;
    --ink2:        #5C564F;
    --line:        rgba(28, 28, 32, .14);
    --line2:       rgba(28, 28, 32, .07);
    --accent:      #A8552A;
    --accent-deep: #8A421F;
    /*  The design lightened the eyebrow with filter:brightness(1.6) on
        --accent-deep. A token says what is meant and does not also brighten
        anything else that happens to be in the element. */
    --accent-lift: #DD7B45;
    --accent-tint: #F3E3D6;
    --olive:       #6E7F4C;
    --hero:        #221F1C;
    --hero-ink:    #F6F1E7;
    --hero-ink2:   #A9A199;
    --sec:         112px;
}

html[data-sn="dark"] {
    --bg:          #1A1816;
    --bg2:         #221F1C;
    --paper:       #242120;
    --ink:         #F4EFE5;
    --ink2:        #A8A099;
    --line:        rgba(244, 239, 229, .16);
    --line2:       rgba(244, 239, 229, .08);
    --accent:      #D07A45;
    --accent-deep: #E08F5B;
    --accent-lift: #E8A06E;
    --accent-tint: #33261D;
    --olive:       #93A46C;
    --hero:        #141312;
    --hero-ink:    #F6F1E7;
    --hero-ink2:   #A9A199;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Archivo, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background .35s ease, color .35s ease;
    text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

::selection { background: var(--accent-tint); color: var(--ink); }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
summary::-webkit-details-marker { display: none; }

/*  Scoped to the closing banner, the only dark-ground form on the page. As a
    bare input::placeholder it painted white on white anywhere else. */
.sn-cta-form input::placeholder { color: rgba(255, 255, 255, .75); opacity: 1; }


/* ---------------------------------------------------------------------------
   Hover states.

   Each of these was a style-hover="" attribute in the canvas file. The values
   are copied across unchanged; only the mechanism is different.
   --------------------------------------------------------------------------- */

.sn-nav-a { color: var(--hero-ink2); }
.sn-nav-a:hover { color: var(--hero-ink); }

.sn-theme-btn:hover { border-color: rgba(246, 241, 231, .5); }

.sn-btn-accent:hover { background: var(--accent-deep); color: #fff; }

.sn-btn-ghost-dark:hover { border-color: var(--hero-ink); color: var(--hero-ink); }

.sn-btn-ghost-light:hover { border-color: var(--ink); color: var(--ink); }

.sn-btn-outline-ink:hover { background: var(--ink); color: var(--bg); }

.sn-btn-white:hover { background: #1C1C20; color: #fff; }

/*  The footer sits on --hero in BOTH themes, but --accent-deep flips with the
    page. In light mode that hovered a #8A421F link on a near-black ground and
    it was unreadable. --accent-lift is legible on the dark footer either way. */
.sn-foot-a { color: var(--hero-ink); }
.sn-foot-a:hover { color: var(--accent-lift); }


/* ---------------------------------------------------------------------------
   The mobile menu button and the two account links inside the panel.

   All three are part of the small-screen header only. Declared off here rather
   than inside the breakpoint so that the default - on a desktop - is the state
   they spend most of their life in, and the media query only has to turn them
   on.
   --------------------------------------------------------------------------- */

.sn-menu-btn { display: none; }
.sn-menu-btn:hover { border-color: rgba(246, 241, 231, .5); }
.sn-nav-auth,
.sn-nav-cta { display: none; }

/*  One button, two glyphs: the bars while the panel is shut, the cross while it
    is open. Swapping the icon is what tells you the button will close it. */
.sn-menu-btn .sn-ico-close { display: none; }
.sn-head-open .sn-menu-btn .sn-ico-open { display: none; }
.sn-head-open .sn-menu-btn .sn-ico-close { display: block; }

/* ---------------------------------------------------------------------------
   Reveal on scroll.

   The canvas put opacity:0 in the markup and let its runtime clear it. On a
   real page that means anyone whose JavaScript fails, is blocked, or has not
   parsed yet sees nothing at all. So the hidden state is applied BY script
   (.sn-js on <html>) and the stylesheet leaves everything visible.
   --------------------------------------------------------------------------- */

[data-reveal] { opacity: 1; transform: none; }

.sn-js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

.sn-js [data-reveal].sn-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sn-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ---------------------------------------------------------------------------
   Responsive.

   The design has no breakpoints. Left alone, the four-up feature row is four
   70px columns on a phone and the three pricing cards are unreadable slivers.
   Every rule here is !important because the layout it overrides is inline.
   --------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .sn-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sn-grid-4 > * { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    .sn-grid-4 > *:nth-child(odd)  { padding-right: 28px !important; border-right: 1px solid var(--line) !important; }
    .sn-grid-4 > *:nth-child(even) { padding-left: 28px !important; }
}

@media (max-width: 900px) {
    :root { --sec: 76px; }
    .sn-split,
    .sn-grid-3,
    .sn-price-grid,
    .sn-foot-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
    /*  On one column the picture belongs above the words it illustrates. */
    .sn-split-media { order: -1; }
    .sn-heading-split { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
    .sn-faq { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
}

/*  The header collapses to a hamburger well before the rest of the layout does.
    Five nav items plus Log in and a signup button stop fitting beside the
    wordmark long before the content grids need to reflow, so this breakpoint is
    the header's own and is deliberately not shared with the 720px one below. */
@media (max-width: 849px) {
    /*  The bar keeps the logo, the theme toggle and the hamburger. Log in and
        the signup button move into the panel - there is no room for a 130px
        button beside a hamburger once the nav has already been given up on. */
    .sn-login { display: none !important; }
    .sn-head-cta { display: none !important; }
    .sn-menu-btn { display: grid !important; }

    /*  Same <nav>, re-laid out as a panel under the bar. The header is
        position:sticky, which is a positioned element, so it is the containing
        block for this and left/right 0 span the full bar.

        The side padding tracks .sn-pad on purpose, so the panel's items line up
        with the page content underneath rather than sitting proud of it. It is
        32px here and 20px in the 720px block below. */
    .sn-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 4px 32px 20px !important;
        background: var(--hero);
        border-bottom: 1px solid rgba(246, 241, 231, .12);
        box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6);
    }
    .sn-head-open .sn-nav { display: flex !important; }

    .sn-nav > a { padding: 15px 0; border-bottom: 1px solid rgba(246, 241, 231, .10); }
    .sn-nav > a:last-child { border-bottom: 0; }

    .sn-nav-auth { display: block !important; }
    .sn-nav-cta {
        display: block !important;
        text-align: center;
        margin-top: 16px;
        border-bottom: 0 !important;
    }
}

@media (max-width: 720px) {
    .sn-head-inner { height: 64px !important; gap: 14px !important; padding: 0 20px !important; }
    .sn-pad { padding-left: 20px !important; padding-right: 20px !important; }
    /*  Follows .sn-pad, so the panel stays aligned with the content below it. */
    .sn-nav { padding-left: 20px !important; padding-right: 20px !important; }
    .sn-hero-top { padding-top: 76px !important; }
    /*
     *  The two nth-child selectors have to be repeated here, not just
     *  .sn-grid-4 > *.
     *
     *  The 1080px block above sets padding and a right border per column using
     *  :nth-child(odd) / :nth-child(even), and that is a MORE SPECIFIC selector
     *  than a bare .sn-grid-4 > *. Between two !important declarations
     *  specificity decides before source order, so those rules survived down
     *  here and the single-column list came out ragged: cards 1 and 3 flush
     *  left, cards 2 and 4 indented 28px, and a column divider still drawn down
     *  the right of a layout that no longer has columns.
     *
     *  Matching their specificity is what lets source order settle it.
     */
    .sn-grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
    .sn-grid-4 > *,
    .sn-grid-4 > *:nth-child(odd),
    .sn-grid-4 > *:nth-child(even) {
        padding: 32px 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }
    /*  The section already draws a rule under the whole group. */
    .sn-grid-4 > *:last-child { border-bottom: 0 !important; }
    .sn-hero-actions { gap: 12px !important; }
    .sn-hero-actions > a { width: 100%; text-align: center; }
    .sn-split-media { padding: 24px !important; }
    .sn-cta-form { width: 100%; }
}

/*  Wide content must scroll inside itself rather than pushing the page
    sideways. The command block is the only thing here that can overflow. */
.sn-code { overflow-x: auto; }

/*  The email field's label. Visible to a screen reader, not on screen: the
    design gives the field a placeholder and no visible label, and a placeholder
    is not a label. */
.sn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}