/* Marketing site styling, layered on top of the shared nwc stylesheet.
 *
 * The pages carry the design's exact values as inline styles, ported from the
 * design reference. What cannot live inline lives here: keyframes, hover and
 * focus states, and the responsive rules the desktop-only reference never had.
 *
 * Inline styles beat stylesheet rules, so the responsive overrides below need
 * !important to collapse a grid the markup sets inline. That is the one place
 * !important is load-bearing rather than lazy.
 */

/* --- Motion ------------------------------------------------------------- */
/* Only the four keyframes the design actually uses. sprout, drift, dropIn,
 * riverRun, lift, sway and growLine exist in the reference as leftovers and are
 * deliberately not carried over. */

@keyframes segTravel {
    0%   { opacity: 0; transform: translateY(0) rotate(-6deg); }
    18%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(88px) rotate(12deg); }
}

@keyframes flow {
    0%   { opacity: 0; transform: translateX(0); }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

@keyframes leafFall {
    0%   { opacity: 0; transform: translateY(-14px) rotate(-8deg); }
    20%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(34px) rotate(14deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.12); }
}

/* --- Hover -------------------------------------------------------------- */

.btn-primary:hover      { background: #16261C; color: #FAF6EC; }
.btn-primary-flat:hover { background: #16261C; }
.btn-secondary:hover    { border-color: #1D4E32; color: #1D4E32; }
.btn-ghost:hover        { border-color: #1D4E32; background: #F1EEE1; color: #1D4E32; }
.link-gold:hover        { color: #B4801F; }

/* --- Forms -------------------------------------------------------------- */

.field {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(22,38,28,0.18);
    background: #FAF6EC;
    color: #16261C;
    font-family: inherit;
    font-size: 15.5px;
}

.field:focus {
    outline: none;
    border-color: #1D4E32;
    box-shadow: 0 0 0 3px rgba(29,78,50,0.12);
}

.field-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B7C6D;
    margin-bottom: 8px;
}

/* Size and sprint pickers are radios styled as chips, so selection survives
 * without JavaScript and screen readers still get a real radio group. */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip span {
    display: inline-block;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(22,38,28,0.2);
    background: #FAF6EC;
    color: #4A5A4E;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chip input:checked + span {
    border-color: #1D4E32;
    background: #E4EDD8;
    color: #16261C;
    font-weight: 600;
}

.chip input:focus-visible + span {
    outline: 2px solid #1D4E32;
    outline-offset: 2px;
}

.form-error {
    background: #F7E6E1;
    border: 1px solid rgba(150,60,40,0.35);
    color: #7A2E1C;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14.5px;
    margin-bottom: 20px;
}

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

@media (max-width: 900px) {
    .cols-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
    .cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 1000px) {
    .cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
    .cols-3,
    .cols-4 { grid-template-columns: 1fr !important; }
}

/* The pricing table keeps its five columns and scrolls inside its own box
 * rather than forcing the page to scroll sideways. */
.price-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 860px) {
    .cols-price { min-width: 720px; }
}

/* The flow diagram is the hard one. Below the breakpoint the horizontal river
 * and wind spines cannot work, so the whole row becomes a single column:
 * sources, river, forest, wind, leaves, nims, top to bottom. The spines flip
 * from a stretched vertical bar into a short horizontal rule between stages. */
@media (max-width: 900px) {
    .flow-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .flow-row > div {
        width: 100% !important;
    }

    /* The 3px spine bars: vertical bar becomes a horizontal divider. */
    .flow-row > div[style*="width: 3px"] {
        width: 100% !important;
        height: 3px !important;
        align-self: auto !important;
        margin: 26px 0 !important;
    }

    /* Their absolutely positioned glyph and caption sit off the bar; recentre
     * them for the horizontal orientation. */
    .flow-row > div[style*="width: 3px"] > span {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* The 22px connector stubs either side of the forest node collapse. */
    .flow-row > div[style*="width: 22px"] {
        display: none !important;
    }

    .flow-row > div[style*="border-radius: 50%"] {
        align-self: center !important;
        width: 104px !important;
    }
}

@media (max-width: 640px) {
    /* Type scale steps down so the 62px display heading stops overflowing. */
    h1 { font-size: 40px !important; }
    h2 { font-size: 32px !important; }
    h3 { font-size: 24px !important; }

    section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- Reduced motion ----------------------------------------------------- */
/* Freeze the motes, keep the layout. The travelling glyphs animate from
 * opacity 0, so they have to be forced visible or they vanish entirely. */

@media (prefers-reduced-motion: reduce) {
    [style*="animation:"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}