/* CARECOLOR — site preset
   Source design: Figma 卡尔卡-官网设计 (file f3DkNFJBszwgG7HehqJXaM); earlier pages
   were built from stuff/卡尔卡-官网设计.pdf.
   Deep forest green + lime, Roboto, big rounded panels, glass cards.

   Pages follow the Figma 1920 frames 1:1 — sizes are written as
   calc(<figma px> * var(--u)): real size on screens ≥ 1488, scaled down below
   that (text has px floors). The rules below apply to the other pages.

   Type rules
   - Every font-size comes from the --fs-* scale below. The only exception
     is the decorative framework "5".
   - Body copy 16px (17px on dark/photo backgrounds), line-height 1.6.
     Smallest readable text is 13px; 12px is only for tracked uppercase labels.
   - Headings: 500 weight, uppercase, -0.01em. Only the home hero uses 700.
   - No opacity on text — muted text uses a fixed color so contrast stays known.
   - Text on lime is always deep green. */
/* Roboto is linked from <head> (extensions/seo.structured_data_extras.php) so it loads in parallel */

:root {
    --cc-green: #144734;
    --cc-green-dark: #0e3526;
    --cc-lime: #88db62;
    --cc-lime-dark: #6fc549;
    --cc-panel: #f1f1f1;
    --cc-ink: #1b1b1b;
    --cc-ink-soft: #454545;      /* 9.3:1 on panel */
    --cc-ink-muted: #5e5e5e;     /* 5.9:1 on panel */
    --cc-on-dark: #ffffff;
    --cc-on-dark-soft: #d3e2da;  /* 9.6:1 on green */
    --cc-radius-xl: clamp(28px, 4vw, 64px);
    --cc-radius-lg: 28px;
    --cc-max: 1200px;

    /* Figma 1920 frame, 1440 safe area (x 240 → 1680). 1 design px = 1px once the
       safe area plus a 24px gutter each side fits (≥ 1488); narrower screens scale
       the 1440 layout down; wider than 1920 the whole frame scales up so the page keeps
       the design's proportions. --side = viewport edge → safe area (240 at 1920). */
    --u: max(calc(min(1440px, 100vw - 48px) / 1440), calc(100vw / 1920));
    --side: calc((100vw - 1440 * var(--u)) / 2);
    --cc-r80: calc(100 * var(--u));                /* panel radius (TL/BR) — Figma 100 */
    --cc-r20: max(8px, calc(20 * var(--u)));        /* button radius (TL/BR) */

    /* Type scale: 12 / 14 / 16 / 18 / 22 / 30 / 44 / 72+ */
    --fs-2xs: .75rem;                               /* 12 — tracked uppercase labels only */
    --fs-xs: .8125rem;                              /* 13 — meta / helper text */
    --fs-sm: .875rem;                               /* 14 */
    --fs-base: 1rem;                                /* 16 */
    --fs-body-dark: 1.0625rem;                      /* 17 — body copy on dark / photo */
    --fs-md: 1.125rem;                              /* 18 */
    --fs-lg: 1.375rem;                              /* 22 */
    --fs-xl: clamp(1.5rem, 2.2vw, 1.875rem);        /* 24 → 30 */
    --fs-2xl: clamp(1.875rem, 3.4vw, 2.75rem);      /* 30 → 44 */
    --fs-3xl: clamp(2.5rem, 5.6vw, 4.5rem);         /* 40 → 72 */
    --fs-hero: clamp(2.75rem, 7vw, 6.5rem);         /* 44 → 104 */

    --lh-body: 1.6;
    --lh-tight: 1.02;
    --track-head: -.01em;
    --track-label: .08em;

    --color-primary: var(--cc-green);
    --color-primary-dark: var(--cc-green-dark);
    --color-accent: var(--cc-lime);
    --color-text: var(--cc-ink);
    --color-text-light: var(--cc-ink-soft);
    --color-text-muted: var(--cc-ink-muted);
    --color-bg: var(--cc-green);
    --color-bg-alt: var(--cc-panel);
    --color-bg-dark: var(--cc-green-dark);
    --color-border: #d9d9d9;
    --font-heading: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

body { background: var(--cc-green); color: var(--cc-on-dark); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
.cc-container { max-width: var(--cc-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }

/* Shared heading treatment */
.cc-levels-head h2, .cc-poster h2, .cc-shop-head h2, .cc-story-title, .cc-why-head h2,
.cc-fw-hero-title, .cc-pd-info h1, .cc-contact-head h1 {
    font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-head); text-transform: uppercase;
}

/* ── Buttons ─────────────────────────────────────────── */
.cc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 2.75rem; border-radius: 14px 0 14px 0; font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; transition: background .15s, transform .15s; }
.cc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cc-btn-lime { background: var(--cc-lime); color: var(--cc-green-dark); }
.cc-btn-lime:hover { background: var(--cc-lime-dark); }   /* all lime buttons: darker fill on hover, text colour unchanged */
.cc-btn-block { display: flex; width: 100%; }

/* ── Chrome: header / footer from base ───────────────── */
/* Figma 导航: 60px bar, logo 226×28 at 20/16, items Roboto 500 16px #F2F2F2, active lime */
.topbar { display: none; }
.site-header { height: max(52px, calc(60 * var(--u))); background: var(--cc-green); border-bottom: 0; padding: 0; }
.site-header .container { height: 100%; max-width: none; padding: 0 calc(20 * var(--u)); }
.site-logo img { height: max(20px, calc(28 * var(--u))); width: auto; display: block; }
.site-nav { height: 100%; gap: calc(194 * var(--u)); align-items: stretch; }
.site-nav > a, .nav-dropdown { display: flex; align-items: center; }
.site-nav a { color: #f2f2f2; font-size: max(12px, calc(16 * var(--u))); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.site-nav a:hover, .site-nav a.active { color: var(--cc-lime); text-decoration: none; }
.mobile-menu-btn { color: var(--cc-on-dark); }
/* Products dropdown: 280×184 box 2px under the bar, radius 20 TL/BR, 1px lime stroke
   (sets it off from the same-green page); 240×30 rows, radius 8 TL/BR, lime hover row */
.nav-dropdown > a { display: inline-flex; align-items: center; gap: .35rem; }
.nav-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 2px; }  /* hover bridge to the menu */
.nav-dropdown-menu { top: calc(100% + 2px); left: 50%; transform: translateX(calc(-50% - 14 * var(--u))); width: max(220px, calc(280 * var(--u))); min-width: 0; padding: calc(19 * var(--u)); border: 1px solid var(--cc-lime); border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: var(--cc-green); box-shadow: none; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.nav-dropdown-menu a { display: flex; align-items: center; justify-content: center; min-height: max(26px, calc(30 * var(--u))); padding: 0 .5rem; font-size: max(12px, calc(16 * var(--u))); color: #fff; border-radius: calc(8 * var(--u)) 0 calc(8 * var(--u)) 0; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--cc-lime); color: var(--cc-green); }

.site-footer { background: var(--cc-green-dark); margin-top: 0; padding: 1.25rem 0; }
.site-footer .footer-grid { display: none; }
.footer-bottom { border-top: 0; padding-top: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.footer-bottom p, .footer-bottom a { color: #a9c2b6; font-size: var(--fs-xs); margin: 0; display: inline; }
.footer-bottom a:hover { color: var(--cc-on-dark); }

/* ── Brand footer block ──────────────────────────────── */
/* Figma 6屏: glass panel 1879×800 at 20px gutters — #FFF 40%, 2px #FFF 50% stroke,
   Figma blur 60 (CSS 30px), radius 100 TL/BR. Links 36/40 500 -4%; contact 24/24 500 -4%. */
.cc-footer { position: relative; overflow: hidden; padding: calc(112 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); isolation: isolate; }
.cc-footer-bare { overflow: visible; padding-top: 0; }
/* same photo, blur and crop as the home page, where the footer sits at the bottom of the
   shared leaf background (.cc-leaf-bg): extend the box upward by the Why CARECOLOR height
   (≈551u) less this footer's own top padding (112u) so the image scales and aligns the same */
.cc-footer-bg { position: absolute; left: -40px; right: -40px; bottom: -40px; height: calc(100% + 439 * var(--u) + 80px); z-index: -1; filter: blur(20px); }
.cc-footer-panel { display: flex; flex-direction: column; min-height: calc(800 * var(--u)); padding: calc(93 * var(--u)) calc(19 * var(--u)) 0 calc(24 * var(--u)); border-radius: var(--cc-r80) 0 var(--cc-r80) 0; background: rgba(255,255,255,.4); border: 2px solid rgba(255,255,255,.5); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); overflow: hidden; }
.cc-footer-links { align-self: flex-start; display: flex; flex-direction: column; }
.cc-footer-links a { color: #fff; font-size: max(18px, calc(36 * var(--u))); font-weight: 500; line-height: calc(40 / 36); letter-spacing: -.04em; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.cc-footer-links a:hover { color: var(--cc-green); }
.cc-footer-contact { align-self: flex-end; margin-top: auto; padding-top: calc(80 * var(--u)); text-align: right; max-width: max(320px, calc(600 * var(--u))); }
.cc-footer-contact p { color: #fff; font-size: max(13px, calc(24 * var(--u))); font-weight: 500; line-height: 1; letter-spacing: -.04em; margin: 0; }
.cc-footer-contact a { color: #fff; }
/* decorative wordmark — runs off the panel's bottom edge (clipped); gap above it
   matches the panel-top → links gap (~100) */
.cc-footer-wordmark { display: block; width: 100%; height: auto; margin: calc(54 * var(--u)) 0 0 calc(-6 * var(--u)); width: calc(100% + 21 * var(--u)); max-width: none; transform: translateY(calc(4% + 19 * var(--u))); user-select: none; pointer-events: none; }

/* ── Product carousel + card (products page, related products) ── */
.cc-shop { padding: clamp(4rem, 9vw, 8rem) 0; }
.cc-shop-head { text-align: center; margin-bottom: 3rem; }
.cc-shop-head h2 { font-size: var(--fs-2xl); margin-top: .75rem; }
.cc-shop-head p:not(.cc-eyebrow) { margin-top: .75rem; font-size: var(--fs-md); color: var(--cc-on-dark-soft); }
.cc-carousel { position: relative; }
.cc-carousel-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .5rem .25rem 1rem; scrollbar-width: none; }
.cc-carousel-track::-webkit-scrollbar { display: none; }
.cc-carousel-btn { position: absolute; top: 45%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(20,71,52,.7); color: var(--cc-on-dark); font-size: var(--fs-md); cursor: pointer; backdrop-filter: blur(6px); }
.cc-carousel-btn:hover { background: var(--cc-lime); color: var(--cc-green-dark); }
.cc-carousel-btn.prev { left: -22px; }
.cc-carousel-btn.next { right: -22px; }
.cc-pcard { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--cc-radius-lg); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(14px); transition: transform .2s, background .2s; }
.cc-pcard:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
.cc-pcard-link { color: var(--cc-on-dark); text-decoration: none; flex: 1; display: flex; flex-direction: column; }
.cc-pcard-link:hover { text-decoration: none; }
.cc-pcard-name { text-align: center; font-size: var(--fs-lg); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-head); text-transform: uppercase; }
.cc-pcard-focus { text-align: center; font-size: var(--fs-sm); color: var(--cc-on-dark-soft); margin-top: .5rem; line-height: 1.4; }
.cc-pcard-body { position: relative; flex: 1; margin-top: 1.25rem; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: #dcdddc; }
.cc-pcard-body::before { content: ''; position: absolute; inset: 0 0 auto; height: 45%; z-index: 1; background: linear-gradient(180deg, rgba(240,240,240,.85), rgba(240,240,240,0)); pointer-events: none; }
.cc-pcard-img, .cc-pcard-body .cc-img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cc-pcard:hover .cc-pcard-img { transform: scale(1.04); }
.cc-pcard-keys { position: absolute; z-index: 2; top: .9rem; left: 1rem; list-style: none; font-size: var(--fs-xs); line-height: 1.5; max-width: 58%; color: var(--cc-ink-soft); }
.cc-pcard-keys li { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,0,0,.25); }
.cc-pcard-price { position: absolute; z-index: 2; top: .9rem; right: 1rem; color: var(--cc-green); font-size: var(--fs-xl); font-weight: 500; line-height: 1; text-align: right; }
.cc-pcard-price small { display: block; font-size: var(--fs-2xs); letter-spacing: var(--track-label); margin-top: .25rem; }
.cc-pcard-body .cc-img-ph ~ .cc-pcard-keys, .cc-pcard-body .cc-img-ph ~ .cc-pcard-price { color: var(--cc-on-dark); }
.cc-pcard-body .cc-img-ph ~ .cc-pcard-keys li { text-decoration-color: rgba(255,255,255,.4); }
.cc-pcard-body:has(.cc-img-ph)::before { display: none; }
.cc-pcard-body .cc-img-ph { justify-content: flex-end; padding-bottom: 2rem; }
.cc-pcard-body .cc-img-ph img { width: 50%; }
.cc-pcard-add { margin-top: 1rem; }


/* ── Home ─────────────────────────────────────────────
   Figma frame 首页 is 1920 wide. Every size below is the Figma value times
   --u (1px down to 1488, scaling below that), with a px floor on text
   so it stays readable on laptops. Headings: Roboto 700, line-height 80%,
   letter-spacing -4%. Text colours #F1F1F1 (on dark) / #252525 (on panel). */

/* Shared: lime button — 60 tall, radius 20 TL/BR, Roboto 500 36 #F1F1F1 */
.cc-levels .cc-btn, .cc-poster .cc-btn, .cc-story .cc-btn { min-height: max(44px, calc(60 * var(--u))); padding: 0 calc(40 * var(--u)); border-radius: var(--cc-r20) 0 var(--cc-r20) 0; font-size: max(16px, calc(36 * var(--u))); font-weight: 500; line-height: 1; letter-spacing: 0; color: #f1f1f1; }
.cc-h-display { font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }

/* Hero — image 1920×1012 under the 60px bar; title 96 700, sub 36 500 */
.cc-hero { position: relative; height: max(520px, calc(1012 * var(--u))); text-align: center; overflow: hidden; color: #f1f1f1; }
.cc-hero-bg { position: absolute; inset: 0; }
.cc-hero-inner { position: relative; padding: max(160px, calc(561 * var(--u))) 1.25rem 0; }
.cc-hero-title { font-size: max(40px, calc(96 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-hero-sub { margin-top: calc(27 * var(--u)); font-size: max(18px, calc(36 * var(--u))); font-weight: 500; line-height: 1.1; }

/* 5 levels — #F1F1F1 panel 1880×1457, 8px under the hero, radius 100 TL/BR */
.cc-levels { background: var(--cc-panel); color: #252525; margin: calc(8 * var(--u)) calc(20 * var(--u)) 0; border-radius: var(--cc-r80) 0 var(--cc-r80) 0; padding: calc(157 * var(--u)) calc(20 * var(--u)) calc(159 * var(--u)); text-align: center; }
.cc-levels-head h2 { font-size: max(30px, calc(64 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-levels-head p { margin-top: calc(37 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-levels-grid { display: grid; grid-template-columns: repeat(5, minmax(0, calc(340 * var(--u)))); justify-content: center; gap: calc(34 * var(--u)); margin-top: calc(187 * var(--u)); }
/* card 340×500 (grows when copy wraps on narrower screens so the hover outline
   always encloses it), hover outline radius 60 TL/BR: code @36, circle 220 @108, name @374, role @405, match @444 */
.cc-level { display: flex; flex-direction: column; align-items: center; min-height: calc(500 * var(--u)); padding: calc(36 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u)); color: #252525; text-decoration: none; border: 2px solid transparent; border-radius: calc(60 * var(--u)) 0 calc(60 * var(--u)) 0; transition: border-color .2s; }
.cc-level:hover { text-decoration: none; border-color: var(--cc-lime); }
.cc-level-code { font-size: max(18px, calc(36 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; color: #000; }
.cc-level-img { width: calc(220 * var(--u)); aspect-ratio: 1; margin-top: calc(43 * var(--u)); border-radius: 50%; overflow: hidden; background: #d9d9d9; }
.cc-level-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.cc-level:hover .cc-level-img img { transform: scale(1.06); }
.cc-level-name { margin-top: calc(46 * var(--u)); font-size: max(14px, calc(24 * var(--u))); font-weight: 500; line-height: 1; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.cc-level-role { margin-top: calc(7 * var(--u)); font-size: max(12px, calc(20 * var(--u))); line-height: 1; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }
.cc-level-match { margin-top: calc(19 * var(--u)); font-size: max(11px, calc(16 * var(--u))); font-weight: 300; font-style: italic; line-height: 1; color: #afafaf; }
.cc-levels-cta { margin-top: calc(106 * var(--u)); }
.cc-levels-cta h3 { font-size: max(28px, calc(64 * var(--u))); font-weight: 500; line-height: 1; }
.cc-levels-cta p { margin: calc(30 * var(--u)) 0 calc(40 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-levels-cta .cc-btn { width: max(220px, calc(400 * var(--u))); }

/* Poster — 1880×1080 photo panel, radius 100 TL/BR, copy at x=176 */
.cc-poster { position: relative; margin: calc(8 * var(--u)) calc(20 * var(--u)) 0; min-height: calc(1080 * var(--u)); display: flex; align-items: flex-end; border-radius: var(--cc-r80) 0 var(--cc-r80) 0; overflow: hidden; color: #f1f1f1; }
.cc-poster-bg { position: absolute; inset: 0; }
.cc-poster-inner { position: relative; padding: calc(120 * var(--u)) calc(176 * var(--u)) calc(80 * var(--u)); }
.cc-poster h2 { font-size: max(30px, calc(64 * var(--u))); font-weight: 500; line-height: calc(52 / 64); letter-spacing: 0; text-transform: uppercase; }
.cc-poster-text { max-width: calc(1104 * var(--u)); margin: calc(58 * var(--u)) 0 calc(54 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: 1; text-align: justify; }
.cc-poster-text p + p { margin-top: 1em; }
.cc-poster .cc-btn { width: calc(780 * var(--u)); min-width: min(100%, 320px); }

/* Best sellers — coverflow: centre card 650×845, side cards at 75% and ±520 */
.cc-shop-home { --c: var(--u); --cc-r80c: calc(81.28 * var(--c)); padding: calc(100 * var(--u)) 0 0; color: #f1f1f1; overflow: hidden; }
.cc-shop-home .cc-shop-head { text-align: center; margin-bottom: 0; }
.cc-shop-home .cc-shop-head h2 { font-size: max(30px, calc(64 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; margin-top: 0; }
.cc-shop-home .cc-shop-head p { margin-top: calc(32 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-flow { position: relative; height: calc(845 * var(--c)); margin-top: calc(60 * var(--u)); }
.cc-flow-track { position: absolute; inset: 0; }
.cc-flow .cc-pcard { position: absolute; top: 0; left: 50%; width: calc(650 * var(--c)); height: calc(845 * var(--c)); padding: calc(63 * var(--c)) calc(75.5 * var(--c)) 0; border-radius: var(--cc-r80c) 0 var(--cc-r80c) 0; background: rgba(241,241,241,.4); border: 1.63px solid rgba(255,255,255,.4); box-shadow: 0 6.5px 3.25px rgba(0,0,0,.1); backdrop-filter: blur(16.26px); -webkit-backdrop-filter: blur(16.26px); transform: translateX(-50%); transition: transform .5s ease, opacity .5s ease; visibility: hidden; opacity: 0; }
.cc-flow .cc-pcard:hover { background: rgba(241,241,241,.4); }
.cc-flow .cc-pcard.is-active { visibility: visible; opacity: 1; z-index: 3; }
.cc-flow .cc-pcard.is-prev, .cc-flow .cc-pcard.is-next { visibility: visible; opacity: .5; z-index: 2; cursor: pointer; }
.cc-flow .cc-pcard.is-prev { transform: translateX(calc(-50% - 520 * var(--c))) scale(.75); }
.cc-flow .cc-pcard.is-next { transform: translateX(calc(-50% + 520 * var(--c))) scale(.75); }
.cc-flow .cc-pcard.is-prev *, .cc-flow .cc-pcard.is-next * { pointer-events: none; }
.cc-flow .cc-pcard.is-prev .cc-pcard-name, .cc-flow .cc-pcard.is-next .cc-pcard-name,
.cc-flow .cc-pcard.is-prev .cc-pcard-focus, .cc-flow .cc-pcard.is-next .cc-pcard-focus { color: #252525; }
.cc-flow .cc-pcard-link { flex: none; color: #f1f1f1; }
.cc-flow .cc-pcard-name { min-height: calc(85 * var(--c)); display: flex; align-items: center; justify-content: center; font-size: calc(52 * var(--c)); font-weight: 500; line-height: calc(42.26 / 52); letter-spacing: 0; }
.cc-flow .cc-pcard-focus { margin-top: calc(16 * var(--c)); font-size: calc(26 * var(--c)); line-height: 1; color: #f1f1f1; margin-left: calc(-40 * var(--c)); margin-right: calc(-40 * var(--c)); }
/* image box + button centred in the card so both side gaps match */
.cc-flow .cc-pcard-body, .cc-flow .cc-pcard-add { align-self: center; }
/* image box 499×455: white 60% hairline, frosted so the card shows through; a light grey-green tint (instead of the #D9D9D9 40% fill, which renders milky) matches the exported design colour */
.cc-flow .cc-pcard-body { flex: none; width: calc(499 * var(--c)); height: calc(455 * var(--c)); aspect-ratio: auto; margin-top: calc(35 * var(--c)); border-radius: 0; background: rgba(100,110,105,.08); border: .81px solid rgba(255,255,255,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cc-flow .cc-pcard-body::before { display: none; }
.cc-flow .cc-pcard-img { mix-blend-mode: multiply; }
/* transparent cutout (Figma: 196×344 at 148/81 inside the box) */
.cc-pcard-cutout { position: absolute; left: 50%; top: 17.8%; height: 75.6%; width: auto; transform: translateX(-50%); }
.cc-flow .cc-pcard-keys { top: calc(16 * var(--c)); left: calc(19 * var(--c)); max-width: 60%; font-size: calc(16 * var(--c)); line-height: 1.016; color: #f1f1f1; }
.cc-flow .cc-pcard-keys li { text-decoration-color: currentColor; }
.cc-flow .cc-pcard-price { top: calc(15 * var(--c)); right: calc(24 * var(--c)); font-size: calc(40 * var(--c)); font-weight: 500; color: #9df56f; }
/* only the amount is underlined (2px); NZD sits below without a line */
.cc-flow .cc-pcard-price span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.cc-flow .cc-pcard-price small { font-size: calc(26 * var(--c)); letter-spacing: 0; margin-top: calc(2 * var(--c)); text-decoration: none; }
.cc-flow .cc-pcard-add { width: calc(499 * var(--c)); min-height: calc(65 * var(--c)); margin-top: calc(36 * var(--c)); padding: 0; border-radius: calc(21.67 * var(--c)) 0 calc(21.67 * var(--c)) 0; font-size: calc(40 * var(--c)); font-weight: 500; letter-spacing: 0; line-height: 1; color: #f1f1f1; }
/* arrows: 70px #F5F5F5 discs on the side cards, ±379 from centre; 50% until hovered */
.cc-flow-btn { position: absolute; top: 50%; left: 50%; z-index: 4; width: calc(70 * var(--c)); height: calc(70 * var(--c)); min-width: 36px; min-height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #f5f5f5; color: var(--cc-lime); cursor: pointer; opacity: .5; transition: background .15s, color .15s, opacity .15s; }
.cc-flow-btn svg { width: 64%; height: 64%; }
.cc-flow-btn.prev { transform: translate(calc(-50% - 379 * var(--c)), -50%); }
.cc-flow-btn.next { transform: translate(calc(-50% + 379 * var(--c)), -50%) scaleX(-1); }
.cc-flow-btn:hover, .cc-flow-btn:focus-visible { background: var(--cc-lime); color: #fff; opacity: 1; }

/* Brand story — 1880×600 landscape, BRAND STORY 96 700 at x=16, copy column at x=974 */
.cc-story { padding-top: calc(122 * var(--u)); padding-bottom: calc(100 * var(--u)); color: #f1f1f1; }
.cc-story-img { margin: 0 calc(20 * var(--u)); height: max(220px, calc(600 * var(--u))); }
.cc-story-grid { display: grid; grid-template-columns: calc(50% + 16 * var(--u)) minmax(0, 1fr); padding: calc(42 * var(--u)) calc(20 * var(--u)) 0 calc(16 * var(--u)); }
.cc-story-title { font-size: max(44px, calc(96 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-story-tagline { font-size: max(20px, calc(36 * var(--u))); font-weight: 500; line-height: 1; }
.cc-story-lead { margin-top: calc(32 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: 1; }
.cc-story-text { margin-top: calc(32 * var(--u)); font-size: max(13px, calc(16 * var(--u))); line-height: 1.1; text-align: justify; }
.cc-story .cc-btn { width: max(220px, calc(400 * var(--u))); margin-top: calc(40 * var(--u)); }

/* Why CARECOLOR + footer — one leaf photo with 20px layer blur behind both */
.cc-leaf { position: relative; overflow: hidden; isolation: isolate; }
.cc-leaf-bg { position: absolute; inset: -40px; z-index: -1; filter: blur(20px); }
.cc-why { padding: calc(99 * var(--u)) 0 calc(112 * var(--u)); text-align: center; color: #f1f1f1; }
.cc-why-head h2 { font-size: max(30px, calc(64 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-why-head p { margin-top: calc(36 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-why-grid { list-style: none; display: grid; width: min(calc(1640 * var(--u)), 100% - 48px); margin-inline: auto; grid-template-columns: repeat(5, calc(232 * var(--u))); justify-content: space-between; margin-top: calc(52 * var(--u)); }
.cc-why-item { display: flex; flex-direction: column; align-items: center; gap: calc(17 * var(--u)); }
.cc-why-label { font-size: max(13px, calc(20 * var(--u))); line-height: 1; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }
/* tile 120×120: #FFF 40%, 1px #FFF 80%, 0 2 2 #000 20%, radius 20 TL/BR, Figma blur 40 */
.cc-why-tile { width: max(72px, calc(120 * var(--u))); height: max(72px, calc(120 * var(--u))); display: grid; place-items: center; border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 2px 2px rgba(0,0,0,.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.cc-icon { width: 55%; height: 55%; display: block; object-fit: contain; }
/* glyph boxes from Figma (in a 120 tile): NZ 63×101, leaf 66×68, shield 56×67,
   molecule 69×65, body 92×50 — the PNGs have ~4% padding, hence the sizes below */
.cc-why-tile .cc-icon-nz { width: 87.5%; height: 87.5%; }
.cc-why-tile .cc-icon-leaf { width: 59%; height: 59%; }
.cc-why-tile .cc-icon-shield { width: 58%; height: 58%; }
.cc-why-tile .cc-icon-molecule { width: 60%; height: 60%; }
.cc-why-tile .cc-icon-shape { width: 80%; height: 80%; }

/* ── Products: 5-level framework — Figma 产品 (1920 × 3460) ─ */
/* image box positioned inside its frame exactly as cropped in Figma */
.cc-crop { position: relative; overflow: hidden; margin: 0; }
.cc-crop > img { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); max-width: none; object-fit: cover; display: block; }
.cc-hero-bg.cc-crop, .cc-poster-bg.cc-crop { position: absolute; }
/* hero 1920×1012: photo, lime "5" glyph 480×699 at (720,157), title 96/500 lh80 */
.cc-fw-hero { position: relative; height: max(520px, calc(1012 * var(--u))); overflow: hidden; isolation: isolate; text-align: center; }
.cc-fw-hero-img { position: absolute; inset: 0; z-index: -2; }
.cc-fw-hero-num { position: absolute; z-index: -1; left: 50%; top: calc(157 * var(--u)); width: calc(480 * var(--u)); height: auto; transform: translateX(-50%); user-select: none; pointer-events: none; }
.cc-fw-hero-title { position: absolute; left: 0; right: 0; top: calc(426 * var(--u)); font-size: max(40px, calc(96 * var(--u))); font-weight: 500; line-height: calc(80 / 96); letter-spacing: 0; text-transform: none; color: #fff; }
/* mosaic: 3 × 620×780 cells, 10px gaps, 20px gutters */
.cc-fw { padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
.cc-fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.cc-fw-cell { position: relative; margin: 0; height: calc(780 * var(--u)); min-height: 0; overflow: hidden; }
.cc-fw-photo { border-radius: 0 calc(100 * var(--u)) 0 calc(100 * var(--u)); }
.cc-fw-card { display: flex; flex-direction: column; padding: calc(155 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); border-radius: calc(100 * var(--u)) 0 calc(100 * var(--u)) 0; background: var(--cc-panel); color: #252525; scroll-margin-top: 70px; }
.cc-fw-card.is-first { color: #4b4b4b; }
/* badge: code 96/500 lime with a 6px rule, tier 32/900, right-aligned at 40 */
.cc-fw-badge { position: absolute; top: calc(28 * var(--u)); right: calc(40 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; color: var(--cc-lime); line-height: 1; }
.cc-fw-badge span { --rb: .05em; margin-right: calc(-1 * var(--rb)); font-size: max(44px, calc(96 * var(--u))); font-weight: 500; line-height: calc(90 / 96); }
/* Figma aligns the digit's ink (and the bar under it) with LITE/MATE…, so hang the
   digit's right side bearing (--rb, large on "1") past the edge */
.cc-fw-badge span[data-code$="1"] { --rb: .2em; }
.cc-fw-badge span::after { content: ""; display: block; height: calc(6 * var(--u)); margin-right: var(--rb); background: currentColor; }
.cc-fw-badge small { margin-top: calc(4 * var(--u)); font-size: max(16px, calc(32 * var(--u))); font-weight: 900; letter-spacing: 0; }
.cc-fw-name { font-size: max(18px, calc(32 * var(--u))); font-weight: 500; line-height: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; margin: 0; }
.cc-fw-intro { max-width: calc(545 * var(--u)); margin-top: calc(20 * var(--u)); font-size: max(13px, calc(16 * var(--u))); line-height: 1; }
.cc-fw-intro p + p { margin-top: 1em; }
.cc-fw-meta { margin-top: auto; padding-top: 0; }
.cc-fw-meta dt { font-size: max(14px, calc(20 * var(--u))); font-weight: 500; line-height: 1; }
.cc-fw-meta dd { max-width: calc(555 * var(--u)); margin: calc(16 * var(--u)) calc(-40 * var(--u)) calc(26 * var(--u)) 0; font-size: max(13px, calc(16 * var(--u))); line-height: 1; color: inherit; }
.cc-fw-meta dd:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); margin: calc(17 * var(--u)) 0 0; max-width: none; }
/* text chip: #E3E3E3, 30 tall, radius 10 TL/BR */
.cc-fw-pname { display: inline-flex; align-items: center; min-height: calc(30 * var(--u)); padding: 0 calc(19 * var(--u)); border-radius: calc(10 * var(--u)) 0 calc(10 * var(--u)) 0; background: #e3e3e3; color: #4b4b4b; font-size: max(12px, calc(16 * var(--u))); line-height: 1; }
/* product row: 540×60, #E3E3E3, radius 20 TL/BR; thumb 48 (radius 10); lime 20px disc */
.cc-fw-plink { display: flex; align-items: center; align-self: stretch; height: max(48px, calc(60 * var(--u))); padding: 0 calc(10 * var(--u)); border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: #e3e3e3; color: #252525; text-decoration: none; transition: box-shadow .15s; }
.cc-fw-plink:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--cc-lime); }
.cc-fw-plink-img { flex: none; width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 36px; min-height: 36px; border-radius: calc(10 * var(--u)) 0 calc(10 * var(--u)) 0; overflow: hidden; background: #fff; }
.cc-fw-plink-img > img, .cc-fw-plink-img > .cc-img-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-fw-plink-img .cc-img-ph { padding: .25rem; gap: 0; }
.cc-fw-plink-img .cc-img-ph img { width: 100%; }
.cc-fw-plink-img .cc-img-ph span { display: none; }
.cc-fw-plink-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-left: calc(10 * var(--u)); line-height: 1; }
.cc-fw-plink-text b { font-size: max(13px, calc(20 * var(--u))); font-weight: 500; }
.cc-fw-plink-text small { font-size: max(11px, calc(14 * var(--u))); font-weight: 500; }
.cc-fw-plink em { align-self: flex-end; margin: 0 calc(10 * var(--u)) calc(12 * var(--u)) 0; font-size: max(11px, calc(14 * var(--u))); line-height: 1; }
.cc-fw-plink-arrow { flex: none; width: max(18px, calc(20 * var(--u))); height: max(18px, calc(20 * var(--u))); align-self: flex-end; margin-bottom: calc(10 * var(--u)); border-radius: 50%; background: var(--cc-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9M10 5.5l4.5 4.5L10 14.5' fill='none' stroke='%23F1F1F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

/* ── Product detail — Figma 产品详情 (1920 × 2857) ────────── */
.cc-pd { color: #252525; }
/* top panel 1880×860, radius 100 BR; gallery 540 at x=240, info 706 at x=975 */
.cc-pd-top { display: grid; grid-template-columns: calc(540.5 * var(--u)) calc(706 * var(--u)); column-gap: calc(194.5 * var(--u)); margin: 0 calc(20 * var(--u)); padding: calc(120 * var(--u)) 0 calc(120 * var(--u)) calc(var(--side) - 20 * var(--u)); background: var(--cc-panel); border-radius: 0 0 calc(100 * var(--u)) 0; }
/* gallery */
.cc-gal-main { position: relative; aspect-ratio: 1; overflow: hidden; background: #dcdddc; }
.cc-gal-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .35s; }
.cc-gal-slide.is-active { opacity: 1; }
.cc-gal-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-gal-slide > .cc-img-ph { width: 100%; height: 100%; }
/* 35px #F5F5F5 discs at 50%, lime arrows */
.cc-gal-btn { position: absolute; top: 50%; z-index: 2; width: max(30px, calc(35 * var(--u))); height: max(30px, calc(35 * var(--u))); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(245,245,245,.5); color: rgba(136,219,98,.7); cursor: pointer; transform: translateY(-50%); transition: background .15s, color .15s; }
.cc-gal-btn svg { width: 60%; height: 60%; }
.cc-gal-btn:hover { background: #f5f5f5; color: var(--cc-lime); }
.cc-gal-btn.prev { left: calc(17.4 * var(--u)); }
.cc-gal-btn.next { right: calc(17.4 * var(--u)); }
.cc-gal-btn.next svg { transform: scaleX(-1); }
.cc-gal-level { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); width: max(56px, calc(84 * var(--u))); height: auto; font-family: inherit; }
/* progress bar 541×3 #D0D2CF, thumbs 60×60 gap 9 */
.cc-gal-bar { height: 3px; margin-top: calc(7.5 * var(--u)); background: #d0d2cf; }
.cc-gal-bar span { display: block; height: 100%; background: var(--cc-lime); transition: transform .35s; }
.cc-gal-thumbs { display: flex; gap: calc(9 * var(--u)); margin-top: calc(9 * var(--u)); }
.cc-gal-thumbs button { width: max(48px, calc(60 * var(--u))); height: max(48px, calc(60 * var(--u))); padding: 0; border: 2px solid transparent; border-radius: 0; overflow: hidden; background: #d9d9d9; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.cc-gal-thumbs button.is-active, .cc-gal-thumbs button:hover { opacity: 1; border-color: var(--cc-lime); }
.cc-gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* placeholder when the client hasn't supplied a photo */
.cc-img-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: linear-gradient(160deg, #1d5a42, var(--cc-green)); color: var(--cc-on-dark-soft); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; text-align: center; padding: 1rem; }
.cc-img-ph img { width: 55%; max-width: 220px; opacity: .9; }

/* buy box */
.cc-pd-info { display: flex; flex-direction: column; }
.cc-pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cc-pd-head h1 { font-size: max(30px, calc(64 * var(--u))); font-weight: 500; line-height: calc(52 / 64); text-transform: uppercase; letter-spacing: 0; }
/* level pill 219×31: white, 1px lime, radius 19.5 TL/BR */
.cc-pd-level { flex: none; display: flex; align-items: center; width: max(170px, calc(219 * var(--u))); height: max(28px, calc(31 * var(--u))); padding: 0 calc(10 * var(--u)) 0 calc(19.5 * var(--u)); border: 1px solid var(--cc-lime); border-radius: calc(19.5 * var(--u)) 0 calc(19.5 * var(--u)) 0; background: #fff; color: #252525; text-decoration: none; }
.cc-pd-level:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--cc-lime); }
.cc-pd-level b { font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-pd-level em { margin-left: auto; font-size: max(10px, calc(12 * var(--u))); font-weight: 500; }
.cc-pd-level span { width: max(16px, calc(20 * var(--u))); height: max(16px, calc(20 * var(--u))); margin-left: calc(10 * var(--u)); border-radius: 50%; background: var(--cc-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9M10 5.5l4.5 4.5L10 14.5' fill='none' stroke='%23F1F1F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.cc-pd-tagline { margin-top: calc(23 * var(--u)); font-size: max(18px, calc(32 * var(--u))); font-weight: 500; line-height: 1; }
.cc-pd-headline { margin-top: calc(9 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 300; font-style: italic; line-height: 1; }
/* keyword chips 220×32, white, radius 20 TL/BR */
.cc-pd-chips { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(23 * var(--u)); margin-top: calc(29 * var(--u)); }
.cc-pd-chips li { display: flex; align-items: center; justify-content: center; min-height: max(28px, calc(32 * var(--u))); padding: 0 .4rem; border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: #fff; font-size: max(11px, calc(14 * var(--u))); font-weight: 300; font-style: italic; line-height: 1.1; text-align: center; }
.cc-pd-desc-title { margin-top: calc(27 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 500; line-height: 1; }
.cc-pd-desc { max-width: calc(660 * var(--u)); margin-top: calc(13 * var(--u)); font-size: max(14px, calc(20 * var(--u))); font-weight: 300; line-height: calc(24 / 20); }
.cc-pd-price { display: flex; justify-content: space-between; align-items: flex-start; margin-top: auto; padding-top: calc(40 * var(--u)); }
.cc-pd-price strong { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); font-size: max(30px, calc(48 * var(--u))); font-weight: 500; line-height: 1; color: var(--cc-lime); }
.cc-pd-price u { text-decoration-thickness: 2px; text-underline-offset: .12em; }
.cc-pd-price small { font-size: max(11px, calc(16 * var(--u))); font-weight: 500; text-decoration: none; display: inline-block; margin-top: calc(6 * var(--u)); }
.cc-pd-price span { font-size: max(14px, calc(24 * var(--u))); font-weight: 300; font-style: italic; line-height: 1; text-align: right; }
.cc-pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(30 * var(--u)); margin-top: calc(29 * var(--u)); }
.cc-pd-actions .cc-btn { min-height: max(44px, calc(60 * var(--u))); padding: 0 .5rem; border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; font-size: max(15px, calc(28 * var(--u))); font-weight: 500; letter-spacing: 0; line-height: 1; }
.cc-pd-buy { background: var(--cc-lime); color: #f1f1f1; }
.cc-pd-buy:hover { background: var(--cc-lime-dark); }
.cc-pd-ask { background: #e3e3e3; color: #252525; }
.cc-pd-ask:hover { background: #d6d6d6; }

/* in-page tabs: 59px bar, Roboto 500 16 */
.cc-pd-tabs { position: sticky; top: max(52px, calc(60 * var(--u))); z-index: 5; display: flex; justify-content: center; align-items: center; gap: calc(37 * var(--u)); height: calc(59 * var(--u)); min-height: 44px; background: var(--cc-green); }
.cc-pd-tabs a { color: #f1f1f1; font-size: max(12px, calc(16 * var(--u))); font-weight: 500; line-height: 1; text-transform: uppercase; text-decoration: none; }
.cc-pd-tabs a:hover { color: var(--cc-lime); text-decoration: none; }

/* bottom panel 1880×1858, radius 100 TL/BR; content 240 → 1681 */
.cc-pd-bottom { margin: 0 calc(20 * var(--u)) calc(20 * var(--u)); padding: 0 calc(var(--side) - 21 * var(--u)) 0 calc(var(--side) - 20 * var(--u)); background: var(--cc-panel); border-radius: calc(100 * var(--u)) 0 calc(100 * var(--u)) 0; }
.cc-pd-sec { position: relative; padding: calc(95 * var(--u)) 0 calc(80 * var(--u)); scroll-margin-top: 110px; }
.cc-pd-sec:first-child { padding-top: calc(75 * var(--u)); }
.cc-pd-sec + .cc-pd-sec::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--cc-lime) 0 6px, transparent 6px 12px); }
.cc-pd-sec h2 { margin-bottom: calc(35 * var(--u)); font-size: max(22px, calc(36 * var(--u))); font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
/* benefits: 5 × 268×300, gap 25, radius 50 TL/BR; first lime */
.cc-pd-benefits { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(25 * var(--u)); }
.cc-pd-benefits li { position: relative; height: calc(300 * var(--u)); padding: calc(146 * var(--u)) calc(20 * var(--u)) 0; border-radius: calc(50 * var(--u)) 0 calc(50 * var(--u)) 0; background: #fff; }
.cc-pd-benefits li:first-child { background: var(--cc-lime); color: #f1f1f1; }
/* the lime highlight follows the pointer across the cards */
.cc-pd-benefits li { transition: background-color .25s, color .25s; }
@media (hover: hover) {
    .cc-pd-benefits li:hover { background: var(--cc-lime); color: #f1f1f1; }
    .cc-pd-benefits:has(li:hover) li:first-child:not(:hover) { background: #fff; color: inherit; }
}
.cc-pd-benefit-num { position: absolute; top: calc(9.6 * var(--u)); right: calc(10 * var(--u)); font-size: max(40px, calc(80 * var(--u))); font-style: italic; font-weight: 400; line-height: 1; }
.cc-pd-benefits h3 { font-size: max(14px, calc(20 * var(--u))); font-weight: 400; line-height: 1; }
.cc-pd-benefits li:first-child h3 { line-height: .9; }
.cc-pd-benefits p { margin-top: calc(18 * var(--u)); font-size: max(12px, calc(16 * var(--u))); font-weight: 300; line-height: 1; }
/* ingredients: photo 490×580 (radius 80 TL/BR) + 897-wide table, 36px rows */
.cc-pd-ingr { display: grid; grid-template-columns: calc(490 * var(--u)) minmax(0, 1fr); column-gap: calc(53 * var(--u)); align-items: start; }
.cc-pd-ingr-photo { position: relative; margin: 0; height: calc(580 * var(--u)); border-radius: calc(80 * var(--u)) 0 calc(80 * var(--u)) 0; overflow: hidden; }
/* Figma crop: photo scaled to 106.6% of the box height, nudged up 3.45% and 43% across */
.cc-pd-ingr-photo img { position: absolute; left: 0; top: -3.45%; width: 100%; height: 106.6%; object-fit: cover; object-position: 43% 50%; display: block; }
.cc-pd-ingredients { width: 100%; border-collapse: collapse; font-size: max(14px, calc(20 * var(--u))); font-weight: 300; }
.cc-pd-ingredients td { height: calc(36 * var(--u)); padding: calc(4 * var(--u)) 0 0; border-top: 1px solid #d5d5d5; line-height: 1; vertical-align: middle; }
.cc-pd-ingredients tr:last-child td { border-bottom: 1px solid #d5d5d5; }
.cc-pd-ingredients td:last-child { padding-left: 1.5rem; text-align: right; white-space: nowrap; }
/* routine: 3 × 460×260, #EAEAEA, radius 40 TL/BR */
.cc-pd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); }
.cc-pd-fact { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: calc(260 * var(--u)); padding: calc(17 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(40 * var(--u)) 0 calc(40 * var(--u)) 0; background: #eaeaea; }
.cc-pd-fact h3 { font-size: max(16px, calc(24 * var(--u))); font-weight: 500; line-height: 1; color: var(--cc-lime); }
.cc-pd-fact p { font-size: max(14px, calc(20 * var(--u))); font-weight: 300; line-height: calc(24 / 20); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-eyebrow.cc-eyebrow-lime { color: var(--cc-lime); }
.cc-eyebrow { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cc-green); }

/* ── Women's metabolic science — Figma 爆品详情 (1920 × 3461) ─ */
.cc-wm { padding-bottom: calc(80 * var(--u)); color: #f1f1f1; }
.cc-wm h2 { font-size: max(26px, calc(48 * var(--u))); font-weight: 500; line-height: calc(39 / 48); text-transform: uppercase; }
/* hero copy column 925 wide (x=975 at 1920, its line breaks need the full width);
   italic tagline bottom-left at x=20 */
.cc-wm-hero { display: grid; grid-template-columns: minmax(0, 1fr) calc(925 * var(--u)); padding: calc(78 * var(--u)) calc(20 * var(--u)) 0; }
.cc-wm-tag { align-self: end; font-size: max(12px, calc(20 * var(--u))); font-style: italic; line-height: calc(16 / 20); letter-spacing: -.04em; }
.cc-wm-hero h1 { font-size: max(32px, calc(64 * var(--u))); font-weight: 500; line-height: calc(52 / 64); text-transform: uppercase; }
.cc-wm-sub { margin-top: calc(33 * var(--u)); font-size: max(18px, calc(32 * var(--u))); line-height: 1; }
.cc-wm-intro { max-width: calc(880 * var(--u)); margin-top: calc(39 * var(--u)); font-size: max(15px, calc(24 * var(--u))); font-weight: 300; line-height: 1; }
/* photo band 1880×549 */
.cc-wm-band { height: max(260px, calc(549 * var(--u))); margin: calc(81 * var(--u)) calc(20 * var(--u)) 0; }
/* body column 240 → 1680 */
.cc-wm-body { width: calc(1441 * var(--u)); margin: 0 auto; padding-top: calc(39 * var(--u)); }
.cc-wm-sec { position: relative; padding: calc(39 * var(--u)) 0 calc(38 * var(--u)); }
.cc-wm-sec + .cc-wm-sec::before { content: ''; position: absolute; top: 0; left: 0; width: calc(1440 * var(--u)); height: 1px; background: repeating-linear-gradient(90deg, var(--cc-lime) 0 6px, transparent 6px 12px); }
.cc-wm-just { font-size: max(15px, calc(24 * var(--u))); line-height: calc(30 / 24); text-align: justify; }
.cc-wm-sec > .cc-wm-just { margin-top: calc(32 * var(--u)); }
.cc-wm-rich p + p { margin-top: calc(30 / 24 * 1em); }
/* 4 cards 337×360, gap 31, radius 50 TL/BR; first lime */
.cc-wm-ways { display: grid; grid-template-columns: repeat(4, calc(337 * var(--u))); gap: calc(31 * var(--u)); margin-top: calc(38 * var(--u)); }
.cc-wm-way { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: calc(360 * var(--u)); padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); border-radius: calc(50 * var(--u)) 0 calc(50 * var(--u)) 0; background: var(--cc-panel); color: #000; }
.cc-wm-way:first-child { background: var(--cc-lime); color: #f1f1f1; }
.cc-wm-way-num { position: absolute; top: calc(6 * var(--u)); right: calc(11 * var(--u)); font-size: max(56px, calc(120 * var(--u))); font-style: italic; font-weight: 400; line-height: 1; color: var(--cc-lime); }
.cc-wm-way:first-child .cc-wm-way-num { color: #f1f1f1; }
/* the lime highlight follows the pointer across the cards */
.cc-wm-way, .cc-wm-way-num { transition: background-color .25s, color .25s; }
@media (hover: hover) {
    .cc-wm-way:hover { background: var(--cc-lime); color: #f1f1f1; }
    .cc-wm-way:hover .cc-wm-way-num { color: #f1f1f1; }
    .cc-wm-ways:has(.cc-wm-way:hover) .cc-wm-way:first-child:not(:hover) { background: var(--cc-panel); color: #000; }
    .cc-wm-ways:has(.cc-wm-way:hover) .cc-wm-way:first-child:not(:hover) .cc-wm-way-num { color: var(--cc-lime); }
}
.cc-wm-way h3 { font-size: max(15px, calc(24 * var(--u))); font-weight: 400; line-height: calc(22 / 24); text-transform: uppercase; }
.cc-wm-way p { margin-top: calc(15 * var(--u)); font-size: max(12px, calc(16 * var(--u))); font-weight: 300; line-height: 1; }
/* split rows: left column 612, right column 829 at x=852 */
.cc-wm-split { display: grid; grid-template-columns: calc(612 * var(--u)) calc(829 * var(--u)); }
.cc-wm-lead { margin-top: calc(35 * var(--u)); font-size: max(17px, calc(32 * var(--u))); line-height: 1; }
.cc-wm-tag-grey { margin-top: calc(216 * var(--u)); color: #818181; }
.cc-wm-photo { height: calc(356 * var(--u)); }
.cc-wm-photo + .cc-wm-just { margin-top: calc(35 * var(--u)); }
.cc-wm-claim { margin-top: calc(34 * var(--u)); font-size: max(17px, calc(32 * var(--u))); line-height: 1; color: var(--cc-lime); }
.cc-wm-claim-strong { font-weight: 500; }
.cc-wm h2.cc-wm-h-chapters { line-height: calc(46 / 48); text-transform: none; }
.cc-wm-col > p:not(.cc-wm-claim) { max-width: none; font-size: max(15px, calc(24 * var(--u))); line-height: calc(30 / 24); }
.cc-wm-col > p + p { margin-top: calc(34 * var(--u)); }
/* CTA band 1441×420 with a 40% green multiply wash */
.cc-wm-cta { height: max(320px, calc(420 * var(--u))); text-align: center; }
.cc-wm-cta::after { content: ''; position: absolute; inset: 0; background: var(--cc-green); opacity: .4; mix-blend-mode: multiply; }
.cc-wm-cta-text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: calc(113 * var(--u)); }
.cc-wm-cta h2 { font-size: max(26px, calc(48 * var(--u))); line-height: 1; text-transform: none; }
.cc-wm-cta p { margin-top: calc(19 * var(--u)); font-size: max(16px, calc(32 * var(--u))); line-height: 1; }
.cc-wm-cta .cc-btn { width: max(220px, calc(400 * var(--u))); min-height: max(44px, calc(60 * var(--u))); margin-top: calc(35 * var(--u)); padding: 0; border-radius: var(--cc-r20) 0 var(--cc-r20) 0; font-size: max(16px, calc(36 * var(--u))); font-weight: 500; letter-spacing: 0; color: #f1f1f1; }

/* ── Editorial layout (brand story, women’s science) ─ */

.cc-ed-wrap { max-width: var(--cc-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.cc-ed-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.cc-ed-lead { font-size: var(--fs-md); line-height: 1.5; margin-top: 1rem; }
.cc-ed-body { font-size: var(--fs-body-dark); }

/* 01 hero */
.cc-ed-hero { position: relative; min-height: min(80vh, 820px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.cc-ed-hero-bg { position: absolute; inset: 0; z-index: -1; }
.cc-ed-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,71,52,.15) 30%, rgba(20,71,52,.9)); }
.cc-ed-hero-inner { width: 100%; max-width: var(--cc-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5.5rem); }
.cc-ed-hero .cc-eyebrow { color: var(--cc-lime); }
.cc-ed-hero h1 { font-size: var(--fs-3xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-head); text-transform: uppercase; margin-top: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.cc-ed-hero h1 span { color: var(--cc-lime); }

/* intro */
.cc-ed-intro { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cc-ed-intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cc-ed-quote { font-size: var(--fs-xl); line-height: 1.35; font-weight: 400; padding-left: 1.5rem; border-left: 3px solid var(--cc-lime); }
.cc-ed-intro-text p { font-size: var(--fs-body-dark); color: var(--cc-on-dark-soft); }
.cc-ed-intro-text p + p { margin-top: .9rem; }
.cc-ed-word { margin-top: 1.75rem; padding: 1.25rem 1.5rem; border-radius: var(--cc-radius-lg) 0 var(--cc-radius-lg) 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.cc-ed-word dt { font-size: var(--fs-lg); font-style: italic; color: var(--cc-lime); }
.cc-ed-word dd { font-size: var(--fs-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cc-on-dark-soft); margin-top: .25rem; }

/* shared light panel + headings */
.cc-ed-panel { background: var(--cc-panel); color: var(--cc-ink); margin: 0 12px; padding: clamp(3.5rem, 7vw, 6rem) 0; border-radius: var(--cc-radius-xl) 0 var(--cc-radius-xl) 0; }
.cc-ed-panel .cc-ed-lead, .cc-ed-panel .cc-ed-body { color: var(--cc-ink-soft); }
.cc-ed-panel h2, .cc-ed-science h2, .cc-ed-section h2, .cc-ed-purpose h2 { font-size: var(--fs-2xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-head); text-transform: uppercase; margin-top: .75rem; }

/* 02 cycle */
.cc-ed-cycle { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 2rem; }
.cc-ed-cycle li { position: relative; background: #fff; border-radius: var(--cc-radius-lg) 0 var(--cc-radius-lg) 0; padding: 1.25rem 1.25rem 1.5rem; font-size: var(--fs-md); font-weight: 500; }
.cc-ed-cycle li span { display: block; font-size: var(--fs-xl); font-style: italic; color: var(--cc-lime); line-height: 1; margin-bottom: 1.5rem; }
.cc-ed-cycle li + li::before { content: '→'; position: absolute; left: -1.45rem; top: 50%; transform: translateY(-50%); color: var(--cc-green); font-size: var(--fs-md); }
.cc-ed-cycle li:last-child { background: var(--cc-green); color: var(--cc-on-dark); }
.cc-ed-cycle li:last-child::after { content: '↺'; position: absolute; right: 1rem; top: 1rem; color: var(--cc-lime); font-size: var(--fs-lg); }

/* 03 science */
.cc-ed-science { padding: clamp(4rem, 8vw, 7rem) 0; }
.cc-ed-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--cc-radius-xl) 0 var(--cc-radius-xl) 0; overflow: hidden; }
.cc-ed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-ed-science .cc-ed-body { color: var(--cc-on-dark-soft); margin-top: 1.25rem; }
.cc-ed-pathways { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1.75rem 0 .5rem; }
.cc-ed-pathways li { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); font-size: var(--fs-base); font-weight: 500; }
.cc-ed-pathways li span { font-size: var(--fs-xs); font-weight: 700; color: var(--cc-green-dark); background: var(--cc-lime); border-radius: 999px; padding: .15rem .5rem; }

/* 04 system */
.cc-ed-system-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.cc-ed-levels { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.cc-ed-levels a { display: flex; flex-direction: column; height: 100%; min-height: 220px; padding: 1.25rem; background: #fff; border-radius: var(--cc-radius-lg) 0 var(--cc-radius-lg) 0; color: var(--cc-ink); text-decoration: none; transition: background .2s, transform .2s; }
.cc-ed-levels a:hover { text-decoration: none; background: var(--cc-lime); transform: translateY(-3px); }
.cc-ed-level-code { font-size: var(--fs-2xl); font-weight: 500; color: var(--cc-lime); line-height: 1; transition: color .2s; }
.cc-ed-levels a:hover .cc-ed-level-code { color: var(--cc-green-dark); }
.cc-ed-level-tier { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--cc-green); margin-top: .35rem; }
.cc-ed-levels strong { margin-top: auto; padding-top: 1.5rem; font-size: var(--fs-base); font-weight: 500; line-height: 1.3; }
.cc-ed-level-role { font-size: var(--fs-xs); color: var(--cc-ink-soft); margin-top: .35rem; line-height: 1.4; }
.cc-ed-system-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; }
.cc-ed-system-foot p { font-size: var(--fs-base); font-style: italic; color: var(--cc-ink-soft); max-width: 560px; }

/* 05 purpose */
.cc-ed-purpose { position: relative; margin-top: 8px; padding: clamp(5rem, 12vw, 10rem) 0; overflow: hidden; isolation: isolate; }
.cc-ed-purpose-bg { position: absolute; inset: 0; z-index: -1; }
.cc-ed-purpose-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,71,52,.2), rgba(20,71,52,.55)); }
.cc-ed-purpose-card { max-width: 560px; margin-left: auto; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--cc-radius-xl) 0 var(--cc-radius-xl) 0; background: rgba(20,71,52,.62); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cc-ed-purpose-card p { font-size: var(--fs-body-dark); color: var(--cc-on-dark-soft); }
.cc-ed-purpose-card h2 + p { margin-top: 1.5rem; }
.cc-ed-purpose-card p + p { margin-top: .9rem; }
.cc-ed-purpose-card .cc-btn { margin-top: 2rem; }

/* editorial extras */
.cc-ed-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.cc-ed-section .cc-ed-body { color: var(--cc-on-dark-soft); margin-top: 1.25rem; }
.cc-ed-head { margin-bottom: 2.5rem; max-width: 760px; }
.cc-ed-split-top { align-items: start; }
.cc-ed-rich p + p { margin-top: .9rem; }
.cc-ed-panel .cc-ed-rich { margin-top: 1.25rem; }
.cc-ed-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.cc-ed-tags li { font-size: var(--fs-sm); font-weight: 500; background: #fff; border-radius: 999px; padding: .4rem 1rem; color: var(--cc-green); }
.cc-ed-tags li:nth-child(3n+1) { background: var(--cc-lime); color: var(--cc-green-dark); }
.cc-ed-product { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding: .75rem 1rem .75rem .75rem; border-radius: var(--cc-radius-lg) 0 var(--cc-radius-lg) 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: var(--cc-on-dark); text-decoration: none; transition: background .2s; }
.cc-ed-product:hover { text-decoration: none; background: rgba(255,255,255,.14); }
.cc-ed-product img { width: 56px; height: 72px; object-fit: contain; }
.cc-ed-product > span:nth-of-type(1) { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.cc-ed-product b { font-size: var(--fs-sm); font-weight: 500; }
.cc-ed-product small { font-size: var(--fs-xs); color: var(--cc-lime); margin-top: .15rem; }
.cc-ed-cycle-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2rem 0 0; }
.cc-ed-cycle-4 li { font-size: var(--fs-base); padding: 1rem 1rem 1.1rem; }
.cc-ed-cycle-4 li span { font-size: var(--fs-lg); margin-bottom: 1rem; }
.cc-ed-cycle-4 li + li::before { left: -1.3rem; }
.cc-ed-cycle-4 li:last-child::after { content: none; }
.cc-ed-section .cc-ed-pathways { margin-top: 0; }
.cc-ed-claim { color: var(--cc-lime); font-size: var(--fs-md); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; margin-top: 1.75rem; }
.cc-ed-purpose-left .cc-ed-purpose-card { margin-left: 0; margin-right: auto; }
.cc-ed-purpose-left .cc-ed-purpose-bg::after { background: linear-gradient(270deg, rgba(20,71,52,.1), rgba(20,71,52,.6)); }

/* ── Brand story — Figma 品牌故事 (1920 × 3345) ─────────── */
/* landscape photo at 80% over the green, centred copy, giant lime headline
   (full-bleed like the photo, so it scales with the viewport),
   one 1440-wide glass column (#F1F1F1 40%, 2px #FFF 60%, radius 100 TL/BR) */
/* overflow: clip (not hidden) so the sticky background still sticks to the viewport */
.cc-bs { position: relative; padding: calc(110 * var(--u)) 0 calc(80 * var(--u)); overflow: clip; isolation: isolate; color: #f1f1f1; text-align: center; }
.cc-bs-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* --bs-pin = panel offset (set by the page script): scrolls normally for that distance, then sticks
   with the bottom at the viewport bottom until the section ends */
.cc-bs-bg-img { position: sticky; top: calc(-1 * var(--bs-pin, 0px)); height: calc(var(--bs-pin, 0px) + 100vh); max-height: 100%; opacity: .8; background-size: max(100%, calc(4936 * var(--u))) auto !important; background-position: 50% 0 !important; background-repeat: no-repeat; }
.cc-bs-intro { font-size: max(18px, calc(36 * var(--u))); font-weight: 500; line-height: 1; }
.cc-bs-intro p + p { margin-top: 1em; }
.cc-bs-title { position: relative; margin-top: calc(198 * var(--u)); font-size: max(56px, calc(254 / 1920 * min(100vw, 1920px))); font-weight: 500; line-height: calc(212 / 254); letter-spacing: 0; color: var(--cc-lime); white-space: nowrap; }
.cc-bs-panel { position: relative; width: calc(1440 * var(--u)); margin: calc(-66 / 1920 * min(100vw, 1920px)) auto 0; border-radius: calc(100 * var(--u)) 0 calc(100 * var(--u)) 0; background: rgba(241,241,241,.4); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 4px 4px rgba(0,0,0,.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.cc-bs-sec { position: relative; padding: calc(97 * var(--u)) calc(60 * var(--u)) calc(99 * var(--u)); }
.cc-bs-sec:first-child { padding-top: calc(100 * var(--u)); }
.cc-bs-sec:last-child { padding-bottom: calc(96 * var(--u)); }
/* dashed lime rule, 1256 wide (6/6 dash) */
.cc-bs-sec + .cc-bs-sec::before { content: ''; position: absolute; top: 0; left: calc(92 * var(--u)); right: calc(92 * var(--u)); height: 1px; background: repeating-linear-gradient(90deg, var(--cc-lime) 0 6px, transparent 6px 12px); }
.cc-bs-sec h2 { font-size: max(24px, calc(48 * var(--u))); font-weight: 500; line-height: 1; }
.cc-bs-lead { margin: calc(77 * var(--u)) auto 0; font-size: max(17px, calc(32 * var(--u))); line-height: 1; }
.cc-bs-text { max-width: calc(1260 * var(--u)); margin: calc(66 * var(--u)) auto 0; font-size: max(15px, calc(24 * var(--u))); line-height: calc(32 / 24); }
.cc-bs-text p + p { margin-top: calc(32 / 24 * 1em); }
.cc-bs-note { margin-top: calc(67 * var(--u)); font-size: max(13px, calc(20 * var(--u))); font-style: italic; line-height: 1; color: #c3c3c3; }
/* cycle: 200×40 lime pills (radius 20 TL/BR), 24px discs with lime arrows between */
.cc-bs-cycle { list-style: none; display: flex; justify-content: center; gap: calc(44 * var(--u)); margin-top: calc(25 * var(--u)); }
.cc-bs-cycle li { position: relative; display: flex; align-items: center; justify-content: space-between; width: calc(200 * var(--u)); height: calc(40 * var(--u)); min-height: 30px; min-width: 130px; padding: 0 calc(20 * var(--u)) 0 calc(18 * var(--u)); border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: var(--cc-lime); font-size: max(13px, calc(20 * var(--u))); font-weight: 500; line-height: 1; }
.cc-bs-cycle span { font-size: max(22px, calc(38.22 * var(--u))); font-style: italic; font-weight: 500; line-height: 1; }
.cc-bs-cycle li + li::before { content: ''; position: absolute; left: calc(-34 * var(--u)); top: 50%; width: calc(24 * var(--u)); height: calc(24 * var(--u)); transform: translateY(-50%); border-radius: 50%; background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h11M12 6.5l5.5 5.5-5.5 5.5' fill='none' stroke='%2388DB62' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
/* C1–C5 bars 519×40, first lime, rest deep green */
.cc-bs-levels { list-style: none; display: grid; gap: calc(4 * var(--u)); width: calc(519 * var(--u)); min-width: min(100%, 300px); margin: calc(21 * var(--u)) auto 0; }
.cc-bs-levels a { display: flex; align-items: center; justify-content: center; padding-left: calc(10 * var(--u)); height: max(32px, calc(40 * var(--u))); border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: var(--cc-green); color: #f1f1f1; font-size: max(14px, calc(24 * var(--u))); font-weight: 500; line-height: 1; text-decoration: none; transition: background .2s, color .2s; }
/* all dark by default (design shows C1 lit as the hover state) */
.cc-bs-levels a:hover, .cc-bs-levels a:focus-visible { background: var(--cc-lime); color: #f1f1f1; }
.cc-bs-levels + .cc-bs-note { margin-top: calc(78 * var(--u)); }

/* ── Contact — Figma 联系我们 (1920 × 2046) ─────────────── */
/* intro: title 96 bold at x=237, photo 705×416 at x=975 (radius 60 TL/BR) */
.cc-ct-top { display: grid; grid-template-columns: calc(738 * var(--u)) calc(705 * var(--u)); padding: calc(140 * var(--u)) 0 calc(140 * var(--u)) calc(var(--side) - 3 * var(--u)); color: #f1f1f1; }
.cc-ct-intro h1 { font-size: max(40px, calc(96 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-ct-sub { max-width: calc(620 * var(--u)); margin: calc(28 * var(--u)) 0 0 calc(6 * var(--u)); font-size: max(17px, calc(32 * var(--u))); line-height: 1; }
.cc-ct-list { list-style: none; display: grid; gap: calc(20 * var(--u)); margin: calc(55 * var(--u)) 0 0 calc(6 * var(--u)); }
.cc-ct-list li { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(40 * var(--u)); font-size: max(13px, calc(20 * var(--u))); line-height: 1; }
.cc-ct-list a { color: #f1f1f1; }
.cc-ct-list span:not(.cc-ct-ico) { max-width: calc(600 * var(--u)); }
.cc-ct-dir { white-space: nowrap; color: var(--cc-lime) !important; }
/* glass tile 40×40: #FFF 40%, 1px #FFF 80%, radius 10 TL/BR */
.cc-ct-ico { flex: none; width: max(30px, calc(40 * var(--u))); height: max(30px, calc(40 * var(--u))); display: grid; place-items: center; border-radius: calc(10 * var(--u)) 0 calc(10 * var(--u)) 0; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 2px 2px rgba(0,0,0,.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #f1f1f1; }
.cc-ct-ico svg { width: 100%; height: 100%; display: block; }
.cc-ct-photo { margin: 0; height: calc(416 * var(--u)); border-radius: calc(60 * var(--u)) 0 calc(60 * var(--u)) 0; overflow: hidden; background: #f1f1f1; }
.cc-ct-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

/* form panel 1879×852, radius 100 TL/BR; white card 705×652 (radius 60) at x=975 */
.cc-ct-panel { display: grid; grid-template-columns: calc(738 * var(--u)) calc(705 * var(--u)); margin: 0 calc(20 * var(--u)) 0 calc(21 * var(--u)); padding: calc(100 * var(--u)) 0 calc(100 * var(--u)) calc(var(--side) - 24 * var(--u)); background: var(--cc-panel); color: #252525; border-radius: calc(100 * var(--u)) 0 calc(100 * var(--u)) 0; scroll-margin-top: 60px; }
.cc-ct-aside { display: flex; flex-direction: column; justify-content: flex-end; }
.cc-ct-aside h2 { font-size: max(28px, calc(64 * var(--u))); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }
.cc-ct-aside > p { margin-top: calc(35 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: 1; }
/* help box 583×106, 2px lime stroke, radius 39 TL/BR */
.cc-ct-help { display: flex; flex-direction: column; gap: calc(13 * var(--u)); width: calc(583 * var(--u)); min-width: min(100%, 300px); margin: calc(82 * var(--u)) 0 0 calc(2 * var(--u)); padding: calc(11 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)) calc(33 * var(--u)); border: 2px solid var(--cc-lime); border-radius: calc(39 * var(--u)) 0 calc(39 * var(--u)) 0; color: #79c85c; text-decoration: none; transition: background .2s; }
.cc-ct-help:hover { text-decoration: none; background: rgba(136,219,98,.12); }
.cc-ct-help b { font-size: max(18px, calc(36 * var(--u))); font-weight: 500; line-height: 1; }
.cc-ct-help span { font-size: max(14px, calc(24 * var(--u))); line-height: 1; }
.cc-ct-card { padding: calc(37 * var(--u)) calc(39 * var(--u)) calc(40 * var(--u)); background: #fff; border-radius: calc(60 * var(--u)) 0 calc(60 * var(--u)) 0; }
/* form widget (base markup, inline grid styles overridden) */
.cc-ct #contact-form > div[style*="grid"] { gap: calc(30 * var(--u)) !important; margin-bottom: calc(37 * var(--u)) !important; }
.cc-ct #contact-form > div[style*="margin-bottom"]:not([style*="grid"]) { margin-bottom: calc(40 * var(--u)) !important; }
.cc-ct .form-label { margin-bottom: calc(7 * var(--u)); font-size: max(13px, calc(20 * var(--u))); font-weight: 400; line-height: 1; color: #252525; }
.cc-req { color: var(--cc-lime); margin-left: calc(10 * var(--u)); }
.cc-ct .form-input { display: block; height: max(44px, calc(60 * var(--u))); padding: 0 calc(16 * var(--u)); background: #f1f1f1; border: 0; border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; font-family: inherit; font-size: max(15px, calc(20 * var(--u))); color: #252525; }
.cc-ct textarea.form-input { height: max(140px, calc(200 * var(--u))); padding-top: calc(14 * var(--u)); resize: vertical; }
.cc-ct .form-input:focus { outline: none; box-shadow: 0 0 0 2px var(--cc-lime); }
.cc-ct .btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; height: max(48px, calc(60 * var(--u))); padding: 0; border: 0; border-radius: calc(20 * var(--u)) 0 calc(20 * var(--u)) 0; background: #79c85c; color: #fff; font-family: inherit; font-size: max(17px, calc(36 * var(--u))); font-weight: 500; line-height: 1; text-transform: uppercase; cursor: pointer; transition: background .15s, transform .15s; }
.cc-ct .btn-primary:hover { background: var(--cc-lime-dark); box-shadow: none; transform: translateY(-1px); }

/* map panel 1879×400, radius 100 TL/BR, 18 under the form panel */
.cc-ct-map { height: max(280px, calc(400 * var(--u))); margin: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(21 * var(--u)); border-radius: calc(100 * var(--u)) 0 calc(100 * var(--u)) 0; overflow: hidden; background: var(--cc-panel); }
.cc-ct-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* ── 404 ───────────────────────────────────────────── */
.cc-404 { padding: 0 12px; }
.cc-404-panel { background: var(--cc-panel); color: var(--cc-ink); border-radius: 0 0 var(--cc-radius-xl) 0; padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 6vw, 5rem); text-align: center; }
.cc-404-panel h1 { font-size: var(--fs-3xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--track-head); text-transform: uppercase; margin-top: .75rem; }
.cc-404-panel > p:not(.cc-eyebrow) { font-size: var(--fs-md); color: var(--cc-ink-soft); max-width: 520px; margin: 1.25rem auto 0; }
.cc-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.cc-404-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; }
.cc-404-links a { display: inline-block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; color: var(--cc-green); background: #fff; border-radius: 999px; padding: .45rem 1rem; text-decoration: none; }
.cc-404-links a:hover { background: var(--cc-lime); color: var(--cc-green-dark); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .cc-pd-top { grid-template-columns: 1fr 1.2fr; column-gap: 2rem; padding: 3rem 1.5rem; }
    .cc-pd-bottom { padding: 0 1.5rem; }
    .cc-pd-benefits { grid-template-columns: repeat(3, 1fr); }
    .cc-pd-benefits li { height: auto; min-height: 260px; padding-bottom: 1.25rem; }
    .cc-wm-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-wm-way { height: auto; min-height: 260px; }
    .cc-fw-grid { grid-template-columns: repeat(2, 1fr); }
    .cc-fw-cell { height: auto; min-height: 520px; }
    .cc-fw-card { padding-top: 140px; }
    /* home */
    .cc-levels-grid { grid-template-columns: repeat(3, 240px); row-gap: 2rem; }
    .cc-level { height: auto; padding: 1.25rem .5rem 1.5rem; }
    .cc-level-img { width: 160px; margin-top: 1.25rem; }
    .cc-level-name { margin-top: 1.25rem; }
    .cc-level-role { margin-top: .4rem; }
    .cc-level-match { margin-top: .6rem; }
    .cc-levels-cta { margin-top: 3rem; }
    .cc-story-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; padding-right: 1.25rem; }
    .cc-pcard { flex-basis: calc((100% - 1.5rem) / 2); }
    .cc-ed-levels { grid-template-columns: repeat(3, 1fr); }
    .cc-carousel-btn.prev { left: 0; }
    .cc-carousel-btn.next { right: 0; }
}
@media (max-width: 768px) {
    .cc-pd-top { grid-template-columns: 1fr; row-gap: 2rem; margin: 0 6px; padding: 1.5rem 1rem 2.5rem; border-radius: 0 0 40px 0; }
    .cc-pd-head { flex-direction: column-reverse; }
    .cc-pd-chips { grid-template-columns: 1fr; }
    .cc-pd-desc { max-width: none; }
    .cc-pd-tabs { gap: 1.25rem; }
    .cc-pd-bottom { margin: 0 6px 6px; padding: 0 1rem; border-radius: 40px 0 40px 0; }
    .cc-pd-sec, .cc-pd-sec:first-child { padding: 2.5rem 0; }
    .cc-pd-benefits { grid-template-columns: 1fr; gap: .75rem; }
    .cc-pd-benefits li { min-height: 0; padding: 4.5rem 1.25rem 1.25rem; border-radius: 32px 0 32px 0; }
    .cc-pd-ingr { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .cc-pd-ingr-photo { height: auto; aspect-ratio: 490 / 380; border-radius: 40px 0 40px 0; }
    .cc-pd-ingredients td { height: 40px; }
    .cc-pd-facts { grid-template-columns: 1fr; gap: .75rem; }
    .cc-pd-fact { min-height: 0; border-radius: 28px 0 28px 0; }
    .cc-wm-hero { grid-template-columns: 1fr; padding: 3rem 1.25rem 0; }
    .cc-wm-hero > .cc-wm-tag { order: 2; margin-top: 1.5rem; }
    .cc-wm-hero br, .cc-wm h2 br, .cc-wm-way p br, .cc-wm-col br { display: none; }
    .cc-wm-band { margin: 2rem 6px 0; }
    .cc-wm-body { width: auto; padding: 1rem 1.25rem 0; }
    .cc-wm-sec { padding: 2.5rem 0; }
    .cc-wm-sec + .cc-wm-sec::before { width: 100%; }
    .cc-wm-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .cc-wm-tag-grey { margin-top: 1.5rem; }
    .cc-wm-photo { height: auto; aspect-ratio: 829 / 356; }
    .cc-wm-ways { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
    .cc-wm-way { min-height: 220px; border-radius: 32px 0 32px 0; }
    .cc-wm-just { text-align: left; line-height: 1.5; }
    .cc-wm-col > p:not(.cc-wm-claim) { max-width: none; line-height: 1.5; }
    .cc-wm-cta-text { justify-content: center; padding: 1.25rem; }
    .cc-fw-hero-title { top: 50%; transform: translateY(-50%); font-size: 40px; }
    .cc-fw-hero-num { top: 50%; width: 220px; transform: translate(-50%, -50%); }
    .cc-fw { padding: 6px; }
    .cc-fw-grid { grid-template-columns: 1fr; gap: 6px; }
    .cc-fw-cell { min-height: 0; }
    .cc-fw-photo { aspect-ratio: 4 / 3; border-radius: 0 40px 0 40px; }
    .cc-fw-card { padding: 120px 1.25rem 1.5rem; border-radius: 40px 0 40px 0; }
    .cc-fw-meta { margin-top: 1.75rem; }
    .cc-bs { padding: 3rem 1.25rem 2rem; }
    .cc-bs-intro br, .cc-bs-note br, .cc-bs-lead br { display: none; }
    .cc-bs-title { margin-top: 3rem; font-size: 46px; white-space: normal; }
    .cc-bs-panel { width: auto; margin-top: 1.5rem; border-radius: 40px 0 40px 0; }
    .cc-bs-sec, .cc-bs-sec:first-child, .cc-bs-sec:last-child { padding: 2.5rem 1.25rem; }
    .cc-bs-sec + .cc-bs-sec::before { left: 1.25rem; right: 1.25rem; }
    .cc-bs-lead, .cc-bs-text { max-width: none; margin-top: 1.25rem; }
    .cc-bs-cycle { flex-direction: column; align-items: center; gap: 2rem; margin-top: 1.25rem; }
    .cc-bs-cycle li { width: 200px; height: 40px; }
    .cc-bs-cycle li + li::before { left: 50%; top: -1.6rem; width: 24px; height: 24px; transform: translateX(-50%) rotate(90deg); }
    .cc-bs-note, .cc-bs-levels + .cc-bs-note { margin-top: 1.5rem; }
    .cc-bs-levels { gap: 4px; margin-top: 1.25rem; }
    .cc-ct-top, .cc-ct-panel { grid-template-columns: 1fr; gap: 2rem; }
    .cc-ct-top { padding: 3rem 1.25rem; }
    .cc-ct-sub, .cc-ct-list span:not(.cc-ct-ico) { max-width: none; }
    .cc-ct-list { gap: .75rem; margin-top: 2rem; }
    .cc-ct-list li { gap: .75rem; }
    .cc-ct-photo { height: auto; aspect-ratio: 16 / 10; border-radius: 32px 0 32px 0; }
    .cc-ct-panel { margin: 0 6px; padding: 3rem 1rem; border-radius: 40px 0 40px 0; }
    .cc-ct-aside > p { margin-top: 1rem; }
    .cc-ct-help { width: auto; margin-top: 1.5rem; padding: .9rem 1.25rem; gap: .4rem; }
    .cc-ct-card { padding: 1.5rem 1.25rem; border-radius: 32px 0 32px 0; }
    .cc-ct #contact-form > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 1rem !important; margin-bottom: 1rem !important; }
    .cc-ct-map { margin: 6px; border-radius: 40px 0 40px 0; }
    /* header: collapsed menu from base */
    .site-header .container { padding: 0 1.25rem; }
    .site-nav { height: auto; gap: 0; align-items: stretch; background: var(--cc-green); border-bottom: 1px solid rgba(255,255,255,.15); }
    .site-nav > a, .nav-dropdown { display: block; }
    .site-nav a { font-size: var(--fs-sm); padding: .75rem 0; }
    .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu { display: flex; flex-direction: column; gap: 0; position: static; transform: none; width: auto; padding: 0 0 .5rem 1rem; border-left: 2px solid var(--cc-lime); background: none; }
    .nav-dropdown-menu a { justify-content: flex-start; font-size: var(--fs-xs); padding: .5rem 0; color: var(--cc-on-dark-soft); }
    .nav-dropdown-menu a:hover { background: none; color: var(--cc-lime); }
    /* home */
    .cc-hero-inner { padding-top: 0; position: absolute; inset: 0; display: grid; place-content: center; }
    .cc-hero-title { font-size: 34px; }
    .cc-levels-head h2 { font-size: 26px; }
    .cc-levels { margin: 6px 6px 0; padding: 3.5rem 1rem 3.5rem; border-radius: 32px 0 32px 0; }
    .cc-levels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; margin-top: 2.5rem; }
    .cc-level-img { width: min(100%, 140px); }
    .cc-levels-cta h3 { font-size: 26px; }
    .cc-poster { margin: 6px 6px 0; min-height: 600px; border-radius: 32px 0 32px 0; }
    .cc-poster-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55)); }
    .cc-poster-inner { padding: 3rem 1.25rem 2rem; }
    .cc-poster h2 { font-size: 26px; }
    .cc-poster-text { margin: 1.25rem 0 1.75rem; line-height: 1.4; text-align: left; }
    .cc-poster .cc-btn { width: 100%; padding: 0 1rem; font-size: 15px; }
    .cc-shop-home { --c: calc(min(86vw, 420px) / 650); padding-top: 4rem; }
    .cc-flow { margin-top: 2rem; }
    .cc-flow .cc-pcard-keys { font-size: max(11px, calc(16 * var(--c))); }
    .cc-flow .cc-pcard-focus { font-size: max(13px, calc(26 * var(--c))); }
    .cc-flow-btn.prev { left: 6px; transform: translateY(-50%); }
    .cc-flow-btn.next { left: auto; right: 6px; transform: translateY(-50%) scaleX(-1); }
    .cc-story { padding: 4rem 0; }
    .cc-story-img { margin: 0 6px; }
    .cc-story-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.25rem 0; }
    .cc-story-text { line-height: 1.5; text-align: left; }
    .cc-story .cc-btn { width: 100%; font-size: 16px; }
    .cc-why { padding: 4rem 1.25rem 3rem; }
    .cc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin-top: 2.25rem; }
    .cc-why-item { gap: .75rem; }
    .cc-footer { padding: 3rem 6px 6px; }
    .cc-footer-bg { height: calc(100% + 548px + 80px); }
    .cc-footer-bare { padding-top: 0; }
    .cc-footer-panel { min-height: 0; padding: 2rem 1.25rem 0; border-radius: 32px 0 32px 0; }
    .cc-footer-contact { align-self: flex-start; text-align: left; max-width: none; padding-top: 2rem; }
    .cc-footer-contact p { line-height: 1.35; letter-spacing: 0; }
    .cc-footer-wordmark { margin-top: 2rem; }
    .nav-dropdown::after { display: none; }
    .nav-dropdown-menu a:hover { background: none; }
    .cc-pcard { flex-basis: 85%; }
    .cc-ed-split, .cc-ed-intro-grid, .cc-ed-system-head { grid-template-columns: 1fr; }
    .cc-ed-cycle, .cc-ed-cycle-4 { grid-template-columns: 1fr; gap: 1.5rem; }
    .cc-ed-cycle li + li::before { content: '↓'; left: 50%; top: -1.35rem; transform: translateX(-50%); }
    .cc-ed-levels { grid-template-columns: repeat(2, 1fr); }
    .cc-ed-levels a { min-height: 180px; }
    .cc-ed-pathways { grid-template-columns: 1fr; }
    .cc-ed-photo { aspect-ratio: 4 / 3; }
    .cc-ed-purpose-card { margin-left: 0; }
    .cc-ed-cycle-4 li + li::before { left: 50%; }
    .cc-carousel-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}