/*----------------------------------------------------------------------------
 * Nigel Hamilton
 *
 * Filename:    favsix.css
 * Description: The one FavSix stylesheet. Mobile-first, tile-centric,
 *              built on the FavSix brand kit.
 *--------------------------------------------------------------------------*/

:root {
    /* foundation */
    --ink:     #1F2433;
    --paper:   #F4EFE5;
    --surface: #FFFFFF;
    --muted:   #5C7388;
    --slate:   #5C7388;   /* alias */
    --line:    #E4E4EE;
    --clay:    #C2B198;
    --danger:  #E0344B;

    /* brand v2 jewel-tone accents */
    --coral:   #E55B47;
    --indigo:  #5246E0;
    --emerald: #128C66;
    --amber:   #E8A82B;
    --plum:    #9A3A78;

    /* legacy aliases — keep existing rules working without rewriting them all */
    --accent:  var(--coral);
    --teal:    var(--emerald);
    --lime:    var(--amber);
    --pink:    var(--plum);

    /* radii */
    --radius:      16px;
    --radius-sm:   11px;
    --radius-tile:  6px;

    /* shadows */
    --shadow:       0 6px 20px rgba(13, 19, 36, 0.10);
    --shadow-lift:  0 14px 30px rgba(13, 19, 36, 0.16);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.2; font-weight: 900; letter-spacing: -0.01em; }

/* layout containers ------------------------------------------------------- */

.fa-nav, .fa-shell, .fa-foot {
    max-width: 1040px;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.fa-shell { padding-top: 1.5rem; padding-bottom: 3rem; min-height: 60vh; }

/* nav --------------------------------------------------------------------- */

.fa-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: var(--paper);
    position: relative;
}
.fa-nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 2px;
    background: var(--coral);
}
.fa-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--ink);
}
.fa-nav__mark { display: block; }
.fa-nav__word { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; }
.fa-nav__links {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
}
.fa-nav__links a { font-weight: 700; text-decoration: none; color: var(--ink); }
.fa-nav__links a:hover { text-decoration: underline; }
.fa-nav__link { font-weight: 700; text-decoration: none; color: var(--ink); }
.fa-nav__link:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .fa-nav__link--collapse { display: none; }
    .fa-nav__links { gap: 0.7rem; }
}
.fa-nav__signout { margin: 0; }
.fa-nav__signout button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}
.fa-nav__signout button:hover { text-decoration: underline; }

/* breadcrumbs — back-navigation on nested signed-in pages ------------------ */

.fa-crumbs { margin-bottom: 1rem; }
.fa-crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
}
.fa-crumbs li { display: flex; align-items: center; gap: 0.45rem; }
.fa-crumbs li + li::before {
    content: "/";
    color: color-mix(in srgb, var(--ink) 40%, #fff);
}
.fa-crumbs a { color: var(--accent); text-decoration: none; }
.fa-crumbs a:hover { text-decoration: underline; }
.fa-crumbs [aria-current="page"] { color: var(--ink); }

/* footer ------------------------------------------------------------------ */

.fa-foot {
    margin-top: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    border-top: 3px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
}
.fa-foot__brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}
.fa-foot__tag { margin: 0; color: var(--muted); font-weight: 700; }
.fa-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-left: auto;
}
.fa-foot__links a { font-weight: 700; text-decoration: none; color: var(--ink); }
.fa-foot__legal { width: 100%; margin: 0; color: var(--muted); }

/* buttons — magnet-style: solid fill + hard bottom shadow ----------------- */

.fa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--coral) 60%, #000);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.fa-btn:hover  { filter: brightness(1.05); }
.fa-btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, #000); }

.fa-btn--indigo  { background: var(--indigo);  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--indigo) 60%, #000); }
.fa-btn--indigo:active  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--indigo) 60%, #000); }

.fa-btn--emerald { background: var(--emerald); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--emerald) 60%, #000); }
.fa-btn--emerald:active { box-shadow: 0 0 0 0 color-mix(in srgb, var(--emerald) 60%, #000); }

.fa-btn--amber   { background: var(--amber);   color: var(--ink); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--amber) 60%, #000); }
.fa-btn--amber:active   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, #000); }

.fa-btn--plum    { background: var(--plum);    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--plum) 60%, #000); }
.fa-btn--plum:active    { box-shadow: 0 0 0 0 color-mix(in srgb, var(--plum) 60%, #000); }

.fa-btn--danger  { background: var(--danger);  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--danger) 60%, #000); }
.fa-btn--danger:active  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 60%, #000); }

.fa-btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    border: 2px solid var(--ink);
    padding: 0.65rem 1.15rem;
}
.fa-btn--ghost:hover  { filter: none; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fa-btn--ghost:active { transform: translateY(0); box-shadow: none; }

.fa-btn--lg { padding: 0.95rem 1.7rem; font-size: 1.05rem; }

.fa-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.fa-btn[disabled]:hover, .fa-btn[disabled]:active {
    transform: none;
    filter: none;
    /* no box-shadow override — each variant keeps its own resting shadow */
}

/* cards + forms ----------------------------------------------------------- */

.fa-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.fa-card h1 { margin-top: 0; }
.fa-card label { display: block; margin: 0.9rem 0; font-weight: 700; }
.fa-card label[hidden],
.fa-card [hidden] { display: none !important; }
.fa-card input:not([type="radio"]):not([type="checkbox"]),
.fa-card select,
.fa-card textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
}
.fa-card input[type="radio"],
.fa-card input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
}
.fa-card fieldset label {
    display: block;
    margin: 0.4rem 0;
    font-weight: 400;
}
.fa-card input:focus,
.fa-card select:focus,
.fa-card textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.fa-card form { margin-top: 0.5rem; }
.fa-card--narrow { max-width: 26rem; margin-left: auto; margin-right: auto; }

/* radio-button choice groups — replace dropdown <select>s */
.fa-choice { margin: 0.9rem 0; }
.fa-choice__label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.fa-choice__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.5rem 0.4rem 0;
    padding: 0.5rem 0.8rem;
    font-weight: 400;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.fa-choice__opt input {
    display: inline-block;
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}
.fa-choice__opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface);
    font-weight: 700;
}

.fa-error {
    background: #FFE9EC;
    border: 2px solid var(--danger);
    color: var(--danger);
    font-weight: 700;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
}

/* pricing page ------------------------------------------------------------ */
.fa-pricing__hero { text-align: center; margin-bottom: 1.8rem; }
.fa-pricing__hero h1 { margin-bottom: 0.4rem; }
.fa-pricing__sub { color: var(--muted); max-width: 32rem; margin: 0 auto; }

.fa-plans { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .fa-plans { grid-template-columns: 1fr 1fr; }
}
.fa-plan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
}
.fa-plan--feature { border-color: var(--accent); }
.fa-plan__name { margin: 0; font-size: 1.3rem; }
.fa-plan__price { margin: 0.2rem 0; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.fa-plan__amount { font-size: 2.2rem; font-weight: 900; }
.fa-plan__unit { color: var(--muted); font-weight: 700; }
.fa-plan__for { color: var(--muted); margin: 0 0 0.4rem; }
.fa-plan__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.fa-plan__features li { position: relative; padding-left: 1.4rem; }
.fa-plan__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 900;
}
.fa-plan .fa-btn { align-self: start; margin-top: auto; }

.fa-pricing__note { text-align: center; font-weight: 700; margin: 1.6rem 0 2rem; }

.fa-faq { max-width: 40rem; margin: 0 auto; }
.fa-faq__item { margin: 1rem 0; }
.fa-faq__item h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.fa-faq__item p { margin: 0; color: var(--muted); }

/* legal / static prose pages */
.fa-legal { max-width: 46rem; }
.fa-legal h2 { margin-top: 1.7rem; font-size: 1.15rem; }
.fa-legal__updated { margin-top: -0.4rem; color: var(--muted); }
.fa-legal ul { padding-left: 1.2rem; }
.fa-legal li { margin: 0.35rem 0; }
.fa-legal__see { margin-top: 1.8rem; font-weight: 700; }

/* home / landing — Six of your best. -------------------------------------- */

/* shared section rhythm */
.fa-home__hero,
.fa-home__why,
.fa-home__how,
.fa-home__cases,
.fa-home__pricing-preview,
.fa-home__examples,
.fa-home__team,
.fa-home__final {
    padding-top: 3rem;
    padding-bottom: 3rem;
    scroll-margin-top: 5rem;
}

.fa-home__h1 {
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0 0 1.1rem;
}

.fa-home__h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 0.9rem;
}
.fa-home__h2--center { text-align: center; }

.fa-home__lead {
    max-width: 32rem;
    margin: 0 0 1.4rem;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.5;
}

.fa-home__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.fa-home__cta-row--center { justify-content: center; }

.fa-home__reassurance {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.95rem;
}

/* hero -------------------------------------------------------------------- */

.fa-home__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.6rem;
    align-items: center;
    padding-top: 2.4rem;
}
.fa-home__hero-copy { order: 1; }
.fa-home__hero-visual { order: 2; }

@media (min-width: 760px) {
    .fa-home__hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 3.4rem;
        padding-top: 3.5rem;
    }
    .fa-home__hero-visual { order: 2; }
}

.fa-home__hero-byline {
    margin: 1rem 0 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* the 2×3 grid — brand-mark proportions ----------------------------------- */

.fa-home-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.7rem;
}

.fa-home-grid--showcase {
    max-width: 360px;
    margin: 0 auto;
}
@media (min-width: 760px) {
    .fa-home-grid--showcase { max-width: 420px; }
}

.fa-home-grid--mini {
    gap: 0.45rem;
    max-width: 280px;
    margin: 0 auto;
}

/* hero tile — solid jewel-tone with hard magnet shadow ------------------- */

.fa-home-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: var(--coral);
    box-shadow: 0 6px 0 0 color-mix(in srgb, var(--coral) 60%, #000);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: fa-home-tile-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.fa-home-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 0 color-mix(in srgb, var(--coral) 60%, #000);
}
.fa-home-tile__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    align-items: center;
    justify-content: center;
    color: #fff;
}
.fa-home-tile__icon svg { display: block; }
.fa-home-tile__label {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.fa-home-tile--coral   { background: var(--coral);   box-shadow: 0 6px 0 0 color-mix(in srgb, var(--coral)   60%, #000); }
.fa-home-tile--coral:hover   { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--coral)   60%, #000); }
.fa-home-tile--indigo  { background: var(--indigo);  box-shadow: 0 6px 0 0 color-mix(in srgb, var(--indigo)  60%, #000); }
.fa-home-tile--indigo:hover  { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--indigo)  60%, #000); }
.fa-home-tile--emerald { background: var(--emerald); box-shadow: 0 6px 0 0 color-mix(in srgb, var(--emerald) 60%, #000); }
.fa-home-tile--emerald:hover { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--emerald) 60%, #000); }
.fa-home-tile--amber   { background: var(--amber);   color: var(--ink); box-shadow: 0 6px 0 0 color-mix(in srgb, var(--amber) 60%, #000); }
.fa-home-tile--amber:hover   { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--amber)   60%, #000); }
.fa-home-tile--amber .fa-home-tile__icon { background: rgba(31, 36, 51, 0.15); color: var(--ink); }
.fa-home-tile--plum    { background: var(--plum);    box-shadow: 0 6px 0 0 color-mix(in srgb, var(--plum)    60%, #000); }
.fa-home-tile--plum:hover    { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--plum)    60%, #000); }
.fa-home-tile--slate   { background: var(--muted);   box-shadow: 0 6px 0 0 color-mix(in srgb, var(--muted)   60%, #000); }
.fa-home-tile--slate:hover   { box-shadow: 0 8px 0 0 color-mix(in srgb, var(--muted)   60%, #000); }

/* staggered tile reveal — hero only */
@keyframes fa-home-tile-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.fa-home-grid--showcase .fa-home-tile:nth-child(1) { animation-delay: 0.05s; }
.fa-home-grid--showcase .fa-home-tile:nth-child(2) { animation-delay: 0.13s; }
.fa-home-grid--showcase .fa-home-tile:nth-child(3) { animation-delay: 0.21s; }
.fa-home-grid--showcase .fa-home-tile:nth-child(4) { animation-delay: 0.29s; }
.fa-home-grid--showcase .fa-home-tile:nth-child(5) { animation-delay: 0.37s; }
.fa-home-grid--showcase .fa-home-tile:nth-child(6) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    .fa-home-tile { animation: none; transition: none; }
    .fa-home-tile:hover { transform: none; }
    html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* why section — giant numeral + copy -------------------------------------- */

.fa-home__why {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 760px) {
    .fa-home__why { grid-template-columns: auto 1fr; gap: 2.6rem; }
}
.fa-home__why-numeral {
    font-size: clamp(8rem, 22vw, 14rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.06em;
    color: var(--coral);
    text-align: center;
    -webkit-text-stroke: 0;
    user-select: none;
}
@media (min-width: 760px) {
    .fa-home__why-numeral { text-align: left; }
}
.fa-home__why-body {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--ink);
    max-width: 30rem;
}
.fa-home__why-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    color: var(--muted);
    font-weight: 700;
}
.fa-home__why-points li::before {
    content: "·";
    margin-right: 0.45rem;
    color: var(--coral);
    font-weight: 900;
}

/* how it works — three steps --------------------------------------------- */

.fa-home__how { padding-top: 1rem; padding-bottom: 4rem; }
.fa-home__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    counter-reset: step;
}
@media (min-width: 760px) {
    .fa-home__steps { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
}
.fa-home__step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fa-home__step-num {
    display: inline-flex;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0.3rem;
    background: var(--coral);
}
.fa-home__step:nth-child(2) .fa-home__step-num { background: var(--indigo); }
.fa-home__step:nth-child(3) .fa-home__step-num { background: var(--emerald); }
.fa-home__step-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.fa-home__step p { margin: 0; color: var(--muted); }

/* use case cards --------------------------------------------------------- */

.fa-home__cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 0.6rem;
}
@media (min-width: 760px) {
    .fa-home__cases-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
.fa-home__case {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
    overflow: hidden;
}
.fa-home__case::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--coral);
}
.fa-home__case--coral::before   { background: var(--coral); }
.fa-home__case--indigo::before  { background: var(--indigo); }
.fa-home__case--emerald::before { background: var(--emerald); }
.fa-home__case--plum::before    { background: var(--plum); }

.fa-home__case-eyebrow {
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.fa-home__case--coral   .fa-home__case-eyebrow { color: var(--coral); }
.fa-home__case--indigo  .fa-home__case-eyebrow { color: var(--indigo); }
.fa-home__case--emerald .fa-home__case-eyebrow { color: var(--emerald); }
.fa-home__case--plum    .fa-home__case-eyebrow { color: var(--plum); }

.fa-home__case-body { margin: 0; color: var(--ink); }
.fa-home__case .fa-btn { align-self: start; margin-top: auto; }

/* pricing preview -------------------------------------------------------- */

.fa-home__plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 760px) {
    .fa-home__plans { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
.fa-home__plan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.fa-home__plan--feature {
    border-color: var(--indigo);
    box-shadow: 0 6px 0 0 color-mix(in srgb, var(--indigo) 18%, #fff);
}
.fa-home__plan-name { margin: 0; font-size: 1.4rem; font-weight: 900; }
.fa-home__plan-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fa-home__plan-amt {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.fa-home__plan-unit { color: var(--muted); font-weight: 700; }
.fa-home__plan-for { margin: 0; color: var(--muted); }
.fa-home__plan-features {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0.4rem;
    display: grid;
    gap: 0.35rem;
}
.fa-home__plan-features li {
    position: relative;
    padding-left: 1.3rem;
}
.fa-home__plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--emerald);
}
.fa-home__plan--feature .fa-home__plan-features li::before { background: var(--indigo); }
.fa-home__plan .fa-btn { align-self: start; margin-top: auto; }

/* examples — device mockups --------------------------------------------- */

.fa-home__examples-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-top: 1rem;
}
@media (min-width: 760px) {
    .fa-home__examples-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}
.fa-home__device {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.2rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    box-shadow: var(--shadow);
}
.fa-home__device-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--line);
}
.fa-home__device-avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--coral);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
}
.fa-home__device-avatar--team { background: var(--indigo); border-radius: 8px; }
.fa-home__device-handle { font-weight: 900; letter-spacing: -0.01em; }
.fa-home__device-kind {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral);
    background: color-mix(in srgb, var(--coral) 14%, transparent);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
}
.fa-home__device-kind--team {
    color: var(--indigo);
    background: color-mix(in srgb, var(--indigo) 14%, transparent);
}
.fa-home__device-foot {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
}

/* mini tile — used in device mockups (matches real product styling more) */

.fa-home-mtile {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    padding: 0.5rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: var(--coral);
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--coral) 60%, #000);
    font-size: 0.85rem;
}
.fa-home-mtile__icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.18);
    align-items: center;
    justify-content: center;
}
.fa-home-mtile__label {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.fa-home-mtile--coral   { background: var(--coral);   box-shadow: 0 3px 0 0 color-mix(in srgb, var(--coral)   60%, #000); }
.fa-home-mtile--indigo  { background: var(--indigo);  box-shadow: 0 3px 0 0 color-mix(in srgb, var(--indigo)  60%, #000); }
.fa-home-mtile--emerald { background: var(--emerald); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--emerald) 60%, #000); }
.fa-home-mtile--amber   { background: var(--amber);   color: var(--ink); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--amber) 60%, #000); }
.fa-home-mtile--amber .fa-home-mtile__icon { background: rgba(31, 36, 51, 0.15); color: var(--ink); }
.fa-home-mtile--plum    { background: var(--plum);    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--plum)    60%, #000); }
.fa-home-mtile--slate   { background: var(--muted);   box-shadow: 0 3px 0 0 color-mix(in srgb, var(--muted)   60%, #000); }

/* team value section ---------------------------------------------------- */

.fa-home__team-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    overflow: hidden;
}
.fa-home__team-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--indigo);
}
@media (min-width: 760px) {
    .fa-home__team-card { padding: 2.4rem 2rem; }
}
.fa-home__team-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--indigo);
}
.fa-home__team-body { margin: 0; color: var(--ink); font-size: 1.05rem; max-width: 36rem; }
.fa-home__team-points {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0;
    display: grid;
    gap: 0.4rem;
    color: var(--ink);
}
.fa-home__team-points li {
    position: relative;
    padding-left: 1.6rem;
    font-weight: 600;
}
.fa-home__team-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--indigo);
    border-radius: 2px;
}
.fa-home__team-card .fa-btn { align-self: start; margin-top: 0.5rem; }

/* final cta -------------------------------------------------------------- */

.fa-home__final {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 1rem;
}
.fa-home__final-body {
    margin: 0 auto 1.3rem;
    max-width: 30rem;
    color: var(--ink);
    font-size: 1.1rem;
}

/* array heading ----------------------------------------------------------- */

.fa-array-head { margin-bottom: 1.5rem; }
.fa-array-head__byline {
    margin: 0 0 0.25rem;
    font-weight: 700;
    color: var(--muted);
}
.fa-array-head__byline a { text-decoration: none; }
.fa-array-head h1 { margin: 0.1rem 0; font-size: 2rem; }
.fa-array-head__desc { margin: 0.4rem 0 0; color: var(--muted); }
.fa-array-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

/* the tile grid ----------------------------------------------------------- */

.fa-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
}
.fa-grid--single { grid-template-columns: minmax(240px, 460px); }

/* empty 3×3 placeholders — visible to editors, fills the board to 9 cells */
.fa-tile--empty {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-tile);
    border: 2px dashed color-mix(in srgb, var(--clay) 40%, transparent);
    background: transparent;
    pointer-events: none;
}

/* Move mode — pick + place. Activated by JS adding .is-move-mode on the
   array card. The picked tile lifts; every other slot becomes a drop target. */
.fa-array-view.is-move-mode .fa-tile__cover,
.fa-array-view.is-move-mode .fa-tile__menu { pointer-events: none; }
.fa-array-view.is-move-mode .fa-grid > * {
    cursor: pointer;
    outline: 3px dashed transparent;
    outline-offset: -3px;
    transition: outline-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.fa-array-view.is-move-mode .fa-grid > *:not(.is-picked):hover {
    outline-color: var(--coral);
    transform: scale(1.04);
}
.fa-array-view.is-move-mode .fa-grid > *.is-focus-target {
    outline-color: var(--indigo);
    transform: scale(1.04);
}
.fa-array-view.is-move-mode .fa-tile--empty { pointer-events: auto; }
.fa-tile.is-picked {
    transform: scale(1.08) rotate(-1.5deg);
    z-index: 5;
    /* Lift shadow + outer coral ring — the ring sits OUTSIDE the tile so the
       tile's own --tile-accent colour stays visible. */
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 35%, transparent),
                0 0 0 3px var(--coral);
    cursor: grab;
}
.fa-move-hint {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}

/* the Action Tile — solid, deep, pressable ------------------------------- */

.fa-tile {
    --tile-accent: var(--coral);
    --tile-ink: var(--paper);
    --tile-shade: color-mix(in srgb, var(--tile-accent) 60%, #000);
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-tile);
}
.fa-tile.is-open {
    grid-column: span 2;
    aspect-ratio: auto;
}

/* tile colour is sticky per-tile via .fa-tile--c-<colour> or inline style —
   never position-based, so a tile keeps its colour when it's moved. */

/* the cover — the closed face of the tile; fades out when the tile opens */
.fa-tile__cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
    padding: 0.7rem;
    background: var(--tile-accent);
    color: var(--tile-ink);
    border-radius: var(--radius-tile);
    box-shadow: 0 6px 0 0 var(--tile-shade);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.08s ease, opacity 0.28s ease;
}
.fa-tile__cover:hover { filter: brightness(1.07); }
.fa-tile:not(.is-open) .fa-tile__cover:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 0 var(--tile-shade);
}
.fa-tile.is-open .fa-tile__cover {
    opacity: 0;
    pointer-events: none;
}

.fa-tile__icon {
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 2px 3px rgba(0,0,0,0.18);
    color: var(--ink);
}
.fa-tile__icon img { display: block; width: 40px; height: 40px; border-radius: 6px; }
.fa-glyph { font-size: 28px; line-height: 1; font-weight: 900; }

.fa-tile__title {
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    margin: auto 0 0;
}
/* On amber tiles (light bg), flip the label shadow direction so it stays crisp */
.fa-tile.fa-tile--c-amber .fa-tile__title { text-shadow: 0 1px 0 rgba(255,255,255,0.30); }
.fa-tile.fa-tile--c-amber .fa-tile__icon  { color: var(--ink); }

.fa-tile__badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0; }

/* the inside — the detail panel, revealed on click */
.fa-tile__inside {
    background: var(--surface);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
}
.fa-tile__inside[hidden] { display: none; }
.fa-tile__close { margin-top: 0.6rem; }

/* badges ------------------------------------------------------------------ */

.fa-badge {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.16rem 0.45rem;
    border-radius: 6px;
    background: var(--paper);
    color: var(--muted);
}
.fa-badge--type     { background: color-mix(in srgb, var(--ink) 8%, #fff); color: var(--ink); }
.fa-badge--trust    { background: color-mix(in srgb, var(--lime) 30%, #fff); color: #4c5a05; }
.fa-badge--whax     { background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--accent); }
.fa-badge--personal { background: var(--indigo); color: #fff; }
.fa-badge--team {
    background: var(--emerald);
    color: var(--paper);
    box-shadow: 0 2px 0 0 color-mix(in srgb, var(--emerald) 60%, #000);
}
.fa-badge--team::before { content: "👥 "; }

/* simple lists / cards ---------------------------------------------------- */

.fa-array-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.7rem; }
.fa-array-list li { display: flex; align-items: center; gap: 0.6rem; }
.fa-array-list li a { font-weight: 700; text-decoration: none; }
.fa-array-link {
    display: block;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.fa-array-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.fa-array-link strong { display: block; font-size: 1.1rem; }
.fa-array-link span { color: var(--muted); }

/* profile ----------------------------------------------------------------- */

.fa-profile { margin-bottom: 1.5rem; }
.fa-profile h1 { margin: 0; font-size: 2rem; }
.fa-profile__name { margin: 0.2rem 0 0; font-weight: 700; }
.fa-profile__bio { margin: 0.5rem 0 0; color: var(--muted); }

/* tile editor list -------------------------------------------------------- */

.fa-tile-editor { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 0.5rem; }
.fa-tile-editor li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.7rem;
}
.fa-tile-editor__title { font-weight: 700; }
.fa-tile-editor a { font-weight: 700; text-decoration: none; }
.fa-tile-editor form { display: inline; margin: 0; }
.fa-tile-editor form button {
    cursor: pointer;
    font: inherit;
    border: 2px solid var(--line);
    background: var(--surface);
    border-radius: 7px;
    width: 1.9rem;
    line-height: 1.4;
}

/* wide screens ------------------------------------------------------------ */

@media (min-width: 720px) {
    .fa-array-head h1 { font-size: 2.4rem; }
}

/* the FavSix board ------------------------------------------------------ */

.fa-favsix {
    border: 3px solid var(--accent);
    border-radius: 24px;
    padding: 1.25rem;
    background: var(--surface);
}

/* embed view ------------------------------------------------------------ */

.fa-embed { background: transparent; }
.fa-embed__inner { padding: 0.75rem; }
.fa-embed__by { margin: 0.75rem 0 0; font-weight: 700; font-size: 0.85rem; }

/* detail panel + forms -------------------------------------------------- */

.fa-detail__title { margin: 0 0 0.5rem; }
.fa-detail__desc  { color: var(--muted); }
.fa-detail__thanks { font-weight: 700; color: var(--accent); }
.fa-detail__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.7rem; }
.fa-detail__url {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.7rem 0;
    padding: 0.6rem 0.7rem;
    background: var(--paper);
    border-radius: var(--radius-sm);
}
.fa-detail__url-label {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.fa-detail__url-value { word-break: break-all; font-weight: 600; }
.fa-detail__owner { color: var(--muted); font-size: 0.9rem; }
.fa-detail__whax  { color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.fa-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.fa-form__field { display: grid; gap: 0.3rem; font-weight: 700; }
.fa-form__field input,
.fa-form__field select,
.fa-form__field textarea {
    padding: 0.6rem 0.7rem;
    font: inherit;
    font-weight: 400;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}
.fa-form__radio { font-weight: 400; }
.fa-form__error { color: var(--danger); font-weight: 700; font-size: 0.85rem; }

/* editor field rows + embed-code disclosure */
.fa-fieldset { border: 2px solid var(--line); border-radius: var(--radius-sm); margin: 0.9rem 0; padding: 0.75rem; }
.fa-field-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.fa-field-row input[type="text"] { flex: 1 1 8rem; }
.fa-embed-code { display: inline-block; }
.fa-embed-code__snippet {
    display: block;
    margin: 0.5rem 0;
    padding: 0.6rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    word-break: break-all;
}
.fa-foot-form { display: inline; margin: 0; }
.fa-array-head__remix { font-weight: 700; color: var(--muted); }

/* ── array card — the FavSix hero unit ─────────────────────────────── */

.fa-array-card {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--clay) 60%, transparent);
    box-shadow: 0 10px 0 0 color-mix(in srgb, var(--ink) 8%, transparent),
                0 24px 60px -10px color-mix(in srgb, var(--ink) 22%, transparent);
    overflow: hidden;
    max-width: 460px;
    margin: 0 auto;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.fa-array-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 0 0 color-mix(in srgb, var(--ink) 9%, transparent),
                0 30px 70px -10px color-mix(in srgb, var(--ink) 26%, transparent);
}

.fa-array-card__rule {
    height: 8px;
    background: linear-gradient(90deg,
        var(--coral)   0  20%, var(--indigo) 20% 40%,
        var(--emerald) 40% 60%, var(--amber) 60% 80%, var(--plum) 80% 100%);
}

.fa-array-card__byline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px 14px;
}

.fa-array-card__avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral) 0%, var(--plum) 100%);
    color: var(--paper);
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    box-shadow: 0 5px 0 0 color-mix(in srgb, var(--coral) 50%, #000),
                0 0 0 4px var(--surface) inset;
    flex-shrink: 0;
    text-decoration: none;
}
.fa-array-card__avatar--team {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--emerald) 100%);
    box-shadow: 0 5px 0 0 color-mix(in srgb, var(--indigo) 50%, #000),
                0 0 0 4px var(--surface) inset;
}

.fa-array-card__creator { min-width: 0; flex: 1; }
.fa-array-card__handle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    font-size: 1.55rem;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.05;
}
.fa-array-card__handle::before {
    content: "@";
    color: var(--coral);
    margin-right: 1px;
}
.fa-array-card__check {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--paper);
    font-size: 0.7rem;
    font-weight: 900;
    margin-left: 4px;
}
.fa-array-card__meta {
    display: block;
    color: var(--slate);
    font-size: 0.86rem;
    font-weight: 600;
    margin-top: 5px;
    line-height: 1.3;
}
.fa-array-card__meta b { color: var(--ink); font-weight: 800; }

.fa-array-card__switcher {
    display: flex;
    gap: 6px;
    padding: 4px 18px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.fa-array-card__chip {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 0.83rem;
    font-weight: 800;
    border-radius: 999px;
    background: transparent;
    color: var(--slate);
    border: 1.5px solid color-mix(in srgb, var(--clay) 80%, transparent);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.fa-array-card__chip:hover {
    background: color-mix(in srgb, var(--clay) 25%, transparent);
    color: var(--ink);
}
.fa-array-card__chip.is-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.fa-array-card__titlebar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 24px 4px;
    flex-wrap: wrap;
}
.fa-array-card__title {
    margin: 0;
    font-weight: 900;
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
    flex: 1;
    min-width: 0;
    color: var(--ink);
}

.fa-pill--commercial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--amber);
    color: var(--ink);
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--amber) 60%, #000);
    flex-shrink: 0;
    margin-top: 4px;
}
.fa-pill__price {
    background: var(--ink);
    color: var(--paper);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 2px;
}

.fa-array-card__desc {
    padding: 0 24px 16px;
    color: var(--slate);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Tile grid inside the card is the existing .fa-grid; just pad it. */
.fa-array-card .fa-grid {
    padding: 6px 20px 20px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.fa-array-card__addtile {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-tile);
    border: 2px dashed color-mix(in srgb, var(--clay) 80%, transparent);
    color: var(--slate);
    display: grid; place-items: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
}
.fa-array-card__addtile:hover {
    color: var(--coral);
    border-color: var(--coral);
}

.fa-array-card__share {
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
    flex-wrap: wrap;
    border-top: 1px dashed color-mix(in srgb, var(--clay) 60%, transparent);
}
.fa-array-card__remix { margin: 0 0 0 auto; }

.fa-array-card__attribution {
    padding: 12px 20px 18px;
    color: var(--slate);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
    display: flex; align-items: center; gap: 8px;
}
.fa-array-card__mark {
    display: inline-grid;
    grid-template-columns: repeat(3, 5px);
    gap: 1.5px;
}
.fa-array-card__mark span {
    width: 5px; height: 5px; border-radius: 1px; background: var(--ink);
}
.fa-array-card__mark .c1 { background: var(--coral); }
.fa-array-card__mark .c2 { background: var(--indigo); }
.fa-array-card__mark .c3 { background: var(--emerald); }

.fa-array-card--embed {
    max-width: 100%;
    box-shadow: none;
    border-radius: 14px;
}
.fa-array-card--embed:hover { transform: none; box-shadow: none; }

.fa-array-full {
    display: flex; align-items: center; gap: 12px;
    color: var(--slate);
    font-weight: 600;
    margin-top: 1rem;
}

/* flash confirmation banner ---------------------------------------------- */

.fa-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--emerald);
    color: var(--paper);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fa-flash.is-dismissed { opacity: 0; transform: translateY(-6px); }
.fa-flash__tick { font-weight: 900; }
.fa-flash__msg { flex: 1; }
.fa-flash__close {
    background: transparent;
    border: 0;
    color: var(--paper);
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.7;
}
.fa-flash__close:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .fa-flash { transition: opacity 0.4s ease; }
    .fa-flash.is-dismissed { transform: none; }
}

/* tile creation wizard ---------------------------------------------------- */

.fa-card--wizard { position: relative; }
.fa-card__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--clay) 25%, transparent);
    color: var(--ink);
    text-decoration: none;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.12s, transform 0.08s;
}
.fa-card__close:hover { background: color-mix(in srgb, var(--coral) 25%, transparent); }
.fa-card__close:active { transform: translateY(1px); }

.fa-wizard__step { display: none; }
.fa-wizard__step.is-active { display: block; }
.fa-wizard__group { border: 0; padding: 0; margin: 0 0 1rem; }
.fa-wizard__group legend {
    font-weight: 900;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    padding: 0;
    margin-bottom: 0.5rem;
}
.fa-wizard__nav {
    display: flex;
    gap: 12px;
    margin-top: 1.25rem;
    align-items: center;
}
.fa-wizard__nav .fa-btn--ghost { margin-right: auto; }
.fa-wizard__preview {
    background: var(--paper);
    border: 1px dashed var(--clay);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin: 1rem 0;
}

/* switcher --------------------------------------------------------------- */
.fa-switcher { position: relative; }
.fa-switcher__button {
    background: transparent; color: inherit; border: 1.5px solid var(--clay);
    border-radius: 999px; padding: 6px 14px; font-weight: 800; cursor: pointer;
}
.fa-switcher__panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--paper); border: 1px solid var(--clay);
    border-radius: var(--radius-sm); padding: 1rem; min-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}
.fa-switcher__panel[hidden] { display: none; }
.fa-switcher__group { margin-bottom: 0.75rem; }
.fa-switcher__group h4 { margin: 0 0 0.25rem; font-size: 0.85rem; }
.fa-switcher__group ul { list-style: none; padding: 0; margin: 0; }
.fa-switcher__actions { border-top: 1px solid var(--clay); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.fa-switcher__signout button {
    background: none; border: none; padding: 0; color: var(--accent);
    cursor: pointer; font-size: inherit; font-family: inherit;
}

/* kebab menu --------------------------------------------------------------- */
.fa-kebab-menu { position: relative; display: inline-block; }
/* hide the browser's default disclosure marker on the <summary> */
.fa-kebab-menu summary { list-style: none; }
.fa-kebab-menu summary::-webkit-details-marker { display: none; }
.fa-kebab-menu summary::marker { content: ""; }
.fa-kebab {
    background: transparent; border: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    color: var(--slate);
}
.fa-kebab:hover { background: color-mix(in srgb, var(--clay) 30%, transparent); color: var(--ink); }
.fa-kebab-menu[open] > .fa-kebab__menu {
    position: absolute; right: 0; top: 100%; z-index: 10;
    background: var(--paper); border: 1px solid var(--clay);
    border-radius: var(--radius-sm); padding: 0.5rem 0; min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    list-style: none; margin: 0;
}
.fa-kebab__menu li { padding: 0; }
.fa-kebab__menu li > button,
.fa-kebab__menu li > a {
    display: block; width: 100%; text-align: left;
    padding: 0.5rem 1rem; background: transparent; border: none;
    color: inherit; text-decoration: none; font: inherit; cursor: pointer;
}
.fa-kebab__menu li > button:hover,
.fa-kebab__menu li > a:hover {
    background: color-mix(in srgb, var(--clay) 30%, transparent);
}
.fa-kebab__menu .fa-danger { color: var(--coral); }
.fa-kebab__divider {
    padding: 0.5rem 1rem 0.15rem;
    margin-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--clay) 35%, transparent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--emerald);
    cursor: default;
}

/* modal dialogs ----------------------------------------------------------- */
.fa-modal {
    border: 1px solid var(--clay); border-radius: var(--radius-sm);
    padding: 1.5rem; max-width: 480px; width: 90vw;
    background: var(--paper); color: var(--ink);
}
.fa-modal::backdrop { background: rgba(0,0,0,0.4); }
.fa-modal h3 { margin: 0 0 1rem; }
.fa-modal label { display: block; margin: 0.5rem 0; }
.fa-modal__actions {
    display: flex; gap: 12px; margin-top: 1.5rem; align-items: center;
}

/* copy-link toast --------------------------------------------------------- */
.fa-toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper);
    padding: 0.5rem 1.25rem; border-radius: 999px; z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.fa-toast.is-visible { opacity: 1; }

/* tabs ------------------------------------------------------------------- */
.fa-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--clay); margin: 1.5rem 0 1rem; }
.fa-tab {
    padding: 0.5rem 1rem; text-decoration: none; color: var(--slate);
    border-bottom: 2px solid transparent; font-weight: 700;
}
.fa-tab:hover { color: var(--ink); }
.fa-tab.is-active { color: var(--coral); border-bottom-color: var(--coral); }

/* members list ----------------------------------------------------------- */
.fa-members { list-style: none; padding: 0; margin: 1rem 0; }
.fa-members li { padding: 0.75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--clay) 30%, transparent); }
.fa-members li:last-child { border-bottom: none; }
.fa-members form { margin-left: 0.5rem; }

/* Array strip — horizontal scroll-snap carousel of FavSix cards -------- */
.fa-array-strip-wrap {
    position: relative;
    /* Escape the parent .fa-shell width constraint so the strip spans the
       full viewport — cards can then snap-centre on the viewport mid-line. */
    margin: 1rem calc(50% - 50vw) 3rem;
    width: 100vw;
}
.fa-array-strip {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Left/right padding equal to (viewport / 2) - (card / 2) so the first
       and last cards can both snap to the viewport centre. */
    padding: 8px calc(50vw - 270px);
}
.fa-array-strip::-webkit-scrollbar { display: none; }

.fa-array-strip > .fa-array-view {
    flex: 0 0 540px;
    scroll-snap-align: center;
    margin: 0;            /* override the default standalone margin */
    max-width: none;
    transition: opacity 0.18s, transform 0.18s;
    opacity: 0.55;
    transform: scale(0.96);
    cursor: pointer;
}
.fa-array-strip > .fa-array-view.is-current {
    opacity: 1;
    transform: scale(1);
    cursor: auto;
}

/* "+ Add FavSix" placeholder card — at both ends of the strip ---------- */
.fa-array-view--add {
    flex: 0 0 540px;
    scroll-snap-align: center;
    border-radius: 24px;
    border: 3px dashed color-mix(in srgb, var(--clay) 70%, transparent);
    background: color-mix(in srgb, var(--paper) 60%, transparent);
    color: var(--slate);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 800;
    transition: border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, background 0.15s;
    opacity: 0.55;
    transform: scale(0.96);
}
.fa-array-strip > .fa-array-view--add.is-current { opacity: 1; transform: scale(1); }
.fa-array-view--add:hover {
    border-color: var(--coral);
    color: var(--coral);
    background: color-mix(in srgb, var(--coral) 6%, transparent);
}
.fa-array-view__add-mark  { font-size: 4rem; font-weight: 900; line-height: 1; }
.fa-array-view__add-label { font-size: 1.1rem; letter-spacing: -0.01em; }

@media (max-width: 720px) {
    .fa-array-strip { gap: 12px; padding: 6px calc(50vw - 42.5vw); }
    .fa-array-strip > .fa-array-view,
    .fa-array-view--add { flex: 0 0 85vw; }
}

/* Prev / Next arrows — desktop only */
.fa-array-strip__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--clay) 50%, transparent);
    border-radius: 50%;
    font-size: 1.6rem; font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
    transition: transform 0.08s, filter 0.12s;
}
.fa-array-strip__nav:hover { filter: brightness(1.05); }
.fa-array-strip__nav:active { transform: translateY(calc(-50% + 2px)); }
.fa-array-strip__nav[disabled] { opacity: 0.35; cursor: not-allowed; }
.fa-array-strip__nav--prev { left: 18px; }
.fa-array-strip__nav--next { right: 18px; }

@media (max-width: 720px) {
    .fa-array-strip__nav { display: none; }
}

/* Position dots under the strip */
.fa-array-strip__dots {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.fa-array-strip__dot {
    display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--clay) 70%, transparent);
    transition: transform 0.12s, background 0.12s;
}
.fa-array-strip__dot:hover { transform: scale(1.2); }
.fa-array-strip__dot.is-current {
    background: var(--coral);
    transform: scale(1.3);
}

/* The Array View — a physical container for the tile board --------------- */
.fa-array-view {
    max-width: 540px;
    margin: 1rem auto 3rem;
    background: var(--surface);
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--clay) 50%, transparent);
    box-shadow: 0 10px 0 0 color-mix(in srgb, var(--ink) 8%, transparent),
                0 24px 60px -10px color-mix(in srgb, var(--ink) 22%, transparent);
    position: relative;
}
.fa-array-view__rule {
    height: 8px;
    border-radius: 23px 23px 0 0;
    background: linear-gradient(90deg,
        var(--coral)   0  20%, var(--indigo)  20% 40%,
        var(--emerald) 40% 60%, var(--amber)  60% 80%, var(--plum) 80% 100%);
}
.fa-array-view__header {
    padding: 18px 22px 4px;
    position: relative;
}
.fa-array-view__owner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--coral);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.01em;
}
.fa-array-view__owner::before { content: "@"; opacity: 0.7; margin-right: 1px; }
.fa-array-view__title {
    margin: 6px 0 4px;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ink);
}
.fa-array-view__desc {
    color: var(--slate);
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}
.fa-array-view__kebab {
    position: absolute !important;
    top: 16px;
    right: 18px;
}
.fa-array-view .fa-grid {
    margin: 0.75rem 18px 22px;
    gap: 0.65rem;
}

/* Per-tile kebab — overlay on the tile cover ----------------------------- */
.fa-tile__menu {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.fa-kebab--on-tile {
    background: rgba(255, 255, 255, 0.22);
    color: var(--tile-ink, var(--paper));
    font-size: 1.8rem;
    line-height: 1;
    padding: 4px 12px;
    border-radius: 8px;
}
.fa-kebab--on-tile:hover { background: rgba(255, 255, 255, 0.4); color: var(--tile-ink, var(--paper)); }

/* + Add tile slot — dashed silhouette of a tile -------------------------- */
.fa-tile--add {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-tile);
    border: 2px dashed color-mix(in srgb, var(--clay) 70%, transparent);
    color: var(--slate);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    font-weight: 800;
    background: color-mix(in srgb, var(--paper) 60%, transparent);
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s ease;
}
.fa-tile--add:hover {
    border-color: var(--coral);
    color: var(--coral);
    background: color-mix(in srgb, var(--coral) 8%, transparent);
    transform: translateY(-2px);
}

/* sticky tile colour modifiers — beat the nth-child cycle on specificity */
.fa-tile.fa-tile--c-coral   { --tile-accent: var(--coral);   --tile-ink: var(--paper); }
.fa-tile.fa-tile--c-indigo  { --tile-accent: var(--indigo);  --tile-ink: var(--paper); }
.fa-tile.fa-tile--c-emerald { --tile-accent: var(--emerald); --tile-ink: var(--paper); }
.fa-tile.fa-tile--c-amber   { --tile-accent: var(--amber);   --tile-ink: var(--ink); }
.fa-tile.fa-tile--c-plum    { --tile-accent: var(--plum);    --tile-ink: var(--paper); }

/* Wizard type pickers (step 1) — four big tiles */
.fa-wizard__types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 1rem 0;
}
.fa-wizard__type {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px;
    padding: 1rem 1.2rem;
    border: 2px solid color-mix(in srgb, var(--clay) 80%, transparent);
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.fa-wizard__type:hover { border-color: var(--coral); }
.fa-wizard__type.is-active {
    border-color: var(--coral);
    background: color-mix(in srgb, var(--coral) 10%, var(--paper));
}
.fa-wizard__type:active { transform: translateY(2px); }
.fa-wizard__type-name { font-weight: 900; font-size: 1.05rem; }
.fa-wizard__type-hint { font-size: 0.82rem; color: var(--slate); }

/* Wizard preview (step 3) */
.fa-wizard__preview {
    display: grid; place-items: center;
    margin: 1rem 0 1.5rem;
}
.fa-grid-preview-tile {
    width: 140px; aspect-ratio: 1/1;
    position: relative; border-radius: var(--radius-tile);
}

/* Swatches */
.fa-wizard__swatches { display: flex; gap: 12px; justify-content: center; margin-bottom: 1rem; padding: 6px; }
.fa-swatch {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: var(--c, var(--paper));
    cursor: pointer;
    box-shadow: 0 2px 0 0 color-mix(in srgb, var(--ink) 20%, transparent);
    transition: transform 0.08s, border-color 0.12s, box-shadow 0.12s;
    position: relative;
    padding: 0;
}
.fa-swatch:hover    { transform: translateY(-1px); }

/* The native colour <input> sits invisibly next to the rainbow swatch so the
   browser's picker popup anchors there (not in the top-left of the viewport).
   It's flow-positioned at 0×0 with opacity 0 and no pointer events. */
.fa-card [data-colour-picker] {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    margin: 0;
    border: 0;
    flex: 0 0 0;
    overflow: hidden;
    display: block;
}
.fa-swatch.is-active {
    border-color: var(--ink);
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--paper),
                0 0 0 4px var(--ink),
                0 4px 0 0 color-mix(in srgb, var(--ink) 25%, transparent);
}
.fa-swatch.is-active::after {
    content: "✓";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--paper);
    font-weight: 900; font-size: 0.85rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.fa-swatch--auto.is-active::after { color: var(--ink); text-shadow: 0 1px 1px rgba(255,255,255,0.5); }
.fa-swatch--auto   { background: conic-gradient(var(--coral), var(--indigo), var(--emerald), var(--amber), var(--plum), var(--coral)); }
.fa-swatch--coral  { background: var(--coral); }
.fa-swatch--indigo { background: var(--indigo); }
.fa-swatch--emerald{ background: var(--emerald); }
.fa-swatch--amber  { background: var(--amber); }
.fa-swatch--plum   { background: var(--plum); }
.fa-tile__add-mark { font-size: 2rem; font-weight: 900; line-height: 1; }
.fa-tile__add-label { font-size: 0.85rem; }