/* LetsGoExam Landing and Sign-in. They wear the BreakMyScore Landing's look (landing-v2.css + landing-preview.css);
   this file holds only what LetsGoExam adds: the brand, the hero carousel, the four ways, the four views, the test
   types, How we start with the demo form, and the sign-in page. */

/* Brand: the mark plus the name in type. */
.lge-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.lge-landing .lv2-nav .lv2-brand.lge-brand img, .lge-signin .lv2-nav .lv2-brand.lge-brand img, .lv2-footer .lge-brand img { width: 38px; height: 35px; object-fit: contain; }
.lge-brand span { font: 700 21px/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.lge-landing .lv2-actions .lv2-button.primary { background: #fffaf0; color: var(--wine); }

/* Product windows: the address bar reads letsgoexam.com, not the BreakMyScore default. */
.lge-landing .lv2-product, .lge-landing .lv2-command { --lv2-window-path: "letsgoexam.com"; }
.lge-landing .lv2-test-ui { --lv2-window-path: "Adaptive SAT Exam"; }
.lge-landing .lv2-act-ui { --lv2-window-path: "Full ACT Exam"; }
.lge-landing .lv2-lecture-ui { --lv2-window-path: "Lecture Library"; }
.lge-landing .lv2-practice-ui { --lv2-window-path: "Practice + Show Me How"; }
.lge-landing .lge-report-ui { --lv2-window-path: "Result Overview"; }
.lge-report-ui img { display: block; width: 100%; height: auto; }

/* Hero: the BreakMyScore hero copy with a product carousel on the right. The screens are all cut to one shape
   (1424 × 1000), so each fills the window's width above its caption at every screen size. */
.lge-landing .bms-preview-heading em { display: block; }
.lge-landing .lge-hero-product { aspect-ratio: auto; padding: 38px 0 0; background: var(--white); }
.lge-hero-product .lv2-carousel-slide { display: flex; flex-direction: column; margin: 0; background: #fff; }
.lge-landing .lge-hero-product .lv2-carousel-slide img { flex: none; width: 100%; height: auto; aspect-ratio: 1424 / 1000; padding: 0; object-fit: contain; }
/* The caption sits on a slate bar that matches the window's title bar, centred in the space under the screen. */
.lge-hero-product figcaption { flex: 1 1 auto; display: grid; align-items: center; padding: 8px 16px; background: #3a4d55; color: #d9e2e5; font-size: 12.5px; line-height: 1.4; }
.lge-hero-product figcaption b { color: #fff; }
/* All slides share one grid cell and the hidden ones only turn invisible, so the window takes the tallest slide's
   height (captions wrap differently) and does not change size between slides. */
.lge-landing .lge-hero-product .lv2-carousel-track { display: grid; }
.lge-landing .lge-hero-product .lv2-carousel-slide { grid-area: 1 / 1; }
.lge-landing .lge-hero-product .lv2-carousel-slide[hidden] { display: flex !important; visibility: hidden; }
.landing-preview .lv2-footer .lge-brand span { display: inline; grid-column: auto; color: #fff; font: 700 21px/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; text-transform: none; }

/* Section heads for the LetsGoExam-only sections. */
.lge-head { max-width: 760px; margin-bottom: 44px; }
.lge-head h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1; letter-spacing: -.035em; }
.lge-head > p:not(.lv2-kicker) { margin: 22px 0 0; color: var(--muted); font-size: 17px; }

/* Four ways to put a test online / One system, four views. */
.lge-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lge-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 4px solid var(--wine); background: var(--white); padding: 26px 24px; }
.lge-card:nth-child(2) { border-top-color: var(--green); }
.lge-card:nth-child(3) { border-top-color: var(--gold); }
.lge-card:nth-child(4) { border-top-color: var(--ink); }
.lge-card > small { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lge-card:nth-child(2) > small { color: var(--green); }
.lge-card:nth-child(3) > small { color: #9a6719; }
.lge-card:nth-child(4) > small { color: var(--ink); }
.lge-card h3 { margin: 10px 0 12px; font-size: 26px; line-height: 1.1; }
.lge-card > i { margin-bottom: 14px; color: var(--wine); font-size: 30px; }
.lge-card p { margin: 0; color: var(--muted); font-size: 14px; }
.lge-card ul { margin: 0; padding: 0; list-style: none; }
.lge-card li { position: relative; padding: 7px 0 7px 18px; border-top: 1px solid #e6dccd; color: var(--muted); font-size: 14px; }
.lge-card li:first-child { border-top: 0; }
.lge-card li::before { position: absolute; top: 15px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); content: ""; }
.lge-card .lv2-text-link { align-self: flex-start; margin-top: auto; padding-top: 18px; }

/* Fits the way your tests work. */
.lge-fit { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.lge-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lge-chips li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 700; }
.lge-chips.small li { padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lge-fit h3 { margin: 0 0 16px; font-size: 24px; }
.lge-paper { margin-top: 28px; padding: 22px 24px; border-left: 4px solid var(--wine); background: var(--paper-2); }
.lge-paper strong { display: block; font-size: 16px; }
.lge-paper p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
/* Right Answer links out to cvitinc.com from the paper-test note and the FAQ. */
.lge-landing .lge-paper a, .lge-landing details p a { color: var(--wine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* How we start + Request a demo. */
.lge-start { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.lge-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; }
.lge-steps li { position: relative; padding: 0 0 26px 58px; counter-increment: step; }
.lge-steps li::before { position: absolute; top: -4px; left: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: #fff; font-size: 13px; font-weight: 800; content: "0" counter(step); }
.lge-steps li:nth-child(2)::before { background: var(--green); }
.lge-steps li:nth-child(3)::before { background: var(--gold); color: var(--ink); }
.lge-steps strong { display: block; font-size: 17px; }
.lge-steps p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.lge-demo { border-top: 5px solid var(--gold); background: var(--ink); color: #fff; padding: 32px; }
.lge-demo h3 { margin: 0; font-size: 34px; line-height: 1.05; }
.lge-demo > p { margin: 10px 0 22px; color: #d6cec2; font-size: 14px; }
.lge-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lge-demo label { display: grid; gap: 6px; color: #e9e2d6; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.lge-demo label.wide, .lge-demo fieldset { grid-column: 1 / -1; }
.lge-demo input, .lge-demo select, .lge-demo textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #5d544b; border-radius: 4px; background: #2c2723; color: #fff; font: 15px/1.4 Inter, system-ui, sans-serif; }
.lge-demo textarea { min-height: 96px; resize: vertical; }
.lge-demo input:focus, .lge-demo select:focus, .lge-demo textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.lge-demo fieldset { margin: 0; padding: 0; border: 0; }
.lge-demo legend { margin-bottom: 8px; color: #e9e2d6; font-size: 12px; font-weight: 700; }
.lge-demo fieldset div { display: flex; flex-wrap: wrap; gap: 8px; }
.lge-demo fieldset label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #5d544b; border-radius: 999px; font-weight: 600; cursor: pointer; }
.lge-demo fieldset input { width: auto; min-height: 0; accent-color: var(--gold); }
.lge-demo fieldset label:has(input:checked) { border-color: var(--gold); background: rgba(200, 138, 44, .16); }
.lge-demo .lge-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lge-demo-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.lge-demo-actions .lv2-button { background: var(--gold); color: var(--ink); }
.lge-demo-actions small { color: #b9b0a4; font-size: 12px; }
.lge-demo-actions small a { color: #fff; text-decoration: underline; }
.lge-demo-status { margin: 14px 0 0; font-size: 14px; }
.lge-demo-status.error { color: #ffb4b4; }
.lge-demo-done { padding: 24px 0 6px; }
.lge-demo-done strong { display: block; font: 500 30px/1.1 Georgia, serif; }
.lge-demo-done p { color: #d6cec2; }

@media (max-width: 1100px) {
    .lge-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lge-fit, .lge-start { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .lge-brand span { font-size: 18px; }
    .lge-landing .lv2-nav .lv2-brand.lge-brand img, .lge-signin .lv2-nav .lv2-brand.lge-brand img { width: 30px; height: 28px; }
    .lge-cards { grid-template-columns: 1fr; gap: 14px; }
    .lge-head { margin-bottom: 28px; }
    .lge-head h2 { font-size: 36px; }
    .lge-card { padding: 22px 20px; }
    .lge-demo { padding: 24px 18px; }
    .lge-demo h3 { font-size: 28px; }
    .lge-demo-grid { grid-template-columns: 1fr; }
    /* The wordmark and three links do not fit one phone row: the links go under the brand. */
    .landing-preview .lv2-footer .lge-brand span { font-size: 18px; }
    .landing-preview .lv2-footer .lv2-footer-links { grid-column: 1 / -1; justify-self: start; }
}

/* Sign-in page: the old sign-in photo, slowly drifting under a dark wine wash, with the copy in light type on it. */
body.lge-signin { min-height: 100vh; display: flex; flex-direction: column; }
.lge-signin main { position: relative; flex: 1 0 auto; display: grid; align-items: center; overflow: hidden; padding: 72px 0; background: var(--ink); color: #fff; }
.lge-signin main::before { position: absolute; inset: 0; background: url("/images/rightanswer-bg.jpg") center / cover no-repeat; content: ""; animation: lge-drift 36s ease-in-out infinite alternate; }
.lge-signin main::after { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(33, 29, 26, .94) 0%, rgba(33, 29, 26, .82) 48%, rgba(111, 15, 29, .62) 100%); content: ""; }
.lge-signin main > .lv2-wrap { position: relative; z-index: 1; }
@keyframes lge-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.lge-signin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "copy card" "live card"; gap: 40px var(--preview-gap); align-items: center; }
.lge-signin-copy { grid-area: copy; align-self: end; }
.lge-signin-card { grid-area: card; }
.lge-live { grid-area: live; align-self: start; }
.lge-signin-copy .lv2-kicker { color: var(--gold); }
.lge-signin-copy h1 { margin: 0; font-size: clamp(44px, 5vw, 72px); line-height: .98; letter-spacing: -.04em; }
.lge-signin-copy > p:not(.lv2-kicker) { max-width: 520px; margin: 22px 0 0; color: #e3dbcf; font-size: 17px; }

/* Four example cards in a 2 x 2 grid (one row of four on a single-column page), each on an 8-second loop. */
@property --lge-score { syntax: "<integer>"; inherits: false; initial-value: 1490; }
@property --lge-act { syntax: "<integer>"; inherits: false; initial-value: 29; }
.lge-live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 600px; }
.lge-live-card { min-height: 128px; padding: 16px 16px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(255, 253, 248, .08); backdrop-filter: blur(8px); animation: lge-float 6s ease-in-out infinite; }
.lge-live-card:nth-child(2) { animation-delay: -2s; }
.lge-live-card:nth-child(3) { animation-delay: -4s; }
.lge-live-card:nth-child(4) { animation-delay: -1s; }
.lge-live-card small { display: block; color: #d5cec3; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
@keyframes lge-float { 50% { transform: translateY(-6px); } }
/* The keyframes only keep time: Safari never redraws a counter() fed by an animated property (it showed 0), so the script at
   the end of Index.cshtml writes the number from this animation's currentTime. */
.lge-live-score { display: block; margin: 8px 0 4px; font: 500 38px/1 Georgia, serif; animation: lge-count 8s ease-out infinite; }
@keyframes lge-count { 0%, 8% { --lge-score: 1320; } 45%, 100% { --lge-score: 1490; } }
/* ACT: the composite counts up, then the four section scores appear one by one (composite = E, M, R average). */
.lge-live-act { animation-name: lge-count-act; }
@keyframes lge-count-act { 0%, 8% { --lge-act: 21; } 45%, 100% { --lge-act: 29; } }
.lge-live-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lge-live-sections span { padding: 3px 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); color: #e3dbcf; font-size: 11px; font-weight: 700; animation: lge-chip-1 8s ease-out infinite; }
.lge-live-sections span:nth-child(2) { animation-name: lge-chip-2; }
.lge-live-sections span:nth-child(3) { animation-name: lge-chip-3; }
.lge-live-sections span:nth-child(4) { animation-name: lge-chip-4; }
@keyframes lge-chip-1 { 0%, 45% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes lge-chip-2 { 0%, 52% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes lge-chip-3 { 0%, 59% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes lge-chip-4 { 0%, 66% { opacity: 0; } 73%, 100% { opacity: 1; } }
.lge-live-card svg { display: block; width: 100%; height: 34px; overflow: visible; }
.lge-live-card polyline { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: lge-draw 8s ease-out infinite; }
@keyframes lge-draw { 0%, 8% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }
.lge-live-bars { display: grid; gap: 9px; margin-top: 14px; }
.lge-live-bars span { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.lge-live-bars b { font-size: 11px; }
.lge-live-bars i { height: 7px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.lge-live-bars em { display: block; height: 100%; border-radius: 4px; background: #c9505f; transform-origin: left; animation: lge-fill 8s ease-out infinite; }
.lge-live-bars span:nth-child(2) em { background: var(--gold); animation-name: lge-fill-2; }
.lge-live-bars span:nth-child(3) em { background: #4f9a83; animation-name: lge-fill-3; }
@keyframes lge-fill { 0%, 5% { transform: scaleX(0); } 25%, 100% { transform: scaleX(.38); } }
@keyframes lge-fill-2 { 0%, 25% { transform: scaleX(0); } 45%, 100% { transform: scaleX(.72); } }
@keyframes lge-fill-3 { 0%, 45% { transform: scaleX(0); } 65%, 100% { transform: scaleX(1); } }
.lge-live-steps { display: flex; gap: 6px; margin: 18px 0 14px; }
.lge-live-steps i { height: 6px; flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .16); animation: lge-step 8s steps(1) infinite; }
.lge-live-steps i:nth-child(2) { animation-name: lge-step-2; }
.lge-live-steps i:nth-child(3) { animation-name: lge-step-3; }
.lge-live-steps i:nth-child(4) { animation-name: lge-step-4; }
.lge-live-steps i:nth-child(5) { animation-name: lge-step-5; }
@keyframes lge-step { 0% { background: rgba(255, 255, 255, .16); } 10%, 100% { background: var(--gold); } }
@keyframes lge-step-2 { 0% { background: rgba(255, 255, 255, .16); } 25%, 100% { background: var(--gold); } }
@keyframes lge-step-3 { 0% { background: rgba(255, 255, 255, .16); } 40%, 100% { background: var(--gold); } }
@keyframes lge-step-4 { 0% { background: rgba(255, 255, 255, .16); } 55%, 100% { background: var(--gold); } }
@keyframes lge-step-5 { 0% { background: rgba(255, 255, 255, .16); } 70%, 100% { background: var(--gold); } }
.lge-live-card p { display: flex; align-items: center; gap: 6px; margin: 0; color: #e3dbcf; font-size: 12px; }
.lge-live-card p i { color: var(--gold); font-size: 20px; animation: lge-pulse 2s ease-in-out infinite; }
@keyframes lge-pulse { 50% { opacity: .55; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
    .lge-signin main::before, .lge-live-card, .lge-live-score, .lge-live-card polyline, .lge-live-bars em, .lge-live-steps i, .lge-live-card p i, .lge-live-sections span { animation: none; }
    .lge-live-bars em { transform: scaleX(.38); }
    .lge-live-bars span:nth-child(2) em { transform: scaleX(.72); }
    .lge-live-bars span:nth-child(3) em { transform: none; }
    .lge-live-steps i { background: var(--gold); }
}

.lge-signin-card { border-top: 5px solid var(--wine); background: var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); color: var(--ink); padding: 34px 32px; }
.lge-signin-card h2 { margin: 0 0 22px; font-size: 30px; }
.lge-signin-card label { display: grid; gap: 6px; margin-bottom: 16px; font-size: 13px; font-weight: 700; }
.lge-signin-card input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: 16px/1.4 Inter, system-ui, sans-serif; }
.lge-signin-card input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.lge-signin-card .lv2-button { width: 100%; margin-top: 6px; }
.lge-signin-card .field-validation-error, .lge-signin-card .validation-summary-errors { color: var(--wine); font-size: 13px; font-weight: 600; }
.lge-signin-card .validation-summary-errors ul { margin: 0 0 12px; padding-left: 18px; }
.lge-signin-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; }
.lge-signin-links a { color: var(--wine); font-weight: 700; }
.lge-signin-links a:hover { text-decoration: underline; }
.lge-signin-links a i { vertical-align: -1px; }
.lge-signin-intro { margin: -8px 0 18px; color: var(--muted); font-size: 14px; }
.lge-signin-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.lge-alert { margin: 0 0 18px; padding: 12px 14px; border-left: 4px solid var(--wine); background: #fbefef; color: var(--ink); font-size: 14px; }
.lge-alert strong { display: block; margin-bottom: 2px; color: var(--wine); }
/* The Landing folds its header links into a menu below 1180px; the sign-in page has no menu, so its one link stays. */
.lge-signin .lv2-nav .lv2-login { display: inline-block; }
.lge-signin .lv2-footer { padding: 22px 0; }
.lge-signin .lv2-footer .lv2-wrap { grid-template-columns: 1fr auto; }
.lge-signin .lv2-footer small { grid-column: auto; padding-top: 0; border-top: 0; }
.lge-signin .lv2-footer .lv2-footer-links { grid-column: auto; justify-self: end; }
@media (max-width: 1100px) {
    /* All three cards stay: tighter cards in a narrower column. */
    .lge-live { gap: 10px; }
    .lge-live-card { padding: 14px 12px 12px; }
    .lge-live-card small { font-size: 9px; letter-spacing: .08em; }
    .lge-live-score { font-size: 32px; }
    .lge-live-bars span { grid-template-columns: 38px 1fr; gap: 6px; }
    .lge-live-card p { font-size: 11px; }
    .lge-live-sections { gap: 4px; }
    .lge-live-sections span { padding: 2px 5px; font-size: 10px; }
}
@media (max-width: 900px) {
    .lge-signin main { padding: 40px 0 48px; }
    .lge-signin-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "live"; gap: 32px; }
    .lge-live { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 560px) {
    .lge-signin-card { padding: 26px 20px; }
    .lge-signin-copy h1 { font-size: 40px; }
    .lge-live { display: none; }
    /* The copyright and the links do not fit one phone row: the links go first, the copyright under them. */
    .lge-signin .lv2-footer .lv2-wrap { grid-template-columns: 1fr; gap: 8px; }
    .lge-signin .lv2-footer .lv2-footer-links { order: -1; justify-self: start; }
}

/* SAT / SAT-ACT feature tags on the four views. */
.lge-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f1e4cc; color: #8a5a12; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; white-space: nowrap; }

/* The academy-only grids follow the shared spacing in landing-preview.css. */
.lge-landing .lge-fit, .lge-landing .lge-start { gap: var(--preview-gap); }
@media (max-width: 1100px) { .lge-landing .lge-fit, .lge-landing .lge-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .lge-landing .lge-fit, .lge-landing .lge-start { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Sections alternate paper / paper-2 from the hero down. LetsGoExam adds 01 Any test and has no Level Test section,
   so the Skill Map (paper-2 on BreakMyScore) takes paper here, between 03 ACT and 05 Lectures. */
.lge-landing #priority.bms-preview-skill-map { background: var(--paper); }

/* Hero: the lede as check points, in the lede's place and width. */
.lge-landing #home .lge-hero-points { max-width: 470px; margin: 22px 0 var(--bms-action-gap); gap: 9px; }
@media (max-width: 560px) {
    .lge-landing #home .lge-hero-points { margin: 16px 0 18px; gap: 7px; }
    /* The floating Listen pill sits at the eyebrow's right end on a phone; the eyebrow wraps before it. */
    .lge-landing #home .bms-preview-eyebrow { padding-right: 60px; }
}

/* Voice tour closing: the final CTA is underlined while it is read. */
.lge-landing #closing.is-narrating h3 { box-shadow: inset 0 -2px 0 var(--wine); }