@charset "utf-8";
/* ------------------------------------------------------------
   FPG — colours, type and the shared page furniture
   2.1.01 (12 November 2026): the design's colours (Design/claude-design/HANDOVER.md), Inter for
   body text, and a 1200px content width. The 2.0.02 sheet is "main - v1 (pre-2.1.01).css".
   2.1.02 (12 November 2026): the page band moved to page_body.css (.page-band); the 2.1.01 sheet
   is "main - v2 (pre-2.1.02).css".
------------------------------------------------------------ */
:root {
    --fpg-purple:#24065E;           /* the header and headings (the logo's background is #28006A) */
    --fpg-purple-mid:#3D0C99;       /* the brand purple: the hero and the purple bands */
    --fpg-purple-shape:#4A14B3;     /* the diagonal shapes in the purple bands */
    --fpg-purple-shape2:#5A1FCC;
    --fpg-footer:#1A0447;
    --fpg-tint:#F3F0FB;
    --fpg-line:#E7E1F5;
    --fpg-amber:#FFB800;
    --fpg-amber-light:#FFCB45;
    --fpg-ink:#1B1035;              /* strong text, and text on yellow */
    --fpg-text:#4A4060;
    --fpg-on-purple:#E4DCFA;        /* body text on purple */
    --fpg-on-purple-soft:#CFC3F5;
    --fpg-green:#12875A;
    --fpg-red:#C8362E;
    --fpg-radius:14px;
    --fpg-shadow:0 6px 20px rgba(36, 6, 94, 0.08);
}

.frame {
    background:#FFF;
    color:var(--fpg-text);
    font-family:'Inter', system-ui, Helvetica, Arial, sans-serif;
    font-weight:400;
}

/* 2.1.01: content 1200px wide. Core's .container is 1400px, and .padding-x adds up to 60px a side.
   ⚠ Keep this above .fpg-narrow and .fpg-form-width, which narrow it further. */
.container { max-width:1320px; }

.frame p,
.frame li { line-height:1.65; }

h1, h2, h3, h4 {
    color:var(--fpg-purple);
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-weight:600;
}

.frame a.txt-link,
.frame main p a:not(.btn),
.frame main li a:not(.btn) { color:var(--fpg-purple-mid); text-decoration:underline; }

/* --- sections --- */
.fpg-section { padding:clamp(44px, 6vw, 84px) 0; }
.fpg-section--tint { background:var(--fpg-tint); }

.fpg-narrow { max-width:940px; }
.fpg-form-width { max-width:680px; }

.fpg-lead { font-size:1.1em; }

/* --- the plain pages (join, log in, contact …). 2.1.02: the heading band is .page-band, in
   page_body.css with the rest of the inner pages' furniture. --- */
.fpg-page { background:var(--fpg-tint); padding:clamp(34px, 5vw, 64px) 0; }

/* --- the top panel (home + the top pick's review) --- */
.fpg-hero {
    background:linear-gradient(115deg, var(--fpg-purple) 0%, var(--fpg-purple-mid) 100%);
    color:#FFF;
    padding:clamp(34px, 5vw, 64px) 0;
}
.fpg-hero__grid {
    align-items:center;
    display:grid;
    gap:clamp(24px, 4vw, 56px);
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
}
.frame .fpg-hero__badge {
    background:var(--fpg-amber);
    border-radius:999px;
    color:var(--fpg-purple);
    display:inline-block;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:0.85em;
    font-weight:600;
    letter-spacing:0.04em;
    line-height:1;
    margin:0 0 1em;
    padding:0.55em 1em;
    text-transform:uppercase;
}
.frame .fpg-hero__name {
    color:#FFF;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:clamp(2.1rem, calc(1.2rem + 3vw), 3.6rem);
    font-weight:700;
    line-height:1.1;
    margin:0;
}
.frame .fpg-hero__tag { color:#E9E1FA; font-size:1.2em; margin:0.5em 0 1.2em; }

.fpg-hero__lines { list-style:none; margin:0 0 1.6em; padding:0; }
.frame .fpg-hero__lines li { color:#E9E1FA; margin:0 0 0.8em; }
.fpg-hero__lines b {
    color:var(--fpg-amber);
    display:block;
    font-family:'Rubik', Helvetica, Arial, sans-serif;
    font-size:1.35em;
    font-weight:600;
}
.fpg-hero .btn-row { justify-content:flex-start; margin:0; }
.fpg-hero__img img {
    border-radius:var(--fpg-radius);
    display:block;
    height:auto;
    width:100%;
}

@media (max-width:820px) {
    .fpg-hero__grid { grid-template-columns:minmax(0, 1fr); }
}