.hw-beam {
--hw-case: var(--dc-purple-dark);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}.hw-beam path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}.hw-beam__track {
stroke: var(--line-2);
stroke-width: 1;
stroke-dasharray: 2 7;
vector-effect: non-scaling-stroke;
}.hw-beam__case {
stroke: var(--hw-case);
stroke-width: 6;
}.hw-beam__core {
stroke: var(--dc-lime);
stroke-width: 2;
}.hw-beam__branch {
stroke: var(--dc-lime);
stroke-width: 1.5;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.6s var(--ease-expo);
}.hw-beam__branch.is-on {
stroke-dashoffset: 0;
}.hw-beam__pk {
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}.hw-beam__pk.is-on {
opacity: 1;
}.hw-beam__halo {
fill: var(--dc-lime);
opacity: 0.22;
}.hw-beam__dot {
fill: var(--dc-lime);
stroke: var(--hw-case);
stroke-width: 1.5;
}[data-theme="light"] .hw-beam__track {
stroke: rgba(103, 33, 223, 0.35);
}.hw-rail {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--gutter) / 2);
z-index: 1;
width: 2px;
background: var(--line);
pointer-events: none;
}.hw-rail__fill {
position: absolute;
inset: 0;
background: var(--dc-lime);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--dc-purple-dark) 70%, transparent);
transform: scaleY(var(--p, 1));
transform-origin: top;
}.hw-ch.is-beam .hw-rail {
display: none;
}.hw-ch:not(.is-beam) .hw-ch__beam {
display: none;
}.hw-hero__line {
z-index: 0;
}.hw-hero__line path {
vector-effect: non-scaling-stroke;
}.is-motion .hw-hero__line .hw-beam__core,
.is-motion .hw-hero__line .hw-beam__case {
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
}.hw-hero__body {
display: grid;
gap: clamp(18px, 2.4vw, 32px);
align-content: start;
padding-top: clamp(4px, 2vh, 28px);
}.t-mega.hw-hero__title {
--fit: 7.1;
}@media (min-width: 768px) {
.t-mega.hw-hero__title {
--fit: 9.7;
}.hw-hero__title .line:nth-child(-n + 2) {
display: inline-block;
}
}.hw-hero__foot {
position: relative;
display: grid;
gap: 32px;
padding-top: clamp(64px, 11vh, 140px);
}.hw-hero__lead {
max-width: 30em;
}.hw-hero__index ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}.hw-idx {
--fill: 0;
position: relative;
display: grid;
gap: 4px;
min-height: 44px;
padding: 14px 4px 6px 0;
border-top: 1px solid var(--line-2);
color: var(--fg);
}.hw-idx::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 2px;
background: var(--dc-lime);
transform: scaleX(var(--fill));
transform-origin: left;
transition: transform 0.7s var(--ease-expo);
}.hw-idx__n {
color: var(--accent);
}.hw-idx__name {
font-family: var(--font-heading);
font-size: clamp(1rem, 0.62rem + 0.55vw, 1.25rem);
line-height: 1;
text-transform: uppercase;
}.hw-idx__hint {
font-size: var(--fs-small);
color: var(--fg-3);
}.hw-idx:hover,
.hw-idx:focus-visible {
--fill: 1;
}.hw-hero__cue {
display: none;
}@media (min-width: 1024px) {
.hw-hero__foot {
grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr) minmax(0, 0.8fr);
column-gap: clamp(32px, 4vw, 72px);
align-items: end;
}.hw-hero__index ol {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}.hw-hero__cue {
position: absolute;
right: calc(var(--gutter) + 26px);
bottom: 0;
display: flex;
align-items: center;
gap: 10px;
color: var(--fg-3);
writing-mode: vertical-rl;
transform: rotate(180deg);
}.hw-hero__cue .icon {
width: 14px;
height: 14px;
transform: rotate(90deg);
color: var(--dc-lime);
}
}.hw-ch {
position: relative;
}.hw-ch__stage {
position: relative;
padding-block: var(--chapter-pad);
overflow: clip;
}.hw-ch__grid {
position: relative;
z-index: 2;
display: grid;
gap: clamp(36px, 7vw, 56px);
}.hw-ch__text {
display: grid;
gap: 20px;
align-content: start;
}.hw-ch__lead {
max-width: 32em;
}.hw-ch__ghost {
position: absolute;
top: calc(var(--chapter-pad) - 0.1em);
right: calc(var(--gutter) * 0.6);
z-index: 0;
font-family: var(--font-heading);
font-size: clamp(6rem, 28vw, 30rem);
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
opacity: 0.5;
pointer-events: none;
user-select: none;
}.hw-spec {
display: grid;
border-top: 1px solid var(--line);
}.hw-spec > div {
display: grid;
grid-template-columns: 6.4em minmax(0, 1fr);
gap: 16px;
padding-block: 11px;
border-bottom: 1px solid var(--line);
}.hw-spec dt {
padding-top: 3px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}.hw-spec dd {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--fg-2);
}.hw-tags {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
}.hw-tags li::before {
content: "/ ";
color: var(--accent);
}@media (max-width: 1023px) {
.hw-ch__grid {
padding-left: calc(var(--gutter) + 12px);
}
}@media (min-width: 1024px) {
.hw-ch__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(16px, 2vw, 32px);
align-items: center;
}
.hw-ch.is-pin .hw-ch__stage {
display: flex;
align-items: center;
min-height: 100vh;
min-height: 100svh;
padding-block: calc(var(--header-h) + 12px) 24px;
}.hw-ch.is-pin .hw-ch__grid {
width: 100%;
}
.hw-ch__text {
grid-column: 1 / 6;
gap: 18px;
}.hw-ch__visual {
grid-column: 7 / 13;
}.hw-ch__title {
font-size: clamp(2rem, 4.2vw, 4.4rem);
}.hw-ch__title .line {
white-space: nowrap;
}.hw-ch__ghost {
top: auto;
right: auto;
left: calc(var(--gutter) * 0.5);
bottom: -0.1em;
font-size: clamp(14rem, 26vw, 30rem);
opacity: 0.3;
}.hw-ch__lead {
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
}
.hw-ch--build .hw-ch__text {
grid-column: 8 / 13;
grid-row: 1;
}.hw-ch--build .hw-ch__visual {
grid-column: 1 / 8;
grid-row: 1;
}.hw-ch--build .hw-ch__ghost {
left: auto;
right: calc(var(--gutter) * 0.5);
opacity: 0.22;
}.hw-ch--automate .hw-ch__text,
.hw-ch--improve .hw-ch__text {
grid-column: 1 / 5;
}.hw-ch--automate .hw-ch__visual,
.hw-ch--improve .hw-ch__visual {
grid-column: 5 / 13;
}
}@media (min-width: 1024px) and (max-height: 880px) {
.hw-ch__text {
gap: 14px;
}.hw-spec > div {
padding-block: 8px;
}.hw-spec dd {
font-size: 0.875rem;
line-height: 1.45;
}.hw-ch__title {
font-size: clamp(2rem, min(4.2vw, 6.6vh), 4.4rem);
}.hw-ch__lead {
font-size: 0.9375rem;
}
.hw-ch--automate .hw-ch__text,
.hw-ch--improve .hw-ch__text {
grid-column: 1 / 6;
}.hw-ch--automate .hw-ch__visual,
.hw-ch--improve .hw-ch__visual {
grid-column: 6 / 13;
}
}.hw-sort {
position: relative;
display: grid;
gap: 16px;
}.hw-sort__photo {
position: relative;
z-index: 0;
margin: 0;
aspect-ratio: 16 / 7;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--dc-purple-dark);
box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -30px rgba(0, 0, 0, 0.8);
}.hw-sort__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%;
}.hw-sort__photo figcaption {
position: absolute;
left: 10px;
bottom: 10px;
padding: 5px 10px;
border-radius: var(--radius-pill);
background: rgba(20, 13, 29, 0.74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: rgba(255, 255, 255, 0.9);
font-size: 0.75rem;
line-height: 1.2;
}.hw-sort__board {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
}.hw-sort__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}.hw-sort__file {
font-weight: 700;
font-size: 0.9375rem;
color: var(--fg);
}.hw-sort__group {
display: grid;
gap: 6px;
}.hw-sort__label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--fg-2);
transition: color 0.5s var(--ease-out);
}.hw-sort__list {
display: grid;
gap: 6px;
}.hw-sort__row {
position: relative;
}.hw-chip {
position: relative;
display: grid;
grid-template-columns: 6.4em minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 40px;
padding: 7px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--fg) 5%, var(--bg));
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
will-change: transform;
transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}.hw-chip__type {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
color: var(--fg-3);
white-space: nowrap;
}.hw-chip__type::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dc-lime);
flex-shrink: 0;
}.hw-chip--pain-point .hw-chip__type::before {
background: #ff8f6b;
}.hw-chip--idea .hw-chip__type::before {
background: #b58cff;
}.hw-chip--data .hw-chip__type::before {
background: #7fd4ff;
}.hw-chip__text {
font-size: 0.875rem;
font-weight: 500;
color: var(--fg);
line-height: 1.3;
}.hw-sort.is-staged .hw-chip:not(.is-set) {
border-style: dashed;
background-color: color-mix(in srgb, var(--fg) 3%, var(--bg));
}.hw-sort.is-staged .hw-sort__group:not(.is-set) .hw-sort__label {
color: var(--fg-3);
}.hw-sort__out {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin-top: 4px;
padding: 8px 18px 8px 8px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
color: var(--dc-purple-black);
font-weight: 700;
justify-self: start;
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-expo);
}.hw-sort__out-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--dc-purple-black);
color: var(--dc-lime);
}.hw-sort__out-icon .icon {
width: 14px;
height: 14px;
}.hw-sort.is-staged .hw-sort__out:not(.is-set) {
opacity: 0;
transform: translateX(-10px);
}@media (min-width: 1024px) {
.hw-sort {
padding-left: 38px;
}.hw-ch--understand .hw-ch__visual {
grid-column: 7 / 12;
}
}@media (min-width: 1024px) and (min-height: 861px) {
.hw-sort__photo {
aspect-ratio: 2 / 1;
}
}@media (min-width: 1024px) and (max-height: 860px) {
.hw-sort {
gap: 12px;
}.hw-sort__photo {
aspect-ratio: 3 / 1;
}.hw-sort__photo img {
object-position: 50% 14%;
}.hw-sort__board {
gap: 9px;
}.hw-chip {
min-height: 34px;
padding-block: 5px;
}.hw-sort__list {
gap: 4px;
}
}.hw-build {
position: relative;
display: grid;
gap: 28px;
}.hw-build__node {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: start;
min-height: 36px;
padding: 6px 16px 6px 8px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--bg);
color: var(--fg);
font-size: 0.875rem;
font-weight: 700;
}.hw-build__node span {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--dc-purple-dark);
background: var(--dc-lime);
}.hw-build__row {
display: grid;
gap: 32px;
}.hw-build__item {
position: relative;
display: grid;
gap: 12px;
justify-items: center;
align-content: start;
}.hw-build__cap {
position: relative;
z-index: 1;
display: grid;
gap: 2px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
text-align: center;
font-size: var(--fs-small);
color: var(--fg-2);
}.hw-build__cap strong {
font-weight: 700;
color: var(--fg);
}.hw-wf {
--ink: var(--dc-purple);
--tint: rgba(103, 33, 223, 0.1);
position: relative;
z-index: 1;
display: grid;
align-content: start;
gap: 8px;
width: 100%;
max-width: 340px;
padding: 10px;
border: 1px solid rgba(103, 33, 223, 0.22);
border-radius: var(--radius-md);
background: #fff;
box-shadow: 0 30px 60px -34px rgba(38, 23, 53, 0.45);
}.hw-wf__p {
display: block;
border: 1px solid transparent;
border-radius: 4px;
transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), opacity 0.5s var(--ease-out), transform 0.6s var(--ease-expo);
}.hw-wf.is-staged .hw-wf__p:not(.is-in) {
border: 1px dashed rgba(103, 33, 223, 0.32);
background-color: transparent !important;
transform: translateY(4px);
}.hw-wf.is-staged .hw-wf__p:not(.is-in) > * {
opacity: 0;
}.hw-wf__p > * {
transition: opacity 0.5s var(--ease-out);
}.hw-wf__bar {
display: flex;
align-items: center;
gap: 4px;
height: 18px;
padding: 0 6px;
background: var(--dc-off-white);
}.hw-wf__bar i {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(103, 33, 223, 0.3);
}.hw-wf__bar b {
flex: 1;
height: 7px;
margin-left: 8px;
border-radius: 4px;
background: rgba(103, 33, 223, 0.12);
}.hw-wf__nav {
display: flex;
align-items: center;
gap: 8px;
height: 14px;
}.hw-wf__nav b {
width: 22px;
height: 10px;
margin-right: auto;
border-radius: 3px;
background: var(--ink);
}.hw-wf__nav i {
width: 16px;
height: 4px;
border-radius: 2px;
background: rgba(25, 21, 31, 0.25);
}.hw-wf__h {
height: 14px;
width: 86%;
background: var(--dc-charcoal);
}.hw-wf__h--2 {
width: 58%;
}.hw-wf__btn {
width: 40%;
height: 16px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
}.hw-wf__tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 4px;
}.hw-wf__tiles i {
aspect-ratio: 1 / 0.8;
border-radius: 4px;
background: var(--tint);
}.hw-wf__shot {
position: absolute;
inset: 36px 10px 10px;
overflow: hidden;
border-radius: 4px;
background: #fff;
box-shadow: 0 0 0 1px rgba(20, 13, 29, 0.08);
transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-expo);
}.hw-wf__shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}.hw-wf.is-staged:not(.is-real) .hw-wf__shot {
opacity: 0;
transform: translateY(8px);
}.hw-wf--campaign {
max-width: 200px;
}.hw-wf__t {
font-size: 0.75rem;
line-height: 1.3;
color: rgba(25, 21, 31, 0.72);
}.hw-wf__t--head {
font-family: var(--font-heading);
font-size: 0.875rem;
line-height: 1.05;
text-transform: uppercase;
color: var(--dc-charcoal);
}.hw-wf__cta {
justify-self: start;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
color: var(--dc-purple-black);
}.hw-wf__img {
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--dc-off-white);
}.hw-wf__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 38%;
}.hw-wf__chans,
.hw-wf__sys {
display: flex;
flex-wrap: wrap;
gap: 4px;
}.hw-wf__chans i,
.hw-wf__sys i {
padding: 2px 6px;
border: 1px solid rgba(103, 33, 223, 0.25);
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.3;
font-style: normal;
font-weight: 600;
color: var(--dc-purple);
}.hw-wf--system {
max-width: 230px;
}.hw-wf__sys {
position: relative;
justify-content: space-between;
padding: 10px 6px;
background: var(--dc-off-white);
}.hw-wf__sys::before {
content: "";
position: absolute;
left: 14px;
right: 14px;
top: 50%;
border-top: 1px dashed var(--dc-purple);
}.hw-wf__sys i {
position: relative;
background: #fff;
}.hw-wf__log {
display: grid;
gap: 4px;
}.hw-wf__log > span {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 4px;
background: var(--tint);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.25;
color: var(--dc-charcoal);
}.hw-wf__log .icon {
width: 11px;
height: 11px;
flex-shrink: 0;
color: var(--dc-purple);
}.hw-wf__status {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
padding: 3px 9px;
border-radius: var(--radius-pill);
background: var(--dc-purple-black);
font-size: 0.75rem;
font-weight: 600;
color: var(--dc-lime);
}.hw-wf__status b {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dc-lime);
}@media (max-width: 599px) {
.hw-build__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 12px;
}.hw-build__item--ui {
grid-column: 1 / -1;
}.hw-wf--ui {
max-width: 300px;
}.hw-wf--campaign,
.hw-wf--system {
max-width: none;
}
.hw-wf__sys {
display: none;
}.hw-build__cap {
padding: 6px 10px;
font-size: 0.8125rem;
}
}@media (min-width: 600px) and (max-width: 1023px) {
.hw-build__row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
}@media (min-width: 1024px) {
.hw-build {
gap: 30px;
justify-items: center;
}.hw-build__node {
justify-self: center;
}.hw-build__row {
grid-template-columns: 1.15fr 0.85fr 1fr;
gap: clamp(16px, 2vw, 32px);
align-items: start;
width: 100%;
}.hw-build__item--campaign {
margin-top: 48px;
}.hw-build__item--system {
margin-top: 18px;
}
}@media (min-width: 1024px) and (max-height: 820px) {
.hw-build {
gap: 22px;
}.hw-build__item--campaign {
margin-top: 28px;
}.hw-build__item--system {
margin-top: 10px;
}.hw-wf {
gap: 6px;
}.hw-wf__img {
aspect-ratio: 16 / 10;
}
}.hw-auto {
position: relative;
display: grid;
gap: 18px;
}.hw-auto__count {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
font-size: 0.875rem;
color: var(--fg-2);
}html:not(.has-theme) .hw-ch--automate,
:root[data-theme="purple"] .hw-ch--automate {
--fg-3: rgba(255, 255, 255, 0.82);
}.hw-auto__count b {
font-family: var(--font-heading);
font-size: 2rem;
line-height: 1;
font-weight: 900;
color: var(--accent);
font-variant-numeric: tabular-nums;
}.hw-auto__field {
position: relative;
}.hw-auto__list {
display: grid;
gap: 12px;
}.hw-auto__wire {
display: none;
}.hw-tool__box {
position: relative;
display: grid;
gap: 3px;
min-width: 176px;
padding: 11px 16px;
border: 1px solid var(--dc-lime);
border-radius: var(--radius-md);
background-color: rgba(20, 13, 29, 0.66);
box-shadow: 0 0 0 1px rgba(197, 244, 61, 0.2), 0 16px 40px -18px rgba(20, 13, 29, 0.8);
transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), transform 0.8s var(--ease-expo), background-color 0.5s var(--ease-out);
}.hw-tool__name {
font-weight: 700;
color: #fff;
line-height: 1.2;
}.hw-tool__status {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--dc-lime);
white-space: nowrap;
}.hw-tool__led {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}.hw-auto.is-staged .hw-tool:not(.is-on) .hw-tool__box {
border: 1px dashed rgba(255, 255, 255, 0.42);
box-shadow: none;
background-color: rgba(20, 13, 29, 0.32);
transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
}.hw-auto.is-staged .hw-tool:not(.is-on) .hw-tool__status {
color: rgba(255, 255, 255, 0.78);
}@media (max-width: 1023px) {
.hw-auto.is-staged .hw-tool:not(.is-on) .hw-tool__box {
transform: translateX(8px) rotate(calc(var(--r, 0deg) * 0.5));
}.hw-auto__field {
max-width: 420px;
padding-right: 14px;
}
}@media (min-width: 768px) and (max-width: 1023px) {
.hw-auto__field {
max-width: none;
}.hw-auto__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 20px;
}
}@media (min-width: 1024px) {
.hw-auto__count {
justify-content: flex-end;
}.hw-auto__field {
height: clamp(400px, calc(100svh - 240px), 640px);
}.hw-auto__list {
display: block;
}
.hw-auto__wire {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: visible;
}.hw-auto__wire polyline {
fill: none;
stroke: var(--dc-lime);
stroke-width: 2;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}.hw-ch.is-beam .hw-auto__wire {
display: none;
}.hw-tool {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
}.hw-tool__box {
min-width: 0;
width: max-content;
max-width: 210px;
}
}.hw-imp {
position: relative;
display: grid;
gap: 40px;
}.hw-imp__reads {
display: grid;
gap: 10px;
align-content: center;
}.hw-imp__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
margin-bottom: 2px;
}.hw-imp__title {
font-weight: 700;
font-size: 0.9375rem;
color: var(--fg);
}.hw-read {
position: relative;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label label" "value delta" "spark spark";
align-items: end;
gap: 6px 12px;
padding: 13px 16px 10px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--fg) 5%, var(--bg));
transition: border-color 0.5s var(--ease-out);
}.hw-read .metric__label {
grid-area: label;
font-family: var(--font-body);
font-size: 0.8125rem;
letter-spacing: 0;
text-transform: none;
color: var(--fg-2);
}.hw-read__value {
grid-area: value;
font-size: clamp(1.4rem, 0.9rem + 0.9vw, 1.9rem);
white-space: nowrap;
}.hw-read .metric__delta {
grid-area: delta;
padding-bottom: 4px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
}.hw-read__spark {
grid-area: spark;
height: 30px;
clip-path: inset(0 calc((1 - var(--s, 1)) * 100%) -4px 0);
}.hw-read.is-on {
border-color: color-mix(in srgb, var(--dc-lime) 60%, transparent);
}.hw-loop {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1;
justify-self: center;
container-type: inline-size;
}.hw-loop__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}.hw-loop__svg path,
.hw-loop__svg circle {
fill: none;
}.hw-loop__track {
stroke: var(--line-2);
stroke-width: 0.25;
stroke-dasharray: 0.6 1.6;
}.hw-loop__case {
stroke: var(--dc-purple-dark);
stroke-width: 1.3;
opacity: 0.8;
}.hw-loop__arc {
stroke: var(--dc-lime);
stroke-width: 0.5;
stroke-linecap: round;
}.hw-loop__svg .hw-beam__halo {
fill: var(--dc-lime);
opacity: 0.25;
}.hw-loop__svg .hw-beam__dot {
fill: var(--dc-lime);
stroke: var(--dc-purple-dark);
stroke-width: 0.5;
}.hw-loop__nodes li {
position: absolute;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 11px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--bg);
font-size: 0.8125rem;
font-weight: 700;
color: var(--fg);
white-space: nowrap;
transform: translate(-50%, -50%);
transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}.hw-loop__nodes .t-mono {
font-size: 0.75rem;
color: var(--accent);
}.hw-loop__node--b { left: 50%; top: 96%; }
.hw-loop__node--l { left: 4%; top: 50%; }
.hw-loop__node--t { left: 50%; top: 4%; }
.hw-loop__node--r { left: 96%; top: 50%; }.hw-loop__nodes li.is-lit {
border-color: var(--dc-lime);
box-shadow: 0 0 0 1px rgba(197, 244, 61, 0.25), 0 8px 30px -10px rgba(197, 244, 61, 0.5);
}.hw-loop__core {
position: absolute;
inset: 22% max(24%, 96px);
display: grid;
place-content: center;
gap: 12px;
text-align: center;
}.hw-loop__kicker {
font-size: 0.75rem;
color: var(--accent);
}.hw-loop__line {
font-family: var(--font-heading);
font-size: clamp(1rem, 6.2cqi, 1.9rem);
line-height: 1.02;
text-transform: uppercase;
color: var(--fg);
text-wrap: balance;
}@container (max-width: 329px) {
.hw-loop__nodes .t-mono,
.hw-loop__kicker {
display: none;
}.hw-loop__nodes li {
padding: 5px 10px;
font-size: 0.75rem;
}.hw-loop__core {
inset: 30% 30%;
}.hw-loop__line {
font-size: 0.8125rem;
line-height: 1.08;
}
}@media (max-width: 1023px) {
.hw-loop {
width: min(100% - 100px, 420px);
margin-top: 28px;
}.hw-imp__reads {
max-width: 420px;
}
}@media (max-width: 599px) {
.hw-loop {
width: min(100% - 80px, 340px);
}
}@media (min-width: 768px) and (max-width: 1023px) {
.hw-imp {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
column-gap: 24px;
}.hw-imp__reads {
max-width: none;
}.hw-loop {
width: min(100% - 80px, 340px);
margin-top: 0;
}
}@media (min-width: 1024px) {
.hw-imp {
grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
gap: clamp(28px, 4vw, 72px);
align-items: center;
padding-left: 30px;
}.hw-loop {
width: min(100% - 96px, calc(100vh - 250px), 540px);
}
}@media (min-width: 1024px) and (max-width: 1199px) {
.hw-ch--improve .hw-ch__text {
grid-column: 1 / 5;
}.hw-ch--improve .hw-ch__visual {
grid-column: 5 / 13;
}.hw-imp {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 24px;
padding-left: 18px;
}.hw-loop {
width: min(100% - 72px, calc(100vh - 250px), 540px);
}
}.hw-together__body {
display: grid;
gap: clamp(28px, 4vw, 56px);
}.hw-together__photo {
margin: 0;
display: grid;
gap: 10px;
}.hw-together__photo img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 55% 40%;
border-radius: 16px;
background: var(--panel);
}.hw-together__photo figcaption {
font-size: var(--fs-small);
color: var(--fg-3);
}.hw-princ {
display: grid;
gap: 28px;
align-content: start;
}.hw-princ__item {
position: relative;
display: grid;
align-content: start;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--line-2);
}.hw-princ__item::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 48px;
height: 2px;
background: var(--accent);
}.hw-princ dt {
display: flex;
gap: 12px;
color: var(--fg-3);
}.hw-princ dt span {
color: var(--accent);
}.hw-princ dd {
max-width: 30em;
color: var(--fg-2);
}.hw-princ strong {
display: block;
margin-bottom: 6px;
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: 900;
line-height: 1.02;
text-transform: uppercase;
color: var(--fg);
}@media (min-width: 768px) and (max-width: 1023px) {
.hw-princ {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
}.hw-together__photo img {
aspect-ratio: 16 / 7;
}
}@media (min-width: 1024px) {
.hw-together__body {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(40px, 6vw, 110px);
align-items: center;
}.hw-princ {
gap: 24px;
}.hw-princ__item {
grid-template-columns: 11em minmax(0, 1fr);
column-gap: 24px;
padding-top: 18px;
}.hw-princ dt {
padding-top: 6px;
}
}.hw-expect {
margin-top: clamp(56px, 6vw, 96px);
}.hw-expect__title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
color: var(--fg-3);
font-weight: 500;
}.hw-expect__title::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}.hw-expect__list {
position: relative;
display: grid;
gap: 0;
}.hw-moment {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 18px;
padding-block: 22px;
border-top: 1px solid var(--line);
}.hw-moment[hidden] {
display: none;
}.hw-moment__n {
grid-row: span 2;
font-family: var(--font-heading);
font-size: 2.4rem;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1.2px var(--accent);
}.hw-moment__title {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.hw-moment__copy {
margin-top: 10px;
max-width: 38em;
color: var(--fg-2);
}.hw-moment__split {
display: grid;
gap: 10px;
margin-top: 8px;
}.hw-moment__split > div {
display: grid;
grid-template-columns: 3.4em minmax(0, 1fr);
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
background: var(--panel);
box-shadow: inset 0 0 0 1px var(--line);
}.hw-moment__split dt {
padding-top: 2px;
color: var(--accent);
}.hw-moment__split dd {
font-size: 0.9375rem;
color: var(--fg-2);
}.hw-expect__tabs {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-bottom: clamp(24px, 3vw, 44px);
}.hw-expect__tabs[hidden] {
display: none;
}.hw-expect__line {
position: absolute;
left: 10%;
right: 10%;
top: 29px;
height: 2px;
background: var(--line-2);
}.hw-expect__line i {
position: absolute;
inset: 0;
background: var(--accent);
transform: scaleX(var(--p, 0));
transform-origin: left;
transition: transform 0.8s var(--ease-expo);
}.hw-expect__tab {
position: relative;
display: grid;
justify-items: center;
gap: 10px;
min-height: 44px;
padding: 20px 8px 10px;
border-radius: var(--radius-md);
color: var(--fg-3);
transition: color 0.35s var(--ease-out);
}.hw-expect__dot {
width: 20px;
height: 20px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--bg);
transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.6s var(--ease-expo);
}.hw-expect__n {
font-size: 0.75rem;
}.hw-expect__tl {
font-family: var(--font-heading);
font-size: clamp(1rem, 0.8rem + 0.5vw, 1.35rem);
line-height: 1;
text-transform: uppercase;
}.hw-expect__tab:hover {
color: var(--fg);
}.hw-expect__tab.is-past .hw-expect__dot {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 25%, var(--bg));
}.hw-expect__tab[aria-selected="true"] {
color: var(--fg);
}.hw-expect__tab[aria-selected="true"] .hw-expect__dot {
border-color: var(--accent);
background: var(--accent);
transform: scale(1.25);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}.hw-expect.is-tabs .hw-moment {
grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr);
gap: clamp(24px, 3vw, 56px);
align-items: start;
padding-block: clamp(24px, 2.6vw, 40px) 0;
border-top: 1px solid var(--line-2);
animation: hwPanel 0.7s var(--ease-expo);
}.hw-expect.is-tabs .hw-moment__n {
grid-row: auto;
font-size: var(--fs-num);
}.hw-expect.is-tabs .hw-moment__title {
font-size: clamp(1.6rem, 1rem + 1.5vw, 2.6rem);
}.hw-expect.is-tabs .hw-moment__split {
margin-top: 0;
}@keyframes hwPanel {
from { opacity: 0; transform: translateY(14px); }
}@media (min-width: 768px) {
.hw-moment {
grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 0.8fr);
column-gap: 32px;
}.hw-moment__n {
grid-row: auto;
font-size: 3.2rem;
}
}.hw-work__head {
display: grid;
gap: 20px;
margin-bottom: clamp(32px, 4vw, 56px);
}.hw-work__aside {
display: grid;
gap: 16px;
justify-items: start;
max-width: 30em;
color: var(--fg-2);
}.hw-work__all {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-weight: 700;
color: var(--fg);
}.hw-work__all .icon {
width: 16px;
height: 16px;
}.hw-work__grid {
display: grid;
gap: clamp(16px, 2vw, 28px);
}.hw-work__grid > li {
display: flex;
}@media (min-width: 768px) {
.hw-work__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}@media (min-width: 1024px) {
.hw-work__head {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.hw-work__head > .folio {
grid-column: 1 / -1;
}.hw-work__head .t-h2 .line {
white-space: nowrap;
}.hw-work__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}.hw-faq__grid {
display: grid;
gap: 36px;
}.hw-faq__head {
display: grid;
gap: 20px;
align-content: start;
}.hw-faq__list {
border-bottom: 1px solid var(--line-2);
}.hw-faq__item {
border-top: 1px solid var(--line-2);
}.hw-faq__item summary {
display: grid;
grid-template-columns: 2.6em minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 72px;
padding-block: 14px;
cursor: pointer;
list-style: none;
}.hw-faq__item summary::-webkit-details-marker {
display: none;
}.hw-faq__n {
color: var(--accent);
}.hw-faq__q {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.6rem);
line-height: 1.08;
text-transform: uppercase;
color: var(--fg);
transition: color 0.3s var(--ease-out);
}.hw-faq__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--fg-2);
transition: transform 0.6s var(--ease-expo), background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}.hw-faq__icon .icon {
width: 16px;
height: 16px;
}.hw-faq__item summary:hover .hw-faq__q {
color: var(--accent);
}.hw-faq__item[open] .hw-faq__icon {
transform: rotate(45deg);
border-color: var(--accent);
background: var(--accent);
color: var(--bg);
}.hw-faq__a {
padding: 0 60px 24px calc(2.6em + 16px);
}.hw-faq__a p {
max-width: 40em;
color: var(--fg-2);
}.hw-faq__item[open] .hw-faq__a {
animation: hwPanel 0.6s var(--ease-expo);
}@media (max-width: 599px) {
.hw-faq__item summary {
grid-template-columns: minmax(0, 1fr) auto;
}.hw-faq__n {
display: none;
}.hw-faq__a {
padding: 0 0 22px;
}
}@media (min-width: 1024px) {
.hw-faq__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
column-gap: clamp(40px, 7vw, 140px);
}.hw-faq__head {
position: sticky;
top: calc(var(--header-h) + 32px);
align-self: start;
}.hw-faq__head .t-h2 .line {
white-space: nowrap;
}
}@media (prefers-reduced-motion: reduce) {
.hw-expect.is-tabs .hw-moment,
.hw-faq__item[open] .hw-faq__a {
animation: none;
}.hw-wf__shot,
.hw-beam__branch {
transition: none;
}
}