/* ==========================================================================
   /report-card-comment-generator/ (SEO pillar 3), loaded on that page only,
   after site.css. Everything is scoped by the rc- prefix.

   The product mocks are hand-built HTML, simpler than the real app but in its
   look (cyan buttons, pastel panels, white cards). Each mock SHIPS FINISHED:
   the CSS below draws its end state, which is what no-JS and reduced-motion
   visitors see. comment-generator.js rewinds a mock (.rc-armed), then replays
   it (.rc-run) once it scrolls into view: every [data-rc-at] element gets
   .rc-on at that many ms, every [data-rc-off] gets .rc-off. The "Animation
   states" block at the end of this file turns those classes into motion.
   ========================================================================== */

/* Display value an element returns to while it is visible mid-animation.
   Not inherited, so a wrapper's value never leaks into the mocks inside it. */
@property --rc-d {
    syntax: '*';
    inherits: false;
}

.rc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Page rhythm --------------------------------------------------------------- */
.rc-page .reveal { transition-delay: var(--rd, 0s); }
.rc-page .btn .icon { transition: transform .2s ease; }
.rc-page .btn:hover .icon { transform: translateX(3px); }

/* CTAs: bigger, white text on blue (Fabien, 2026-10-23). #0095d9 rather than the #00b7ff
   brand cyan: white on #00b7ff is 2.3:1, white on #0095d9 is 3.3:1, which clears the 3:1
   large-text bar at this size (19.2px bold). Keep the font at or above 1.17rem, or the
   contrast requirement rises to 4.5:1 and this blue fails it. */
.rc-page main .btn {
    max-width: 100%;
    padding: 17px 34px;
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}
.rc-page main .btn .icon { width: 1.1em; height: 1.1em; }
.rc-page main .btn-primary {
    background: #0095d9;
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(0, 149, 217, .7);
}
.rc-page main .btn-primary:hover { filter: brightness(1.06); }

/* ---- 1. Hero: copy left, the product right ------------------------------------- */
.rc-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f2fbff 0%, #ffffff 100%);
    padding: calc(var(--nav-h) + 60px) 0 88px;
}
.rc-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 56px;
    align-items: center;
}
.rc-hero h1 {
    font-size: clamp(1.85rem, 3.5vw, 2.7rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--ink-900);
    text-wrap: balance;
}
.rc-q { display: block; margin-bottom: 8px; color: var(--cyan-deep); }
.rc-lead { margin-top: 20px; max-width: 36em; font-size: 1.1rem; line-height: 1.7; color: var(--ink-600); }
.rc-hero .hero-actions { justify-content: flex-start; margin-top: 30px; }
.rc-support {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-600);
}
.rc-support::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--cyan); }

/* Load-in: the copy rises line by line, then the app window */
.rc-hero-copy > * { animation: rc-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.rc-hero-copy > :nth-child(2) { animation-delay: .08s; }
.rc-hero-copy > :nth-child(3) { animation-delay: .16s; }
.rc-hero-copy > :nth-child(4) { animation-delay: .24s; }
@keyframes rc-rise { from { opacity: 0; transform: translateY(16px); } }

.rc-hero-media { position: relative; }
.rc-window {
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-float);
    font: 400 13px/1.5 var(--font-sans);
    color: var(--ink-600);
    animation: rc-rise .9s cubic-bezier(.2, .7, .2, 1) .15s backwards;
    transition: transform .3s ease, box-shadow .3s ease;
}
.rc-hero-media:hover .rc-window { transform: translateY(-3px); box-shadow: 0 30px 70px -18px rgba(2, 48, 84, .3); }

.rc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid #eef2f7;
}
.rc-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 18px; padding: 16px 16px 12px; }
.rc-student { padding-right: 16px; border-right: 1px solid #eef2f7; }
.rc-total { margin-top: 12px; font: 800 20px/1.2 var(--font-sans); letter-spacing: -.01em; }
.rc-total-sm { margin-top: 6px; font-size: 16px; }
.rc-asof { font-size: 10.5px; color: var(--ink-500); }
.rc-grades { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.rc-grades li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-grades b { flex: none; width: 32px; font-variant-numeric: tabular-nums; }
.rc-sugg .rc-press-wrap { margin-top: 14px; }

.rc-draft { margin: 0 16px 16px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fbfdff; }
.rc-draft-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.rc-copy-ic { margin-left: auto; width: 15px; height: 15px; color: var(--ink-500); }
.rc-draft-body { position: relative; margin-top: 8px; }
.rc-draft-body p { font-size: 12.5px; line-height: 1.6; color: var(--ink-900); }

/* ---- Sections: copy beside a product stage ------------------------------------ */
.rc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.rc-split--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.rc-split--flip > .rc-copy { order: 2; }

.rc-copy .section-title { line-height: 1.2; text-wrap: balance; }
.rc-copy > p { margin-top: 16px; font-size: 1.04rem; line-height: 1.7; color: var(--ink-600); }
.rc-copy-h3 { margin-top: 26px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); }
.rc-copy > .rc-copy-h3 + p { margin-top: 8px; }

.rc-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.rc-points li { position: relative; padding-left: 28px; font-size: 1.02rem; line-height: 1.65; color: var(--ink-600); }
.rc-points li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: .6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 183, 255, .16);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .2s;
}
.rc-points li:nth-child(2)::before { transition-delay: .32s; }
.rc-points li:nth-child(3)::before { transition-delay: .44s; }
.rc-page .reveal:not(.in) .rc-points li::before { transform: scale(0); }
.rc-points b { font-weight: 700; color: var(--ink-900); }
.rc-copy > .rc-points + p { margin-top: 20px; }

.rc-cta { margin-top: 30px; }
.rc-cta-center { display: flex; justify-content: center; margin-top: 48px; }

/* Pastel stage the mock sits on (the home page's panel colours) */
.rc-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 40px 36px;
    border-radius: var(--radius-lg);
}
.rc-stage-sm { min-height: 260px; padding: 32px 28px; }
.rc-t-cyan { background: #e0f7fa; }
.rc-t-violet { background: #f3e5f5; }
.rc-t-green { background: #f1f8e9; }
.rc-t-pink { background: #fce4ec; }
.rc-t-blue { background: #e3f2fd; }
.rc-t-amber { background: #fff8e1; }
.rc-t-lav { background: #ede7f6; }

/* ---- 3. Three frames in sequence ------------------------------------------------- */
.rc-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rc-step {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.rc-step .rc-stage { min-height: 340px; padding: 24px 16px; border-radius: 16px; }
.rc-step-text { padding: 18px 10px 8px; }
.rc-step-text h3, .rc-flow-text h3 { margin-top: 12px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); }
.rc-step-text p, .rc-flow-text p { margin-top: 8px; font-size: .97rem; line-height: 1.65; color: var(--ink-600); }

.rc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--cyan);
    border-radius: 50%;
    background: var(--cyan);
    color: #08344f; /* the .btn-primary pairing: white on cyan is 2.3:1 */
    font: 700 .85rem var(--font-sans);
}

/* Visually hidden, still read by screen readers */
.rc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 7. How it works: frame + text card rows -------------------------------------- */
.rc-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.rc-flow-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; }
/* Even rows mirror: text card left, stage right, and the stage keeps the wider track */
.rc-flow-row:nth-child(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.rc-flow-row:nth-child(even) > .rc-stage { order: 2; }
.rc-flow-row .rc-stage { min-height: 400px; }
.rc-flow-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 36px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.rc-flow-text h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.rc-flow-text p { font-size: 1rem; }
.rc-uiname { font-weight: 600; color: var(--ink-900); }

/* ---- 8. Lead + small edit mock, FAQ below ------------------------------------------ */
.rc-split-faq { margin-bottom: 56px; }

/* Smooth FAQ open where the browser can animate to height:auto */
@supports (interpolate-size: allow-keywords) {
    .rc-page { interpolate-size: allow-keywords; }
    .rc-page .faq::details-content {
        height: 0;
        overflow: clip;
        transition: height .3s ease, content-visibility .3s allow-discrete;
    }
    .rc-page .faq[open]::details-content { height: auto; }
}

/* ---- 9. Close -------------------------------------------------------------------- */
.rc-close { padding: 96px 0; }
.rc-close-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: center;
}
.rc-close .section-title { line-height: 1.2; text-wrap: balance; }
.rc-close .section-sub { margin-top: 14px; font-size: 1.08rem; }
.rc-close .hero-actions { justify-content: flex-start; margin-top: 28px; }
.rc-close-media { position: relative; display: flex; justify-content: center; padding-bottom: 42px; }

/* ==========================================================================
   Mock primitives
   ========================================================================== */
.rc-frame {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 16px;
    box-shadow: 0 18px 44px -22px rgba(2, 48, 84, .32);
    font: 400 13px/1.5 var(--font-sans);
    color: var(--ink-600);
    text-align: left;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.rc-stage:hover .rc-frame, .rc-step:hover .rc-frame, .rc-close-media:hover .rc-frame {
    transform: translateY(-3px);
    box-shadow: 0 26px 56px -22px rgba(2, 48, 84, .38);
}
.rc-mini { max-width: 340px; font-size: 12px; }
.rc-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
}
.rc-frame-body { padding: 14px; }

.rc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 700 10px/1.3 var(--font-sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
}
.rc-label .icon { width: 12px; height: 12px; color: var(--cyan-deep); }
.rc-label-gap { margin-top: 14px; margin-bottom: 6px; }

.rc-who { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.rc-who-sm { gap: 7px; font-size: 12.5px; }
.rc-who .rc-state { margin-left: auto; }
.rc-ava {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e040fb;
    color: #fff;
    font: 700 11px var(--font-sans);
}
.rc-ava-sm { width: 24px; height: 24px; font-size: 9.5px; }

.rc-course {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 3px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #0aa5e8;
    color: #fff;
    font: 600 12px/1.2 var(--font-sans);
    white-space: nowrap;
    box-shadow: 0 8px 18px -10px rgba(0, 140, 210, .8);
}
.rc-btn .icon { width: 13px; height: 13px; }
.rc-btn-sm { padding: 5px 11px; font-size: 11px; }
.rc-btn-ghost { background: #fff; color: var(--cyan-deep); border: 1px solid #9ad9f7; box-shadow: none; }
.rc-btn-green { background: #22c55e; box-shadow: 0 8px 18px -10px rgba(22, 163, 74, .8); }
.rc-press-wrap { position: relative; display: inline-flex; }

.rc-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--ink-600);
    font: 600 10.5px/1.5 var(--font-sans);
    white-space: nowrap;
}
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.rc-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font: 700 10.5px/1.5 var(--font-sans);
    white-space: nowrap;
}
.rc-state .icon { width: 11px; height: 11px; stroke-width: 3; }
.rc-state-draft { --rc-d: inline-flex; background: #fff3e6; color: #c2410c; }
.rc-state-ok { background: rgba(34, 197, 94, .13); color: #15803d; }

.rc-progress { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rc-progress-wide { display: flex; margin-top: 14px; }
.rc-track { position: relative; flex: none; display: block; width: 84px; height: 6px; border-radius: 99px; background: #e8eef4; overflow: hidden; }
.rc-progress-wide .rc-track { flex: 1; width: auto; }
.rc-fill { display: block; width: var(--w, 100%); height: 100%; border-radius: inherit; background: var(--cyan); }
.rc-fill-green, .rc-fill-turn { background: #22c55e; }
.rc-progress-txt { font-size: 11px; color: var(--ink-500); white-space: nowrap; }
.rc-done-txt { color: #16a34a; font-weight: 700; }

/* Suggestions: strengths (+) and areas to grow (→), as the app lists them */
.rc-sugg-h { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink-900); }
.rc-sugg-strength { color: #16a34a; }
.rc-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.rc-list li { position: relative; padding-left: 15px; font-size: 12px; line-height: 1.45; color: var(--ink-900); }
.rc-list li::before { content: "+"; position: absolute; left: 1px; top: 0; font-weight: 700; color: #16a34a; }
.rc-list-next li::before { content: "\2192"; left: 0; color: var(--cyan-deep); }

/* Text field, placeholder, caret */
.rc-field {
    position: relative;
    display: block;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-900);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.rc-field-sm { min-height: 46px; }
.rc-field-line { flex: 1; min-height: 32px; padding: 6px 10px; border-radius: 9px; } /* one line, typed or not */
.rc-ph { --rc-d: inline; color: #94a3b8; }
.rc-field > .rc-ph.rc-out { position: absolute; top: 8px; left: 10px; right: 10px; }
.rc-field-line > .rc-ph.rc-out { top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-caret {
    --rc-d: inline-block;
    width: 1.5px;
    height: 1.1em;
    margin-left: 1px;
    vertical-align: -2px;
    background: var(--cyan-deep);
    animation: rc-blink 1s steps(1) infinite;
}
@keyframes rc-blink { 50% { opacity: 0; } }

/* Loading lines while a draft is on its way */
.rc-shimmer { --rc-d: grid; position: absolute; top: 2px; left: 0; right: 0; gap: 8px; }
.rc-field > .rc-shimmer { top: 10px; left: 10px; right: 10px; }
.rc-shimmer i {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #e8eef4 0%, #d4ecfb 45%, #e8eef4 90%) 0 0 / 200% 100%;
    animation: rc-shim 1.1s linear infinite;
}
.rc-shimmer i:nth-child(2) { width: 90%; }
.rc-shimmer i:nth-child(3) { width: 62%; }
@keyframes rc-shim { to { background-position: -200% 0; } }

.rc-spin {
    --rc-d: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #cfe7f6;
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: rc-spin .7s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

.rc-ok-dot {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
}
.rc-ok-dot .icon { width: 11px; height: 11px; stroke-width: 3; }

/* Stacked alternatives that swap in place (same grid cell, so nothing jumps) */
.rc-swap { display: grid; }
.rc-swap > * { grid-area: 1 / 1; }
.rc-swap-inline { display: inline-grid; }

/* The pointer that walks over and clicks a control */
.rc-cursor {
    position: absolute;
    right: -8px;
    bottom: -16px;
    z-index: 5;
    width: 20px;
    height: 20px;
    fill: #fff;
    stroke: var(--ink-900);
    stroke-width: 1.6;
    stroke-linejoin: round;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(2, 48, 84, .3));
}

/* Skip / Replay control, added by the script. It shows from the moment a mock starts
   playing ("Skip" jumps to the finished frame, WCAG 2.2.2) and turns into "Replay" when
   the mock is done. It never hides again after that, so keyboard focus is never lost. */
.rc-replay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border: 1px solid rgba(2, 48, 84, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--ink-600);
    font: 600 .74rem var(--font-sans);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, color .15s ease, border-color .15s ease;
}
.rc-run .rc-replay, .rc-done .rc-replay { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rc-run:not(.rc-done) .rc-replay-again, .rc-done .rc-replay-skip { display: none; }
.rc-replay > span { display: inline-flex; align-items: center; gap: 6px; }
.rc-replay:hover { color: var(--cyan-deep); border-color: #9ad9f7; }
.rc-replay:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }
.rc-replay .icon { width: 13px; height: 13px; transition: transform .4s ease; }
.rc-replay:hover .rc-replay-again .icon { transform: rotate(-200deg); }
.rc-hero-media > .rc-replay { top: 6px; right: 10px; bottom: auto; padding: 2px 9px 2px 7px; }
.rc-close-media > .rc-replay { left: 0; right: 0; bottom: 0; width: max-content; margin-inline: auto; }
.rc-close-media > .rc-replay:focus-visible { outline-color: #fff; }

/* ==========================================================================
   Mock specifics, in page order
   ========================================================================== */

/* 2. A class of blank boxes */
.rc-blank { overflow: visible; }
.rc-blank .rc-frame-head { flex-wrap: wrap; }
.rc-blank-list { padding-top: 4px; padding-bottom: 6px; }
.rc-brow { position: relative; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.rc-brow:last-child { border-bottom: 0; }
.rc-brow .rc-who { margin-bottom: 6px; font-size: 12.5px; }
.rc-brow .rc-ava { width: 24px; height: 24px; font-size: 9.5px; }
.rc-brow-empty { opacity: .72; }
.rc-brow > .rc-field > .rc-caret { position: absolute; top: 10px; left: 10px; }
.rc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
}
.rc-callout {
    position: absolute;
    right: -26px;
    bottom: -10px; /* straddles the field's bottom edge, clear of the text */
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink-900);
    color: #fff;
    font: 600 10.5px/1.3 var(--font-sans);
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(17, 24, 39, .5);
    transform-origin: right center;
}
.rc-callout-2 { background: var(--violet); }

/* 3. Remove a suggestion, generate the class, ask for a change */
.rc-removable { display: flex; align-items: flex-start; gap: 6px; }
.rc-x {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--ink-500);
}
.rc-x .icon { width: 11px; height: 11px; }
.rc-x-wrap { margin-left: auto; }
.rc-strike {
    text-decoration: none;
    color: var(--ink-500);
    background: linear-gradient(#dc2626, #dc2626) no-repeat 0 58% / 100% 1.5px;
}

.rc-gen-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-genlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.rc-genlist li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-900); }
.rc-tick-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: auto; }
.rc-tick-wrap > .rc-spin { position: absolute; }
.rc-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
}
.rc-tick .icon { width: 11px; height: 11px; stroke-width: 3; }
.rc-more { margin-top: 8px; font-size: 11px; color: var(--ink-500); }

.rc-draft-mini { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--ink-900); }
.rc-revise { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.rc-send {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #0aa5e8;
    color: #fff;
}
.rc-send .icon { width: 14px; height: 14px; }
/* Approve gives way to the app's Edit link in the same grid cell, so the frame keeps its height */
.rc-approve-swap { display: inline-grid; align-items: center; justify-items: start; min-height: 26px; margin-top: 12px; }
.rc-approve-wrap { --rc-d: inline-flex; }
.rc-edit-link { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1.4 var(--font-sans); color: var(--ink-900); }
.rc-edit-link .icon { width: 13px; height: 13px; }

/* 4. Your edits teach the next draft */
.rc-voice { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 440px; }
.rc-voice .rc-frame { max-width: none; }
.rc-voice .rc-frame:first-child { margin-right: 44px; }
.rc-voice .rc-frame:last-child { margin-left: 44px; }
.rc-link-arrow {
    flex: none;
    clip-path: inset(0); /* a shape to transition from inset(0 100% 0 0); 'none' would just snap */
    width: 40px;
    height: 20px;
    transform: rotate(90deg);
    fill: none;
    stroke: var(--violet);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rc-edit-txt { font-size: 12px; line-height: 1.65; color: var(--ink-900); }
.rc-ins { color: #15803d; font-weight: 600; }
.rc-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rc-stars { display: inline-flex; gap: 2px; }
.rc-star { display: inline-block; width: 15px; height: 15px; fill: #f59e0b; stroke: none; }
.rc-kept {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .1);
    color: var(--violet);
    font: 700 10px/1.6 var(--font-sans);
}
mark.rc-hl {
    padding: 0 1px;
    border-radius: 3px;
    color: inherit;
    background: linear-gradient(rgba(26, 239, 175, .4), rgba(26, 239, 175, .4)) no-repeat 0 0 / 100% 100%;
}

/* 5. Learning skills grid */
.rc-ls-frame { max-width: 480px; }
.rc-ls { display: grid; grid-template-columns: max-content 40px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 7px; }
.rc-ls-h {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef2f7;
    font: 700 9.5px/1.3 var(--font-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
.rc-ls-h .icon { width: 11px; height: 11px; color: var(--cyan-deep); }
.rc-ls-skill { font-size: 12.5px; font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.rc-lvl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 30px;
    border: 1px solid #dbe3ec;
    border-radius: 9px;
    background: #fff;
}
.rc-lvl b { display: inline-block; font: 700 14px var(--font-sans); }
.rc-lvl-e { color: #16a34a; }
.rc-lvl-g { color: #0ea5e9; }
.rc-lvl-s { color: #d97706; }
.rc-ls-note { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-600); }
.rc-ls-note i { margin-right: 5px; font-style: normal; font-weight: 700; color: #16a34a; }
.rc-ls-next { display: block; margin-top: 3px; font-style: normal; }
.rc-ls-next i { color: var(--cyan-deep); }

/* 6. One report language per course */
.rc-langs { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 420px; }
.rc-lang-card { max-width: none; }
.rc-lang-card:first-child { margin-right: 34px; }
.rc-lang-fr { margin-left: 34px; overflow: visible; }
.rc-lang-card .rc-frame-head { flex-wrap: wrap; }
.rc-select-wrap { display: inline-flex; align-items: center; gap: 7px; }
.rc-select-lbl { font-size: 10px; color: var(--ink-500); white-space: nowrap; }
.rc-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: var(--ink-900);
    font: 600 11px/1.5 var(--font-sans);
}
.rc-select .icon { width: 11px; height: 11px; color: var(--ink-500); }
.rc-menu {
    --rc-d: flex;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 4;
    flex-direction: column;
    min-width: 96px;
    padding: 4px;
    border: 1px solid #dbe3ec;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 14px 30px -12px rgba(2, 48, 84, .35);
    font: 500 11px/1.4 var(--font-sans);
    color: var(--ink-600);
}
.rc-menu span { padding: 4px 8px; border-radius: 6px; }
.rc-menu-on { background: #eaf7ff; color: var(--cyan-deep); font-weight: 700; }
.rc-lang-txt { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--ink-900); }
.rc-lang-body { position: relative; }
.rc-lang-body > .rc-shimmer { top: 10px; }
.rc-lang-gen { margin-top: 10px; }

/* 7. The app's stepper, then one moment of each step */
.rc-flow-frame { max-width: 470px; }
.rc-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid #eef2f7;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    white-space: nowrap;
    overflow: hidden;
}
.rc-stepper > .icon { flex: none; width: 12px; height: 12px; color: #cbd5e1; transform: rotate(-90deg); }
.rc-stepper span { display: inline-flex; align-items: center; gap: 6px; }
.rc-stepper i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    font-style: normal;
    font-size: 10px;
}
.rc-stepper-on { color: var(--ink-900); font-weight: 700; }
.rc-stepper-on i { border-color: var(--cyan); background: var(--cyan); color: #fff; }
.rc-stepper-done i { border-color: var(--cyan); color: var(--cyan-deep); }
.rc-stepper-done i .icon { width: 10px; height: 10px; stroke-width: 3; }

.rc-ready { position: relative; min-height: 128px; margin-top: 12px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 12px; }
.rc-ready-h { font-size: 12px; font-weight: 700; color: var(--ink-900); }
/* The loader sits on top of the space the (still invisible) flags reserve, so nothing moves */
.rc-checking { --rc-d: flex; position: absolute; top: 28px; left: 12px; right: 12px; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--ink-500); }
.rc-flag { display: flex; gap: 8px; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-600); }
.rc-flag .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--cyan-deep); }
.rc-flag-warn .icon { color: #d97706; }
.rc-fix { display: block; margin-top: 3px; font-weight: 600; color: var(--cyan-deep); }
.rc-spec { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11px; color: var(--ink-500); }
.rc-spec b { margin-left: 4px; font-weight: 600; color: var(--ink-900); }

.rc-write { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.rc-write-who { padding-right: 12px; border-right: 1px solid #eef2f7; }
.rc-write-fb .rc-field { min-height: 76px; margin-top: 6px; }
.rc-hint { margin-top: 6px; font-size: 10.5px; color: var(--ink-500); }
.rc-write-fb .rc-press-wrap { margin-top: 12px; }

.rc-export-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rc-split-btn {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    background: #0aa5e8;
    color: #fff;
    font: 600 12px/1 var(--font-sans);
    box-shadow: 0 8px 18px -10px rgba(0, 140, 210, .8);
}
.rc-split-btn > span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; }
.rc-split-btn > i { display: inline-flex; align-items: center; padding: 0 9px; border-left: 1px solid rgba(255, 255, 255, .35); }
.rc-split-btn .icon { width: 14px; height: 14px; }
.rc-formats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--ink-500); }
.rc-file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px dashed #9ad9f7;
    border-radius: 10px;
    background: #f0faff;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-900);
}
.rc-file .icon { width: 16px; height: 16px; color: var(--cyan-deep); }
.rc-file .rc-file-ok { margin-left: auto; color: #16a34a; stroke-width: 3; }
.rc-export-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}
.rc-export-row .rc-who { grid-column: 1 / -1; }
.rc-export-txt { font-size: 11.5px; line-height: 1.5; color: var(--ink-600); }
.rc-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink-500);
}
.rc-copy-btn .icon { width: 14px; height: 14px; }
.rc-tip {
    position: absolute;
    right: -4px;
    bottom: calc(100% + 6px);
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--ink-900);
    color: #fff;
    font: 600 10px/1.4 var(--font-sans);
    white-space: nowrap;
}

/* 8. Edit right in the box */
.rc-edit-box {
    padding: 9px 11px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-900);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.rc-ghost { visibility: hidden; }
.rc-sel-hl.rc-hl { background: linear-gradient(rgba(0, 183, 255, .28), rgba(0, 183, 255, .28)) no-repeat 0 0 / 100% 100%; border-radius: 2px; }

/* 9. Approve All and Publish */
.rc-publish { max-width: 360px; border-color: transparent; box-shadow: 0 30px 60px -24px rgba(2, 24, 60, .55); }
.rc-genlist-flat { gap: 6px; }
.rc-publish-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.rc-published {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--cyan);
    color: #fff;
    font: 700 11px/1.4 var(--font-sans);
}
.rc-published .icon { width: 13px; height: 13px; }

/* ==========================================================================
   Animation states. Defaults are the finished frame; .rc-armed rewinds,
   .rc-run animates. Keep this block last: it has to beat the display
   values set on the components above.
   ========================================================================== */

/* Present only mid-animation: placeholders that get typed over, loaders, menus */
.rc-blip, .rc-cursor { display: none; }
.rc-armed .rc-blip.rc-on:not(.rc-off) { display: var(--rc-d, block); }

/* Present at the start, gone once its moment passes */
.rc-out { display: none; }
.rc-armed .rc-out:not(.rc-on) { display: var(--rc-d, block); }

/* Enter */
.rc-armed :is(.rc-fade, .rc-up, .rc-pop, .rc-slide):not(.rc-on) { opacity: 0; }
.rc-armed .rc-up:not(.rc-on) { transform: translateY(8px); }
.rc-armed .rc-slide:not(.rc-on) { transform: translateX(-10px); }
.rc-armed .rc-pop:not(.rc-on) { transform: scale(.55); }
.rc-run :is(.rc-fade, .rc-up, .rc-slide) { transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.rc-run .rc-pop { transition: opacity .25s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Words stream in, each one arriving cyan and settling to ink */
.rc-armed .rc-words:not(.rc-on) .rc-w { opacity: 0; }
.rc-run .rc-words.rc-on .rc-w { animation: rc-word .5s ease-out both; animation-delay: calc(var(--i) * 28ms); }
@keyframes rc-word { from { opacity: 0; color: var(--cyan); } 60% { opacity: 1; } }

/* Typed text: the script reveals one character at a time */
.rc-armed .rc-type .rc-c:not(.rc-shown) { display: none; }
/* Tracked-change insertions keep their space while hidden, so the paragraph never re-wraps */
.rc-armed .rc-ins.rc-type .rc-c:not(.rc-shown) { display: inline; visibility: hidden; }

/* Strike-through draws left to right; highlights sweep */
.rc-armed .rc-strike:not(.rc-on) { background-size: 0% 1.5px; color: var(--ink-900); }
.rc-run .rc-strike { transition: background-size .45s ease, color .45s ease; }
.rc-armed .rc-hl:not(.rc-on) { background-size: 0% 100%; }
.rc-run .rc-hl { transition: background-size .6s ease; }

/* Progress bars fill from --w0 */
.rc-armed .rc-fill:not(.rc-on) { width: var(--w0, 0%); }
.rc-run .rc-fill { transition: width 1s cubic-bezier(.4, 0, .2, 1); }
.rc-run .rc-fill-slow { transition-duration: 1.5s; }
.rc-armed .rc-fill-turn:not(.rc-on) { background-color: var(--cyan); }
.rc-run .rc-fill-turn { transition: width 1s cubic-bezier(.4, 0, .2, 1), background-color .4s ease .6s; }

/* Step number lights up as its frame starts */
.rc-armed .rc-lit:not(.rc-on) { border-color: var(--line); background: #fff; color: var(--ink-500); }
.rc-run .rc-lit { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.rc-run .rc-lit.rc-on { animation: rc-lit .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rc-lit { 40% { transform: scale(1.18); } }

/* Clicks: squeeze plus a ring */
.rc-run .rc-press.rc-on { animation: rc-press .42s ease; }
.rc-run .rc-press.rc-on::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: rc-ripple .65s ease-out forwards;
}
@keyframes rc-press { 40% { transform: scale(.92); } }
@keyframes rc-ripple { from { box-shadow: 0 0 0 0 rgba(0, 183, 255, .5); } to { box-shadow: 0 0 0 14px rgba(0, 183, 255, 0); } }

/* A level box flashes as the letter goes in */
.rc-run .rc-ping.rc-on { animation: rc-ping .9s ease-out; }
@keyframes rc-ping {
    from { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 183, 255, .25); }
    to { border-color: #dbe3ec; box-shadow: 0 0 0 0 rgba(0, 183, 255, 0); }
}

/* Focused field while typing; the edit box stays focused until approval */
.rc-run .rc-focus.rc-on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 183, 255, .15); }
.rc-done .rc-focus.rc-on { border-color: #dbe3ec; box-shadow: none; }
.rc-armed:not(.rc-done) .rc-edit-box { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 183, 255, .13); }

/* The connecting arrow draws itself */
.rc-armed .rc-draw:not(.rc-on) { clip-path: inset(0 100% 0 0); }
.rc-run .rc-draw { transition: clip-path .7s ease; }

/* Pointer: glide in, click, rest on the control */
.rc-armed .rc-cursor.rc-on:not(.rc-off) { display: block; animation: rc-cursor 1.1s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes rc-cursor {
    0% { opacity: 0; transform: translate(44px, 34px); }
    20% { opacity: 1; }
    58% { transform: translate(0, 0); }
    68% { transform: translate(0, 0) scale(.8); }
    78%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Small pop-ups: tooltip, dropdown */
.rc-armed :is(.rc-tip, .rc-menu).rc-on:not(.rc-off) { animation: rc-popup .22s ease-out both; }
@keyframes rc-popup { from { opacity: 0; transform: translateY(4px); } }

/* ==========================================================================
   Responsive: each mock gets a phone layout, not a shrunken desktop one
   ========================================================================== */
@media (max-width: 1100px) {
    .rc-hero-grid { gap: 40px; }
    .rc-split { gap: 44px; }
    .rc-step .rc-stage { padding: 22px 12px; }
}

@media (max-width: 980px) {
    .rc-hero { padding: calc(var(--nav-h) + 44px) 0 64px; }
    .rc-hero-grid, .rc-split, .rc-split--flip, .rc-close-grid { grid-template-columns: minmax(0, 1fr); }
    .rc-split--flip > .rc-copy { order: 0; }
    .rc-hero-media { width: 100%; max-width: 560px; margin: 0 auto; }
    .rc-split > * { width: 100%; max-width: 640px; margin-inline: auto; }
    .rc-trio { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
    .rc-step .rc-stage { min-height: 0; }
    .rc-flow-row, .rc-flow-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 640px; margin: 0 auto; }
    .rc-flow-row:nth-child(even) > .rc-stage { order: 0; }
    .rc-flow-row .rc-stage { min-height: 0; }
    .rc-flow-text { padding: 28px 26px; }
    .rc-close-copy { text-align: center; }
    .rc-close .hero-actions { justify-content: center; }
}

@media (max-width: 640px) {
    .rc-stage { min-height: 0; padding: 28px 14px; border-radius: 20px; }
    .rc-stage-sm { padding: 26px 14px; }
    .rc-cta-center { margin-top: 36px; }
    .rc-close { padding: 72px 0; }
    /* Phone CTAs go full width */
    .rc-page main .btn { width: 100%; padding: 15px 18px; line-height: 1.25; }

    /* Hero: student on one line, grades in two columns, then suggestions */
    .rc-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 14px 10px; }
    .rc-student {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid #eef2f7;
    }
    .rc-student .rc-total { grid-column: 2; grid-row: 1; margin-top: 0; }
    .rc-student .rc-asof { display: none; }
    .rc-grades { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
    .rc-bar .rc-track { width: 52px; }
    .rc-draft { margin: 0 14px 14px; }

    /* Callouts tuck inside the frame edge */
    .rc-callout { right: -8px; }

    /* Voice and language cards stop staggering */
    .rc-voice .rc-frame:first-child, .rc-voice .rc-frame:last-child { margin: 0; }
    .rc-lang-card:first-child, .rc-lang-fr { margin: 0; }

    /* How it works: only the current step keeps its label */
    .rc-stepper span:not(.rc-stepper-on) { gap: 0; font-size: 0; }
    .rc-stepper i { font-size: 10px; }
    .rc-write { grid-template-columns: minmax(0, 1fr); }
    .rc-write-who { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid #eef2f7; }
    .rc-flow-text { padding: 24px 20px; }
}

@media (max-width: 560px) {
    /* Learning skills: skill + level on one line, the note under it */
    .rc-ls { grid-template-columns: minmax(0, 1fr) 40px; }
    .rc-ls-h-note { display: none; }
    .rc-ls-note { grid-column: 1 / -1; margin: -2px 0 6px; }
}

@media (max-width: 480px) {
    /* The arrow and side padding give way so "Essayer Gradefully gratuitement" (303px at
       19.2px bold) stays on one line at 375px; the type size stays, for contrast. */
    .rc-page main .btn { padding-inline: 8px; }
    .rc-page main .btn .icon { display: none; }
}

@media (max-width: 400px) {
    .rc-bar .rc-progress-txt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-hero-copy > *, .rc-window { animation: none; }
    .rc-window, .rc-frame, .rc-replay .icon, .rc-page .btn .icon, .rc-points li::before { transition: none; }
    .rc-hero-media:hover .rc-window, .rc-stage:hover .rc-frame, .rc-step:hover .rc-frame, .rc-close-media:hover .rc-frame { transform: none; }
    .rc-page .reveal:not(.in) .rc-points li::before { transform: none; }
    .rc-page .faq::details-content { transition: none; }
}