/*
 * Fried Engineers — AI/ML Research Project Guidance
 * Page-specific styles. Loaded only by template-ai-ml-research-guide.php.
 */

.fe-guide-page {
    --fe-ink: #1d2226;
    --fe-muted: #667085;
    --fe-line: #e8e8ec;
    --fe-paper: #ffffff;
    --fe-soft: #f7f7f9;
    --fe-purple: #752092;
    --fe-purple-dark: #54146d;
    --fe-yellow: #fcd206;
    --fe-yellow-soft: #fff8cf;
    --fe-green: #16794a;
    --fe-red: #a63636;
    --fe-shadow: 0 18px 55px rgba(29, 34, 38, .09);
    color: var(--fe-ink);
    background: var(--fe-paper);
}

.fe-guide-shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.fe-guide-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 9999;
    height: 3px;
    pointer-events: none;
}

.fe-guide-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--fe-purple), var(--fe-yellow));
    transition: width .08s linear;
}

.fe-guide-hero {
    position: relative;
    overflow: hidden;
    padding: 44px 0 58px;
    background:
        radial-gradient(circle at 88% 12%, rgba(252, 210, 6, .22), transparent 26%),
        radial-gradient(circle at 15% 5%, rgba(117, 32, 146, .12), transparent 31%),
        linear-gradient(180deg, #fff 0%, #fcfaff 100%);
    border-bottom: 1px solid var(--fe-line);
}

.fe-guide-hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(117, 32, 146, .08);
    border-radius: 50%;
    right: -180px;
    top: -160px;
}

.fe-guide-breadcrumbs {
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--fe-muted);
}

.fe-guide-breadcrumbs a { color: var(--fe-purple); text-decoration: none; }
.fe-guide-breadcrumbs a:hover { text-decoration: underline; }

.fe-guide-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 52px;
    align-items: center;
}

.fe-guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    font: 700 12px/1.2 "DM Sans", sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--fe-purple);
}

.fe-guide-eyebrow::before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: var(--fe-yellow);
}

.fe-guide-hero h1 {
    margin: 0;
    max-width: 850px;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: .99;
    letter-spacing: -.045em;
    color: var(--fe-ink);
}

.fe-guide-lead {
    max-width: 780px;
    margin: 24px 0 0;
    font: 500 clamp(17px, 1.7vw, 21px)/1.65 "DM Sans", sans-serif;
    color: #41464b;
}

.fe-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 21px;
    font: 600 13px/1.5 "DM Sans", sans-serif;
    color: var(--fe-muted);
}

.fe-guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.fe-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 700 14px/1 "DM Sans", sans-serif;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fe-guide-btn:hover { transform: translateY(-1px); }
.fe-guide-btn--primary { background: var(--fe-ink); color: #fff; box-shadow: 0 9px 24px rgba(29,34,38,.16); }
.fe-guide-btn--primary:hover { background: #090b0c; color: #fff; }
.fe-guide-btn--secondary { border-color: #d9d9df; background: #fff; color: var(--fe-ink); }
.fe-guide-btn--secondary:hover { border-color: var(--fe-purple); color: var(--fe-purple); }

.fe-guide-roadmap {
    position: relative;
    z-index: 1;
    padding: 24px;
    border: 1px solid rgba(117, 32, 146, .14);
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    box-shadow: var(--fe-shadow);
    backdrop-filter: blur(12px);
}

.fe-guide-roadmap-label {
    margin: 0 0 13px;
    font: 800 12px/1.2 "DM Sans", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fe-purple);
}

.fe-guide-roadmap ol { list-style: none; margin: 0; padding: 0; }
.fe-guide-roadmap li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 11px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #e5e1e8;
    font: 650 13px/1.35 "DM Sans", sans-serif;
}
.fe-guide-roadmap li:last-child { border-bottom: 0; }
.fe-guide-step-no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--fe-yellow-soft);
    color: #5a4a00;
    font-size: 11px;
}

.fe-guide-layout {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 54px;
    align-items: start;
    padding-top: 54px;
    padding-bottom: 76px;
}

.fe-guide-sidebar { position: sticky; top: 108px; }

.fe-guide-toc {
    padding: 18px 17px;
    border: 1px solid var(--fe-line);
    border-radius: 14px;
    background: #fff;
}
.fe-guide-toc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fe-line);
    font: 800 13px/1.2 "DM Sans", sans-serif;
    color: var(--fe-ink);
}
.fe-guide-toc-head button { display: none; }
.fe-guide-toc ol {
    max-height: calc(100vh - 200px);
    overflow: auto;
    margin: 13px 0 0;
    padding: 0 3px 0 0;
    list-style: none;
    scrollbar-width: thin;
}
.fe-guide-toc li { margin: 0; }
.fe-guide-toc a {
    display: block;
    padding: 7px 9px;
    border-left: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    font: 600 12.5px/1.4 "DM Sans", sans-serif;
    color: #686d74;
    text-decoration: none;
}
.fe-guide-toc a:hover { color: var(--fe-purple); background: #faf7fb; }
.fe-guide-toc a.is-active { color: var(--fe-purple); border-left-color: var(--fe-purple); background: #faf7fb; }

.fe-guide-article {
    min-width: 0;
    max-width: 830px;
    font: 400 17px/1.83 "DM Sans", sans-serif;
    color: #353a3f;
}
.fe-guide-article > *:first-child { margin-top: 0; }
.fe-guide-article p { margin: 0 0 20px; }
.fe-guide-article strong { color: var(--fe-ink); font-weight: 750; }
.fe-guide-article em { color: #4f555b; }

.fe-guide-article h2 {
    scroll-margin-top: 110px;
    margin: 68px 0 20px;
    padding-top: 8px;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(29px, 3vw, 41px);
    line-height: 1.13;
    letter-spacing: -.025em;
    color: var(--fe-ink);
}
.fe-guide-article h2::before {
    content: "";
    display: block;
    width: 47px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fe-yellow) 0 48%, var(--fe-purple) 48% 100%);
}
.fe-guide-article h3 {
    scroll-margin-top: 110px;
    margin: 38px 0 13px;
    font: 800 21px/1.35 "Outfit", "DM Sans", sans-serif;
    color: var(--fe-ink);
}

.fe-guide-article a {
    color: var(--fe-purple);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.fe-guide-article a:hover { color: var(--fe-purple-dark); }

.fe-guide-callout {
    position: relative;
    margin: 30px 0;
    padding: 22px 24px 22px 26px;
    border: 1px solid #e5d9ea;
    border-left: 5px solid var(--fe-purple);
    border-radius: 12px;
    background: #fcf9fd;
    color: #31353a;
}
.fe-guide-callout p:last-child { margin-bottom: 0; }
.fe-guide-callout--gold { border-color: #f0df79; border-left-color: var(--fe-yellow); background: #fffdf1; }
.fe-guide-callout--danger { border-color: #efcccc; border-left-color: var(--fe-red); background: #fff9f9; }
.fe-guide-callout--info { border-color: #cfe1f4; border-left-color: #2a6fa8; background: #f8fbff; }

.fe-guide-table-wrap {
    width: 100%;
    margin: 28px 0 34px;
    overflow-x: auto;
    border: 1px solid var(--fe-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29,34,38,.04);
}
.fe-guide-table {
    width: 100%;
    min-width: 610px;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.55;
}
.fe-guide-table th {
    padding: 14px 16px;
    text-align: left;
    background: var(--fe-ink);
    color: #fff;
    font-weight: 750;
}
.fe-guide-table td { padding: 14px 16px; border-top: 1px solid var(--fe-line); vertical-align: top; }
.fe-guide-table tbody tr:nth-child(even) { background: #fafafa; }
.fe-guide-table tbody tr:hover { background: #fffdf2; }

.fe-guide-article ul,
.fe-guide-article ol { margin: 10px 0 25px; padding-left: 24px; }
.fe-guide-article li { margin: 7px 0; padding-left: 3px; }
.fe-guide-article li::marker { color: var(--fe-purple); font-weight: 800; }

.fe-direction-card,
.fe-mistake-item {
    position: relative;
    margin: 12px 0 !important;
    padding: 17px 19px 17px 21px;
    border: 1px solid var(--fe-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(29,34,38,.035);
}
.fe-direction-card { border-left: 4px solid var(--fe-purple); }
.fe-mistake-item { border-left: 4px solid var(--fe-yellow); }

.fe-novelty-list {
    counter-reset: fe-novelty;
    list-style: none;
    padding: 0 !important;
    display: grid;
    gap: 11px;
}
.fe-novelty-list li {
    counter-increment: fe-novelty;
    display: grid;
    grid-template-columns: 37px 1fr;
    gap: 13px;
    align-items: start;
    margin: 0 !important;
    padding: 15px 17px;
    border: 1px solid var(--fe-line);
    border-radius: 11px;
    background: var(--fe-soft);
}
.fe-novelty-list li::before {
    content: counter(fe-novelty);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fe-purple);
    color: #fff;
    font-weight: 800;
}
.fe-novelty-list li::marker { content: ""; }

.fe-faq-title { margin-top: 76px !important; }
.fe-faq-question {
    position: relative;
    margin: 22px 0 8px !important;
    padding: 18px 20px 18px 48px;
    border: 1px solid var(--fe-line);
    border-radius: 11px;
    background: #fafafa;
}
.fe-faq-question::before {
    content: "Q";
    position: absolute;
    left: 15px;
    top: 17px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--fe-yellow);
    color: var(--fe-ink);
    font: 900 12px/1 "DM Sans", sans-serif;
}
.fe-faq-question + p { padding: 0 9px 11px 19px; border-left: 2px solid #eee; }

.fe-guide-backtop-wrap { border-top: 1px solid var(--fe-line); padding: 22px 0 40px; text-align: right; }
.fe-guide-backtop { color: var(--fe-purple); font: 700 13px/1 "DM Sans", sans-serif; text-decoration: none; }

@media (max-width: 980px) {
    .fe-guide-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .fe-guide-roadmap ol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 16px; }
    .fe-guide-layout { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
    .fe-guide-sidebar { position: static; }
    .fe-guide-toc { padding: 14px; }
    .fe-guide-toc-head button {
        display: inline-flex;
        border: 0;
        border-radius: 7px;
        padding: 7px 10px;
        background: var(--fe-soft);
        color: var(--fe-purple);
        font: 750 12px/1 "DM Sans", sans-serif;
        cursor: pointer;
    }
    .fe-guide-toc ol { display: none; max-height: 360px; }
    .fe-guide-toc.is-open ol { display: block; }
    .fe-guide-article { max-width: none; }
}

@media (max-width: 640px) {
    .fe-guide-shell { width: min(100% - 28px, 1180px); }
    .fe-guide-hero { padding: 28px 0 38px; }
    .fe-guide-hero h1 { font-size: clamp(38px, 12vw, 54px); }
    .fe-guide-lead { font-size: 16px; line-height: 1.65; }
    .fe-guide-meta { font-size: 12px; }
    .fe-guide-hero-actions { display: grid; grid-template-columns: 1fr; }
    .fe-guide-btn { width: 100%; }
    .fe-guide-roadmap { padding: 18px; border-radius: 14px; }
    .fe-guide-roadmap ol { grid-template-columns: 1fr; }
    .fe-guide-layout { padding-bottom: 50px; }
    .fe-guide-article { font-size: 16px; line-height: 1.78; }
    .fe-guide-article h2 { margin-top: 54px; font-size: 31px; }
    .fe-guide-article h3 { font-size: 19px; }
    .fe-guide-callout { padding: 18px 18px 18px 20px; }
    .fe-guide-table { min-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
    .fe-guide-page *, .fe-guide-page *::before, .fe-guide-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --- Visual/concise content blocks v2 --- */
.fe-guide-opening {
    margin: 0 0 38px;
    padding: 30px;
    border: 1px solid #ece8ef;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(252,210,6,.14), transparent 34%),
        linear-gradient(145deg, #fff 0%, #fcf9fd 100%);
    box-shadow: 0 16px 44px rgba(29,34,38,.055);
}
.fe-guide-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font: 800 11px/1.2 "DM Sans", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fe-purple);
}
.fe-guide-opening-lead {
    max-width: 760px;
    margin-bottom: 22px !important;
    font-size: 18px;
    line-height: 1.68;
}
.fe-guide-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}
.fe-guide-snapshot {
    display: grid;
    gap: 5px;
    min-height: 132px;
    padding: 16px;
    border: 1px solid #e9e5eb;
    border-radius: 14px;
    background: rgba(255,255,255,.9);
}
.fe-guide-snapshot span {
    font: 900 11px/1 "DM Sans", sans-serif;
    color: var(--fe-purple);
}
.fe-guide-snapshot strong { font: 800 15px/1.25 "Outfit", sans-serif; }
.fe-guide-snapshot small { color: var(--fe-muted); font-size: 12.5px; line-height: 1.5; }

.fe-guide-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 9px;
    align-items: center;
    margin: 26px 0 30px;
}
.fe-guide-flow-step {
    min-height: 118px;
    padding: 15px;
    border: 1px solid var(--fe-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29,34,38,.04);
}
.fe-guide-flow-step b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 11px;
    border-radius: 9px;
    background: var(--fe-yellow-soft);
    color: #655300;
    font-size: 12px;
}
.fe-guide-flow-step span { display: grid; gap: 4px; }
.fe-guide-flow-step strong { font-size: 14px; }
.fe-guide-flow-step small { color: var(--fe-muted); font-size: 11.5px; line-height: 1.35; }
.fe-guide-flow-arrow { color: #b3aeb6; font-weight: 900; }

.fe-guide-example-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 22px 0;
    padding: 18px;
    border-radius: 14px;
    background: #f8f5fa;
    border: 1px solid #e6ddea;
    font-size: 13px;
}
.fe-guide-example-chain span,
.fe-guide-example-chain strong {
    padding: 7px 10px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e8e4ea;
}
.fe-guide-example-chain strong { background: var(--fe-purple); color: #fff; }
.fe-guide-example-chain i { color: var(--fe-purple); font-style: normal; font-weight: 900; }

.fe-guide-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}
.fe-guide-chip-list span {
    padding: 7px 11px;
    border: 1px solid #e4dbe8;
    border-radius: 999px;
    background: #fcf9fd;
    color: #5b3568;
    font-size: 12.5px;
    font-weight: 700;
}

.fe-guide-check-panel {
    margin: 22px 0;
    padding: 20px 22px;
    border-radius: 15px;
    background: #fffdf4;
    border: 1px solid #eee0a0;
}
.fe-guide-check-panel > strong { display: block; margin-bottom: 9px; }
.fe-guide-check-panel ul { margin-bottom: 0; }

.fe-guide-takeaway {
    margin: 24px 0 !important;
    padding: 13px 15px;
    border-radius: 10px;
    background: #f7f7f9;
    border-left: 3px solid var(--fe-purple);
    font-size: 14px;
    line-height: 1.6;
}

.fe-guide-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin: 24px 0;
}
.fe-guide-info-card {
    padding: 21px;
    border: 1px solid var(--fe-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29,34,38,.035);
}
.fe-guide-info-card h3 { margin: 8px 0 7px !important; font-size: 17px !important; }
.fe-guide-info-card p { margin-bottom: 0 !important; font-size: 14px; line-height: 1.6; color: #555b61; }
.fe-guide-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fe-yellow-soft);
    color: var(--fe-purple);
    font-weight: 900;
}

.fe-guide-search-box {
    display: grid;
    gap: 10px;
    margin: 24px 0 30px;
}
.fe-guide-search-box div {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid #e7e7ea;
    border-radius: 11px;
    background: #fbfbfc;
}
.fe-guide-search-box small { color: var(--fe-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.fe-guide-search-box code { overflow-wrap: anywhere; color: #3f2a46; background: transparent; font-size: 13px; }

.fe-guide-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
    margin: 24px 0 30px;
}
.fe-guide-mini-card {
    padding: 18px;
    border: 1px solid var(--fe-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(29,34,38,.035);
}
.fe-guide-mini-card > span {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    margin-bottom: 11px;
    border-radius: 9px;
    background: #f4edf6;
    color: var(--fe-purple);
    font: 900 11px/1 "DM Sans", sans-serif;
}
.fe-guide-mini-card h3 { margin: 0 0 6px !important; font-size: 16px !important; }
.fe-guide-mini-card p { margin: 0 !important; color: #5b6167; font-size: 13px; line-height: 1.55; }
.fe-guide-gap-grid .fe-guide-mini-card:nth-child(even) { background: #fffcf0; }

.fe-guide-formula-box {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    justify-content: center;
    margin: 24px 0;
    padding: 18px;
    border-radius: 14px;
    background: #f8f5fa;
    border: 1px solid #e4d8e9;
}
.fe-guide-formula-box strong {
    padding: 8px 11px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e8e3ea;
    font-size: 13px;
}
.fe-guide-formula-box span { color: var(--fe-purple); font-weight: 900; }
.fe-guide-formula-box--dark { background: var(--fe-ink); border-color: var(--fe-ink); }
.fe-guide-formula-box--dark strong { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.fe-guide-formula-box--dark span { color: var(--fe-yellow); }

.fe-guide-example-box {
    position: relative;
    margin: 24px 0;
    padding: 25px 22px 19px;
    border: 1px solid #dfe8f0;
    border-radius: 14px;
    background: #f8fbff;
}
.fe-guide-example-label {
    position: absolute;
    left: 20px;
    top: -11px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #2a6fa8;
    color: #fff;
    font: 800 10px/1 "DM Sans", sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.fe-guide-example-box p { margin: 0 !important; font-size: 14.5px; line-height: 1.7; }

.fe-guide-check-list { list-style: none !important; padding-left: 0 !important; }
.fe-guide-check-list li {
    position: relative;
    padding-left: 30px !important;
    margin: 9px 0 !important;
}
.fe-guide-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    background: #edf8f2;
    color: var(--fe-green);
    font-size: 11px;
    font-weight: 900;
}
.fe-guide-check-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px 16px; }

.fe-guide-note-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin: 22px 0;
}
.fe-guide-note-row div {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    border-radius: 12px;
    border: 1px solid var(--fe-line);
    background: #fbfbfc;
}
.fe-guide-note-row strong { font-size: 13px; }
.fe-guide-note-row span { color: var(--fe-muted); font-size: 12.5px; line-height: 1.5; }

.fe-guide-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fe-guide-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 11px;
    margin: 22px 0;
}
.fe-guide-question-grid div {
    padding: 15px;
    border: 1px solid var(--fe-line);
    border-radius: 12px;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.5;
}
.fe-guide-question-grid span {
    display: inline-block;
    margin-right: 8px;
    padding: 4px 7px;
    border-radius: 7px;
    background: var(--fe-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.fe-guide-table--center th,
.fe-guide-table--center td { text-align: center; }

.fe-guide-idea-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fe-guide-idea-card {
    padding: 19px;
    border: 1px solid var(--fe-line);
    border-radius: 15px;
    background: linear-gradient(180deg,#fff,#fcfcfd);
}
.fe-guide-idea-card > span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--fe-purple);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.fe-guide-idea-card h3 { margin: 0 0 6px !important; font-size: 16px !important; }
.fe-guide-idea-card p { margin: 0 !important; color: var(--fe-muted); font-size: 13px; line-height: 1.5; }
.fe-guide-inline-cta {
    display: inline-flex;
    padding: 12px 15px;
    border-radius: 10px;
    background: #faf7fb;
    text-decoration: none !important;
}

.fe-guide-paper-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 11px;
    margin: 24px 0;
}
.fe-guide-paper-grid div {
    display: grid;
    grid-template-columns: 34px 120px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--fe-line);
    border-radius: 12px;
    background: #fff;
}
.fe-guide-paper-grid b { color: #aaa1ad; font-size: 11px; }
.fe-guide-paper-grid strong { font-size: 13px; }
.fe-guide-paper-grid span { color: var(--fe-muted); font-size: 12.5px; line-height: 1.45; }

.fe-guide-mistakes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: 23px 0;
}
.fe-mistake-item { margin: 0 !important; display: grid; gap: 4px; }
.fe-mistake-item strong { font-size: 13.5px; }
.fe-mistake-item span { color: var(--fe-muted); font-size: 12.5px; line-height: 1.5; }

.fe-guide-week-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin: 24px 0;
}
.fe-guide-week-grid div {
    min-height: 112px;
    padding: 15px;
    border: 1px solid var(--fe-line);
    border-radius: 13px;
    background: #fff;
}
.fe-guide-week-grid b {
    display: inline-block;
    margin-bottom: 13px;
    color: var(--fe-purple);
    font-size: 11px;
}
.fe-guide-week-grid span { display: block; font-size: 12.5px; line-height: 1.45; color: #52585e; }

.fe-guide-support-box {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 28px;
    align-items: center;
    margin: 25px 0 10px;
    padding: 30px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(252,210,6,.16), transparent 34%),
        var(--fe-ink);
    color: #fff;
}
.fe-guide-support-box h3 { margin: 3px 0 10px !important; color: #fff !important; font-size: 23px !important; }
.fe-guide-support-box p { margin: 0 !important; max-width: 650px; color: rgba(255,255,255,.72); font-size: 14px; }
.fe-guide-support-box .fe-guide-kicker { color: var(--fe-yellow); }
.fe-guide-support-box .fe-guide-btn--primary { background: var(--fe-yellow); color: var(--fe-ink); box-shadow: none; white-space: nowrap; }

.fe-guide-final-box {
    margin: 28px 0 0;
    padding: 31px;
    border-radius: 20px;
    background: linear-gradient(145deg,#1d2226,#32233a);
    color: #fff;
    text-align: center;
}
.fe-guide-final-box small { display: block; color: rgba(255,255,255,.56); text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.fe-guide-final-box p { margin: 8px 0 23px !important; color: #d6d8da; text-decoration: line-through; text-decoration-color: #d15a5a; }
.fe-guide-final-box h3 { max-width: 690px; margin: 8px auto 25px !important; color: #fff !important; font: 700 23px/1.45 "Fraunces", serif !important; }
.fe-guide-final-box div { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--fe-yellow); font-size: 12.5px; font-weight: 800; line-height: 1.55; }

@media (max-width: 820px) {
    .fe-guide-snapshot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fe-guide-flow { grid-template-columns: 1fr; }
    .fe-guide-flow-arrow { transform: rotate(90deg); text-align: center; }
    .fe-guide-card-grid,
    .fe-guide-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fe-guide-week-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fe-guide-support-box { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .fe-guide-opening { padding: 21px; border-radius: 16px; }
    .fe-guide-opening-lead { font-size: 16px; }
    .fe-guide-snapshot-grid,
    .fe-guide-two-col,
    .fe-guide-card-grid,
    .fe-guide-metric-grid,
    .fe-guide-question-grid,
    .fe-guide-idea-grid,
    .fe-guide-paper-grid,
    .fe-guide-mistakes-grid,
    .fe-guide-note-row,
    .fe-guide-check-list--grid,
    .fe-guide-week-grid { grid-template-columns: 1fr; }
    .fe-guide-search-box div { grid-template-columns: 1fr; gap: 5px; }
    .fe-guide-paper-grid div { grid-template-columns: 28px 100px minmax(0,1fr); }
    .fe-guide-example-chain { align-items: flex-start; }
    .fe-guide-support-box { padding: 22px; }
    .fe-guide-support-box .fe-guide-btn { width: 100%; }
    .fe-guide-final-box { padding: 23px 18px; }
}