.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;
}.hw-beam__node {
fill: var(--bg);
stroke: var(--dc-lime);
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(8px, 3vh, 40px);
}.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, 150px);
}.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 {
min-height: 100vh;
}.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: clamp(84px, 16vw, 128px);
overflow: clip;
}.hw-ch__grid {
position: relative;
z-index: 2;
display: grid;
gap: clamp(40px, 8vw, 64px);
}.hw-ch__text {
display: grid;
gap: 22px;
align-content: start;
}.hw-ch__lead {
max-width: 32em;
}.hw-ch__ghost {
position: absolute;
top: clamp(40px, 10vw, 80px);
right: calc(var(--gutter) * 0.6);
z-index: 0;
font-family: var(--font-heading);
font-size: clamp(7rem, 30vw, 30rem);
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
opacity: 0.55;
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.6875rem;
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.6875rem;
letter-spacing: 0.14em;
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) + 16px);
}}@media (min-width: 1024px) {
.hw-ch__stage {
display: flex;
align-items: center;
min-height: 100vh;
padding-block: calc(var(--header-h) + 24px) 44px;
}.hw-ch__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(16px, 2vw, 32px);
align-items: center;
}.hw-ch__text {
grid-column: 1 / 6;
gap: 20px;
}.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: 860px) {
.hw-ch__text {
gap: 14px;
}.hw-spec > div {
padding-block: 8px;
}.hw-spec dd {
font-size: 0.875rem;
line-height: 1.45;
}
}.hw-sort {
position: relative;
display: grid;
gap: 14px;
}.hw-sort__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}.hw-sort__file {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg-2);
}.hw-sort__group {
display: grid;
gap: 6px;
}.hw-sort__label {
display: flex;
align-items: center;
gap: 10px;
color: var(--fg-3);
transition: color 0.5s var(--ease-out);
}.hw-sort__label span {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 1px solid var(--line-2);
border-radius: 4px;
font-size: 0.625rem;
letter-spacing: 0;
color: var(--accent);
}.hw-sort__list {
display: grid;
gap: 6px;
}.hw-sort__row {
position: relative;
}.hw-chip {
position: relative;
display: grid;
grid-template-columns: 7.2em minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 38px;
padding: 7px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--dc-purple-dark) 72%, transparent);
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-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
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--note .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-chip__n {
font-size: 0.625rem;
color: var(--fg-3);
}.hw-sort.is-staged .hw-chip:not(.is-set) {
border-style: dashed;
background-color: color-mix(in srgb, var(--dc-purple-dark) 45%, transparent);
}.hw-sort.is-staged .hw-sort__group:not(.is-set) .hw-sort__label {
color: color-mix(in srgb, var(--fg-3) 50%, transparent);
}.hw-sort__out {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin-top: 6px;
padding: 8px 14px 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 .t-mono {
font-size: 0.6875rem;
}.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.18;
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 (max-height: 820px) {
.hw-sort {
gap: 10px;
}.hw-chip {
min-height: 34px;
padding-block: 5px;
}.hw-sort__list {
gap: 4px;
}
}.hw-build {
position: relative;
display: grid;
gap: 28px;
}.hw-build__node {
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: start;
min-height: 34px;
padding: 6px 14px 6px 8px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--bg);
color: var(--fg);
position: relative;
z-index: 1;
}.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: 40px;
}.hw-build__item {
position: relative;
display: grid;
gap: 14px;
justify-items: center;
}.hw-build__cap {
position: relative;
z-index: 1;
display: grid;
gap: 2px;
padding: 8px 12px;
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 .t-mono {
font-size: 0.6875rem;
color: var(--accent);
}.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--campaign {
max-width: 200px;
}.hw-wf__img {
aspect-ratio: 4 / 3;
background:
radial-gradient(circle at 70% 30%, rgba(197, 244, 61, 0.9) 0 14%, transparent 15%),
linear-gradient(135deg, var(--dc-purple), var(--dc-purple-dark));
}.hw-wf__chans,
.hw-wf__sys {
display: flex;
flex-wrap: wrap;
gap: 4px;
}.hw-wf__chans i,
.hw-wf__sys i {
padding: 3px 6px;
border: 1px solid rgba(103, 33, 223, 0.25);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.5625rem;
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
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__rows {
display: grid;
gap: 5px;
}.hw-wf__rows i {
height: 10px;
border-radius: 3px;
background: var(--tint);
}.hw-wf__rows i:first-child {
background: rgba(103, 33, 223, 0.22);
}.hw-wf__status {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: var(--dc-purple-black);
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dc-lime);
}.hw-wf__status b {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dc-lime);
}@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: 34px;
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-wf__tiles,
.hw-wf__rows i:last-child {
display: none;
}.hw-wf--campaign {
max-width: 160px;
}
}.hw-auto {
position: relative;
display: grid;
gap: 18px;
}.hw-auto__count {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 14px;
color: var(--fg-2);
}.hw-auto__count b {
font-family: var(--font-heading);
font-size: 2rem;
line-height: 1;
font-weight: 900;
color: var(--dc-lime);
font-variant-numeric: tabular-nums;
}.hw-auto__field {
position: relative;
display: grid;
gap: 14px;
}.hw-tool__box {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "n name" "n status";
column-gap: 12px;
row-gap: 3px;
align-items: center;
min-width: 176px;
padding: 11px 14px;
border: 1px solid var(--dc-lime);
border-radius: var(--radius-md);
background-color: rgba(20, 13, 29, 0.62);
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__n {
grid-area: n;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
font-size: 0.625rem;
letter-spacing: 0;
color: #fff;
}.hw-tool__name {
grid-area: name;
font-weight: 700;
color: #fff;
line-height: 1.2;
}.hw-tool__status {
grid-area: status;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.625rem;
letter-spacing: 0.12em;
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.3);
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.72);
}.hw-auto.is-staged .hw-tool:not(.is-on) .hw-tool__n {
border-style: dashed;
}@media (max-width: 1023px) {
.hw-auto.is-staged .hw-tool:not(.is-on) .hw-tool__box {
transform: translateX(12px) rotate(var(--r, 0deg));
}.hw-auto__field {
max-width: 420px;
}
}@media (min-width: 1024px) {
.hw-auto__field {
display: block;
height: clamp(420px, calc(100svh - 280px), 620px);
}.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: 200px;
}
}.hw-imp {
position: relative;
display: grid;
gap: 40px;
}.hw-imp__reads {
display: grid;
gap: 12px;
align-content: center;
}.hw-imp__tag {
margin-bottom: 2px;
}.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: 14px 16px 12px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--dc-purple-dark) 60%, transparent);
transition: border-color 0.5s var(--ease-out);
}.hw-read .metric__label {
grid-area: label;
}.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;
}.hw-read__spark {
grid-area: spark;
height: 34px;
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;
}.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.625rem;
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: 24%;
display: grid;
place-content: center;
gap: 12px;
text-align: center;
}.hw-loop__kicker {
font-size: 0.625rem;
color: var(--accent);
}.hw-loop__line {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 0.7rem + 1.3vw, 1.9rem);
line-height: 1.02;
text-transform: uppercase;
color: var(--fg);
text-wrap: balance;
}.hw-loop__cycle {
font-size: 0.625rem;
color: var(--fg-3);
}.hw-loop__cycle b {
font-weight: 500;
color: var(--fg);
}@media (max-width: 1023px) {
.hw-loop {
width: min(100% - 100px, 420px);
margin-top: 32px;
}.hw-imp__reads {
max-width: 420px;
}
}@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);
}
}.hw-princ {
display: grid;
gap: 28px;
}.hw-princ__item {
position: relative;
display: grid;
align-content: start;
gap: 14px;
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: 26em;
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) {
.hw-princ {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(24px, 3vw, 56px);
}
}.hw-expect {
margin-top: clamp(72px, 9vw, 140px);
}.hw-expect__title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
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: 24px;
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(32px, 4vw, 56px);
}.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.6875rem;
}.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(28px, 3vw, 44px) 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-faq__grid {
display: grid;
gap: 40px;
}.hw-faq__head {
display: grid;
gap: 22px;
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: 16px;
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 26px 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);
}.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;
}
}