/* Framed public learning modules: original images, real controls and static content.
   Same teal/lilac material as the study portal; no external assets or animation. */
:root {
  --finish-teal: #0a7462;
  --finish-ink: #16473b;
  --finish-line: #cfe1d5;
  --finish-border: linear-gradient(130deg, #83c8a8, #d0e1d4 42%, #b49ace 78%, #a8bed1);
  --finish-shadow: 0 3px 0 #d4e4d8, 0 14px 30px #123f3512;
}

body, .public-site-view {
  background: radial-gradient(ellipse at 4% 0, #dcefe4 0, transparent 45%),
    radial-gradient(ellipse at 97% 3%, #e9e1f4 0, transparent 38%), #f3f7f2;
}
.public-header {
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #fff, #f5fbf6) padding-box, var(--finish-border) border-box;
  box-shadow: 0 3px 0 #dae5dc, 0 10px 24px #123f3512;
}
.public-logo b { color: #164d3d; }
.public-nav a { color: #536d5e; }
.public-nav a.is-active { color: #096b56; font-weight: 750; }
.public-learn-button {
  background: linear-gradient(135deg, #0d7e68, #075b53) padding-box,
    linear-gradient(135deg, #5bbd94, #567088) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 #ffffff2b, 0 2px 0 #055349;
}
.public-learn-button:hover { background: #096955; }
.header-admin, .menu-toggle {
  background: linear-gradient(135deg, #fff, #edf5ee); border-color: #b9d6c4;
}

.brand-stage {
  padding: 30px; border: 1.5px solid transparent; border-radius: 24px;
  background: radial-gradient(ellipse at 94% 0, #a78acd36, transparent 48%) padding-box,
    linear-gradient(125deg, #093f35, #12584b 63%, #25495d) padding-box,
    linear-gradient(130deg, #96ddb7, #699c84 43%, #c3a4df 78%, #91acc3) border-box;
  box-shadow: 0 0 0 3px #ffffffa3, 0 5px 0 #c9ddce, 0 18px 35px #123f351b;
}
.brand-stage-heading {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, .7fr);
  gap: 30px; align-items: center; margin-bottom: 26px;
}
.brand-stage-heading .public-eyebrow {
  display: inline-block; max-width: 100%; padding: 7px 11px; margin: 0 0 15px;
  border: 1px solid #a5d2b73f; border-radius: 8px; background: #d4ffe40b;
  color: #bcefd0; font-size: 9px; letter-spacing: 1px;
}
.public-main .brand-stage-heading h1 {
  margin: 0 0 15px; max-width: 720px; color: #f4fff5;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.25; letter-spacing: -1.1px;
}
.brand-stage-heading p:not(.public-eyebrow) {
  max-width: 600px; color: #cce6d8; font-size: 14px; line-height: 1.8;
}
.brand-stage .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.brand-stage .hero-actions .download-primary {
  background: linear-gradient(135deg, #d1f3d5, #e4d6f3);
  color: #184d3c; border: 1px solid #d5e8d7; border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff9c, 0 3px 0 #062e2645;
}
.brand-stage .hero-actions .outline-link {
  color: #f3fff5; border-color: #86b49b; border-radius: 12px; background: #ffffff06;
}
.brand-stage .hero-actions .download-primary:hover { background: #dbf4df; }
.brand-stage .hero-actions .outline-link:hover { background: #ffffff10; }
.campaign-gallery { gap: 16px; }
.campaign-gallery figure {
  border: 1.5px solid transparent; border-radius: 18px;
  background: linear-gradient(135deg, #f6fcf7, #e4eee6) padding-box, var(--finish-border) border-box;
  box-shadow: 0 3px 0 #062e2747, 0 12px 22px #062f2521;
}
.campaign-gallery figure img { background: #e8f1e8; }
.campaign-gallery figcaption {
  padding: 13px 15px; background: linear-gradient(125deg, #0e5947, #1c4b4b);
  border-top: 1px solid #85b19945; color: #f5fff5;
}
.campaign-gallery figcaption b { font-size: 13px; }
.campaign-gallery figcaption span { color: #cce6d6; font-size: 11px; }

.sentence-workbench, .learning-world-card, .conversation-post, .route-grid article,
.path-week-card, .dictionary-separation {
  border: 1.5px solid transparent; border-radius: 18px;
  background: linear-gradient(135deg, #fff 62%, #f3faf4) padding-box, var(--finish-border) border-box;
  box-shadow: 0 0 0 2px #ffffff99, var(--finish-shadow);
}
.sentence-workbench { padding: 26px 28px; }
.workbench-label > span {
  display: grid; place-items: center; flex: 0 0 51px; width: 51px; height: 51px;
  border: 1px solid #b5d5bf; border-radius: 13px; background: linear-gradient(135deg, #f4fff3, #d3ebdc);
  box-shadow: 0 3px 0 #c7decf; color: #17644b;
}
.workbench-label small { color: #5f745f; }
.workbench-label h2 { color: #204f3d; }
.sentence-workbench .preview-word { background: none; box-shadow: none; }
.preview-word strong { color: #155b43; }
.preview-word em { color: #806138; }
.preview-word p { color: #385d46; }
.preview-word > span { color: #596e5b; }

.learning-worlds {
  padding: 28px; border: 1.5px solid transparent; border-radius: 23px;
  background: radial-gradient(ellipse at 99% 0, #b79acd24, transparent 50%) padding-box,
    linear-gradient(125deg, #0b4537, #175b4a 66%, #294f5b) padding-box,
    linear-gradient(130deg, #9edab7, #628d74 45%, #b299d5) border-box;
  box-shadow: 0 4px 0 #c8dcce, 0 18px 32px #0c493516;
}
.public-main .learning-worlds-heading h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.35; }
.learning-worlds-heading > p { color: #d2e8da; }
.learning-worlds .public-eyebrow { color: #aee5c7; }
.learning-world-grid { gap: 19px; }
.learning-world-card { padding: 16px; }
.world-card-copy > span {
  align-self: flex-start; padding: 4px 7px; border: 1px solid #d3e3d6;
  border-radius: 6px; background: #edf7ef; color: #32704e; font-size: 9px;
}
.world-card-copy h3 { color: #174b36; font-size: 21px; line-height: 1.5; }
.world-card-copy em { color: #52724f; font-size: 12px; }
.world-card-copy p { color: #3f6046; font-size: 12px; line-height: 1.65; }
.world-card-copy p b { color: #7b5d2e; }
.world-card-copy small { color: #586b5a; border-top-color: #d8e5da; }
.world-hsk {
  background: linear-gradient(135deg, #fff 58%, #f0eafa) padding-box, var(--finish-border) border-box;
}
.world-hsk .world-card-copy > span { color: #665084; background: #f0eafa; border-color: #ded2ed; }
.learning-world-card .lesson-image {
  border: 1.5px solid transparent; border-radius: 12px;
  background: linear-gradient(135deg, #ecf6ed, #dceee1) padding-box,
    linear-gradient(135deg, #87c4a0, #b49bcf) border-box;
  box-shadow: 0 3px 0 #cbdfcf, 0 7px 14px #17463e12;
}
.lesson-audio button, .preview-audio button {
  border: 1px solid #a8ccb4; border-radius: 11px;
  background: linear-gradient(135deg, #fbfff9, #dcefe1);
  color: #1d6046; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #bcd8c5;
}
.lesson-audio button[aria-pressed="true"], .preview-audio button[aria-pressed="true"] {
  background: #e8d8f5; border-color: #af93c9; color: #5c417b;
}

.factory-signal-section, .feedback-section {
  border: 1.5px solid transparent; border-radius: 23px;
  background: radial-gradient(ellipse at 99% 0, #947cb927, transparent 52%) padding-box,
    linear-gradient(125deg, #0c483b, #145c4e 64%, #2b4f60) padding-box,
    linear-gradient(130deg, #80c99f, #739580 43%, #b99dd6) border-box;
  box-shadow: 0 4px 0 #cbded0, 0 16px 30px #123f3516;
}
.public-main .factory-signal-copy h2 { font-size: 29px; line-height: 1.35; }
.signal-card { border-color: #7aab8e; border-radius: 15px; box-shadow: inset 0 1px 0 #ffffff12; }
.signal-card-main {
  border-color: #d6e7d3;
  background: linear-gradient(140deg, #fffff3, #e3f7e8 60%, #ebe1f5);
  box-shadow: 0 3px 0 #062d233b, 0 12px 22px #062d2326;
}
.signal-card-main h3 { color: #174d35; }
.signal-button, .feedback-form .primary {
  border: 1px solid transparent; border-radius: 11px;
  background: linear-gradient(135deg, #0b7b63, #075e52) padding-box,
    linear-gradient(130deg, #5eae89, #637790) border-box;
  color: #fff; box-shadow: inset 0 1px 0 #ffffff26, 0 2px 0 #054b40;
}
.signal-button:hover, .feedback-form .primary:hover { background: #096851; }
.factory-signal-copy .signal-button, .banner-cta {
  background: linear-gradient(135deg, #d9f7dc, #e8ddf6); color: #184d3b;
  border: 1px solid #ccdfcf; border-radius: 11px;
  box-shadow: inset 0 1px 0 #ffffff80, 0 3px 0 #052f2638;
}
.factory-signal-copy .signal-button:hover, .banner-cta:hover { background: #def4e1; }

.daily-learning-banner {
  border: 1.5px solid transparent; border-radius: 21px;
  background: linear-gradient(125deg, #0c473a, #244f5a) padding-box, var(--finish-border) border-box;
  box-shadow: 0 4px 0 #cfded2, 0 14px 28px #123f3513;
}
.daily-learning-banner > img { background: #e8f0e6; }
.daily-banner-copy h2 { color: #f3fff3; }
.daily-banner-copy > p:not(.public-eyebrow) { color: #cde6d7; }
.conversation-post { padding: 24px; }
.conversation-post.featured-post {
  background: linear-gradient(135deg, #f9fff5, #f0e9f8) padding-box, var(--finish-border) border-box;
  border-color: transparent;
}
.conversation-post strong { color: #126144; }
.conversation-post em { color: #5a6c5c; }
.post-meta span { color: #2c744c; }
.post-meta b { color: #586d5b; }
.post-tags span { background: #e6f2e7; color: #3d7049; border: 1px solid #d3e5d6; }
.dictionary-separation { box-shadow: 0 2px 0 #dfe9df; }

.route-section, .path-sample-section, .download-section {
  padding: 28px; border: 1.5px solid transparent; border-radius: 22px;
  background: linear-gradient(135deg, #f9fff8 65%, #f1eafa) padding-box, var(--finish-border) border-box;
  box-shadow: 0 3px 0 #d7e5d8, 0 14px 28px #123f350e;
}
.route-grid article { padding: 23px; }
.route-grid article > span, .path-week-card > span {
  display: inline-block; padding: 5px 9px; border: 1px solid #d1e4d4; border-radius: 7px;
  background: #eaf5ec; color: #34714c; font-size: 10px;
}
.route-grid h3 { margin-top: 22px; color: #23543a; }
.route-grid p, .path-week-card p { color: #5b7062; }
.path-week-card { padding: 20px; }
.path-week-card.active {
  background: linear-gradient(130deg, #14563e, #1b574d 62%, #38556b) padding-box,
    linear-gradient(130deg, #8ecb9c, #9fa9c7) border-box;
  border-color: transparent; color: #f4fff3;
  box-shadow: 0 3px 0 #b7d5bf, 0 12px 24px #17463e17;
}
.path-week-card.active > span { background: #bce7c219; border-color: #9acfa448; color: #ceebd1; }
.path-week-card.active p { color: #d0e9d3; }
.path-week-card.active li { color: #e6f5e8; }
.path-week-card.active li::before { color: #bbefb6; }
.path-learning-flow b {
  background: linear-gradient(135deg, #e4f5e8, #e8dff4);
  color: #276749; border: 1px solid #bfd9c7;
}
.store-button { border: 1px solid #517f65; border-radius: 11px; box-shadow: 0 3px 0 #c6d7c8; }
.store-button.app-store { border-color: #657384; }
.download-section p:not(.public-eyebrow) { color: #5a6f61; }

.feedback-form {
  border: 1.5px solid transparent; border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f7fcf7) padding-box, var(--finish-border) border-box;
  box-shadow: 0 3px 0 #052c2238, 0 10px 24px #052c221f;
}
.feedback-form label { color: #345c43; }
.feedback-form input, .feedback-form select, .feedback-form textarea {
  background: #fcfefb; border-color: #bbd6c3; min-height: 44px;
  box-shadow: inset 0 2px 3px #17463e05;
}
.feedback-form input:focus-visible, .feedback-form select:focus-visible, .feedback-form textarea:focus-visible {
  outline: 2px solid #8b6baa; outline-offset: 2px;
}

.public-footer-expanded {
  padding: 30px!important; border: 1.5px solid transparent; border-radius: 22px;
  background: linear-gradient(125deg, #103e31, #164b3a 64%, #2d4c5c) padding-box, var(--finish-border) border-box;
  box-shadow: 0 4px 0 #c9dccb, 0 15px 30px #123f3514;
  margin-bottom: 20px; color: #c6dfcd;
}
.public-footer .footer-logo-line img {
  width: 47px; height: 47px; padding: 6px; background: #eef8e9; border-radius: 12px;
  border: 1px solid #d4e6ca; box-shadow: 0 2px 0 #052c2233;
}
.public-footer .footer-logo-line b, .public-footer .footer-link-group > b,
.public-footer .footer-download > b { color: #f0fff0; font-size: 12px; }
.public-footer .footer-logo-line small { color: #b8d5b9; }
.public-footer .footer-brand p, .public-footer .footer-download p { color: #bed6c3; line-height: 1.7; }
.public-footer [data-tcx-copyright] { color: #abcbb3; }
.public-footer .footer-link-group a, .public-footer .footer-link-group button {
  color: #d1e7d3; font-size: 12px; line-height: 1.65;
}
.public-footer .footer-link-group a:hover, .public-footer .footer-link-group button:hover { color: #fff; }
.public-footer .footer-store {
  background: #eef8eb0b; border-color: #86af944d; color: #edfced; border-radius: 10px; min-height: 42px;
}
.public-footer .footer-store.muted { background: #dce9db; border-color: #d0dfd0; color: #42684d; }
.public-main .tcx-social-button {
  border: 1px solid transparent; border-radius: 13px;
  background: linear-gradient(135deg, #fff, #f2f9f2) padding-box, var(--finish-border) border-box;
  box-shadow: 0 2px 0 #d6e5d8;
}
.public-main .tcx-change-notice { background: #eef8ed; border-color: #b4d5bd; }
.public-main .tcx-social-button small { color: #597363; }
a:focus-visible, button:focus-visible { outline-color: #8a70ab; }
.brand-stage a:focus-visible, .factory-signal-copy button:focus-visible,
.daily-banner-copy button:focus-visible, .public-footer a:focus-visible,
.public-footer button:focus-visible { outline-color: #d9edb7; }
.public-main .reveal-section { opacity: 1; transform: none; transition: none; }
.brand-stage, .campaign-gallery figure, .learning-world-card, .conversation-post,
.path-week-card, .factory-signal-section, .sentence-workbench { animation: none; transition: none; }
.learning-world-card:hover, .conversation-post:hover, .path-week-card:hover,
.public-main button:hover, .public-main .hero-actions a:hover { transform: none; }

@media (max-width: 980px) {
  .brand-stage-heading { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .brand-stage .hero-actions { flex-direction: row; align-items: center; }
  .brand-stage .hero-actions a { flex: 0 1 auto; }
}
@media (max-width: 720px) {
  .brand-stage { padding: 20px; border-radius: 20px; }
  .public-main .brand-stage-heading h1 { font-size: 28px; letter-spacing: -.7px; }
  .brand-stage-heading p:not(.public-eyebrow) { font-size: 13px; }
  .brand-stage-heading .public-eyebrow { font-size: 8px; letter-spacing: .6px; }
  .brand-stage .hero-actions { margin-top: 0; }
  .campaign-gallery figcaption { padding: 12px; }
  .sentence-workbench { padding: 22px; }
  .learning-worlds { padding: 16px; }
  .public-main .learning-worlds-heading h2 { font-size: 24px; }
  .learning-world-card { padding: 12px; }
  .world-card-copy h3 { font-size: 18px; }
  .world-card-copy > span { font-size: 8px; padding: 3px 5px; }
  .factory-signal-section { padding: 22px; }
  .public-main .factory-signal-copy h2 { font-size: 26px; }
  .route-section, .path-sample-section, .download-section { padding: 22px; }
  .conversation-post { padding: 21px; }
  .feedback-form input, .feedback-form select, .feedback-form textarea { font-size: 16px; }
  .public-footer-expanded { padding: 24px!important; }
  .public-footer .footer-store { max-width: none; min-height: 44px; }
}
@media (max-width: 370px) {
  .brand-stage { padding: 16px; }
  .public-main .brand-stage-heading h1 { font-size: 26px; }
  .learning-worlds { padding: 12px; }
  .learning-world-card { padding: 9px; }
  .world-card-copy h3 { font-size: 17px; }
  .world-card-copy > span { font-size: 8px; letter-spacing: 0; padding: 3px; }
  .public-footer-expanded { padding: 20px!important; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .public-main .reveal-section, .learning-world-card, .campaign-gallery figure { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .public-site-view, .public-header, .brand-stage, .learning-worlds, .learning-world-card,
  .sentence-workbench, .conversation-post, .route-section, .path-sample-section, .path-week-card,
  .factory-signal-section, .signal-card, .daily-learning-banner, .download-section,
  .feedback-section, .feedback-form, .public-footer-expanded { background: Canvas; color: CanvasText; box-shadow: none; border-color: CanvasText; }
  .public-main .brand-stage-heading h1, .brand-stage-heading p:not(.public-eyebrow),
  .brand-stage-heading .public-eyebrow, .learning-worlds-heading > p,
  .world-card-copy h3, .world-card-copy p, .world-card-copy em,
  .path-week-card.active p, .path-week-card.active li,
  .public-footer .footer-link-group a, .public-footer .footer-link-group button,
  .public-footer .footer-logo-line b, .public-footer .footer-brand p { color: CanvasText; }
  .public-learn-button, .brand-stage .hero-actions .download-primary,
  .signal-button, .feedback-form .primary { background: Highlight; color: HighlightText; }
}