/* love2.do - brand styles.
   Six petals around a hex heart: warm, calm, human. Never corporate.
   Signature type detail: sentences that matter end with a petal-coloured
   full stop (the wordmark's pink 2 and violet middot, echoed in prose).
   Contract classes (used by other templates - keep working):
   .nav .nav__brand .nav__links .nav__link .nav__email .nav__inline .shell
   .foot .hero .hero__lead .hero__cta .card .card--narrow .card__alt
   .btn .btn--ghost .btn--lg .flash .error + label/input inside .card       */

:root {
    /* brand palette (branding/brand.md) */
    --love2do-navy:       #0A2A68;
    --love2do-hot-pink:   #EF3F79;
    --love2do-lime:       #A6C63B;
    --love2do-blue:       #2D7DE0;
    --love2do-teal:       #1C9DB3;
    --love2do-violet:     #7655C8;
    --love2do-orange:     #F5A623;
    --love2do-purple-dot: #7A5CCF;
    --love2do-deep-hex:   #10275F;
    --love2do-bg-light:   #F4F5F7;
    --love2do-text-dark:  #1A2240;

    /* system role colours: two sides of the marketplace */
    --role-candidate: var(--love2do-hot-pink);  /* "You", hearts, person side */
    --role-employer:  var(--love2do-blue);      /* "The role", hiring side    */

    /* app tokens (legacy names kept - other templates rely on them) */
    --ink:         var(--love2do-text-dark);
    --muted:       #5B6480;
    --accent:      var(--love2do-hot-pink);
    --accent-deep: #D62E68;
    --navy:        var(--love2do-navy);
    --bg:          var(--love2do-bg-light);
    --paper:       #FFFFFF;
    --line:        #E3E5EE;
    --error:       #C0392B;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16.5px;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--love2do-blue); }
a:hover { color: var(--navy); }

h1, h2, h3 {
    color: var(--navy);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1 { font-weight: 800; }
h2 { font-weight: 800; }

code {
    background: #EBEDF3;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.9em;
}

:focus-visible {
    outline: 3px solid rgba(239, 63, 121, 0.45);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- header: sticky, softly frosted -------------------------------------- */

.nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 13px 24px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav__brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
    text-decoration: none; color: var(--navy);
}
.nav__brand:hover { color: var(--navy); }
.nav__mark { width: 27px; height: 27px; display: block; }
.nav__brand-2   { color: var(--accent); }             /* the pink "2"   */
.nav__brand-dot { color: var(--love2do-purple-dot); } /* the violet dot */
.nav__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav__link {
    text-decoration: none; color: var(--navy);
    font-size: 15px; font-weight: 600;
}
.nav__link:hover { color: var(--accent); }
.nav__email { color: var(--muted); font-size: 14px; }
.nav__inline { margin: 0; }

@media (max-width: 620px) {
    .nav__email { display: none; }
}

/* ---- page shell ----------------------------------------------------------
   App pages read best narrow; the landing composition earns more room.     */

.shell { max-width: 760px; margin: 0 auto; padding: 32px 22px 48px; }
body:has(.hero__text) .shell { max-width: 1060px; }

/* ---- hero: text beside the flower, not under it --------------------------
   The flower is the thesis; the asymmetric grid lets it anchor the page
   instead of decorating a centred stack.                                   */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto;
    align-items: center;
    gap: 24px 56px;
    padding: 46px 0 54px;
    text-align: left;
    /* the job stream runs wide beyond the svg box; clip it at the hero,
       never the page */
    overflow-x: clip;
}
.hero__text { min-width: 0; }
.hero h1 {
    margin: 0 0 16px;
    font-size: clamp(32px, 4.8vw, 50px);
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.hero__line { display: block; }
.hero__line--alt { color: #47548A; }
.hero__lead {
    color: var(--muted); font-size: 18.5px;
    max-width: 30em; margin: 0;
}
.hero__cta {
    display: flex; gap: 12px; align-items: center;
    flex-wrap: wrap; margin: 30px 0 0;
}
.hero .flower { margin: 0; }

/* the orchestrated entrance: petals bloom, then the words arrive */
.hero__text > * {
    animation: l2d-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.hero__text > :nth-child(1) { animation-delay: 0.15s; }
.hero__text > :nth-child(2) { animation-delay: 0.28s; }
.hero__text > :nth-child(3) { animation-delay: 0.4s; }
@keyframes l2d-rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 34px 0 40px;
    }
    .hero .flower { order: -1; margin: 0 auto; }
    .hero__text { max-width: none; }
    .hero__lead { margin: 0 auto; }
    .hero__cta { justify-content: center; }
}

/* coloured full stops - the wordmark's dots, carried into the prose */
.stop--pink   { color: var(--accent); }
.stop--violet { color: var(--love2do-purple-dot); }
.stop--blue   { color: var(--love2do-blue); }

/* the wordmark inline in running text: pink 2, violet middot, no wrap */
.brand-inline { font-weight: 650; color: var(--navy); white-space: nowrap; }

/* ---- the flower (inline SVG) --------------------------------------------- */

.flower { display: block; margin: 0 auto; }
.flower__petal { stroke-width: 14; stroke-linejoin: round; }
.flower--bloom .flower__petal {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: l2d-bloom 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.flower--bloom g:nth-of-type(1) .flower__petal { animation-delay: 0.05s; }
.flower--bloom g:nth-of-type(2) .flower__petal { animation-delay: 0.11s; }
.flower--bloom g:nth-of-type(3) .flower__petal { animation-delay: 0.17s; }
.flower--bloom g:nth-of-type(4) .flower__petal { animation-delay: 0.23s; }
.flower--bloom g:nth-of-type(5) .flower__petal { animation-delay: 0.29s; }
.flower--bloom g:nth-of-type(6) .flower__petal { animation-delay: 0.35s; }

@keyframes l2d-bloom {
    from { transform: scale(0.55); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.hero .flower {
    width: 265px;
    height: 265px;
    overflow: visible;
    filter: drop-shadow(0 3px 7px rgba(16, 39, 95, 0.18))
            drop-shadow(0 20px 42px rgba(16, 39, 95, 0.22));
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}
.hero .flower:hover { transform: scale(1.09); }

@media (max-width: 860px) {
    /* portrait: the river runs the full viewport width. The svg overflows
       horizontally (viewBox clipping off) and the hero clips the page edge,
       so role flowers drift right to left across the screen beneath the mark. */
    .hero { overflow: clip; }
    .hero .flower { width: 240px; height: 240px; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .flower--bloom .flower__petal { animation: none; }
    .hero__text > * { animation: none; }
    .hero .flower { transition: none; }
    .hero .flower:hover { transform: none; }
    .petal--moved { animation: none; }
}

/* ---- the gauge: the mark drawn at the depth of the evidence --------------
   Progress you can see. A petal deepens as the ways of knowing it stack up,
   and never falls to nothing - an empty petal is a ghost outline, so the
   mark is always the shape it has always been. The petals that just moved
   pulse twice, which is the whole point: a reaction you can feel land. */

.flower--gauge { margin: 0; flex: none; }
.flower--gauge .flower__petal,
.flower--gauge .flower__heart,
.flower--gauge .flower__ring { transition: fill-opacity 0.6s ease, stroke-dasharray 0.6s ease; }

.petal--moved {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: l2d-petal-pulse 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) 2;
}
@keyframes l2d-petal-pulse {
    0%, 100% { transform: scale(1); }
    45%      { transform: scale(1.12); }
}

.gauge-block {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin: 1.2rem 0 1.6rem;
}
.gauge-block__text { flex: 1 1 15rem; }
.gauge-count { margin: 0 0 0.3rem; font-size: 1.15rem; }
.gauge-next { margin: 0.5rem 0 0; }

/* the hirer's triage bar: how far through the list, nothing more */
.decided-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(16, 39, 95, 0.1);
    overflow: hidden;
    margin: 0.1rem 0 0.6rem;
    max-width: 18rem;
}
.decided-bar span {
    display: block;
    height: 100%;
    background: var(--love2do-navy, #10275F);
    opacity: 0.5;
    transition: width 0.5s ease;
}

/* ---- cards --------------------------------------------------------------- */

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 39, 95, 0.05);
}
.card--narrow { max-width: 420px; margin: 0 auto; }
.card__alt { color: var(--muted); font-size: 14px; margin-top: 16px; }
.card h1 { margin-top: 0; font-size: 26px; }
.card label { display: block; margin: 14px 0; font-weight: 600; color: var(--navy); }
.card input {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
    font-family: inherit; color: var(--ink); background: var(--paper);
}
.card input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(239, 63, 121, 0.18);
}
.card textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
    font-family: inherit; color: var(--ink);
}
.card select {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
    font-family: inherit; color: var(--ink); background: var(--paper);
}
.card select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(239, 63, 121, 0.18);
}

/* form-block: the job-spec textarea and visibility select once shared this
   inline, repeated on both role_specs/new and role_specs/edit. One class,
   named for what it is - a block-level form control filling its row. */
.form-block {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}

/* async generation: the try cards' drafting state (meta-refresh polling) */
.try-progress { margin: 14px 0 4px; }
.try-progress__title {
    font-weight: 800; color: var(--navy); margin: 0 0 6px;
    animation: l2d-drafting 1.6s ease-in-out infinite;
}
@keyframes l2d-drafting { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }
@media (prefers-reduced-motion: reduce) {
    .try-progress__title { animation: none; }
}

/* the personal invite link row on the profile page */
.invite-row { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; }
.invite-row .invite-link { flex: 1; width: auto; margin-top: 0; color: var(--muted); }
.invite-row .btn { flex-shrink: 0; }

/* ---- buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--accent); color: #fff;
    border: 0; border-radius: 999px;
    padding: 10px 20px;
    font-family: inherit; font-weight: 700; font-size: 15px;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
    background: var(--accent-deep); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 63, 121, 0.3);
}
.btn--ghost {
    background: transparent; color: var(--navy);
    border: 1.5px solid rgba(10, 42, 104, 0.35);
}
.btn--ghost:hover {
    background: #fff; color: var(--navy); border-color: var(--navy);
    transform: none; box-shadow: none;
}
.btn--lg { padding: 13px 26px; font-size: 16px; }

/* role-coloured CTAs: the door tells you whose door it is */
.btn--candidate { background: var(--role-candidate); }
.btn--candidate:hover { background: var(--accent-deep); box-shadow: 0 6px 16px rgba(239, 63, 121, 0.3); }
.btn--employer { background: var(--role-employer); }
.btn--employer:hover { background: #1D66C4; box-shadow: 0 6px 16px rgba(45, 125, 224, 0.3); }

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover { transition: none; transform: none; box-shadow: none; }
}

/* ---- flashes + errors ---------------------------------------------------- */

.flash {
    background: #E9F6F5; border: 1px solid #BCE4E0; color: #0F5C56;
    border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
}
.error { color: var(--error); font-weight: 600; }

/* ---- landing: the two loops ---------------------------------------------- */

.land-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin: 8px 0 20px;
}
@media (max-width: 720px) {
    .land-grid { grid-template-columns: 1fr; }
}
.land-grid .card { padding: 30px; }
.pitch h2 { margin: 10px 0 10px; font-size: 23px; }
.pitch p { margin: 0 0 10px; color: var(--muted); font-size: 15.5px; }
.pitch p:last-child { margin-bottom: 0; }
.pitch ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.pitch li { margin: 4px 0; }

/* pricing can seat three across on the wide shell */
@media (min-width: 980px) {
    body:has(.price) .land-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* eyebrow: tiny petal + label naming who each loop is for */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before {
    content: ""; width: 10px; height: 10px; flex: none;
    border-radius: 50% 50% 50% 3px;
    transform: rotate(45deg);
    background: var(--muted);
}
.eyebrow--pink::before   { background: var(--role-candidate); }
.eyebrow--blue::before   { background: var(--role-employer); }
.eyebrow--violet::before { background: var(--love2do-violet); }

/* ---- landing: two flowers, one match ------------------------------------- */

.match { text-align: center; padding: 34px 28px 30px; }
.match h2 { margin: 8px 0 10px; font-size: clamp(24px, 3vw, 30px); }
.match__copy { color: var(--muted); max-width: 36em; margin: 0 auto 8px; }
/* Thesis verbs: each tinted its petal colour (mixed toward ink for contrast)
   so the sentence doubles as a legend for the mark. */
.match__copy b { font-weight: 650; }
.v-loves, .v-needs    { color: color-mix(in srgb, var(--love2do-hot-pink) 78%, var(--ink)); }
.v-gives, .v-rewards  { color: color-mix(in srgb, var(--love2do-violet)   78%, var(--ink)); }
.v-learns, .v-demands { color: color-mix(in srgb, var(--love2do-orange)   62%, var(--ink)); }
.v-values             { color: color-mix(in srgb, var(--love2do-teal)     78%, var(--ink)); }
.v-notices            { color: color-mix(in srgb, var(--love2do-blue)     78%, var(--ink)); }
.v-thrives, .v-drains { color: color-mix(in srgb, var(--love2do-lime)     55%, var(--ink)); }
.match__svg { display: block; margin: 4px auto 0; max-width: 100%; height: auto; }
.match__legend {
    display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
    margin: 2px 0 12px; font-size: 14px; color: var(--muted); font-weight: 600;
}
.key { display: inline-flex; align-items: center; gap: 7px; }
.key::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--muted);
}
.key--pink::before   { background: var(--role-candidate); }
.key--blue::before   { background: var(--role-employer); }
.key--violet::before { background: var(--love2do-violet); }
.match__note { color: var(--navy); font-weight: 600; margin: 0; }

/* ---- pricing page --------------------------------------------------------- */

.price { color: var(--muted); margin: 2px 0 14px; }
.price__amount { font-size: 34px; font-weight: 800; color: var(--ink); }

/* ---- misc ----------------------------------------------------------------- */

.account__name { font-weight: 600; color: var(--navy); }
.account__kind { color: var(--muted); font-size: 14px; }

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

.foot {
    border-top: 1px solid var(--line);
    background: var(--paper);
    margin-top: 48px;
    padding: 36px 22px 40px;
    text-align: center;
    color: var(--muted); font-size: 14px;
}
.foot__brand {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; color: var(--navy); font-size: 17px;
}
.foot__taglines { color: var(--muted); margin: 10px 0 18px; font-weight: 600; }
.foot__sep { margin: 0 8px; color: var(--line); }
.foot__links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 22px; margin: 0 0 18px;
}
.foot__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot__links a:hover { color: var(--accent); }
.foot__legal { color: var(--muted); font-size: 13px; margin: 0; }
.foot__legal a { color: var(--muted); }


/* ---- hero: a river of roles, one match -------------------------------------
   Role flowers of different sizes drift right to left beneath the person
   flower. Every 12s the blue one is picked out of the flow: it rises,
   interlocks at 30deg (its petals fill the gaps), and the pair glows violet.
   Reduced motion: the matched pair, softly lit, still. */

.river-f, .role-match {
    transform-box: view-box;
    transform-origin: 50% 50%;
    mix-blend-mode: multiply;
}
.river-f {
    opacity: 0;
    animation-name: l2d-river;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes l2d-river {
    0%   { transform: translate(340px, var(--ry)) rotate(20deg) scale(var(--rs)); opacity: 0; }
    7%   { opacity: 0.55; }
    88%  { opacity: 0.55; }
    100% { transform: translate(-140px, var(--ry)) rotate(-24deg) scale(var(--rs)); opacity: 0; }
}

.role-match { opacity: 0; animation: l2d-pick 12s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }

/* the heart hole lights up gold while the matched pair holds together */
.hero-heart { opacity: 0; animation: l2d-heart 12s linear infinite; }
@keyframes l2d-heart {
    0%, 38%   { opacity: 0; }
    44%, 52%  { opacity: 1; }
    60%, 100% { opacity: 0; }
}

@keyframes l2d-pick {
    0%   { transform: translate(340px, 58px) rotate(24deg) scale(0.24); opacity: 0; }
    5%   { opacity: 0.8; }
    30%  { transform: translate(0, 58px) rotate(4deg) scale(0.24); opacity: 0.85; }
    38%  { transform: translate(0, -6px) rotate(4deg) scale(1.04); opacity: 0.9; }
    46%  { transform: translate(0, 0) rotate(30deg) scale(0.94); opacity: 0.85; }
    56%  { transform: translate(0, 0) rotate(30deg) scale(0.9); opacity: 0; }
    100% { transform: translate(0, 0) rotate(30deg) scale(0.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .river-f { animation: none; opacity: 0; }
    .role-match { animation: none; opacity: 0; }
    .hero-heart { animation: none; opacity: 0; }
}

/* ---- artifact pages: the pressed flower ------------------------------------
   A profile / role spec is the shareable artifact. Each facet card takes its
   colour from the flower's own wheel, and every keyword is a petal-tinted
   chip - the page reads as the flower, pressed flat. Still, printable,
   screenshot-friendly: no motion here. */

.artifact-head { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; }
.artifact-head img { flex: none; }
.artifact-head h1 { margin: 0; }
.artifact__summary {
    font-size: 19px; font-weight: 600; color: var(--ink);
    max-width: 40em; margin: 10px 0 4px;
}

.petals {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin: 20px 0 6px;
}
.petal-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--petal, var(--line));
    border-radius: 14px;
    padding: 15px 17px 14px;
}
.petal-card h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; font-size: 12.5px; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.petal-card h3::before {
    content: ""; width: 10px; height: 10px; flex: none;
    border-radius: 50% 50% 50% 3px; transform: rotate(45deg);
    background: var(--petal, var(--muted));
}
.petal-card .card__alt { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.chip {
    background: color-mix(in srgb, var(--petal, var(--muted)) 11%, white);
    border: 1px solid color-mix(in srgb, var(--petal, var(--muted)) 32%, white);
    color: var(--ink);
    border-radius: 999px; padding: 3px 12px;
    font-size: 14.5px; font-weight: 600;
}

/* the wheel: every facet owns one petal colour, everywhere it appears */
.petal--loves,   .petal--needs   { --petal: var(--love2do-hot-pink); }
.petal--gives,   .petal--rewards { --petal: var(--love2do-violet); }
.petal--learns,  .petal--demands { --petal: var(--love2do-orange); }
.petal--values                    { --petal: var(--love2do-teal); }
.petal--notices, .petal--grows   { --petal: var(--love2do-blue); }
.petal--thrives, .petal--drains  { --petal: var(--love2do-lime); }
/* comparison groupings borrow the same language */
.petal--overlap  { --petal: var(--love2do-violet); }
.petal--stretch  { --petal: var(--love2do-blue); }
.petal--warning  { --petal: var(--love2do-orange); }

/* the honest pitch: the money paragraph gets the match colour */
.pitch-quote {
    margin: 18px 0; padding: 16px 20px;
    border-left: 4px solid var(--love2do-violet);
    background: #F7F5FC; border-radius: 10px;
    font-size: 17px; color: var(--ink);
}

/* comparison: the score is the headline */
.score-big {
    font-size: 54px; font-weight: 800; line-height: 1;
    color: var(--love2do-violet); letter-spacing: -0.03em;
    margin: 6px 0 2px;
}
.score-big small { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.artifact-actions {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px;
}

/* when the match locks in, the candidate flower's petals light up: a violet
   outline glow tracing each petal, pulsing softly with the match glow */
.hero .flower__petal { animation: l2d-bloom 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards,
                                  l2d-petal-glow 12s ease-in-out infinite; }
@keyframes l2d-petal-glow {
    0%, 44%   { filter: drop-shadow(0 0 0 rgba(118, 85, 200, 0)); }
    52%       { filter: drop-shadow(0 0 6px rgba(118, 85, 200, 0.9)); }
    62%       { filter: drop-shadow(0 0 3px rgba(118, 85, 200, 0.5)); }
    72%       { filter: drop-shadow(0 0 6px rgba(118, 85, 200, 0.85)); }
    90%       { filter: drop-shadow(0 0 2px rgba(118, 85, 200, 0.4)); }
    97%, 100% { filter: drop-shadow(0 0 0 rgba(118, 85, 200, 0)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero .flower__petal {
        animation: none;
        filter: drop-shadow(0 0 3px rgba(118, 85, 200, 0.45));
    }
}

/* ---- landing v2: try panel, spread steps, example cards --------------------
   Value before sign-in. The try panel previews a profile / role spec inline,
   the four-step spread shows how it travels, and the example cards show the
   thing that actually gets passed around. Appended section, new classes only
   (try- / steps- / example- plus small hero + footer additions) - nothing
   above changes. No new animation: the mark stays the only motion. */

.hero__sub {
    color: var(--muted); font-size: 15.5px;
    max-width: 30em; margin: 12px 0 0;
}
.hero__trust {
    color: var(--muted); font-size: 13.5px; margin: 14px 0 0;
}
@media (max-width: 860px) {
    .hero__sub { margin-left: auto; margin-right: auto; }
}

/* the try panel: both doors open before anyone signs in */
.try-grid { scroll-margin-top: 84px; }
.try-card { scroll-margin-top: 84px; }

/* each door lifts and takes its side's colour on hover or while typing */
.try-card {
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.2s ease, border-color 0.2s ease;
}
.try-card:hover, .try-card:focus-within { transform: translateY(-3px); }
#try-people:hover, #try-people:focus-within {
    border-color: color-mix(in srgb, var(--role-candidate) 45%, var(--line));
    box-shadow: 0 12px 30px rgba(239, 63, 121, 0.16);
}
#try-hiring:hover, #try-hiring:focus-within {
    border-color: color-mix(in srgb, var(--role-employer) 45%, var(--line));
    box-shadow: 0 12px 30px rgba(45, 125, 224, 0.16);
}
@media (prefers-reduced-motion: reduce) {
    .try-card { transition: none; }
    .try-card:hover, .try-card:focus-within { transform: none; }
}
.try-card h2 { margin: 10px 0 4px; font-size: 23px; }
.try-form label { font-size: 15px; margin: 12px 0; }
.try-form textarea { font-size: 15px; resize: vertical; }
.try-form button { margin-top: 8px; }

/* the CV door is the front door: paste or upload, no prompts first */
.try-cv__file input { font-size: 14px; }
.try-cv__note { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }

/* CSS-only tabs. The radios are the real control - visually hidden but
   NEVER display:none, so they keep focus and native arrow-key movement -
   and they sit outside the form, so switching tabs submits nothing. The
   :checked ~ form selector reaches into the form from a preceding
   sibling, which is why the markup is ordered the way it is. */
.cv-intake__radio {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%);
}
.cv-intake__tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 14px 0 0;
    border-bottom: 1px solid var(--line);
}
.cv-intake__tab {
    padding: 8px 12px;
    font-size: 14.5px; font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cv-intake__tab:hover { color: var(--ink); }
.cv-intake__panel { display: none; }
#cv-src-paste:checked    ~ form .cv-intake__panel--paste,
#cv-src-file:checked     ~ form .cv-intake__panel--file,
#cv-src-linkedin:checked ~ form .cv-intake__panel--linkedin { display: block; }
#cv-src-paste:checked    ~ .cv-intake__tabs [for="cv-src-paste"],
#cv-src-file:checked     ~ .cv-intake__tabs [for="cv-src-file"],
#cv-src-linkedin:checked ~ .cv-intake__tabs [for="cv-src-linkedin"] {
    color: var(--role-candidate);
    border-bottom-color: var(--role-candidate);
}
/* keyboard users must be able to see which tab they are on */
.cv-intake__radio:focus-visible ~ .cv-intake__tabs [for="cv-src-paste"],
.cv-intake__radio:focus-visible ~ .cv-intake__tabs [for="cv-src-file"] {
    outline: 2px solid var(--role-candidate);
    outline-offset: 2px;
}
/* ---- 321-web-ux: breadcrumbs, wizard progress, button rows ---------------
   Ported from the skill's ux.css. Past a front door every page is one step
   of a wizard: one question, one primary action, a visible "Step N of M" so
   the end is in sight, and a Back link so no step is a trap. */

.crumbs { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* The progress FLOWER, not a bar. The mark comes into bloom as the pipeline
   advances, so every step pays back with a petal and the onboarding teaches
   the visual language the gauge uses after signup. The flower carries the
   identity; the words beside it carry the exact claim. */
.wizard {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 20px;
}
.wizard-flower { flex: none; display: block; overflow: visible; }
.wizard-flower__petal { stroke-width: 14; stroke-linejoin: round; }
.wizard__text { min-width: 0; }
.wizard__step {
    font-size: 12px; color: var(--muted); letter-spacing: .07em;
    text-transform: uppercase; font-weight: 700; margin: 0;
}
/* no step NAME here on purpose: the breadcrumb already names the step and
   the h1 below says what the page asks. Two of the three was one too many. */

/* only the newest petal blooms, once - one moment, not a light show */
.wizard-flower__petal--fresh {
    transform-box: view-box; transform-origin: 50% 50%;
    animation: l2d-petal-land 0.62s cubic-bezier(0.2, 0.75, 0.3, 1) backwards;
}
@keyframes l2d-petal-land {
    from { transform: scale(0.5) rotate(-14deg); opacity: 0; }
    to   { transform: scale(1)   rotate(0);      opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .wizard-flower__petal--fresh { animation: none; }
}

.btn-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.btn-row .cancel { color: var(--muted); text-decoration: none; }
.btn-row .cancel:hover { text-decoration: underline; }


/* the waiting phrase: advances with the draft's real age on each refresh,
   and the three dots breathe so a still page still feels alive */
.waiting__phrase {
    font-size: 19px; font-weight: 700; color: var(--navy);
    margin: 14px 0 4px; letter-spacing: -0.01em;
}
.waiting__dots::after {
    content: '...';
    display: inline-block;
    animation: l2d-ellipsis 1.4s steps(4, end) infinite;
    clip-path: inset(0 100% 0 0);
}
@keyframes l2d-ellipsis {
    to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
    .waiting__dots::after { animation: none; clip-path: none; }
}

/* a page that belongs to a person: the silhouette says whose, and that
   nobody knows whose yet */
.profile-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 1.2rem; }
.profile-head > div { min-width: 0; }
.profile-head h1 { margin-top: 0; }
.profile-head .pipeline-card__lead { margin-bottom: 0; }
.silhouette { flex: none; display: block; }
@media (max-width: 560px) {
    .profile-head { gap: 14px; }
    .silhouette { width: 52px; height: 52px; }
}

/* the step page itself: narrow, so the one action has nowhere to hide */
.pipeline-card { max-width: 46rem; margin-left: auto; margin-right: auto; }
.pipeline-card__lead { color: var(--muted); margin: 0 0 1.2rem; }
.pipeline-cta { margin: 1.8rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); }
.pipeline-cta__note { color: var(--muted); font-size: 13.5px; margin: 0.7rem 0 0; }

/* step 3: the running count is the payback - each answer visibly adds up */
.sharpen__count {
    background: color-mix(in srgb, var(--role-candidate) 8%, var(--paper));
    border-left: 3px solid var(--role-candidate);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14.5px;
    margin: 0 0 1.2rem;
}

/* the LinkedIn tab: four steps, then the same upload control */
.cv-intake__lead { font-size: 14.5px; margin: 14px 0 10px; }
.cv-intake__steps {
    margin: 0 0 6px;
    padding-left: 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
}
.cv-intake__steps b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .cv-intake__tab { transition: none; }
}
.try-preview__from-cv {
    font-size: 14px; font-weight: 600; margin: 0 0 10px;
    color: color-mix(in srgb, var(--role-candidate) 80%, var(--ink));
}

/* the inline preview: a dashed seam between the asking and the answer */
.try-preview {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.try-preview .artifact__summary { margin: 0 0 4px; font-size: 17.5px; }
.petals.try-petals {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin: 14px 0 4px;
}
.try-preview__title { margin: 0 0 6px; font-size: 18px; }
.try-preview__summary { color: var(--muted); margin: 0; font-size: 15.5px; }
.try-preview .pitch-quote { margin: 14px 0; font-size: 15.5px; }
.try-preview__cta { margin: 16px 0 0; }
.try-preview__ask { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

/* how it spreads: a real sequence, so the steps earn their numbers */
.steps { margin: 0 0 20px; }
.steps h2 { margin: 10px 0 16px; font-size: clamp(22px, 3vw, 27px); }
.steps-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px; margin: 0; padding: 0; list-style: none;
}
.steps-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; padding: 16px 17px 14px;
}
.steps-card h3 { margin: 10px 0 6px; font-size: 16px; }
.steps-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.steps-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50% 50% 50% 5px;
    color: #fff; font-weight: 800; font-size: 14px;
}
.steps-num--pink   { background: var(--love2do-hot-pink); }
.steps-num--violet { background: var(--love2do-violet); }
.steps-num--blue   { background: var(--love2do-blue); }
.steps-num--lime   { background: var(--love2do-lime); }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }

/* example shareable cards: exactly the size of the thing in the inbox */
.example { margin: 0 0 20px; }
.example > .eyebrow { margin: 0 0 12px; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .example-grid { grid-template-columns: 1fr; } }
.example-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px 20px;
    box-shadow: 0 1px 2px rgba(16, 39, 95, 0.05);
}
.example-card--pink { border-top-color: var(--role-candidate); }
.example-card--blue { border-top-color: var(--role-employer); }
.example-tag {
    margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.example-quote {
    margin: 0 0 16px; font-size: 17.5px; font-weight: 600;
    color: var(--ink); line-height: 1.45;
}
.example-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.example-links a {
    display: inline-block; text-decoration: none;
    color: var(--navy); font-size: 13.5px; font-weight: 600;
    border: 1.5px solid rgba(10, 42, 104, 0.3);
    border-radius: 999px; padding: 5px 13px;
}
.example-links a:hover {
    border-color: var(--navy); background: #fff; color: var(--navy);
}

/* footer trust strap: the promise, above the links */
.foot__trust { color: var(--navy); font-weight: 600; font-size: 14px; margin: 0 0 16px; }

/* points-true badge + match pool card */
.points-true-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--love2do-lime) 25%, white);
    color: color-mix(in srgb, var(--love2do-lime) 55%, var(--ink));
    font-weight: 650;
}
.points-true-todo { color: color-mix(in srgb, var(--ink) 70%, white); }

/* ---- matches: ranked cards from the two-phase retrieval -------------------- */

.match-card .match-headline { font-size: 1.2rem; }
.match-card .match-headline b { color: var(--love2do-hot-pink); font-size: 1.6rem; }
.match-veto { color: color-mix(in srgb, var(--love2do-orange) 70%, var(--ink)); font-weight: 650; }
.match-range {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--love2do-teal) 18%, white);
    color: color-mix(in srgb, var(--love2do-teal) 60%, var(--ink));
    font-weight: 650;
}
/* the passive candidate - in work, not looking, open to the right role.
   This is the attraction, so it reads as the premium find: lime, small,
   above the other chips. */
.match-passive {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--love2do-lime) 25%, white);
    color: color-mix(in srgb, var(--love2do-lime) 45%, var(--ink));
    font-weight: 650;
    font-size: 0.85em;
}

/* try-page verdicts: love/drain archetype cards */
.verdicts { margin-top: 18px; }
.verdicts__heading { margin: 14px 0 6px; }
.verdicts__heading--drain { color: color-mix(in srgb, var(--love2do-orange) 70%, var(--ink)); }
.verdict-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0;
}
.verdict-card--drain { background: color-mix(in srgb, var(--love2do-orange) 7%, white); }
.verdict-card h4 { margin: 0 0 4px; }
.verdict-why { font-weight: 650; margin: 6px 0 0; }
/* the wait states bloom: while a page drafts, the flower breathes -
   each petal dips in turn, a shimmer travelling round the ring */
.try-progress .flower--throb { margin: 0 auto 10px; }
.flash.try-progress .flower--throb { display: inline-block; vertical-align: -12px; margin: 0 8px 0 0; }
.flower--throb .flower__petal {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: l2d-throb 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.flower--throb g:nth-of-type(1) .flower__petal { animation-delay: 0s; }
.flower--throb g:nth-of-type(2) .flower__petal { animation-delay: 0.25s; }
.flower--throb g:nth-of-type(3) .flower__petal { animation-delay: 0.5s; }
.flower--throb g:nth-of-type(4) .flower__petal { animation-delay: 0.75s; }
.flower--throb g:nth-of-type(5) .flower__petal { animation-delay: 1s; }
.flower--throb g:nth-of-type(6) .flower__petal { animation-delay: 1.25s; }
@keyframes l2d-throb {
    0%, 55%, 100% { opacity: 1;    transform: scale(1); }
    22%           { opacity: 0.35; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .flower--throb .flower__petal { animation: none; }
}

.verdict-react { display: flex; gap: 8px; margin-top: 8px; }
.verdict-noted { font-weight: 650; margin: 8px 0 0; color: color-mix(in srgb, var(--love2do-teal) 60%, var(--ink)); }

/* the intro handshake: requested/declined stay neutral, accepted goes teal */
.intro-status { font-weight: 650; margin: 8px 0 0; }
.intro-status--accepted { color: color-mix(in srgb, var(--love2do-teal) 60%, var(--ink)); }

/* the triage row on match cards + the yes/not lists */
.react-row { display: flex; gap: 8px; margin-top: 10px; }
.yes-list__heading { color: color-mix(in srgb, var(--love2do-lime) 55%, var(--ink)); }
.not-list { margin-top: 18px; }
.not-list > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.not-list .match-card { opacity: 0.75; }