/* Chaleur Studio — shared styles. Typography tokens are the single source of truth. */
:root {
  --paper: #f7f5ef;
  --white: #fffdf8;
  --ink: #243c34;
  --muted: #5c6860;
  --muted-strong: #46574d;
  --line: #d8ddd2;
  --accent: #a4482e;
  --sage: #e6eadd;
  --placeholder-paper: #f2ecdf;
  --placeholder-ink: #24231f;
  --sans: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --type-hero: clamp(3.5rem, 4.7vw, 4.5rem);
  --type-h2: clamp(2.5rem, 3.2vw, 3rem);
  --type-h3: 1.875rem;
  --type-principle: 1.5rem;
  --type-body: 1.125rem;
  --type-secondary: 1rem;
  --type-meta: .8125rem;
  --type-eyebrow: .875rem;
  --type-control: 1rem;
  --type-placeholder-title: clamp(1.5rem, 2vw, 1.75rem);
  --leading-hero: 1.18;
  --leading-heading: 1.3;
  --leading-body: 1.63;
}

/* Structure and component layout. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
::selection { background: #e1c5a7; color: var(--ink); }
.container { width: min(1184px,calc(100% - 96px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 16px; padding: 10px 20px; background: var(--ink); color: white; z-index: 20; }
.skip:focus { top: 10px; }
.header { border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { min-height: 100px; display: flex; align-items: center; gap: 44px; }
.wordmark { text-decoration: none; white-space: nowrap; }
.navigation { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.navigation a { text-decoration: none; }
.navigation a:hover,.language a:hover { color: var(--accent); }
.language { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.language a { text-decoration: none; }
.language [aria-current] { border-bottom: 1px solid var(--ink); }
.language .divider { color: #92998e; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; border-radius: 2px; color: var(--ink); padding: 6px 12px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.hero { padding: 96px 0 80px; display: block; }
.hero h1 { margin: 0 0 32px; }
.hero .intro { max-width: 680px; }
.actions { display: flex; gap: 25px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--ink); color: var(--white); padding: 13px 24px; text-decoration: none; border: 1px solid var(--ink); transition: background .18s; min-height: 48px; }
.button:hover { background: #395747; }
.text-link { text-decoration: none; border-bottom: 1px solid var(--line); padding-block: 8px; }
.hero-foot { border-top: 1px solid var(--line); padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; }
.section { padding: 90px 0; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.section h2,.contact h2 { margin: 0; }
.section-heading p { margin: 10px 0 0; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-number { flex-shrink: 0; margin-top: 38px; }
.products { border-top: 1px solid var(--line); }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.product-card { border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; min-width: 0; }
/* Product image slot: retain existing desktop/mobile heights for future images. */
.card-visual { height: 248px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 12px; padding: 24px; border-radius: 0; background: var(--placeholder-paper); color: var(--placeholder-ink); text-align: center; }
.placeholder-title { margin: 0; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.placeholder-caption { margin: 0; }
.card-content { padding: 20px 30px 28px; display: flex; flex: 1; flex-direction: column; }
.meta { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; }
.card-content h3 { margin: 15px 0 12px; }
.card-content p { min-height: 0; margin: 0 0 24px; }
.card-link { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); text-decoration: none; margin-top: auto; min-height: 52px; }
.card-link:hover { color: var(--accent); }
.philosophy { background: #eaece3; }
.philosophy-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 100px; }
.philosophy h2 { margin-bottom: 24px; }
.philosophy .lead { max-width: 420px; }
.principle { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid #c9cfc0; }
.principle:first-child { padding-top: 0; border-top: 0; }
.principle .num { color: var(--accent); padding-top: 4px; }
.principle h3 { margin: 0 0 8px; }
.principle p { margin: 0; }
.contact { padding: 80px 0; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.contact .eyebrow { margin-bottom: 12px; }
.contact-email { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 8px; overflow-wrap: anywhere; }
.contact-details p { text-align: left; }
.footer { border-top: 1px solid var(--line); padding: 25px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer .wordmark { color: var(--ink); }
.breadcrumb { margin-top: 36px; }
.breadcrumb a { text-decoration: none; }
.product-hero { max-width: 840px; padding: 60px 0; }
.product-hero h1 { margin: 0 0 24px; }
.product-hero .intro { max-width: 700px; }
.scenario-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 28px; font-size: var(--type-control); }
.scenario-picker label { color: var(--muted-strong); }
.scenario-select-wrap { position: relative; max-width: 100%; min-width: 0; }
.scenario-select-wrap::after { content: ''; position: absolute; right: 17px; top: calc(50% - 5px); width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.scenario-picker select { appearance: none; display: block; width: 100%; max-width: 100%; min-height: 48px; padding: 10px 40px 10px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--white); color: var(--ink); font: inherit; cursor: pointer; }
.scenario-picker select:hover { border-color: var(--muted); background: var(--sage); }
.scenario-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 400px) {
  .scenario-select-wrap { width: 100%; }
  .scenario-picker select { font-size: .875rem; }
}
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.chip { border: 1px solid var(--line); padding: 5px 12px; border-radius: 2px; }
.detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; padding: 58px 0; border-top: 1px solid var(--line); }
.detail-grid h2 { margin: 0; }
.detail-grid p { margin: 0 0 18px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; padding: 0; margin: 0; list-style: none; }
.feature-grid li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.feature-grid li::before { content: '↗'; margin-right: 10px; color: var(--accent); }
.callout { background: var(--sage); padding: 28px; border-left: 2px solid #8c9d77; }
.callout p:last-child { margin-bottom: 0; }
.market-list { display: grid; gap: 12px; }
.market-row { display: flex; justify-content: space-between; gap: 8px 20px; border-bottom: 1px solid var(--line); padding: 12px 0; flex-wrap: wrap; }
.status { white-space: nowrap; }
.screenshot-placeholder { aspect-ratio: 16/9; background: #e9ebe3; border: 1px dashed #b7bfae; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; padding: 24px; width: 100%; }
.placeholder-icon { width: 49px; height: 35px; border: 1px solid #909e85; position: relative; margin-bottom: 8px; }
.placeholder-icon::after { content: ''; position: absolute; left: 9px; bottom: 7px; width: 25px; height: 12px; border-left: 1px solid #909e85; border-top: 1px solid #909e85; transform: skewY(-20deg); }
figure { margin: 0; }
figcaption { margin-top: 12px; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.download-item { border: 1px solid var(--line); padding: 22px; }
.download-item h3 { margin: 0 0 8px; }
.download-item p { margin-bottom: 18px; }
.unavailable { display: inline-block; background: #e9eae2; padding: 5px 12px; }
.product-bottom { margin: 35px 0 65px; }
.detail-grid .eyebrow { margin-bottom: 16px; }
.detail-grid > * { min-width: 0; }
.navigation a, .language a { padding-block: 8px; }
.hero > div { max-width: 1050px; }
.hero .actions { margin-top: 34px; }
.contact-inner > div { min-width: 0; }
.contact-details { flex-shrink: 0; }
.detail-grid .market-note { margin-top: 18px; }

/* Base Typography */
body { font-family: var(--sans); font-size: var(--type-body); line-height: var(--leading-body); letter-spacing: normal; }
button { font: inherit; }
/* Heading */
.hero h1, .product-hero h1 { font-family: var(--serif); font-size: var(--type-hero); font-weight: 500; line-height: var(--leading-hero); letter-spacing: -.025em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.section h2, .contact h2, .detail-grid h2 { font-family: var(--sans); font-size: var(--type-h2); font-weight: 500; line-height: var(--leading-heading); letter-spacing: -.02em; text-wrap: pretty; }
.card-content h3 { font-family: var(--serif); font-size: var(--type-h3); font-weight: 500; line-height: var(--leading-heading); }
.principle h3, .download-item h3 { font-size: var(--type-principle); font-weight: 500; line-height: var(--leading-heading); }
/* Body: reading text inherits the base size and leading; no label overrides. */
.hero .intro, .product-hero .intro, .section-heading p:not(.eyebrow), .card-content p, .philosophy .lead, .principle p, .contact-inner > div:not(.contact-details) > p:not(.eyebrow), .detail-grid p:not(.eyebrow), .feature-grid li, .market-row { font-size: var(--type-body); line-height: var(--leading-body); color: var(--ink); }
.detail-grid > div { max-width: 44rem; }
/* Secondary */
.breadcrumb, .chip, .unavailable, .screenshot-placeholder span, figcaption, .meta { font-size: var(--type-secondary); color: var(--muted-strong); }
.status { font-size: var(--type-secondary); color: var(--accent); }
.screenshot-placeholder strong { font-size: var(--type-body); font-weight: 500; }
/* Metadata */
.hero-foot, .principle .num, .footer-inner, .section-number { font-size: var(--type-meta); }
.hero-foot, .footer-inner, .section-number { color: var(--muted); }
.eyebrow { font-size: var(--type-eyebrow); font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-foot { letter-spacing: .075em; text-transform: uppercase; }
.meta { letter-spacing: normal; text-transform: none; }
/* Components */
.language [aria-current] { font-weight: 700; }
.wordmark { font-family: Georgia, 'Noto Serif TC', 'PMingLiU', serif; font-size: 29px; letter-spacing: -1px; }
.wordmark span { font-style: italic; font-weight: normal; }
.footer .wordmark { font-size: 21px; }
.placeholder-title { font-family: var(--sans); font-size: var(--type-placeholder-title); font-weight: 500; font-style: normal; line-height: var(--leading-heading); letter-spacing: normal; }
.placeholder-caption { font-family: var(--sans); font-size: var(--type-meta); font-weight: 400; line-height: 1.5; letter-spacing: .06em; }
.navigation, .language, .button, .text-link, .card-link, .js .menu-toggle { font-size: var(--type-control); }
.navigation a, .language a, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.contact-email, .contact-details p { font-family: var(--sans); font-size: var(--type-secondary); line-height: var(--leading-body); color: var(--ink); }
.contact-email { display: inline-flex; align-items: center; min-height: 48px; }
.arrow { font-size: 1.25rem; font-weight: 400; }
.hero > div, .philosophy-layout > div { min-width: 0; }
/* English keeps its own word wrapping; the logo retains its existing typeface. */
:lang(en-GB) h1, :lang(en-GB) h2, :lang(en-GB) h3 { overflow-wrap: break-word; }

/* Responsive: token changes and necessary layout adaptations only. */
@media(max-width:1000px) {
  :root { --type-hero: clamp(3rem, 6.5vw, 3.75rem); --type-h2: 2.5rem; --type-h3: 1.75rem; }
  .container { width: calc(100% - 56px); }
  .header-inner { gap: 20px; }
  .navigation { gap: 18px; }
  .hero { padding: 72px 0 64px; }
  .philosophy-layout { gap: 50px; }
  .detail-grid { gap: 35px; grid-template-columns: 1fr 2fr; }
  .card-content { padding: 20px 24px 26px; }
  .product-grid { gap: 24px; }
  .meta { flex-direction: column; align-items: flex-start; }
  .section-heading { flex-wrap: wrap; gap: 12px; }
  .section-number { margin-top: 0; }
  .contact-inner { align-items: flex-start; flex-direction: column; gap: 24px; }
  .download-grid { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
  :root { --type-hero: clamp(2.375rem, 10vw, 2.75rem); --type-h2: clamp(1.875rem, 8vw, 2.25rem); --type-h3: 1.625rem; --type-body: 1.0625rem; --type-secondary: .9375rem; --type-eyebrow: .8125rem; }
  html { scroll-padding-top: 20px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 80px; gap: 10px; flex-wrap: wrap; padding: 18px 0; }
  .wordmark { font-size: 24px; }
  .language { margin-left: auto; gap: 7px; }
  .navigation { width: 100%; order: 4; justify-content: space-between; gap: 18px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
  .js .menu-toggle { display: block; order: 3; padding: 6px 10px; min-height: 44px; }
  .js .navigation[data-open='false'] { display: none; }
  .hero { padding: 52px 0; }
  .eyebrow { margin-bottom: 22px; gap: 10px; letter-spacing: .075em; }
  .hero-foot { gap: 8px; flex-direction: column; }
  .hero-foot span:last-child { text-align: left; }
  .section { padding: 58px 0; }
  .section-heading { margin-bottom: 26px; }
  .section-number { display: none; }
  .product-grid { grid-template-columns: 1fr; gap: 24px; }
  .card-visual { height: 230px; }
  .philosophy-layout { grid-template-columns: 1fr; gap: 30px; }
  .philosophy .lead { max-width: none; }
  .contact { padding: 55px 0; }
  .contact-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-inner p { margin: 0; }
  .detail-grid { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
  .product-hero { padding: 40px 0; }
  .feature-grid { gap: 8px 18px; }
  .screenshot-placeholder { min-height: 210px; }
  .product-bottom { margin-bottom: 40px; }
  .hero .intro br { display: none; }
  .hero .eyebrow { flex-wrap: wrap; }
  .card-content { padding: 20px 24px 24px; }
  .contact-details { max-width: 100%; }
  .market-row { flex-direction: column; gap: 4px; }
}
@media(max-width:380px) {
  .header-inner { gap: 9px; }
  .feature-grid { grid-template-columns: 1fr; }
  .header-inner .wordmark { flex-basis: 100%; }
  .language { margin-left: 0; margin-right: auto; }
  .card-content { padding-inline: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none!important; }
}

/* Product content and screenshot components (WEB-005 / WEB-006). */
.handover-page .product-hero { padding-block: 44px; }
.handover-page .product-hero > p:not(.eyebrow) { max-width: 640px; }
.preview-notice { padding: 16px 22px; margin-bottom: 24px; border-left: 2px solid var(--line); color: var(--muted-strong); }
.preview-notice p { margin: 0; font-size: var(--type-secondary); }
.product-screen-frame { display: block; width: 100%; border: 1px solid var(--line); }
.product-screen-frame img { display: block; width: 100%; height: auto; }
.calendar-screen { width: 100%; max-width: 956px; margin-inline: auto; }
.product-screen figcaption { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.screen-caption { flex-basis: 100%; }
.screen-badge { font-size: var(--type-meta); color: var(--muted); }
.handover-page .detail-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 48px; padding-block: 44px; }
.handover-page .detail-grid > div { max-width: 640px; }
.handover-page .detail-grid p:last-child { margin-bottom: 0; }
.workflow-feature { padding-bottom: 48px; }
.workflow-feature .detail-grid { padding-bottom: 24px; }
.handover-page .feature-heading-grid { row-gap: 16px; }
.feature-heading-grid > .eyebrow { grid-column: 1 / -1; margin: 0; }
.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.capability-group { min-width: 0; }
.capability-group h3 { margin: 0 0 12px; font-size: var(--type-principle); font-weight: 500; line-height: var(--leading-heading); }
.capability-group ul { padding-left: 1.2em; margin: 0; }
.capability-group li + li { margin-top: 6px; }
.handover-page .product-note { font-size: var(--type-secondary); color: var(--muted-strong); margin-top: 18px; }
.product-specs { width: 100%; border-collapse: collapse; text-align: left; }
.product-specs th, .product-specs td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.product-specs thead { background: var(--sage); }
.product-specs th { font-weight: 500; }
.product-specs tbody th { width: 36%; }
.handover-page .download-item { display: flex; flex-direction: column; border: 0; border-top: 1px solid var(--line); padding: 22px 0; }
.handover-page .download-item .download-meta { font-size: var(--type-secondary); color: var(--muted-strong); margin: auto 0 12px; }
.handover-page .download-item .button { align-self: flex-start; }
.handover-page .download-item .unavailable { align-self: flex-start; margin-top: auto; }
.handover-page .contact { border-top: 1px solid var(--line); }
.handover-page .contact-inner > div:first-child { max-width: 640px; }
.handover-page .product-bottom { margin-top: 0; }
@media(max-width:1000px) {
  .handover-page .detail-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:700px) {
  .handover-page .product-hero { padding-block: 32px; }
  .preview-notice { padding: 16px; }
  .handover-page .detail-grid { padding-block: 32px; gap: 16px; }
  .workflow-feature { padding-bottom: 36px; }
  .workflow-feature .detail-grid { padding-bottom: 20px; }
  .capability-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-specs th, .product-specs td { padding: 12px 10px; }
}

@media(min-width:1001px) {
  .handover-page .product-summary-grid { align-items: center; }
}
/* EMBERLITE uses the shared product rhythm with intact device screenshots. */
.emberlite-page .product-hero { padding-block: 44px; }
.emberlite-page .product-subtitle { margin: -6px 0 24px; font-size: var(--type-h3); line-height: var(--leading-heading); }
.emberlite-page .detail-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 16px 48px; padding-block: 44px; }
.emberlite-page .detail-grid > div { max-width: 640px; }
.emberlite-page .detail-grid p:last-child { margin-bottom: 0; }
.emberlite-page .workflow-feature .detail-grid { padding-bottom: 24px; }
.emberlite-page .product-screen { max-width: 1200px; margin-inline: auto; }
.emberlite-page #spectrum .product-screen { max-width: 1060px; }
.emberlite-page .contact { border-top: 1px solid var(--line); }
.emberlite-page .contact-inner > div:first-child { max-width: 640px; }
.emberlite-page .product-bottom { margin-top: 0; }
.emberlite-setup { margin: 0; }
.emberlite-setup > div + div { margin-top: 24px; }
.emberlite-setup dt { font-weight: 600; margin-bottom: 6px; }
.emberlite-setup dd { margin: 0; }
.emberlite-card-visual { padding: 0; gap: 8px; background: transparent; }
.emberlite-card-visual img { display: block; width: 100%; min-height: 0; height: auto; max-height: 215px; object-fit: contain; }
.emberlite-card-visual figcaption { margin: 0; font-size: var(--type-meta); }
@media(max-width:1000px) {
  .emberlite-page .detail-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:700px) {
  .emberlite-page .product-hero { padding-block: 32px; }
  .emberlite-page .detail-grid { padding-block: 32px; gap: 16px; }
  .emberlite-page .workflow-feature .detail-grid { padding-bottom: 20px; }
}