/* WorkMind AI — individual workshop */
.class-page .class-schedule-summary { margin-top:24px; padding:16px 20px; border:1px solid #d6dfd1; border-left:3px solid #bd4529; border-radius:8px; background:#eef1eb; }
.class-page [data-class-summary] { white-space:pre-line; overflow-wrap:anywhere; font-size:15px; line-height:1.8; }
.class-page .class-schedule-seats { margin-top:6px; font-size:13px; color:#486748; }
.class-page {
  --bg: #f7f8f5; --wash: #eef1eb; --ink: #202720; --sub: #596057;
  --faint: #687064; --line: #dce2d7; --blue: #bd4529; --blue-soft: #f5e8df;
  --green: #486748; --red: #bd4529; --red-soft: #f5e8df; --pen: #bd4529;
  --indigo: #e8eee6; --dark: #202720; --paper: #fff; --manila: #eef1eb;
  --r-lg: 16px; --r-md: 8px;
  --shadow: none; --shadow-lg: none;
  background: var(--bg); font-size: 16px; line-height: 1.7;
}
.class-page .container { max-width: 1240px; padding-inline: 24px; }
.class-page h1, .class-page h2, .class-page h3 { letter-spacing: -.04em; }
.class-page .btn { border-radius: 8px; padding: 16px 24px; min-height: 52px; font-size: 15px; }
.class-page .btn-blue, .class-page .btn-ink { background: var(--blue); color: #fff; }
.class-page .btn-blue:hover, .class-page .btn-ink:hover { background: #9e3822; }
.class-page .btn-line { background: transparent; box-shadow: inset 0 0 0 1px #b9c1b3; }
.class-page .btn-line:hover { background: #e8eee6; }
.class-page .sect { padding-block: 96px; }
.class-page section[id] { scroll-margin-top: 132px; }
.class-page .sect-head { margin-bottom: 32px; max-width: none; }
.class-page .sect-head h2, .class-page .inst h2,
.class-page .waitlist-grid h2 { font-size: 40px; line-height: 1.3; font-weight: 750; }
.class-page .sect-no, .class-page .sect-eyebrow {
  margin-bottom: 16px; color: var(--blue); font-size: 13px; font-weight: 700;
}
.class-page .sect-lede { font-size: 16px; line-height: 1.8; margin: 0; color: var(--sub); }
.class-page .cls-section-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 42px; }
.class-page .cls-section-intro .sect-head { margin: 0; }
.class-page .tt-note, .class-page .s-foot { color: #636b5e; line-height: 1.7; font-size: 13px; margin-top: 20px; }

.class-page .cls-hero { background: #f7f8f5; color: var(--ink); overflow: visible; border-bottom: 1px solid var(--line); }
.class-page .cls-hero::before, .class-page .cls-hero::after { display: none; }
.class-page .hero-inner { grid-template-columns: 1.3fr .85fr; gap: 64px; padding-block: 84px 88px; align-items: center; }
.class-page .hero-eyebrow { padding: 0; background: none; color: var(--blue); border-radius: 0; margin-bottom: 22px; font-size: 13px; }
.class-page .hero h1 { color: var(--ink); font-size: 56px; line-height: 1.23; font-weight: 750; }
.class-page .hero h1 em { font-style: normal; color: var(--blue); }
.class-page .hero-sub { color: var(--sub); font-size: 18px; line-height: 1.8; margin-top: 26px; max-width: none; }
.class-page .hero-actions { margin-top: 32px; gap: 12px; }
.class-page .hero-actions .btn-blue { flex-direction: row; gap: 22px; }
.class-page .hero-note { margin-top: 17px; color: #687064; font-size: 12px; }
.class-page .hero-note a { display: inline-flex; align-items: center; min-height: 44px; color: #40513b; text-decoration: underline; text-underline-offset: 3px; }
.class-page .cls-hero-facts { display: flex; gap: 0; padding-top: 29px; margin-top: 36px; border-top: 1px solid var(--line); }
.class-page .cls-hero-facts > div { flex: 1; border-right: 1px solid var(--line); padding-inline: 20px; }
.class-page .cls-hero-facts > div:first-child { padding-left: 0; }
.class-page .cls-hero-facts > div:last-child { padding-right: 0; border-right: 0; }
.class-page .cls-hero-facts b { display: block; font-size: 15px; font-weight: 700; }
.class-page .cls-hero-facts span { display: block; color: var(--sub); font-size: 12px; margin-top: 5px; }
.class-page .enroll { padding: 30px; background: #e8eee6; border: 1px solid #d5ded0; box-shadow: none; border-radius: 16px; }
.class-page .enroll .e-tag { background: transparent; color: #506448; padding: 0; border-radius: 0; font-size: 12px; }
.class-page .cls-enroll-title { font-size: 27px; line-height: 1.4; margin-top: 14px; font-weight: 700; }
.class-page .enroll .e-price { margin-top: 22px; gap: 5px; flex-direction: column; }
.class-page .enroll .e-price s { font-size: 13px; color: #687064; }
.class-page .enroll .e-price b { font-size: 42px; line-height: 1.15; }
.class-page .enroll .e-urg { color: #65735c; font-weight: 500; font-size: 12px; }
.class-page .enroll .e-inc { border-top-color: #ccd5c5; padding-top: 20px; margin-top: 21px; gap: 10px; }
.class-page .enroll .e-inc li { font-size: 13px; color: #4b5944; }
.class-page .enroll .e-inc a { margin-left: 3px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-size: 11px; }
.class-page .enroll .e-when { background: rgba(255,255,255,.55); border-radius: 8px; margin-top: 21px; padding: 13px 15px; }
.class-page .enroll .e-fine { color: #687064; line-height: 1.8; }

.class-page .make-grid { gap: 16px; }
.class-page .make-grid article { padding: 32px; background: #fff; border-radius: 12px; }
.class-page .make-grid .m-tag { color: #73806b; font-size: 12px; font-weight: 600; margin-bottom: 25px; }
.class-page .make-grid h3 { font-size: 23px; font-weight: 700; }
.class-page .make-grid p { font-size: 15px; max-width: 450px; margin-top: 10px; }
.class-page .cls-result-example { display: block; font-size: 12px; color: var(--blue); padding-top: 22px; margin-top: 23px; border-top: 1px solid #e7ebe3; }
.class-page .cls-students { background: #e8eee6; padding-block: 70px; }
.class-page .cls-students .sect-head h2 { font-size: 32px; }
.class-page .students { gap: 0; }
.class-page .students article { padding: 5px 28px 7px; background: none; border: 0; border-right: 1px solid #ccd5c5; border-radius: 0; }
.class-page .students article:first-child { padding-left: 0; }
.class-page .students article:last-child { border-right: 0; padding-right: 0; }
.class-page .students .s-who { font-size: 19px; font-weight: 700; }
.class-page .students .s-org { color: #687064; font-weight: 400; }
.class-page .students p { font-size: 14px; margin-top: 16px; color: #506448; }
.class-page .students a { font-size: 12px; }
.class-page .s-foot { font-size: 12px; margin-top: 30px; }
.class-page .steps { gap: 0; }
.class-page .steps li { border: 0; border-top: 1px solid #bfc9b8; border-radius: 0; background: none; padding: 28px 28px 0 0; }
.class-page .steps li::before { content: "0" counter(st); padding: 0; background: none; color: var(--blue); border-radius: 0; font-size: 14px; }
.class-page .steps h3 { margin-top: 22px; font-size: 20px; font-weight: 700; }
.class-page .steps p { margin-top: 10px; font-size: 14px; line-height: 1.75; }

.class-page .cls-curriculum { background: #eef1eb; }
.class-page .cls-timetable { gap: 0; border-top: 1px solid #c7d0c0; }
.class-page .cur-block { border: 0; border-bottom: 1px solid #d7dfd1; border-radius: 0; background: transparent; padding: 27px 0; grid-template-columns: 155px 1fr 135px; gap: 28px; align-items: center; }
.class-page .cur-block .cb-time { font-size: 14px; color: #4e5d46; letter-spacing: -.01em; }
.class-page .cur-block .cb-time span { font-size: 12px; color: #74816b; font-weight: 500; }
.class-page .cur-block h3 { font-size: 20px; line-height: 1.5; margin: 0 0 7px; font-weight: 700; }
.class-page .cur-block p { color: #58664f; font-size: 14px; }
.class-page .cls-output { justify-self: end; padding: 6px 12px; border: 1px solid #c7d0c0; border-radius: 6px; font-size: 12px; color: #596d4d; white-space: nowrap; }
.class-page .cls-build .cls-output { background: #dfe8d8; border-color: #d2dfc8; color: #405535; }
.class-page .cur-lunch { padding: 14px 0; border-radius: 0; border-bottom: 1px solid #d7dfd1; background: none; font-size: 12px; color: #6b7763; gap: 50px; }
.class-page .cur-lunch .cb-time { color: #6b7763; font-size: 12px; font-weight: 500; }

.class-page .inst { grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center; }
.class-page .inst h2 { font-size: 36px; }
.class-page .inst .who { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 24px; }
.class-page .cls-instructor-copy { font-size: 15px; color: var(--sub); line-height: 1.8; margin-top: 15px; }
.class-page .inst-facts { margin-top: 23px; gap: 10px; }
.class-page .inst-facts li { font-size: 13px; color: #626e59; }
.class-page .cls-text-link { display: inline-block; margin-top: 25px; color: var(--blue); font-size: 13px; font-weight: 600; }
.class-page .cls-work-screen { padding: 24px; background: #e8eee6; border: 1px solid #d5ded0; border-radius: 12px; }
.class-page .cls-screen-label { display: flex; justify-content: space-between; align-items: center; color: #52644a; font-size: 12px; padding-bottom: 20px; }
.class-page .cls-screen-label b { font-size: 17px; color: #31482b; }
.class-page .cls-work-screen img { width: 100%; height: auto; border-radius: 7px; border: 1px solid #d1dacb; }
.class-page .cls-work-screen figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; color: #65765b; font-size: 11px; margin-top: 14px; }
.class-page .cls-work-screen figcaption a { color: var(--blue); }
.class-page .cls-prep { border-top: 1px solid var(--line); }
.class-page .prep-grid { gap: 16px; }
.class-page .prep-grid article { padding: 28px; background: #fff; border-radius: 12px; }
.class-page .prep-grid h3 { font-size: 20px; font-weight: 700; }
.class-page .prep-grid p { font-size: 14px; margin-top: 15px; }
.class-page #fee { background: #e8eee6; }
.class-page #fee .sect-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
.class-page #fee .sect-no { display: none; }
.class-page #fee .aside { color: #687a5c; background: none; padding: 0; }
.class-page .fee-left, .class-page .fee-right { border: 0; padding: 34px; border-radius: 12px; }
.class-page .fee-right { background: #f4f7f1; }
.class-page .fee-tag { color: var(--blue); background: #f5e8df; border-radius: 5px; }
.class-page .fee-now { font-size: 48px; margin-top: 5px; }
.class-page .fee-right h3 { font-size: 23px; line-height: 1.5; font-weight: 700; }
.class-page .fee-right p { margin-top: 16px; }
.class-page .fee-inc { gap: 10px; }
.class-page .fee-note { color: #687064; line-height: 1.8; }
.class-page .refund-box { background: none; border: 1px solid #cbd5c3; border-radius: 12px; padding: 30px 34px; }
.class-page .refund-box h3 { font-size: 18px; }
.class-page .refund-box ul { gap: 10px 24px; }
.class-page .refund-box li { font-size: 13px; }
.class-page .waitlist-grid { grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.class-page .waitlist-grid .lede { margin-top: 24px; font-size: 17px; line-height: 1.8; }
.class-page .wl-points { margin-top: 28px; gap: 14px; }
.class-page form#waitlist-form { padding: 32px; box-shadow: none; border-radius: 12px; }
.class-page .form-group { margin-top: 20px; }
.class-page .form-group label { font-size: 13px; color: #4e5b45; }
.class-page .form-group input { font-size: 16px; min-height: 50px; border-width: 1px; border-radius: 6px; }
.class-page .privacy-consent { font-size: 12px; }
.class-page .wl-note { color: #65705e; }
.class-page .corp-band { background: #e8eee6; border-radius: 12px; margin-top: 64px; padding: 26px 32px; }
.class-page .corp-band h2 { font-size: 20px; }
.class-page .corp-band h2 em { color: var(--ink); }
.class-page .corp-band .btn-pen { border-color: #c6d0be; background: transparent; }
.class-page #faq { padding-top: 16px; }
.class-page .faq-list { max-width: none; border-top: 1px solid #bfc9b8; }
.class-page .faq-list summary { padding-block: 23px; font-size: 17px; font-weight: 600; }
.class-page .faq-list details p { max-width: 930px; font-size: 15px; padding-bottom: 25px; }
.class-page .mbar { box-shadow: none; background: rgba(247,248,245,.98); }
.class-page .cohort-grid { background: #202720; border-radius: 16px; }
.class-page .cohort-grid .sect-no { color: #d9e5cc; }
.class-page .cohort-meta { color: #d0d9c8; }

@media (max-width: 1100px) {
  .class-page .hero-inner { gap: 35px; grid-template-columns: 1.15fr .85fr; }
  .class-page .hero h1 { font-size: 46px; }
  .class-page .cls-section-intro { gap: 40px; }
  .class-page .inst { gap: 35px; }
  .class-page .waitlist-grid { gap: 48px; }
  .class-page .cls-hero-facts > div { padding-inline: 10px; }
}
@media (max-width: 960px) {
  .class-page .hero-inner { grid-template-columns: 1fr; gap: 45px; padding-block: 60px; }
  .class-page .hero h1 { font-size: 52px; }
  .class-page .enroll { max-width: none; }
  .class-page .cls-enroll-title { font-size: 25px; }
  .class-page .cls-hero-facts { max-width: 620px; }
  .class-page .cls-section-intro, .class-page .inst, .class-page .waitlist-grid { grid-template-columns: 1fr; gap: 28px; }
  .class-page .sect { padding-block: 72px; }
  .class-page .make-grid { grid-template-columns: 1fr 1fr; }
  .class-page .students { grid-template-columns: repeat(2,1fr); gap: 28px 0; }
  .class-page .students article:nth-child(2) { border-right: 0; }
  .class-page .students article:nth-child(3) { padding-left: 0; }
  .class-page .students article:last-child { padding-left: 28px; }
  .class-page .steps { gap: 30px 24px; }
  .class-page .cur-block { grid-template-columns: 125px 1fr; gap: 18px; }
  .class-page .cls-output { grid-column: 2; justify-self: start; }
  .class-page .prep-grid { grid-template-columns: 1fr; }
  .class-page .cls-work-screen { max-width: 730px; }
  .class-page .refund-box ul { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .class-page .container { padding-inline: 20px; }
  .class-page section[id] { scroll-margin-top: 122px; }
  .class-page .hero-inner { padding-block: 42px 48px; gap: 35px; }
  .class-page .hero h1 { font-size: clamp(32px, 8.9vw, 42px); line-height: 1.28; }
  .class-page .hero-eyebrow { font-size: 11px; margin-bottom: 19px; }
  .class-page .hero-sub { font-size: 16px; margin-top: 22px; }
  .class-page .cls-desktop { display: none; }
  .class-page .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .class-page .hero-actions .btn { min-height: 50px; }
  .class-page .hero-note { font-size: 11px; }
  .class-page .cls-hero-facts { margin-top: 26px; padding-top: 22px; }
  .class-page .cls-hero-facts > div { padding-inline: 8px; }
  .class-page .cls-hero-facts b { font-size: 12px; }
  .class-page .cls-hero-facts span { font-size: 10px; }
  .class-page .enroll { padding: 25px 23px; }
  .class-page .cls-enroll-title { font-size: 25px; }
  .class-page .sect { padding-block: 56px; }
  .class-page .sect-head h2, .class-page .inst h2, .class-page .waitlist-grid h2 { font-size: 30px; }
  .class-page .cls-students .sect-head h2 { font-size: 28px; }
  .class-page .sect-no, .class-page .sect-eyebrow { font-size: 12px; margin-bottom: 12px; }
  .class-page .cls-section-intro { margin-bottom: 28px; gap: 22px; }
  .class-page .sect-lede { font-size: 15px; }
  .class-page .make-grid { grid-template-columns: 1fr; }
  .class-page .make-grid article { padding: 26px; }
  .class-page .make-grid .m-tag { margin-bottom: 17px; }
  .class-page .make-grid h3 { font-size: 21px; }
  .class-page .students { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .class-page .students article { padding-inline: 15px; }
  .class-page .students article:last-child { padding-left: 15px; }
  .class-page .students .s-who { font-size: 17px; }
  .class-page .students p { font-size: 13px; }
  .class-page .students .s-org { font-size: 11px; }
  .class-page .steps { grid-template-columns: 1fr; gap: 0; }
  .class-page .steps li { padding: 22px 0; }
  .class-page .steps h3 { margin-top: 11px; font-size: 21px; }
  .class-page .steps li:last-child { padding-bottom: 0; }
  .class-page .cur-block { grid-template-columns: 1fr; gap: 14px; padding-block: 25px; }
  .class-page .cur-block .cb-time { display: flex; align-items: baseline; gap: 12px; }
  .class-page .cur-block .cb-time span { margin: 0; }
  .class-page .cur-block h3 { font-size: 19px; }
  .class-page .cls-output { grid-column: 1; }
  .class-page .cur-lunch { gap: 20px; }
  .class-page .cls-work-screen { padding: 17px; }
  .class-page .cls-screen-label { padding-bottom: 14px; font-size: 11px; }
  .class-page .prep-grid article { padding: 25px; }
  .class-page .fee-left, .class-page .fee-right, .class-page .refund-box { padding: 26px 23px; }
  .class-page .fee-now { font-size: 42px; }
  .class-page .fee-inc li { font-size: 13px; }
  .class-page .fee-right h3 { font-size: 21px; }
  .class-page .waitlist-grid .lede { font-size: 16px; margin-top: 20px; }
  .class-page form#waitlist-form { padding: 25px 22px; }
  .class-page .corp-band { padding: 25px; margin-top: 45px; }
  .class-page .corp-band h2 { font-size: 18px; }
  .class-page .corp-band .btn { width: 100%; }
  .class-page .faq-list summary { font-size: 15px; padding-block: 21px; }
  .class-page .faq-list details p { font-size: 14px; }
  .class-page #faq { padding-top: 10px; }
}

/* Result-first class examples. The demos use local sample data only. */
.class-page .hero-inner { grid-template-columns: 1.1fr 1fr; gap: 64px; }
.class-page .hero h1 { font-size: clamp(40px, 4vw, 56px); }
.class-page .hero-sub { font-size: 18px; }
.class-page .ce-hero-preview { border: 1px solid #d5ded0; background: #e8eee6; padding: 22px; border-radius: 16px; }
.class-page .ce-preview-top { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; font-size: 13px; color: #47553f; }
.class-page .ce-app-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-weight: 800; background: #263c28; color: #fff; }
.class-page .ce-preview-badge { margin-left: auto; color: #607255; font-size: 10px; }
.class-page .ce-preview-item { display: flex; align-items: flex-start; gap: 17px; background: #fff; border: 1px solid #dce2d7; border-radius: 10px; padding: 20px; margin-top: 10px; transition: border-color .15s ease, transform .15s ease; }
.class-page .ce-preview-item:hover { border-color: #829477; transform: translateY(-2px); }
.class-page .ce-preview-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #e0d5c7; background: #f5eee4; color: #a06437; border-radius: 10px; font-size: 23px; line-height: 1; }
.class-page .ce-icon-blog { background: #edf1e9; border-color: #dbe2d5; color: #536947; font-size: 18px; font-weight: 700; }
.class-page .ce-icon-social { background: #f4e8e0; border-color: #ead5c8; color: #b04c2f; }
.class-page .ce-preview-kicker { display: block; color: #687064; font-size: 10px; margin-bottom: 5px; }
.class-page .ce-preview-item h2 { font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.class-page .ce-preview-item h2 br { display: none; }
.class-page .ce-preview-item p { margin-top: 11px; font-size: 11px; color: #78826f; }
.class-page .ce-preview-item p span { margin-right: 5px; padding: 3px 6px; border-radius: 3px; background: #edf2e9; color: #5c7350; font-size: 9px; }
.class-page .ce-preview-arrow { margin-left: auto; color: #829078; font-size: 17px; }
.class-page .ce-preview-note { text-align: center; font-size: 11px; color: #6b7a60; margin-top: 16px; }
.class-page .cls-results { padding-bottom: 72px; }
.class-page .ce-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #bfc9b8; margin-bottom: 36px; }
.class-page .ce-tabs button { position: relative; border: 0; border-radius: 8px 8px 0 0; background: transparent; padding: 19px 20px 20px; font-size: 17px; font-weight: 650; color: #6d7765; line-height: 1.4; }
.class-page .ce-tabs button span { font-size: 11px; font-weight: 500; margin-right: 12px; vertical-align: middle; }
.class-page .ce-tabs button[aria-selected="true"] { color: #bd4529; background: #f3ece4; }
.class-page .ce-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #bd4529; }
.class-page .ce-tabs button:hover { background: #edf0e8; }
.class-page .ce-panel { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 45px; outline-offset: 6px; }
.class-page .ce-panel[hidden] { display: none; }
.class-page .ce-panel-copy { padding-block: 24px; }
.class-page .ce-category { display: block; font-size: 12px; font-weight: 500; color: #6a765f; margin-bottom: 17px; }
.class-page .ce-panel-copy h3 { font-size: 33px; line-height: 1.32; font-weight: 750; }
.class-page .ce-panel-copy > p { font-size: 15px; color: var(--sub); line-height: 1.8; margin-top: 22px; }
.class-page .ce-outputs { display: grid; gap: 9px; margin-top: 25px; font-size: 13px; color: #3f5036; }
.class-page .ce-outputs li { position: relative; padding-left: 19px; }
.class-page .ce-outputs li::before { content: "✓"; position: absolute; left: 0; color: #7b8f6c; font-size: 12px; }
.class-page .ce-panel-copy .ce-workflow { border-top: 1px solid #d8dfd2; padding-top: 21px; font-size: 11px; line-height: 1.8; margin-top: 25px; }
.class-page .ce-topic-link { display: inline-flex; align-items: center; gap: 25px; font-size: 13px; font-weight: 650; color: #a63e24; margin-top: 22px; }
.class-page .ce-topic-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.class-page .ce-window { min-width: 0; border: 1px solid #cdd6c5; border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 12px 28px #31432208; }
.class-page .ce-window-bar { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #dce2d7; padding: 16px 20px; background: #edf1e9; font-size: 11px; color: #4e5f43; }
.class-page .ce-window-bar > span:last-child { margin-left: auto; color: #738469; font-size: 9px; }
.class-page .ce-window-dots { display: flex; gap: 4px; margin-right: 2px; }
.class-page .ce-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #b9c4ae; }
.class-page .ce-ui-label { display: block; font-size: 10px; font-weight: 650; color: #67765b; }
.class-page .ce-ui-help { font-size: 9px; color: #829175; margin-top: 6px; }
.class-page .ce-mail-layout { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 370px; }
.class-page .ce-inbox { padding: 21px 14px; background: #f7f9f4; border-right: 1px solid #e2e7db; }
.class-page .ce-inbox > .ce-ui-label, .class-page .ce-inbox > .ce-ui-help { margin-left: 8px; }
.class-page .ce-inbox > .ce-ui-label b { margin-left: 8px; color: #718861; }
.class-page .ce-mail-item { width: 100%; display: block; text-align: left; margin-top: 14px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 14px 11px; }
.class-page .ce-mail-item.is-selected { background: #fff; border-color: #bac9ae; }
.class-page .ce-mail-item:hover { background: #edf2e7; }
.class-page .ce-mail-item > span { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; color: #617155; }
.class-page .ce-mail-item small { font-size: 8px; color: #8a967f; }
.class-page .ce-mail-item b { display: block; font-size: 12px; font-weight: 650; color: #405335; line-height: 1.5; margin-top: 7px; }
.class-page .ce-mail-item em { display: inline-block; font-style: normal; font-size: 9px; line-height: 1.5; margin-top: 9px; color: #5f774f; background: #eaf0e3; border-radius: 3px; padding: 2px 6px; }
.class-page .ce-reply { padding: 23px 22px; }
.class-page .ce-result-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.class-page .ce-result-tag, .class-page .ce-review-tag { display: inline-block; color: #4e6e3c; background: #eef3e8; border-radius: 4px; font-size: 9px; line-height: 1.4; font-weight: 600; padding: 4px 7px; }
.class-page .ce-review-tag { margin-left: auto; background: #f6ede6; color: #a36540; font-size: 8px; font-weight: 500; }
.class-page .ce-reply h4 { font-size: 17px; line-height: 1.5; margin-top: 18px; letter-spacing: -.035em; color: #35492c; }
.class-page .ce-mail-summary { margin-top: 19px; padding: 12px; border: 1px solid #e2e8da; border-radius: 6px; background: #f8faf5; }
.class-page .ce-mail-summary span { font-size: 9px; font-weight: 600; color: #8a956f; }
.class-page .ce-mail-summary p { font-size: 11px; color: #596d49; line-height: 1.6; margin-top: 5px; }
.class-page .ce-draft { margin-top: 22px; }
.class-page .ce-draft > p { font-size: 12px; color: #5f6b57; line-height: 1.85; margin-top: 10px; }
.class-page .ce-draft-signature { display: block; font-size: 10px; color: #7a876f; margin-top: 12px; }
.class-page .ce-local-note { display: block; font-size: 9px; color: #859378; line-height: 1.6; margin-top: 16px; }
.class-page .ce-blog-layout { display: grid; grid-template-columns: .78fr 1.22fr; min-height: 370px; }
.class-page .ce-blog-input { padding: 25px 20px; border-right: 1px solid #e2e7db; background: #f7f9f4; }
.class-page .ce-blog-input select { width: 100%; min-height: 42px; font: inherit; font-size: 11px; color: #516341; padding: 8px 24px 8px 9px; background: #fff; border: 1px solid #cbd6c0; border-radius: 5px; margin-block: 9px 26px; }
.class-page .ce-blog-input > p { font-size: 11px; color: #647357; line-height: 2; margin-top: 10px; min-height: 81px; }
.class-page #ce-blog-notes, .class-page #ce-blog-outline, .class-page #ce-social-caption { white-space: pre-line; }
.class-page .ce-demo-button { display: flex; gap: 8px; justify-content: space-between; width: 100%; border: 0; border-radius: 5px; background: #415b35; color: #fff; font-size: 10px; line-height: 1.5; padding: 12px 11px; margin-top: 22px; }
.class-page .ce-demo-button:hover { background: #304529; }
.class-page .ce-blog-output { padding: 25px 24px; }
.class-page .ce-blog-output h4 { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -.04em; color: #33462a; margin-top: 20px; }
.class-page .ce-blog-outline { margin-top: 18px; padding: 12px 14px; background: #f5f7f1; border-left: 2px solid #ccd8be; }
.class-page .ce-blog-outline p { font-size: 10px; color: #627653; line-height: 1.9; margin-top: 6px; }
.class-page .ce-blog-output > p { font-size: 12px; line-height: 1.9; color: #687660; margin-top: 18px; }
.class-page .ce-blog-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e1e7d9; padding-top: 12px; margin-top: 20px; color: #89977b; font-size: 8px; }
.class-page .ce-social-body { padding: 20px; }
.class-page .ce-social-post { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid #dce4d2; border-radius: 7px; overflow: hidden; }
.class-page .ce-social-art { background: #dce2cd; color: #3c5432; padding: 21px 18px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.class-page .ce-social-art > span { font-size: 6px; letter-spacing: .14em; font-weight: 650; }
.class-page .ce-social-art > b { font-size: 26px; line-height: 1.35; letter-spacing: -.05em; margin-top: 21px; font-weight: 650; }
.class-page .ce-social-art svg { width: 90%; height: auto; margin-top: 12px; }
.class-page .ce-social-art small { font-size: 7px; color: #738364; margin-top: auto; }
.class-page .ce-social-caption { min-width: 0; display: flex; flex-direction: column; padding: 18px; background: #fff; }
.class-page .ce-caption-controls { display: flex; flex-wrap: wrap; gap: 5px; }
.class-page .ce-caption-controls button { font-size: 8px; color: #879779; padding: 5px 7px; border-radius: 4px; border: 1px solid #e0e7d7; background: #fff; }
.class-page .ce-caption-controls button[aria-pressed="true"] { color: #4a6639; background: #eff4e9; border-color: #b9cbaa; }
.class-page .ce-social-caption > p { font-size: 12px; line-height: 1.85; color: #5a6b4f; margin-top: 19px; }
.class-page .ce-hashtags { display: block; font-size: 10px; color: #617f4e; margin-top: 14px; line-height: 1.7; }
.class-page .ce-social-caption > .ce-review-tag { margin-top: auto; margin-left: 0; align-self: flex-start; }
.class-page .ce-content-plan { margin-top: 20px; }
.class-page .ce-plan-head { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 11px; color: #546d44; }
.class-page .ce-plan-head span { font-size: 8px; color: #8b987e; }
.class-page .ce-content-plan > div:not(.ce-plan-head) { display: flex; align-items: center; gap: 11px; border-top: 1px solid #e7ecdf; padding: 9px 0; font-size: 10px; color: #65775a; }
.class-page .ce-content-plan > div > span:first-child:not(:last-child) { width: 22px; font-size: 9px; }
.class-page .ce-content-plan em { margin-left: auto; font-style: normal; font-size: 8px; color: #869a75; }
.class-page .ce-content-plan small { min-width: 49px; text-align: right; font-size: 8px; color: #939f85; }
.class-page .ce-sample-disclosure { display: flex; gap: 55px; padding: 25px 0 0; margin-top: 30px; border-top: 1px solid #dde4d6; }
.class-page .ce-sample-disclosure p { flex: 1; font-size: 11px; line-height: 1.8; color: #7b8870; }
.class-page .ce-sample-disclosure b { color: #647756; font-weight: 550; }
.class-page .ce-enroll-section { padding: 70px 0; background: #edf1e8; border-block: 1px solid #dce4d2; }
.class-page .ce-enroll-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 90px; }
.class-page .ce-enroll-copy h2 { font-size: 36px; line-height: 1.35; font-weight: 700; margin-top: 18px; }
.class-page .ce-enroll-copy > p { font-size: 15px; color: #64745a; margin-top: 22px; line-height: 1.85; }
.class-page .ce-enroll-copy ul { display: grid; gap: 18px; margin-top: 30px; font-size: 13px; color: #6d7d62; }
.class-page .ce-enroll-copy li b { display: inline-block; min-width: 72px; color: #405a33; }
.class-page .ce-enroll-section .enroll { background: #fff; }
.class-page .ce-enroll-section .enroll .e-when { background: #eef3e8; }
.class-page .ce-instructor-portrait { max-width: 470px; justify-self: center; width: 100%; background: #e4e7e1; border: 1px solid #d5ded0; border-radius: 12px; overflow: hidden; }
.class-page .ce-instructor-portrait > img { display: block; width: 100%; height: 465px; object-fit: cover; object-position: center 28%; }
.class-page .ce-instructor-portrait figcaption { display: flex; justify-content: space-between; gap: 15px; padding: 16px 20px; font-size: 11px; color: #596b50; background: #eef2e8; }
.class-page .ce-instructor-portrait figcaption a { font-size: 10px; color: #a84b2d; }
.class-page :is(.ce-tabs button, .ce-mail-item, .ce-caption-controls button, .ce-demo-button, .ce-preview-item, .ce-blog-input select):focus-visible { outline: 2px solid #bd4529; outline-offset: 3px; }

@media (max-width: 1100px) {
  .class-page .hero-inner { gap: 40px; }
  .class-page .ce-preview-item { padding: 17px 14px; gap: 11px; }
  .class-page .ce-preview-item h2 { font-size: 18px; }
  .class-page .ce-panel { grid-template-columns: .6fr 1fr; gap: 30px; }
  .class-page .ce-panel-copy h3 { font-size: 29px; }
  .class-page .ce-panel-copy > p { font-size: 14px; }
  .class-page .ce-mail-layout { grid-template-columns: .82fr 1fr; }
  .class-page .ce-reply { padding: 20px 16px; }
  .class-page .ce-inbox { padding-inline: 8px; }
  .class-page .ce-mail-item { padding: 12px 9px; }
  .class-page .ce-blog-layout { grid-template-columns: .8fr 1fr; }
  .class-page .ce-blog-input, .class-page .ce-blog-output { padding-inline: 15px; }
  .class-page .ce-enroll-grid { gap: 50px; }
  .class-page .ce-social-body { padding: 14px; }
  .class-page .ce-social-caption { padding: 14px 12px; }
  .class-page .ce-social-art { padding-inline: 12px; }
  .class-page .ce-social-art > b { font-size: 23px; }
}
@media (max-width: 960px) {
  .class-page .hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .class-page .hero h1 { font-size: 50px; }
  .class-page .ce-hero-preview { max-width: 680px; width: 100%; }
  .class-page .ce-preview-item { padding: 19px; gap: 18px; }
  .class-page .ce-preview-item h2 { font-size: 21px; }
  .class-page .ce-panel { grid-template-columns: 1fr; gap: 28px; }
  .class-page .ce-panel-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding-block: 5px; align-items: start; }
  .class-page .ce-category { grid-column: 1 / -1; }
  .class-page .ce-panel-copy h3 { grid-column: 1; grid-row: 2; }
  .class-page .ce-panel-copy > p { grid-column: 1; margin-top: 17px; }
  .class-page .ce-panel-copy .ce-outputs { grid-column: 2; grid-row: 2 / 4; margin-top: 2px; }
  .class-page .ce-panel-copy .ce-workflow { grid-column: 1; margin-top: 19px; padding-top: 15px; }
  .class-page .ce-topic-link { grid-column: 2; grid-row: 4; margin-top: 20px; }
  .class-page .ce-mail-layout { min-height: 330px; }
  .class-page .ce-inbox { padding: 24px 19px; }
  .class-page .ce-mail-item { padding: 17px; }
  .class-page .ce-reply { padding: 25px; }
  .class-page .ce-blog-input, .class-page .ce-blog-output { padding: 25px; }
  .class-page .ce-social-body { padding: 24px; }
  .class-page .ce-social-art { padding: 28px 23px 20px; }
  .class-page .ce-social-art > b { font-size: 30px; }
  .class-page .ce-social-art svg { max-width: 200px; }
  .class-page .ce-social-caption { padding: 26px; }
  .class-page .ce-enroll-grid { grid-template-columns: 1fr; gap: 32px; }
  .class-page .ce-instructor-portrait { justify-self: start; max-width: 520px; }
}
@media (max-width: 600px) {
  .class-page .hero h1 { font-size: clamp(31px, 8.7vw, 43px); }
  .class-page .hero-sub { font-size: 16px; }
  .class-page .ce-hero-preview { padding: 17px; border-radius: 12px; }
  .class-page .ce-preview-top { font-size: 11px; margin-bottom: 15px; }
  .class-page .ce-preview-item { padding: 15px 12px; gap: 12px; }
  .class-page .ce-preview-icon { flex-basis: 31px; height: 31px; font-size: 18px; border-radius: 7px; }
  .class-page .ce-icon-blog { font-size: 14px; }
  .class-page .ce-preview-kicker { font-size: 9px; }
  .class-page .ce-preview-item h2 { font-size: 18px; }
  .class-page .ce-preview-item h2 br { display: initial; }
  .class-page .ce-preview-item p { font-size: 9px; margin-top: 9px; }
  .class-page .ce-preview-item p span { font-size: 8px; }
  .class-page .ce-preview-note { font-size: 10px; }
  .class-page .ce-tabs { margin-bottom: 26px; }
  .class-page .ce-tabs button { padding: 15px 5px; font-size: 13px; }
  .class-page .ce-tabs button span { display: block; font-size: 9px; margin: 0 0 4px; }
  .class-page .ce-panel-copy { display: block; }
  .class-page .ce-window { order: -1; }
  .class-page .ce-category { font-size: 11px; margin-bottom: 13px; }
  .class-page .ce-panel-copy h3 { font-size: 28px; }
  .class-page .ce-panel-copy h3 br { display: none; }
  .class-page .ce-panel-copy > p { font-size: 14px; margin-top: 16px; }
  .class-page .ce-panel-copy .ce-outputs { margin-top: 18px; font-size: 12px; gap: 7px; }
  .class-page .ce-panel-copy .ce-workflow { font-size: 10px; margin-top: 20px; }
  .class-page .ce-topic-link { margin-top: 17px; font-size: 12px; }
  .class-page .ce-window-bar { padding: 13px; gap: 8px; font-size: 10px; }
  .class-page .ce-window-bar > span:last-child { font-size: 8px; }
  .class-page .ce-mail-layout { grid-template-columns: 1fr; }
  .class-page .ce-inbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 16px 12px; border-right: 0; border-bottom: 1px solid #e2e7db; }
  .class-page .ce-inbox > .ce-ui-label, .class-page .ce-inbox > .ce-ui-help { grid-column: 1 / -1; margin-left: 1px; }
  .class-page .ce-inbox > .ce-ui-help { margin-top: 0; }
  .class-page .ce-mail-item { padding: 10px 8px; margin-top: 5px; }
  .class-page .ce-mail-item > span { font-size: 8px; }
  .class-page .ce-mail-item small { display: none; }
  .class-page .ce-mail-item b { font-size: 10px; }
  .class-page .ce-mail-item em { font-size: 8px; padding: 2px 4px; }
  .class-page .ce-reply { padding: 21px; }
  .class-page .ce-reply h4 { font-size: 17px; }
  .class-page .ce-draft > p { font-size: 12px; }
  .class-page .ce-blog-layout { grid-template-columns: 1fr; }
  .class-page .ce-blog-input { border-right: 0; border-bottom: 1px solid #e2e7db; padding: 20px; }
  .class-page .ce-blog-input select { font-size: 16px; margin-bottom: 19px; }
  .class-page .ce-blog-input > p { min-height: 0; font-size: 12px; }
  .class-page .ce-demo-button { font-size: 12px; padding: 13px; margin-top: 18px; }
  .class-page .ce-blog-output { padding: 23px 21px; }
  .class-page .ce-blog-output h4 { font-size: 20px; }
  .class-page .ce-blog-output > p { font-size: 12px; }
  .class-page .ce-blog-outline p { font-size: 11px; }
  .class-page .ce-social-body { padding: 14px; }
  .class-page .ce-social-post { grid-template-columns: 1fr; }
  .class-page .ce-social-art { padding: 25px 23px 20px; }
  .class-page .ce-social-art > span { font-size: 8px; }
  .class-page .ce-social-art > b { font-size: 32px; margin-top: 20px; }
  .class-page .ce-social-art svg { width: 145px; height: auto; margin-top: 13px; }
  .class-page .ce-social-art small { margin-top: 10px; font-size: 8px; }
  .class-page .ce-social-caption { padding: 20px; }
  .class-page .ce-caption-controls button { min-height: 32px; font-size: 10px; padding: 7px 10px; }
  .class-page .ce-social-caption > p { font-size: 12px; }
  .class-page .ce-social-caption > .ce-review-tag { margin-top: 18px; }
  .class-page .ce-hashtags { font-size: 11px; }
  .class-page .ce-content-plan > div:not(.ce-plan-head) { font-size: 10px; gap: 7px; }
  .class-page .ce-content-plan small { font-size: 7px; min-width: 40px; }
  .class-page .ce-content-plan em { font-size: 8px; }
  .class-page .ce-sample-disclosure { display: block; padding-top: 19px; margin-top: 25px; }
  .class-page .ce-sample-disclosure p { font-size: 10px; }
  .class-page .ce-sample-disclosure p + p { margin-top: 10px; }
  .class-page .ce-enroll-section { padding: 50px 0; }
  .class-page .ce-enroll-copy h2 { font-size: 29px; margin-top: 15px; }
  .class-page .ce-enroll-copy > p { font-size: 14px; }
  .class-page .ce-enroll-copy ul { font-size: 12px; gap: 13px; }
  .class-page .ce-enroll-copy li b { min-width: 65px; }
  .class-page .ce-instructor-portrait > img { height: 370px; }
  .class-page .ce-instructor-portrait figcaption { flex-wrap: wrap; padding: 15px 18px; gap: 6px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .class-page .ce-preview-item { transition: none; }
}

/* Open project gallery: examples, not fixed course tracks. */
.class-page .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 58px; }
.class-page .cg-hero-canvas { position: relative; min-width: 0; height: 488px; background: #e8eee6; border: 1px solid #d6dfd1; border-radius: 18px; padding: 26px; overflow: hidden; }
.class-page .cg-canvas-label { display: flex; justify-content: space-between; gap: 12px; color: #51634a; font-size: 12px; font-weight: 600; }
.class-page .cg-canvas-label > span:last-child { font-size: 10px; font-weight: 400; }
.class-page .cg-hero-site { position: absolute; top: 69px; left: 26px; width: 79%; border-radius: 8px; border: 1px solid #d5d7ce; overflow: hidden; background: #f6f1e8; box-shadow: 0 14px 30px #3646310a; }
.class-page .cg-mini-chrome { display: flex; gap: 4px; align-items: center; background: #fff; padding: 9px 12px; border-bottom: 1px solid #e4e4dc; }
.class-page .cg-mini-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #d5dace; }
.class-page .cg-mini-chrome span { margin-left: 8px; font-size: 8px; color: #7b8375; }
.class-page .cg-hero-site-body { position: relative; min-height: 240px; padding: 21px; overflow: hidden; }
.class-page .cg-mini-brand { display: block; color: #735f4c; font-size: 9px; font-weight: 650; letter-spacing: .09em; }
.class-page .cg-hero-site-body strong { display: block; position: relative; z-index: 1; margin-top: 31px; color: #725440; font-size: 26px; line-height: 1.3; letter-spacing: -.06em; font-weight: 650; }
.class-page .cg-mini-link { display: inline-block; margin-top: 23px; border-bottom: 1px solid #a68f77; font-size: 8px; color: #7b6451; padding-bottom: 4px; }
.class-page .cg-pottery { position: absolute; right: -2%; bottom: -4px; width: 47%; height: 177px; background: #e7ded0; border-radius: 46% 46% 0 0; }
.class-page .cg-pottery i { position: absolute; display: block; background: #c5a285; box-shadow: inset -10px 0 18px #7d553821; }
.class-page .cg-pottery i:first-child { height: 108px; width: 70px; bottom: 12px; left: 30px; border-radius: 34% 34% 45% 45%; }
.class-page .cg-pottery i:nth-child(2) { height: 55px; width: 90px; bottom: 0; left: 0; border-radius: 8% 8% 50% 50%; background: #e6cdb3; }
.class-page .cg-pottery i:last-child { height: 60px; width: 42px; bottom: 0; right: 3px; border-radius: 30% 30% 45% 45%; background: #93735e; }
.class-page .cg-hero-phone { position: absolute; right: 20px; bottom: 63px; z-index: 2; width: 162px; min-height: 261px; padding: 24px 14px 22px; border: 5px solid #344433; border-radius: 24px; background: #f7f9f1; box-shadow: 0 12px 28px #263e2520; }
.class-page .cg-phone-speaker { position: absolute; left: 50%; top: 7px; width: 35px; height: 4px; transform: translateX(-50%); border-radius: 9px; background: #344433; }
.class-page .cg-mini-label { display: block; font-size: 7px; color: #7a8b6e; }
.class-page .cg-hero-phone > strong { display: block; font-size: 15px; letter-spacing: -.06em; line-height: 1.4; margin-top: 8px; color: #33462b; }
.class-page .cg-hero-progress { display: flex; gap: 7px; align-items: baseline; margin: 17px 0 13px; }
.class-page .cg-hero-progress b { font-size: 35px; font-weight: 600; line-height: 1; color: #567244; }
.class-page .cg-hero-progress > span { font-size: 9px; color: #8b977e; }
.class-page .cg-mini-habit { display: flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 8px; color: #52614a; border-bottom: 1px solid #e3e9db; }
.class-page .cg-mini-habit i { display: inline-flex; justify-content: center; align-items: center; height: 14px; width: 14px; background: #dde8cf; color: #62794a; border-radius: 50%; font-style: normal; }
.class-page .cg-mini-habit .cg-unchecked { border: 1px solid #d5dfc9; background: transparent; }
.class-page .cg-phone-bottom { position: absolute; bottom: 7px; left: 50%; width: 42px; height: 3px; transform: translateX(-50%); border-radius: 8px; background: #344433; }
.class-page .cg-hero-receipt { position: absolute; left: 26px; bottom: 51px; z-index: 3; width: 225px; background: #fff; border: 1px solid #e1ded5; border-radius: 8px; padding: 15px 18px; transform: rotate(-3deg); box-shadow: 0 8px 20px #3442320a; }
.class-page .cg-hero-receipt > span { display: block; color: #8a8b7e; font-size: 7px; }
.class-page .cg-hero-receipt > strong { display: flex; align-items: center; justify-content: space-between; font-size: 17px; color: #4a5240; margin-top: 7px; }
.class-page .cg-hero-receipt small { font-size: 8px; color: #9a9e91; font-weight: 400; }
.class-page .cg-hero-receipt > p { display: flex; justify-content: space-between; font-size: 9px; color: #747d6a; padding: 11px 0 8px; border-bottom: 1px solid #eceee5; }
.class-page .cg-hero-receipt > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; color: #bf583b; }
.class-page .cg-hero-receipt > div > span { font-size: 8px; }
.class-page .cg-hero-receipt > div > b { font-size: 17px; }
.class-page .cg-hero-receipt .cg-receipt-bottom { padding-top: 4px; font-size: 7px; }
.class-page .cg-canvas-link { position: absolute; left: 26px; right: 26px; bottom: 18px; display: flex; justify-content: space-between; font-size: 10px; color: #5a6b4f; }
.class-page .cg-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.class-page .cg-project { min-width: 0; display: flex; flex-direction: column; }
.class-page .cg-project-demo { min-height: 390px; height: auto; flex: 1; border: 1px solid #e1e4da; border-radius: 12px; padding: 18px; overflow: hidden; }
.class-page .cg-demo-caption { display: flex; justify-content: space-between; gap: 8px; color: #747b6d; font-size: 10px; margin-bottom: 17px; }
.class-page .cg-demo-caption > span:last-child { color: #8e9587; font-size: 9px; }
.class-page .cg-website-demo { background: #eee8dd; }
.class-page .cg-site-preview { --site-bg:#f7f2e9; --site-ink:#795d48; --site-art:#d8c3aa; --site-pot:#b68f70; background: var(--site-bg); border: 1px solid #d9d3c6; border-radius: 5px; overflow: hidden; color: var(--site-ink); }
.class-page .cg-site-preview[data-site-theme="portfolio"] { --site-bg:#edf0f5; --site-ink:#3b4862; --site-art:#bfcadb; --site-pot:#788aa9; }
.class-page .cg-site-preview[data-site-theme="cafe"] { --site-bg:#edf0e3; --site-ink:#4a5c39; --site-art:#c4cead; --site-pot:#859465; }
.class-page .cg-site-nav { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid #747b5b19; font-size: 9px; }
.class-page .cg-site-nav > b { font-size: 9px; letter-spacing: .04em; }
.class-page .cg-site-nav > span { font-size: 6px; letter-spacing: .06em; }
.class-page .cg-site-main { padding: 18px 15px; position: relative; min-height: 186px; overflow: hidden; }
.class-page .cg-site-main > span:first-child { font-size: 7px; letter-spacing: .03em; }
.class-page .cg-site-main h4 { position: relative; z-index: 1; font-size: 21px; line-height: 1.35; letter-spacing: -.05em; font-weight: 650; margin-top: 9px; white-space: pre-line; }
.class-page .cg-site-main > p { position: relative; z-index: 1; font-size: 8px; line-height: 1.65; margin-top: 11px; white-space: pre-line; }
.class-page .cg-site-cta { display: inline-block; font-size: 7px; border-bottom: 1px solid currentColor; padding-bottom: 3px; margin-top: 13px; }
.class-page .cg-site-art { position: absolute; height: 128px; width: 35%; right: 0; bottom: 0; background: var(--site-art); border-radius: 48% 48% 0 0; }
.class-page .cg-site-art i { position: absolute; display: block; background: var(--site-pot); box-shadow: inset -8px 0 16px #60412a18; }
.class-page .cg-site-art i:first-child { width: 46px; height: 81px; bottom: 4px; left: 18px; border-radius: 30% 30% 42% 42%; }
.class-page .cg-site-art i:last-child { width: 58px; height: 34px; bottom: 0; left: 0; border-radius: 0 0 50% 50%; background: var(--site-bg); }
.class-page [data-site-theme="portfolio"] .cg-site-art { border-radius: 0; transform: rotate(-12deg); right: -8px; bottom: -4px; }
.class-page [data-site-theme="portfolio"] .cg-site-art i:first-child { border-radius: 50%; height: 62px; width: 62px; bottom: 40px; }
.class-page [data-site-theme="portfolio"] .cg-site-art i:last-child { border-radius: 0; width: 72px; height: 25px; bottom: 12px; left: 8px; }
.class-page [data-site-theme="cafe"] .cg-site-art i:first-child { height: 56px; width: 55px; border-radius: 3px 3px 18px 18px; bottom: 8px; left: 9px; }
.class-page [data-site-theme="cafe"] .cg-site-art i:last-child { width: 75px; height: 8px; border-radius: 50%; }
.class-page .cg-site-footer { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #747b5b19; font-size: 6px; }
.class-page .cg-demo-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.class-page .cg-demo-controls button { font: inherit; font-size: 10px; min-height: 29px; padding: 4px 10px; border: 1px solid #d4ccbb; border-radius: 5px; color: #857762; background: transparent; }
.class-page .cg-demo-controls button[aria-pressed="true"] { background: #fffdf7; color: #5e4e38; border-color: #bbaa92; }
.class-page .cg-app-demo { background: #e9eee3; }
.class-page .cg-habit-app { max-width: 265px; margin-inline: auto; border: 1px solid #ced9c1; border-radius: 13px; background: #fbfcf7; padding: 16px 18px; }
.class-page .cg-app-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #546f43; }
.class-page .cg-app-top > span { font-size: 8px; color: #899579; }
.class-page .cg-habit-app h4 { font-size: 19px; letter-spacing: -.05em; line-height: 1.35; color: #425735; margin-top: 13px; }
.class-page .cg-app-progress { display: flex; justify-content: space-between; align-items: baseline; margin-top: 15px; color: #567744; }
.class-page .cg-app-progress > strong { font-size: 27px; line-height: 1.2; font-weight: 600; }
.class-page .cg-app-progress strong > span { font-size: 14px; color: #9ca98f; margin-left: 3px; }
.class-page .cg-app-progress > span { font-size: 8px; color: #7f8e71; }
.class-page .cg-progress-track { background: #e9efdf; border-radius: 4px; height: 5px; overflow: hidden; margin-top: 8px; }
.class-page .cg-progress-track > span { display: block; height: 100%; background: #8ea672; border-radius: inherit; }
.class-page .cg-habit-list { margin-top: 12px; }
.class-page .cg-habit-list button { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #e8ede0; padding: 9px 0; background: transparent; color: #5c6d4e; font: inherit; font-size: 10px; text-align: left; }
.class-page .cg-habit-check { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfdabc; color: #5f7c42; border-radius: 50%; font-size: 10px; flex-shrink: 0; }
.class-page .cg-habit-list button[aria-pressed="true"] .cg-habit-check { background: #e0ebcf; }
.class-page .cg-habit-list small { margin-left: auto; font-size: 7px; color: #9aa58d; }
.class-page .cg-app-hint { font-size: 8px; color: #819270; min-height: 14px; margin-top: 9px; }
.class-page .cg-quote-demo { background: #f1e9e2; }
.class-page .cg-quote-sheet { padding: 21px 20px; border: 1px solid #e0d5ca; background: #fffdfa; border-radius: 6px; }
.class-page .cg-quote-heading { display: flex; justify-content: space-between; align-items: center; color: #6a5547; }
.class-page .cg-quote-heading > b { font-size: 22px; font-weight: 650; letter-spacing: -.05em; }
.class-page .cg-quote-heading > span { font-size: 9px; color: #a18e7e; }
.class-page .cg-quote-client { margin-top: 17px; display: flex; gap: 12px; font-size: 10px; color: #7c6c5e; }
.class-page .cg-quote-client > span { color: #ab998a; }
.class-page .cg-quote-line { margin-top: 15px; padding-block: 14px; border-block: 1px solid #ede6de; }
.class-page .cg-quote-line > div:first-child { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; color: #796352; }
.class-page .cg-quote-line > div:first-child > span { font-size: 7px; color: #a48f7d; }
.class-page .cg-quantity { display: flex; align-items: center; gap: 14px; margin-top: 11px; color: #7b624d; font-size: 12px; }
.class-page .cg-quantity button { background: #f4ece3; color: #967658; border: 1px solid #e4d7c9; border-radius: 5px; font: inherit; font-size: 17px; line-height: 1; height: 27px; width: 31px; }
.class-page .cg-quantity button:disabled { opacity: .45; cursor: not-allowed; }
.class-page .cg-quote-total { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; color: #a14e33; }
.class-page .cg-quote-total > span { font-size: 11px; }
.class-page .cg-quote-total > strong { font-size: 27px; line-height: 1.1; letter-spacing: -.04em; font-weight: 650; }
.class-page .cg-quote-total small { font-size: 12px; margin-left: 3px; }
.class-page .cg-quote-file { display: flex; align-items: center; gap: 9px; background: #f7f0e8; padding: 10px; border-radius: 4px; color: #8e725b; }
.class-page .cg-quote-file > span:first-child { font-size: 22px; }
.class-page .cg-quote-file > span:last-child { margin-left: auto; font-size: 12px; }
.class-page .cg-quote-file div { display: flex; flex-direction: column; font-size: 9px; }
.class-page .cg-quote-file div > span { font-size: 7px; color: #a38e7b; margin-top: 2px; }
.class-page .cg-quote-hint { font-size: 7px; color: #a48f7e; margin-top: 11px; }
.class-page .cg-project-copy { padding-top: 22px; }
.class-page .cg-project-tag { font-size: 11px; font-weight: 650; color: #a84d31; }
.class-page .cg-project-copy h3 { font-size: 24px; line-height: 1.35; margin-top: 8px; font-weight: 700; }
.class-page .cg-project-copy > p { font-size: 14px; line-height: 1.8; color: #68705f; margin-top: 11px; }
.class-page .cg-project-scope { display: block; font-size: 10px; color: #818a76; margin-top: 16px; }
.class-page .cg-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 64px; padding-bottom: 26px; border-bottom: 1px solid #d4ddcc; }
.class-page .cg-more-head > h3 { font-size: 25px; font-weight: 700; }
.class-page .cg-more-head > p { font-size: 13px; color: #7e8873; }
.class-page .cg-idea-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 35px; }
.class-page .cg-idea-grid > article { display: flex; gap: 17px; padding: 29px 0; border-bottom: 1px solid #dfe5d7; }
.class-page .cg-idea-symbol { color: #6e855a; background: #e9eee2; display: flex; align-items: center; justify-content: center; flex: 0 0 35px; height: 35px; border-radius: 7px; font-size: 21px; font-weight: 500; }
.class-page .cg-idea-grid h4 { font-size: 18px; letter-spacing: -.04em; font-weight: 650; color: #3b4e31; }
.class-page .cg-idea-grid p { font-size: 13px; line-height: 1.8; color: #77846a; margin-top: 7px; }
.class-page .cg-idea-grid a { display: inline-block; font-size: 11px; color: #a75434; margin-top: 10px; }
.class-page .cg-your-idea { display: flex; align-items: center; justify-content: space-between; gap: 45px; padding: 32px 35px; margin-top: 34px; background: #e9eee2; border-radius: 10px; }
.class-page .cg-your-idea > div { max-width: 710px; }
.class-page .cg-your-idea > div > span { font-size: 11px; color: #768663; }
.class-page .cg-your-idea h3 { font-size: 26px; color: #3f5434; margin-top: 7px; }
.class-page .cg-your-idea p { font-size: 14px; line-height: 1.8; color: #718262; margin-top: 10px; }
.class-page .cg-your-idea > a { flex-shrink: 0; font-size: 12px; padding: 13px 17px; min-height: 47px; gap: 20px; }
.class-page .cg-gallery-note { font-size: 11px; color: #87927b; line-height: 1.8; margin-top: 20px; }
.class-page .cg-automation-examples { margin-top: 35px; border-top: 1px solid #ced8c4; border-bottom: 1px solid #ced8c4; scroll-margin-top: 120px; }
.class-page .cg-automation-examples > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #5e7450; padding: 22px 0; }
.class-page .cg-automation-examples > summary::-webkit-details-marker { display: none; }
.class-page .cg-details-sign { font-size: 23px; font-weight: 400; transition: transform .15s; }
.class-page .cg-automation-examples[open] .cg-details-sign { transform: rotate(45deg); }
.class-page .cg-automation-inner { padding-bottom: 32px; }
.class-page .cg-automation-examples:not([open]) > .cg-automation-inner { display: none; }
.class-page .cg-automation-inner .ce-tabs { margin-bottom: 30px; }
.class-page .cg-automation-inner .ce-tabs button { font-size: 14px; }
.class-page :is(.cg-demo-controls button,.cg-habit-list button,.cg-quantity button,.cg-automation-examples summary,.cg-canvas-link,.cg-idea-grid a):focus-visible { outline: 2px solid #bd4529; outline-offset: 3px; }
@media (max-width:1100px) {
  .class-page .hero-inner { grid-template-columns: 1.1fr 1fr; gap: 35px; }
  .class-page .cg-hero-canvas { height: 475px; padding: 22px; }
  .class-page .cg-hero-site { left: 22px; width: 81%; }
  .class-page .cg-hero-site-body { padding: 19px 16px; }
  .class-page .cg-hero-site-body strong { font-size: 24px; }
  .class-page .cg-hero-phone { right: 14px; width: 151px; }
  .class-page .cg-hero-receipt { width: 195px; left: 19px; padding: 13px 14px; }
  .class-page .cg-featured { gap: 18px; }
  .class-page .cg-project-demo { padding: 14px; }
  .class-page .cg-quote-sheet { padding: 17px 14px; }
  .class-page .cg-project-copy h3 { font-size: 21px; }
  .class-page .cg-project-copy > p { font-size: 13px; }
  .class-page .cg-project-copy > p br { display: none; }
  .class-page .cg-project-scope { font-size: 9px; }
  .class-page .cg-idea-grid { column-gap: 22px; }
  .class-page .cg-idea-grid > article { gap: 12px; }
  .class-page .cg-idea-grid h4 { font-size: 16px; }
  .class-page .cg-your-idea { padding: 29px; gap: 30px; }
}
@media (max-width:960px) {
  .class-page .hero-inner { grid-template-columns: 1fr; }
  .class-page .cg-hero-canvas { width: 100%; max-width: 620px; height: 460px; }
  .class-page .cg-hero-site { width: 70%; }
  .class-page .cg-hero-site-body { min-height: 250px; padding: 23px; }
  .class-page .cg-hero-site-body strong { font-size: 29px; }
  .class-page .cg-hero-phone { width: 170px; right: 26px; bottom: 53px; min-height: 276px; padding: 25px 16px; }
  .class-page .cg-hero-phone > strong { font-size: 17px; }
  .class-page .cg-mini-habit { font-size: 9px; padding-block: 9px; }
  .class-page .cg-hero-receipt { width: 238px; left: 30px; bottom: 42px; }
  .class-page .cg-featured { grid-template-columns: 1fr; gap: 28px; }
  .class-page .cg-project { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
  .class-page .cg-project-demo { padding: 18px; min-height: 390px; height: auto; }
  .class-page .cg-project-copy { padding-top: 0; }
  .class-page .cg-project-copy h3 { font-size: 25px; }
  .class-page .cg-project-copy > p { font-size: 15px; }
  .class-page .cg-project-scope { font-size: 10px; }
  .class-page .cg-more-head { display: block; margin-top: 48px; }
  .class-page .cg-more-head > p { margin-top: 9px; }
  .class-page .cg-idea-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 30px; }
  .class-page .cg-idea-grid > article { gap: 15px; }
  .class-page .cg-idea-grid h4 { font-size: 18px; }
  .class-page .cg-idea-grid p { font-size: 13px; }
  .class-page .cg-your-idea { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width:600px) {
  .class-page .cg-hero-canvas { height: 438px; padding: 20px; border-radius: 12px; }
  .class-page .cg-canvas-label { font-size: 10px; }
  .class-page .cg-canvas-label > span:last-child { font-size: 8px; }
  .class-page .cg-hero-site { top: 57px; left: 18px; width: 84%; }
  .class-page .cg-hero-site-body { padding: 19px 16px; min-height: 227px; }
  .class-page .cg-mini-brand { font-size: 8px; }
  .class-page .cg-hero-site-body strong { font-size: 25px; margin-top: 25px; }
  .class-page .cg-pottery { width: 43%; }
  .class-page .cg-hero-phone { width: 139px; min-height: 243px; right: 13px; bottom: 52px; padding: 23px 11px 22px; border-width: 4px; border-radius: 20px; }
  .class-page .cg-hero-phone > strong { font-size: 13px; }
  .class-page .cg-hero-progress { margin-block: 16px 9px; }
  .class-page .cg-hero-progress b { font-size: 31px; }
  .class-page .cg-mini-habit { font-size: 7px; padding-block: 8px; gap: 5px; }
  .class-page .cg-hero-receipt { width: 178px; left: 19px; bottom: 47px; padding: 12px; }
  .class-page .cg-hero-receipt > strong { font-size: 16px; }
  .class-page .cg-hero-receipt > div > b { font-size: 16px; }
  .class-page .cg-hero-receipt > p { font-size: 8px; }
  .class-page .cg-receipt-bottom { font-size: 6px; }
  .class-page .cg-canvas-link { left: 20px; right: 20px; font-size: 9px; }
  .class-page .cg-featured { gap: 35px; }
  .class-page .cg-project { display: block; }
  .class-page .cg-project-demo { min-height: 390px; height: auto; padding: 18px; }
  .class-page .cg-project-copy { padding-top: 20px; }
  .class-page .cg-project-copy h3 { font-size: 24px; }
  .class-page .cg-project-copy > p { font-size: 14px; }
  .class-page .cg-project-copy > p br { display: initial; }
  .class-page .cg-project-scope { font-size: 10px; margin-top: 12px; }
  .class-page .cg-demo-controls button { font-size: 11px; padding: 5px 12px; min-height: 31px; }
  .class-page .cg-habit-list button { min-height: 37px; font-size: 11px; }
  .class-page .cg-habit-app { padding: 14px 18px; }
  .class-page .cg-quote-sheet { padding: 20px; }
  .class-page .cg-quantity button { width: 36px; height: 31px; }
  .class-page .cg-more-head { margin-top: 45px; padding-bottom: 20px; }
  .class-page .cg-more-head > h3 { font-size: 23px; }
  .class-page .cg-more-head > p { font-size: 12px; line-height: 1.8; }
  .class-page .cg-idea-grid { gap: 0 18px; }
  .class-page .cg-idea-grid > article { display: block; padding-block: 23px; }
  .class-page .cg-idea-symbol { width: 30px; height: 30px; font-size: 18px; margin-bottom: 11px; }
  .class-page .cg-idea-grid h4 { font-size: 15px; line-height: 1.45; }
  .class-page .cg-idea-grid p { font-size: 11px; margin-top: 7px; line-height: 1.8; }
  .class-page .cg-idea-grid p br { display: none; }
  .class-page .cg-idea-grid a { font-size: 10px; margin-top: 8px; }
  .class-page .cg-your-idea { margin-top: 27px; padding: 24px 22px; gap: 20px; }
  .class-page .cg-your-idea h3 { font-size: 23px; line-height: 1.45; }
  .class-page .cg-your-idea p { font-size: 13px; }
  .class-page .cg-your-idea > a { width: 100%; font-size: 12px; }
  .class-page .cg-gallery-note { font-size: 10px; }
  .class-page .cg-automation-examples > summary { font-size: 13px; line-height: 1.7; gap: 20px; }
  .class-page .cg-automation-inner .ce-tabs button { font-size: 13px; }
}
@media (max-width:360px) {
  .class-page .cg-hero-canvas { height: 407px; }
  .class-page .cg-hero-site-body strong { font-size: 22px; }
  .class-page .cg-hero-site-body { min-height: 215px; }
  .class-page .cg-hero-phone { width: 122px; bottom: 49px; padding-inline: 9px; }
  .class-page .cg-hero-phone > strong { font-size: 12px; }
  .class-page .cg-mini-habit { font-size: 6px; }
  .class-page .cg-hero-receipt { width: 145px; left: 15px; bottom: 44px; }
  .class-page .cg-hero-receipt .cg-receipt-bottom { font-size: 6px; }
  .class-page .cg-project-demo { padding: 13px; }
  .class-page .cg-site-main h4 { font-size: 20px; }
  .class-page .cg-quote-sheet { padding: 18px 15px; }
  .class-page .cg-project-copy > p br { display: none; }
  .class-page .cg-idea-grid { gap: 0 13px; }
  .class-page .cg-idea-grid h4 { font-size: 14px; }
}

/* The automation examples sit alongside the other project previews. */
.class-page .cg-featured-automation { margin-top: 48px; scroll-margin-top: 120px; }
.class-page .cg-featured-automation .cg-project-demo { display: flex; flex-direction: column; min-height: 430px; height: auto; }
.class-page .cg-mail-demo { background: #e8eeeb; }
.class-page .cg-blog-demo { background: #efede2; }
.class-page .cg-instagram-demo { background: #e7ecdf; }
.class-page :is(.cg-mail-app,.cg-blog-app,.cg-instagram-app) { flex: 1; min-width: 0; padding: 17px; background: #fffefb; border: 1px solid #d5ddce; border-radius: 7px; }
.class-page .cg-auto-app-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: #506047; padding-bottom: 14px; border-bottom: 1px solid #e6eadf; }
.class-page .cg-auto-app-title > b { font-weight: 650; }
.class-page .cg-auto-app-title > span { font-size: 7px; color: #8b9780; }
.class-page .cg-auto-badge { display: inline-block; padding: 3px 6px; border-radius: 3px; color: #617f4d; background: #edf3e7; font-size: 8px; line-height: 1.5; }
.class-page .cg-auto-status { display: flex; justify-content: space-between; gap: 8px; font-size: 7px; color: #89977c; padding-top: 13px; margin-top: 16px; border-top: 1px solid #e5eade; }
.class-page .cg-auto-status > span:last-child { color: #a36c4f; }
.class-page .cg-mail-app { display: flex; flex-direction: column; }
.class-page .cg-mail-picks { display: flex; gap: 5px; margin-block: 16px 18px; }
.class-page .cg-mail-choice { flex: 1; font: inherit; font-size: 9px; line-height: 1.5; padding: 9px 3px; min-height: 33px; border: 1px solid #dce4d6; border-radius: 4px; background: #f7f9f3; color: #87957c; }
.class-page .cg-mail-choice.is-selected { background: #e7efde; color: #4e6e3b; border-color: #b9cda9; }
.class-page .cg-mail-result { flex: 1; }
.class-page .cg-mail-result > h4 { margin-top: 12px; color: #3c5531; font-size: 16px; letter-spacing: -.04em; line-height: 1.5; font-weight: 650; }
.class-page .cg-mail-check { border-left: 2px solid #cbdbbd; background: #f3f6ee; padding: 11px 12px; margin-top: 17px; }
.class-page .cg-mail-check > span,.class-page .cg-mail-draft > span { font-size: 8px; color: #8a9b7b; }
.class-page .cg-mail-check > p { font-size: 10px; line-height: 1.7; color: #6d825b; margin-top: 4px; }
.class-page .cg-mail-draft { margin-top: 18px; }
.class-page .cg-mail-draft > p { font-size: 11px; color: #718363; line-height: 1.9; margin-top: 9px; }
.class-page .cg-auto-label { display: block; color: #8a8c74; font-size: 8px; margin-top: 14px; }
.class-page .cg-blog-app > select { display: block; width: 100%; max-width: 100%; padding: 9px 7px; color: #746e52; background: #fbfaf3; border: 1px solid #dedcc9; border-radius: 4px; font: inherit; font-size: 10px; line-height: 1.5; margin-top: 6px; }
.class-page .cg-blog-notes { background: #f5f4ea; color: #8b8769; padding: 9px 11px; font-size: 9px; line-height: 1.7; white-space: pre-line; margin-top: 10px; border-radius: 3px; }
.class-page .cg-blog-run { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 4px; background: #65754e; color: #fff; padding: 10px 12px; font: inherit; font-size: 9px; line-height: 1.5; margin-top: 11px; }
.class-page .cg-blog-run:hover { background: #4f623d; }
.class-page .cg-blog-result { margin-top: 18px; }
.class-page .cg-blog-result > h4 { font-size: 16px; font-weight: 650; letter-spacing: -.04em; line-height: 1.5; margin-top: 10px; color: #616542; }
.class-page .cg-blog-outline { white-space: pre-line; font-size: 8px; line-height: 1.8; color: #8a8f6c; padding-left: 10px; border-left: 2px solid #dce2c7; margin-top: 13px; }
.class-page .cg-blog-body { font-size: 9px; line-height: 1.9; color: #82876a; margin-top: 13px; }
.class-page .cg-social-art { display: flex; align-items: center; min-height: 131px; padding: 18px 14px; background: #dfe5d1; border-radius: 4px; color: #546743; margin-top: 15px; }
.class-page .cg-social-art > div { min-width: 0; flex: 1; }
.class-page .cg-social-art > div > span { display: block; font-size: 6px; letter-spacing: .09em; }
.class-page .cg-social-art strong { display: block; font-size: 25px; line-height: 1.25; letter-spacing: -.06em; font-weight: 600; margin-top: 12px; }
.class-page .cg-social-art > svg { width: 43%; height: auto; flex: 0 0 43%; margin-top: 22px; }
.class-page .cg-caption-choices { display: flex; gap: 6px; margin-top: 17px; }
.class-page .cg-caption-choices button { color: #8a977b; border: 1px solid #dbe4d0; background: #fff; border-radius: 4px; padding: 7px 9px; min-height: 30px; font: inherit; font-size: 8px; line-height: 1.5; }
.class-page .cg-caption-choices button[aria-pressed="true"] { color: #52703f; border-color: #bed0ad; background: #edf4e5; }
.class-page .cg-social-caption { white-space: pre-line; font-size: 10px; line-height: 1.85; color: #6b7f5c; margin-top: 13px; }
.class-page .cg-social-tags { display: block; font-size: 8px; color: #78915f; margin-top: 10px; line-height: 1.7; }
.class-page .cg-social-plan { margin-top: 17px; }
.class-page .cg-social-plan > div { display: flex; justify-content: space-between; gap: 8px; color: #6b815a; font-size: 9px; padding-bottom: 9px; }
.class-page .cg-social-plan > div > span { color: #99a48b; font-size: 7px; }
.class-page .cg-social-plan > p { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid #e4ebdb; padding-block: 7px; color: #7d8f6c; font-size: 9px; line-height: 1.5; }
.class-page .cg-social-plan > p > span { font-size: 8px; color: #a1ae91; }
.class-page .cg-social-plan small { margin-left: auto; font-size: 7px; color: #92a17f; }
.class-page :is(.cg-mail-choice,.cg-blog-app > select,.cg-blog-run,.cg-caption-choices button):focus-visible { outline: 2px solid #bd4529; outline-offset: 3px; }
@media (max-width:1100px) {
  .class-page :is(.cg-mail-app,.cg-blog-app,.cg-instagram-app) { padding: 14px; }
  .class-page .cg-social-art { padding: 15px 11px; }
  .class-page .cg-social-art strong { font-size: 22px; }
  .class-page .cg-featured-automation .cg-project-copy h3 { font-size: 20px; }
}
@media (max-width:960px) {
  .class-page .cg-featured-automation { margin-top: 28px; }
  .class-page :is(.cg-mail-app,.cg-blog-app,.cg-instagram-app) { padding: 18px; }
  .class-page .cg-featured-automation .cg-project-copy h3 { font-size: 25px; }
}
@media (max-width:600px) {
  .class-page .cg-featured-automation { margin-top: 35px; }
  .class-page .cg-featured-automation .cg-project-demo { min-height: 0; height: auto; }
  .class-page .cg-featured-automation .cg-project-copy h3 { font-size: 24px; }
  .class-page .cg-auto-app-title { font-size: 12px; }
  .class-page .cg-auto-app-title > span { font-size: 8px; }
  .class-page .cg-mail-choice { font-size: 10px; min-height: 35px; }
  .class-page .cg-mail-result > h4 { font-size: 18px; }
  .class-page .cg-mail-check > p { font-size: 11px; }
  .class-page .cg-mail-draft > p { font-size: 12px; }
  .class-page .cg-auto-status { font-size: 8px; }
  .class-page .cg-blog-app > select { font-size: 16px; padding: 8px; }
  .class-page .cg-blog-notes { font-size: 10px; }
  .class-page .cg-blog-run { font-size: 11px; min-height: 38px; }
  .class-page .cg-blog-result > h4 { font-size: 18px; }
  .class-page .cg-blog-outline { font-size: 9px; }
  .class-page .cg-blog-body { font-size: 11px; }
  .class-page .cg-social-art { padding: 20px 17px; }
  .class-page .cg-social-art strong { font-size: 28px; }
  .class-page .cg-caption-choices button { font-size: 10px; min-height: 34px; }
  .class-page .cg-social-caption { font-size: 12px; }
  .class-page .cg-social-tags { font-size: 9px; }
  .class-page .cg-social-plan > div { font-size: 10px; }
  .class-page .cg-social-plan > p { font-size: 10px; padding-block: 9px; }
}
@media (max-width:360px) {
  .class-page :is(.cg-mail-app,.cg-blog-app,.cg-instagram-app) { padding: 13px; }
  .class-page .cg-social-art { padding: 17px 12px; }
  .class-page .cg-social-art strong { font-size: 24px; }
  .class-page .cg-featured-automation .cg-project-copy h3 { font-size: 22px; }
}
.class-page .cls-consultation { display:grid; grid-template-columns:180px 1fr; gap:36px; padding:36px; margin:12px 0 32px; border:1px solid #bcc9af; border-radius:16px; background:#eef2e8; }
.class-page .cls-consultation-time { display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:#435b37; }
.class-page .cls-consultation-time > span { font-size:14px; font-weight:600; }
.class-page .cls-consultation-time strong { font-size:76px; line-height:1.1; letter-spacing:-4px; }
.class-page .cls-consultation-time small { font-size:24px; margin-left:6px; letter-spacing:0; }
.class-page .cls-consultation-content h3 { margin:0 0 12px; font-size:24px; line-height:1.5; }
.class-page .cls-consultation-content p { margin:0; line-height:1.85; }
.class-page .cls-consultation-content ul { padding-left:20px; margin:16px 0; line-height:1.9; }
.class-page .cls-day-label { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:24px 0 14px; line-height:1.7; }
.class-page .cls-day-label span { font-size:14px; color:var(--muted); }
.class-page .cls-consultation-notice { padding:28px 32px; margin:0 0 28px; border-left:3px solid #bd452d; background:#f0ede5; scroll-margin-top:100px; }
.class-page .cls-consultation-notice h3 { margin:12px 0; font-size:23px; line-height:1.5; }
.class-page .cls-consultation-notice p { max-width:850px; margin:0 0 16px; line-height:1.85; }
@media (max-width:680px) {
 .class-page .cls-consultation { grid-template-columns:1fr; padding:24px; gap:24px; }
 .class-page .cls-consultation-time { flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px 18px; }
 .class-page .cls-consultation-time strong { font-size:54px; letter-spacing:-2px; }
 .class-page .cls-consultation-time > span:last-child { width:100%; }
 .class-page .cls-consultation-content h3 { font-size:21px; }
 .class-page .cls-consultation-notice { padding:24px; }
 .class-page .cls-consultation-notice h3 { font-size:21px; }
}

.class-page .e-price .cls-price-pending, .class-page .fee-now.cls-price-pending { font-size:32px; line-height:1.4; letter-spacing:-1px; }
.class-page .m-price .cls-bar-benefit { font-size:17px; letter-spacing:-.5px; }
.class-page .m-price > span { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }

/* Cohort 1: learner-provided work, local draft 2026-09-12. */
.class-page .story-intro {max-width:720px;color:#506048;font-size:17px;line-height:1.85;margin:24px 0 48px;}
.class-page .student-story {padding:42px 0 48px;border-top:1px solid #c6d0c0;}
.class-page .story-heading {display:flex;gap:22px;max-width:880px;margin-bottom:32px;}
.class-page .story-index {font-size:15px;color:#76856b;padding-top:4px;}
.class-page .story-heading h3 {font-size:clamp(25px,3vw,35px);line-height:1.4;letter-spacing:-.04em;margin:12px 0;}
.class-page .story-heading p,.class-page .story-work p,.class-page .story-excel-copy p {color:#52614c;line-height:1.85;max-width:700px;}
.class-page .story-deliverables {display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.class-page .story-work {margin:0;min-width:0;}
.class-page .story-image-link,.class-page .story-video {display:block;border:1px solid #d4dbce;border-radius:12px;overflow:hidden;background:#fff;}
.class-page .story-deliverables .story-image-link,.class-page .story-video {aspect-ratio:4/3;}
.class-page .story-work img {display:block;width:100%;height:auto;}
.class-page .story-deliverables .story-work img {width:100%;height:100%;object-fit:contain;}
.class-page .story-video {display:flex;align-items:center;justify-content:center;background:#fafbf8;}
.class-page .story-video video {display:block;width:100%;height:100%;object-fit:contain;}
.class-page .story-work figcaption {padding:23px 0 0;}
.class-page .story-kind {display:block;color:#c23d23;font-size:12px;font-weight:700;margin-bottom:10px;}
.class-page .story-work h4,.class-page .story-excel-copy h4 {font-size:23px;line-height:1.5;letter-spacing:-.03em;margin:0 0 12px;}
.class-page .story-work small {display:block;color:#66725f;font-size:12px;line-height:1.8;margin-top:16px;}
.class-page .story-excel-body {display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:center;}
.class-page .story-excel-copy dl {margin-top:26px;}
.class-page .story-excel-copy dl div {display:grid;grid-template-columns:82px 1fr;border-top:1px solid #cbd5c4;padding:15px 0;gap:14px;font-size:14px;}
.class-page .story-excel-copy dt {color:#6b765f;}.class-page .story-excel-copy dd {margin:0;line-height:1.7;}
.class-page .story-note {font-size:13px;color:#66725f;line-height:1.8;margin-bottom:25px;}
.class-page .story-other {border-top:1px solid #c6d0c0;padding-top:18px;}
.class-page .story-other summary {cursor:pointer;padding:12px 0;font-size:15px;}
.class-page .story-other .students {grid-template-columns:1fr 1fr;margin-top:24px;}
.class-page .story-image-link:focus-visible,.class-page .story-other summary:focus-visible {outline:3px solid #c23d23;outline-offset:4px;}
@media(max-width:700px){.class-page .story-deliverables,.class-page .story-excel-body {grid-template-columns:1fr;gap:34px;}.class-page .story-heading {gap:12px;}.class-page .story-heading h3 {font-size:26px;}.class-page .story-work h4,.class-page .story-excel-copy h4 {font-size:22px;}.class-page .student-story {padding-top:30px;}.class-page .story-intro {font-size:15px;}}

.class-page .story-macro-video {aspect-ratio:1080/640;}
.class-page .story-result-detail {margin-top:18px;}
.class-page .story-result-detail summary {cursor:pointer;min-height:44px;padding:12px 0;font-size:14px;}
.class-page .story-result-detail .story-image-link {margin-top:10px;}

/* Education references: project name + occupation + visible artifact + one-line function. */
.class-page .student-project-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:32px 0;}
.class-page .student-project {min-width:0;}
.class-page .student-project header {margin-bottom:18px;}
.class-page .student-project h3 {font-size:25px;letter-spacing:-.04em;line-height:1.4;margin:0;}
.class-page .student-project .story-kind {font-size:12px;color:#617057;}
.class-page .student-project .story-image-link,.class-page .student-project .story-video {aspect-ratio:4/3;}
.class-page .student-project .story-work img {width:100%;height:100%;object-fit:contain;}
.class-page .student-project .story-work figcaption {padding-top:18px;}
.class-page .student-project .story-work p {font-size:15px;margin:0;}
.class-page .student-project .story-work small {font-size:11px;margin-top:12px;}
.class-page .project-context {font-size:13px;color:#617057;line-height:1.8;border-top:1px solid #ccd5c5;padding-top:14px;margin-top:16px;}
.class-page .student-project .story-result-detail .story-image-link {aspect-ratio:auto;}
@media(max-width:850px){.class-page .student-project-grid {grid-template-columns:1fr;gap:36px;}.class-page .student-project h3 {font-size:24px;}.class-page .student-project .story-work small {font-size:12px;}.class-page .student-project .story-video,.class-page .student-project .story-image-link {max-height:440px;}}

/* One learner per row; all work is visible without disclosures. */
.class-page .learner-row {display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;border-top:1px solid #c6d0c0;padding:36px 0;}
.class-page .learner-row header h3 {font-size:23px;letter-spacing:-.04em;line-height:1.5;margin:0 0 14px;}
.class-page .learner-row header p {font-size:15px;line-height:1.8;color:#52614c;margin:0;}
.class-page .learner-row header .learner-context {font-size:13px;margin-top:22px;}
.class-page .learner-media {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0;}
.class-page .learner-media .story-image-link,.class-page .learner-media .story-video {aspect-ratio:4/3;}
.class-page .learner-media img {width:100%;height:100%;object-fit:contain;}
.class-page .learner-media h4 {font-size:20px;margin:0 0 9px;}
.class-page .learner-media figcaption {padding-top:18px;}
.class-page .learner-media p {font-size:14px;margin:0;}
.class-page .learner-media-single {grid-template-columns:1fr;}
.class-page .learner-media-single .story-image-link {aspect-ratio:auto;}
@media(max-width:900px){.class-page .learner-row {grid-template-columns:1fr;gap:24px;}.class-page .learner-row header .learner-context {margin-top:10px;}}
@media(max-width:600px){.class-page .learner-media {grid-template-columns:1fr;gap:30px;}.class-page .learner-row {padding:28px 0;}.class-page .learner-row header h3 {font-size:22px;}}

.class-page .story-footer {display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.class-page .story-credit {margin:0 0 25px auto;text-align:right;font-size:12px;line-height:1.8;color:#66725f;}