/* Coff & Co 2026 - homepage (index.html), HOME and WORK.
Canvas units. The demo renders its desktop tree (>768) on a 1400px canvas scaled by
s = clamp(768/1400, innerWidth/1400, 1). Here --s is that ratio as a number (CSS trig turns
100vw/1400px into a unitless value) and --u = 1 canvas px. Lengths inside a section are written
as N * --u; vertical positions of the demo's centre-scaled sections are mapped with
Y = H/2 + (y - H/2) * s, where H is the section height (which the demo never scales).
<=768 is the demo's mobile reflow tree (useViewport), written with the demo's own clamp() sizes. */
.cc-home{--s:1;--u:1px;position:relative}
@supports (width:calc(tan(atan2(1px,1px)) * 1px)){
.cc-home{--s:clamp(.5486,tan(atan2(100vw,1400px)),1);--u:calc(var(--s) * 1px)}
}
/* Fixed colour-morphing background (PageBg). */
.cc-pagebg{position:fixed;inset:0;z-index:0;pointer-events:none}
.cc-hs{position:relative}
.cc-bga{position:absolute;left:50%;width:2px;height:2px;pointer-events:none}
/* Headlines: every word is .cc-hw (scroll wave) > .cc-hw__in (intro rise). */
.cc-hl{margin:0;font-family:var(--font-display);text-transform:uppercase}
.cc-hw,.cc-hw__in{display:inline-block;white-space:nowrap}
.cc-hw{vertical-align:top;flex-shrink:0}
.cc-hl .cc-a{text-transform:none}
/* Plain text quick-add trigger (HomeAdd: no underline, sized by the section). */
.cc-home .cc-home-add{display:inline-flex;justify-content:center;width:auto;margin:0;position:relative}
.cc-home .cc-home-add .cc-qa__trigger{border:0;padding:0;background:transparent;color:inherit;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;line-height:normal;cursor:pointer;text-align:center}
.cc-home .cc-home-add .cc-qa__trigger[aria-busy="true"]{opacity:.5}
/* =========================================================================
DESKTOP (>768): the 1400 canvas tree
====================================================================== */
@media (min-width:769px){
.cc-home-eb:not(.cc-pc__eb){padding:calc(22 * var(--u)) calc(52 * var(--u))}
.cc-home-eb:not(.cc-pc__eb) .cc-eb__label{font-size:calc(18 * var(--u))}
/* ---- Hero ---- */
.cc-hero{width:100%;height:calc(100dvh + 100px);overflow:hidden;isolation:isolate}
.cc-hero__hl-wrap{position:absolute;top:0;left:0;right:0;height:100dvh;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}
.cc-hero__canvas{width:calc(1400 * var(--u));padding:0 calc(40 * var(--u))}
.cc-hero__hl{width:100%;display:flex;flex-direction:column;gap:.02em;font-weight:800;font-size:calc(152 * var(--u));line-height:.95;letter-spacing:-.05em;color:var(--cream)}
.cc-hero__hl .cc-hl__row{display:flex;justify-content:space-between;align-items:flex-start;width:100%;flex-wrap:nowrap;white-space:nowrap;gap:calc(32 * var(--u))}
.cc-hero .cc-hw,.cc-hero .cc-hw__in{will-change:transform}
.cc-hero__man-layer{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:flex-start;pointer-events:none;will-change:transform}
.cc-hero__man-box{position:relative;width:calc(1320 * var(--u));margin-top:calc(50dvh + 150px - 248.33 * var(--u))}
.cc-hero__mask{overflow:hidden;width:100%}
.cc-hero__reveal{position:relative;width:100%;will-change:transform}
.cc-hero__eyes{left:1px;top:19px}
.cc-hero__ticker{position:absolute;left:50%;bottom:0;width:100vw;margin-left:-50vw;height:40px}
}
.cc-hero__img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.cc-hero__eyes,.cc-hero__doodle{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cc-hero__ticker{z-index:3;background:var(--cream);overflow:hidden;display:flex;align-items:center}
.cc-hero__ticker .cc-hero__tk{padding:0;width:100%;background:transparent}
.cc-hero__doodle path{stroke-dasharray:1;stroke-dashoffset:0}
/* Hero intro (desktop, motion allowed): hidden until fonts are ready, then the man rises out of
the mask 1.55s later (0.95s) and the ticker box 1.25s later (0.7s). Words are sprung by JS. */
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
.cc-js .cc-hero .cc-hw__in{opacity:.01;transform:translate3d(0,calc(800 * var(--u)),0)}
.cc-js .cc-hero[data-intro="done"] .cc-hw__in{opacity:1;transform:none}
.cc-js .cc-hero__reveal{transform:translate3d(0,100%,0);opacity:.9;transition:transform .95s var(--ease-expo) 1.55s,opacity .95s var(--ease-expo) 1.55s}
.cc-js .cc-hero__ticker{transform:translate3d(0,112%,0);transition:transform .7s var(--ease-expo) 1.25s}
.cc-js .cc-hero[data-intro] .cc-hero__reveal,.cc-js .cc-hero[data-intro] .cc-hero__ticker{transform:none;opacity:1}
}
@media (prefers-reduced-motion:no-preference){
.cc-js .cc-hero__doodle path{stroke-dashoffset:1}
.cc-js .cc-hero.is-doodle .cc-hero__doodle path{stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease-expo) calc(.1s + var(--i) * .15s)}
}
@media (min-width:769px){
/* ---- Section 2: NOT JUST ANOTHER CUP ---- */
.cc-intro{--H:max(100dvh,1400px);width:100%;height:100dvh;min-height:1400px;overflow:hidden;isolation:isolate}
.cc-intro__bga{display:none}
.cc-intro__eyebrow,.cc-intro__hl-wrap,.cc-intro__follow{position:absolute;left:calc(50% - 700 * var(--u));width:calc(1400 * var(--u));padding:0 calc(40 * var(--u))}
.cc-intro__eyebrow{top:calc(var(--H) / 2 + (80px - .35 * var(--H)) * var(--s));margin:0;text-align:center;font-family:var(--font-mono);font-weight:500;font-size:calc(28 * var(--u));line-height:1;text-transform:uppercase;color:var(--cream);will-change:transform}
.cc-intro__hl-wrap{top:calc(var(--H) / 2 + (50vh + 140px - var(--H) / 2) * var(--s));transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;z-index:1}
.cc-intro__person-wrap{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center;z-index:5;pointer-events:none}
.cc-intro__person{width:calc(520 * var(--u));height:auto;transform-origin:center center;user-select:none;will-change:transform}
.cc-intro__hl{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:.04em;font-weight:700;font-size:calc(152 * var(--u));line-height:1;letter-spacing:-.05em;color:var(--cream)}
.cc-intro__hl .cc-hl__row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:nowrap;white-space:nowrap;width:100%;gap:calc(32 * var(--u))}
.cc-intro__follow{top:calc(var(--H) / 2 + (50vh + 495px - var(--H) / 2) * var(--s));display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));z-index:3;text-align:center;will-change:transform}
.cc-intro__body{margin:0;max-width:calc(690 * var(--u));white-space:pre-line;font-family:var(--font-mono);font-weight:400;font-size:calc(20 * var(--u));line-height:1.4;color:var(--cream);text-wrap:pretty}
/* ---- Section 3: blend carousel ---- */
.cc-bc{width:100%;overflow:hidden}
.cc-bc__bga-m,.cc-bc__mob{display:none}
.cc-bc__desk{position:relative;width:calc(1400 * var(--u));height:calc(1160 * var(--u));margin:0 auto}
.cc-bc__bga{top:calc(300 * var(--u));transform:translateX(-50%)}
.cc-bc__title{position:absolute;top:calc(24 * var(--u));left:0;width:100%;height:calc(220 * var(--u));overflow:visible}
.cc-bc__tt{font-family:var(--font-display);font-weight:700;font-size:108px;fill:#000;text-transform:uppercase;font-kerning:none;font-variant-ligatures:none}
.cc-bc__acc{font-family:var(--font-hand);font-weight:400;letter-spacing:normal;text-transform:none}
.cc-bc__sub{position:absolute;top:calc(158 * var(--u));left:0;width:100%;height:calc(70 * var(--u));overflow:visible}
.cc-bc__st{font-family:var(--font-mono);font-weight:400;font-size:20px;letter-spacing:.01em;fill:#000}
.cc-bc__stage{position:absolute;top:calc(320 * var(--u));left:0;width:100%;height:calc(620 * var(--u));overflow:hidden}
.cc-bc__bag{--x:0;--k:1;position:absolute;left:50%;top:0;width:calc(600 * var(--u));height:calc(600 * var(--u));margin-left:calc(-300 * var(--u));transform-origin:center center;transform:translate3d(calc(var(--x) * var(--u)),0,0) scale(var(--k));will-change:transform;pointer-events:none}
.cc-bc__bag[data-slot="-2"]{--x:-1000;--k:.34;z-index:1}
.cc-bc__bag[data-slot="-1"]{--x:-540;--k:.667;z-index:3}
.cc-bc__bag[data-slot="0"]{--x:0;--k:1;z-index:5}
.cc-bc__bag[data-slot="1"]{--x:540;--k:.667;z-index:3}
.cc-bc__bag[data-slot="2"]{--x:1000;--k:.34;z-index:1}
.cc-bc__bag a{display:block;width:100%;height:100%;cursor:pointer;pointer-events:auto}
.cc-bc__img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.cc-bc__arrow{position:absolute;top:calc(282 * var(--u));width:calc(46 * var(--u));height:calc(36 * var(--u));display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;z-index:6}
.cc-bc__arrow svg{display:block;width:calc(36 * var(--u));height:calc(36 * var(--u))}
.cc-bc__arrow--prev{left:calc(344 * var(--u))}
.cc-bc__arrow--next{left:calc(1010 * var(--u))}
.cc-bc__badge{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;z-index:8;pointer-events:none}
.cc-bc__badge svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cc-bc__badge--1{left:calc(320 * var(--u));top:calc(54 * var(--u));width:calc(178 * var(--u));height:calc(128 * var(--u));transform:rotate(-15deg)}
.cc-bc__badge--2{left:calc(902 * var(--u));top:calc(348 * var(--u));width:calc(162 * var(--u));height:calc(168 * var(--u));transform:rotate(15deg)}
.cc-bc__btxt{position:relative;z-index:1;font-family:var(--font-mono);font-weight:700;font-size:calc(18 * var(--u));line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:#000}
.cc-bc__badge--2 .cc-bc__btxt{color:var(--cream)}
.cc-bc__ln{display:block}
.cc-bc__info{position:absolute;top:calc(958 * var(--u));left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:calc(80 * var(--u));z-index:40}
.cc-bc__info[hidden]{display:none !important}
.cc-bc__price,.cc-bc__add .cc-qa__trigger{font-family:var(--font-mono);font-weight:500;font-size:calc(18 * var(--u));letter-spacing:.04em;text-transform:uppercase;color:#000}
.cc-bc__add .cc-qa__trigger{min-width:calc(170 * var(--u))}
.cc-bc__shop{position:absolute;top:calc(1044 * var(--u));left:0;width:100%;display:flex;justify-content:center;z-index:5}
/* ---- Section 4: what kind of awake ---- */
.cc-awake{--H:max(100dvh,1000px);width:100%;height:100dvh;min-height:1000px;overflow:hidden;isolation:isolate}
.cc-awake__bga{top:calc(var(--H) / 2 - .18 * var(--H) * var(--s));transform:translateX(-50%)}
.cc-awake__hl-wrap{position:absolute;top:calc(var(--H) / 2 + (50vh - var(--H) / 2) * var(--s));left:calc(50% - 700 * var(--u));width:calc(1400 * var(--u));padding:0 calc(40 * var(--u));transform:translateY(-50%);z-index:1}
.cc-awake__hl{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:.02em;font-weight:700;font-size:calc(148 * var(--u));line-height:1;letter-spacing:calc(-7.4 * var(--u));color:#000}
.cc-awake__hl .cc-hl__row{display:flex;justify-content:space-between;align-items:flex-start;width:100%;white-space:nowrap}
.cc-hl__cl{display:flex;gap:calc(40 * var(--u));white-space:nowrap}
.cc-awake__img-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.cc-awake__img{display:block;width:calc(640 * var(--u));max-width:none;height:auto;will-change:transform;user-select:none}
/* ---- Section 4 payoff: personality cards (layer fits 1728px + 160px in the viewport) ---- */
.cc-cards{--ls:1;width:100%;height:100dvh;min-height:840px;margin-top:-440px;overflow:hidden;isolation:isolate}
.cc-cards__layer{position:absolute;top:50%;left:50%;width:1728px;height:600px;transform:translate(-50%,-50%) scale(var(--ls));transform-origin:center}
.cc-pc{--xe:0px;position:absolute;left:50%;top:0;width:402px;height:600px;margin-left:-201px;overflow:hidden;background:var(--pc-bg);will-change:transform;transform-origin:center bottom;transform:translate3d(var(--xe),0,0);z-index:calc(var(--i) + 1)}
.cc-pc[data-pc="0"]{--xe:-663px}
.cc-pc[data-pc="1"]{--xe:-221px}
.cc-pc[data-pc="2"]{--xe:221px}
.cc-pc[data-pc="3"]{--xe:663px}
.cc-pc__title{position:absolute;top:40px;left:24px;right:24px;margin:0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:52px;line-height:.92;letter-spacing:-2.6px;text-transform:uppercase;color:var(--pc-fg)}
.cc-pc__title .cc-a{font-size:1.15em;line-height:1}
.cc-pc__img{position:absolute;top:118px;left:24px;right:24px;height:330px;width:auto;max-width:calc(100% - 48px);margin:0 auto;object-fit:contain;user-select:none}
.cc-pc__sub{position:absolute;bottom:104px;left:24px;right:24px;margin:0;text-align:center;font-family:var(--font-mono);font-weight:500;font-size:18px;line-height:1.3;color:var(--pc-fg)}
.cc-pc__cta{position:absolute;bottom:32px;left:0;right:0;display:flex;justify-content:center;z-index:2}
/* ---- Section 5: tools headline ---- */
.cc-tools{--H:max(100dvh,560px);width:100%;height:100dvh;min-height:560px;margin-top:-220px;overflow:hidden;isolation:isolate}
.cc-tools__bga{top:calc(var(--H) / 2 - .18 * var(--H) * var(--s));transform:translateX(-50%)}
.cc-tools__hl-wrap{position:absolute;top:calc(var(--H) / 2 + (50vh - var(--H) / 2) * var(--s));left:calc(50% - 700 * var(--u));width:calc(1400 * var(--u));padding:0 calc(40 * var(--u));transform:translateY(-50%);z-index:1}
.cc-tools__hl{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:.02em;font-weight:700;font-size:calc(148 * var(--u));line-height:1;letter-spacing:calc(-7.4 * var(--u));color:var(--tools-fg)}
.cc-tools__hl .cc-hl__row{display:flex;justify-content:center;align-items:flex-start;white-space:nowrap;gap:calc(32 * var(--u))}
/* ---- Section 6: gear trio ---- */
.cc-gear{--H:max(100dvh,820px);width:100%;height:100dvh;min-height:820px;margin-top:-400px;overflow:hidden;isolation:isolate}
.cc-gear__bga{top:calc(var(--H) / 2 - .2 * var(--H) * var(--s));transform:translateX(-50%)}
.cc-gear__wrap{position:absolute;top:calc(var(--H) / 2 + (50vh - var(--H) / 2) * var(--s));left:calc(50% - 700 * var(--u));width:calc(1400 * var(--u));padding:0 calc(80 * var(--u));transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(72 * var(--u));z-index:1}
.cc-gear__row{display:flex;justify-content:center;align-items:flex-start;gap:calc(60 * var(--u));width:100%}
.cc-gear__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(22 * var(--u));will-change:transform}
.cc-gear__title{font-size:calc(32 * var(--u));line-height:1.05;letter-spacing:-.02em}
.cc-gear__price{font-size:calc(18 * var(--u))}
.cc-gear__add .cc-qa__trigger{font-size:calc(20 * var(--u));letter-spacing:.06em}
/* ---- Section 7: recipes ---- */
.cc-rec{display:flow-root;width:calc(1400 * var(--u));margin:200px auto 0;padding:0 calc(40 * var(--u))}
.cc-rec__bga{top:calc(300 * var(--u));transform:translateX(-50%)}
.cc-rec__hl-wrap{position:relative;width:100%}
.cc-rec__hl{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:.02em;font-weight:700;font-size:calc(148 * var(--u));line-height:1;letter-spacing:calc(-7.4 * var(--u));color:var(--cream)}
.cc-rec__hl .cc-hl__row{display:flex;justify-content:space-between;align-items:flex-start;width:100%;white-space:nowrap}
.cc-rec__img-wrap{position:absolute;top:88%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.cc-rec__img{display:block;width:calc(940 * var(--u));max-width:none;height:auto;will-change:transform;user-select:none}
.cc-rec__grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(20 * var(--u));width:100%;margin-top:calc(320 * var(--u))}
.cc-rec__card{background:var(--cream);padding:calc(40 * var(--u)) calc(32 * var(--u));display:flex;flex-direction:column;gap:calc(40 * var(--u));will-change:transform}
.cc-rec__tag{padding:calc(4 * var(--u)) calc(8 * var(--u));font-size:calc(20 * var(--u))}
.cc-rec__mid{display:flex;flex-direction:column;gap:calc(20 * var(--u))}
.cc-rec__title{font-size:calc(24 * var(--u))}
.cc-rec__desc{font-weight:500;font-size:calc(18 * var(--u));line-height:1.3}
.cc-rec__read{font-size:calc(20 * var(--u));border-bottom:calc(2 * var(--u)) solid #000;padding-bottom:calc(2 * var(--u))}
.cc-rec__btn{display:flex;justify-content:center;margin-top:calc(72 * var(--u));margin-bottom:calc(20 * var(--u))}
}
/* Shared pieces of the gear + recipe cards (both trees). */
.cc-gear__media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1}
.cc-gear__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
.cc-gear__title{margin:0;text-align:center;font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:var(--gear-fg)}
.cc-gear__title a{color:inherit}
.cc-gear__title .cc-a{line-height:1}
.cc-gear__price{margin:0;text-align:center;font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--gear-fg)}
.cc-gear__add{color:var(--gear-fg)}
.cc-rec__tag{align-self:flex-start;background:var(--amber);color:#000;font-family:var(--font-mono);font-weight:500;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.cc-rec__title{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#000}
.cc-rec__desc{margin:0;font-family:var(--font-mono);color:#000}
.cc-rec__read{align-self:flex-start;font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#000;text-decoration:none}
.cc-rec__read:hover{color:#000}
@supports (width:calc(tan(atan2(1px,1px)) * 1px)){
@media (min-width:769px){ .cc-cards{--ls:min(1,tan(atan2(100vw - 160px,1728px)))} }
}
/* =========================================================================
MOBILE (<=768): the demo's reflow tree (MB clamp tiers)
====================================================================== */
@media (max-width:768px){
.cc-home-eb{padding:16px 38px}
.cc-home-eb .cc-eb__label{font-size:15px}
.cc-hl{width:100%;display:flex;flex-direction:column;gap:.04em;font-weight:700;font-size:clamp(32px,12vw,96px);line-height:.95;letter-spacing:-.03em;text-align:center}
.cc-hl .cc-hl__row{display:flex;flex-wrap:wrap;gap:0 .26em;justify-content:center}
.cc-hl__cl{display:contents}
.cc-hl .cc-a{letter-spacing:inherit}
.cc-home .cc-home-add .cc-qa__trigger{padding:1px 6px}
.cc-bga[data-bg-anchor="d"]{display:none}
/* Hero */
.cc-hero{min-height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:96px 16px 0;isolation:isolate}
.cc-hero__hl-wrap{position:relative;z-index:2;width:100%}
.cc-hero__hl{color:var(--cream)}
.cc-hero__man-layer{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:132%;max-width:620px;z-index:1;pointer-events:none}
.cc-hero__ticker{position:absolute;left:0;right:0;bottom:0;height:40px}
.cc-hero__ticker .cc-ticker__track{animation-duration:26s}
/* Section 2 */
.cc-intro{padding:64px 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cc-intro__bga{top:30%}
.cc-intro__eyebrow{margin:0 0 60px;font-family:var(--font-mono);font-weight:500;font-size:clamp(14px,4vw,22px);letter-spacing:.04em;text-transform:uppercase;color:var(--cream)}
.cc-intro__hl-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
.cc-intro__hl{position:relative;z-index:1;color:var(--cream)}
.cc-intro__person-wrap{order:2;position:relative;z-index:2;margin-top:-190px;line-height:0}
.cc-intro__person{width:min(58vw,300px);height:auto}
.cc-intro__follow{margin-top:60px;display:flex;flex-direction:column;align-items:center;gap:24px}
.cc-intro__body{margin:0;max-width:560px;white-space:pre-line;font-family:var(--font-mono);font-weight:400;font-size:clamp(13px,3.6vw,16px);line-height:1.5;color:var(--cream);text-wrap:pretty}
/* Section 3 */
.cc-bc__desk{display:none}
.cc-bc__mob{padding:56px 16px 64px;display:flex;flex-direction:column;align-items:center;gap:64px}
.cc-bc__bga-m{top:10%}
.cc-bcm{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%}
.cc-bcm__hl{font-size:clamp(32px,10vw,64px);color:#000}
.cc-bcm__sub{margin:0;max-width:420px;font-family:var(--font-mono);font-weight:400;font-size:clamp(13px,3.6vw,16px);line-height:1.5;color:#000;text-wrap:pretty}
.cc-bcm__media{position:relative;width:100%;max-width:480px;margin:4px auto 0;min-height:min(82vw,400px)}
.cc-bcm__media>a{display:block}
.cc-bcm__img{display:block;width:min(80vw,380px);height:auto;margin:0 auto}
.cc-bcm__badge{position:absolute;display:flex;align-items:center;justify-content:center;z-index:8;pointer-events:none}
.cc-bcm__badge svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cc-bcm__badge--1{left:14%;top:-2%;width:30%;aspect-ratio:133/96;transform:rotate(-15deg)}
.cc-bcm__badge--2{right:14%;bottom:4%;width:27%;aspect-ratio:144/149;transform:rotate(15deg)}
.cc-bcm__btxt{position:relative;z-index:1;font-family:var(--font-mono);font-weight:700;font-size:clamp(9px,2.7vw,14px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:#000;text-align:center}
.cc-bcm__badge--2 .cc-bcm__btxt{color:var(--cream)}
.cc-bcm .cc-bc__ln{display:block}
.cc-bcm__buy{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:4px}
.cc-bcm__price,.cc-bcm__add .cc-qa__trigger{font-family:var(--font-mono);font-weight:500;font-size:clamp(14px,4vw,18px);letter-spacing:.04em;text-transform:uppercase;color:#000}
/* Section 4 */
.cc-awake{padding:56px 16px;overflow:hidden}
.cc-awake__bga{top:28%}
.cc-awake__hl-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.cc-awake__hl{color:#000}
.cc-awake__img-wrap{align-self:center;max-width:94%;line-height:0;pointer-events:none}
.cc-awake__img{width:min(92vw,460px);max-width:100%;height:auto}
/* Personality cards */
.cc-cards{padding:32px 16px 48px}
.cc-cards__layer{display:flex;flex-direction:column;gap:20px}
.cc-pc{position:relative;width:100%;aspect-ratio:402/600;background:var(--pc-bg);overflow:hidden;container-type:inline-size}
.cc-pc__link{position:absolute;inset:0;z-index:1}
.cc-pc__title{position:absolute;top:6.67%;left:5.97%;right:5.97%;z-index:1;margin:0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:12.9cqw;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;color:var(--pc-fg)}
.cc-pc__title .cc-a{font-size:1.1em;line-height:1}
.cc-pc__img{position:absolute;top:19.67%;left:5.97%;right:5.97%;height:55%;width:auto;max-width:100%;margin:0 auto;object-fit:contain;user-select:none;z-index:2;pointer-events:none}
.cc-pc__sub{position:absolute;bottom:17.33%;left:5.97%;right:5.97%;margin:0;text-align:center;font-family:var(--font-mono);font-weight:500;font-size:4.48cqw;line-height:1.3;color:var(--pc-fg)}
.cc-pc__cta{position:absolute;bottom:5.33%;left:0;right:0;display:flex;justify-content:center;z-index:2}
/* Section 5 */
.cc-tools{padding:72px 16px;display:flex;justify-content:center}
.cc-tools__bga{top:30%}
.cc-tools__hl-wrap{width:100%}
.cc-tools__hl{color:var(--tools-fg)}
/* Section 6 */
.cc-gear{padding:48px 16px 56px}
.cc-gear__bga{top:18%}
.cc-gear__wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.cc-gear__row{display:flex;flex-direction:column;gap:48px;width:100%;max-width:420px}
.cc-gear__col{display:flex;flex-direction:column;align-items:center;gap:16px}
.cc-gear__media{width:72%}
.cc-gear__title{font-size:clamp(18px,5vw,28px);line-height:.95;letter-spacing:-.02em}
.cc-gear__title .cc-a{font-size:1.1em}
.cc-gear__price,.cc-gear__add .cc-qa__trigger{font-size:clamp(14px,4vw,18px);letter-spacing:.04em}
/* Section 7 */
.cc-rec{padding:56px 16px 64px;display:flex;flex-direction:column;gap:32px}
.cc-rec__bga{top:16%}
.cc-rec__hl-wrap{display:contents}
.cc-rec__hl{color:var(--cream)}
.cc-rec__img-wrap{align-self:center;width:100%;max-width:520px;line-height:0}
.cc-rec__img{width:100%;height:auto}
.cc-rec__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cc-rec__card{background:var(--cream);padding:24px 20px;display:flex;flex-direction:column;gap:20px}
.cc-rec__mid{display:contents}
.cc-rec__tag{padding:4px 8px;font-size:clamp(13px,3.4vw,16px)}
.cc-rec__title{font-size:clamp(16px,4.6vw,24px)}
.cc-rec__desc{font-weight:400;font-size:clamp(13px,3.6vw,16px);line-height:1.5;text-wrap:pretty}
.cc-rec__read{font-size:clamp(13px,3.4vw,16px);border-bottom:2px solid #000;padding-bottom:2px}
.cc-rec__btn{display:flex;justify-content:center;margin-top:12px}
}
@media (max-width:480px){
.cc-rec__grid{grid-template-columns:1fr}
}
/* Mobile in-view rises (MWord / whileInView), motion allowed only. */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
.cc-js .cc-home .cc-hl .cc-hw{transform:translate3d(0,36px,0);opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--o) * .05s),opacity .6s ease calc(var(--o) * .05s)}
.cc-js .cc-home .cc-hl .cc-hw.is-in{transform:none;opacity:1}
/* Hero: the same rise as a CSS animation on load (no wait for deferred JS), starting at
opacity .01 instead of 0 so the headline paints at once and counts for LCP. */
.cc-js .cc-home .cc-hero .cc-hl .cc-hw{opacity:1;transform:none;transition:none;animation:ccHomeRise .9s cubic-bezier(.22,1,.36,1) calc(var(--o) * .05s) both}
.cc-js .cc-home [data-home-rise]{transform:translate3d(var(--rx,0),var(--ry,50px),0);opacity:var(--ro,1);transition:transform .9s cubic-bezier(.22,1,.36,1) var(--rd,0s),opacity .6s ease var(--rd,0s)}
.cc-js .cc-home [data-home-rise].is-in{transform:none;opacity:1}
.cc-js .cc-bcm__media{--ry:50px;--ro:0}
.cc-js .cc-pc{--ry:50px;--rd:calc(var(--i) * .05s)}
.cc-js .cc-gear__col{--ry:40px;--ro:0}
.cc-js .cc-gear__col[data-gear-col="1"]{--rd:.05s}
.cc-js .cc-gear__col[data-gear-col="2"]{--rd:.1s}
.cc-js .cc-rec__img-wrap{--rx:-40px;--ry:0;--ro:0}
.cc-js .cc-rec__card{--ry:50px;--ro:0}
.cc-js .cc-rec__card[data-rec-card="1"]{--rd:.04s}
.cc-js .cc-rec__card[data-rec-card="2"]{--rd:.08s}
.cc-js .cc-rec__card[data-rec-card="3"]{--rd:.12s}
}
@keyframes ccHomeRise{from{transform:translate3d(0,36px,0);opacity:.01}60%{opacity:1}to{transform:none;opacity:1}}