.pw-faq {
--brand-navy: #0e1e3d;
--brand-blue: #009ef5;
--action: #0077c8;
--action-hover: #0069b3;
--surface-selected: #e8f4fe;
--surface: #ffffff;
--surface-wash: #f6f8fb;
--ink-soft: #3f5471;
--line: #e3e8f0;
--space-3: 12px;
--space-4: 16px;
--radius-lg: 12px;
--shadow-card: 0 8px 28px rgba(11, 23, 51, 0.05);
--pw-ease: cubic-bezier(.2, .8, .2, 1);
--pw-fast: 150ms;
--pw-med: 260ms;
}
.pw-faq { display: grid; gap: var(--space-3); overflow-anchor: none; }
.pw-faq details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: box-shadow var(--pw-med) var(--pw-ease), border-color var(--pw-med) var(--pw-ease); }
.pw-faq details[open] { border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--line)); box-shadow: var(--shadow-card); }
.pw-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: 14px 20px; font-size: 17px; font-weight: 700; color: var(--brand-navy); cursor: pointer; list-style: none; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary .pw-ic { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--surface-wash); color: var(--action); transition: transform var(--pw-med) var(--pw-ease), background-color var(--pw-fast) var(--pw-ease); }
.pw-faq details[open] summary .pw-ic { transform: rotate(180deg); background: var(--surface-selected); }
.pw-faq details > div { padding: 0 20px 18px; color: var(--ink-soft); }
.pw-faq details > div > * + * { margin-top: var(--space-3); }
.pw-faq details > div a { color: var(--action); font-weight: 600; text-underline-offset: 2px; }
.pw-faq details.is-closing summary .pw-ic { transform: none; background: var(--surface-wash); }
.pw-faq summary:hover { color: var(--action-hover); }
.pw-faq summary:hover .pw-ic { background: var(--surface-selected); }
.hc-body {
--hc-j-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--hc-j-on-navy: #e6eefc;
--hc-j-on-navy-soft: #c6d4ea;
--hc-j-live: #d81839;
--hc-j-soon-ink: #8a5100;
--hc-j-soon: #fff3d6;
--hc-j-float: 0 28px 56px -24px rgb(2 8 20 / 65%);
--hc-j-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350e3c2' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
--hc-j-i-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350e3c2' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m8.5 14-1.5 7 5-3 5 3-1.5-7'/%3E%3C/svg%3E");
--hc-j-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145687' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E");
--hc-j-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E");
--hc-j-i-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E");
--hc-j-i-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
--hc-j-i-go-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}
.hc-body .hc-block-chapters {
max-width: 640px;
margin: 28px auto 36px;
text-align: center;
}
.hc-body .hc-block-chapters > .hc-block-title {
font-size: 22px;
}
.hc-body .hc-chapters-list {
display: grid;
gap: 6px;
margin: 18px 0 0;
padding: 0;
list-style: none;
text-align: left;
counter-reset: hc-chapter;
}
.hc-body .hc-chapters-list > li {
margin: 0;
counter-increment: hc-chapter;
}
.hc-body .hc-chapters-list a {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
border: 1px solid transparent;
border-radius: 12px;
padding: 10px 12px;
color: var(--ink);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
transition: background-color 0.26s var(--hc-j-ease), border-color 0.26s var(--hc-j-ease), color 0.26s var(--hc-j-ease);
}
.hc-body .hc-chapters-list a::before {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border-radius: 50%;
background: var(--surface-wash);
color: var(--ink-muted);
font-size: 12.5px;
font-weight: 700;
content: counter(hc-chapter);
transition: background-color 0.26s var(--hc-j-ease), color 0.26s var(--hc-j-ease), transform 0.26s var(--hc-j-ease);
}
.hc-body .hc-chapter-time {
order: 1;
color: var(--ink-muted);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.hc-body .hc-chapters-list a:hover {
background: var(--surface-wash);
}
.hc-body .hc-chapters-list a[aria-current="true"] {
border-color: rgb(0 158 245 / 35%);
background: var(--surface-selected);
color: var(--ink-selected);
}
.hc-body .hc-chapters-list a[aria-current="true"]::before {
background: var(--action);
color: var(--on-action);
transform: scale(1.06);
}
.hc-body .hc-block-kit {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
overflow: hidden;
border-radius: 22px;
background: #fff;
box-shadow: 0 20px 40px -24px rgb(14 30 61 / 40%), var(--shadow-card);
}
.hc-body .hc-kit-cover {
position: relative;
display: grid;
align-content: start;
gap: 14px;
overflow: hidden;
padding: 32px;
background: var(--brand-navy);
color: var(--hc-j-on-navy);
}
.hc-body .hc-kit-cover > * {
margin: 0;
}
.hc-body .hc-kit-badge {
justify-self: start;
border-radius: 6px;
background: var(--brand-mint);
color: var(--brand-navy);
padding: 5px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-kit-cover > .hc-block-title {
color: #fff;
font-size: 26px;
line-height: 1.15;
}
.hc-body .hc-kit-cover > p:not(.hc-kit-badge) {
color: var(--hc-j-on-navy-soft);
font-size: 15.5px;
line-height: 1.6;
}
.hc-body .hc-kit-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0;
list-style: none;
}
.hc-body .hc-kit-facts > li {
margin: 0;
border-radius: 999px;
background: rgb(255 255 255 / 10%);
color: var(--hc-j-on-navy);
padding: 6px 10px;
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-kit-stack {
position: relative;
height: 150px;
margin-top: 16px;
}
.hc-body .hc-kit-sheet {
position: absolute;
bottom: 0;
left: 50%;
display: grid;
align-content: start;
gap: 7px;
width: 132px;
height: 150px;
margin-left: -66px;
border-radius: 12px;
background: #fff;
box-shadow: var(--hc-j-float);
padding: 14px;
transition: transform 0.6s var(--hc-j-ease);
}
.hc-body .hc-kit-sheet b {
color: var(--ink-muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.1em;
line-height: 1.2;
text-transform: uppercase;
}
.hc-body .hc-kit-sheet i {
display: block;
height: 7px;
border-radius: 4px;
background: var(--surface-wash);
}
.hc-body .hc-kit-sheet i:nth-of-type(2) {
width: 70%;
}
.hc-body .hc-kit-sheet i:nth-of-type(3) {
width: 85%;
background: var(--surface-mint);
}
.hc-body .hc-kit-sheet:nth-child(1) {
transform: translateX(-58px) rotate(-10deg);
}
.hc-body .hc-kit-sheet:nth-child(2) {
transform: translateX(58px) rotate(9deg);
}
.hc-body .hc-kit-sheet:last-child {
background: var(--brand-mint);
transform: translateY(-6px);
}
.hc-body .hc-kit-sheet:last-child b {
color: var(--brand-navy);
}
.hc-body .hc-kit-sheet:last-child i {
background: rgb(14 30 61 / 14%);
}
.hc-body .hc-block-kit:hover .hc-kit-sheet:nth-child(1) {
transform: translateX(-74px) rotate(-14deg);
}
.hc-body .hc-block-kit:hover .hc-kit-sheet:nth-child(2) {
transform: translateX(74px) rotate(13deg);
}
.hc-body .hc-block-kit:hover .hc-kit-sheet:last-child {
transform: translateY(-14px);
}
.hc-body .hc-kit-items {
display: grid;
align-content: center;
gap: 12px;
padding: 32px;
}
.hc-body .hc-kit-feature {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: start;
gap: 4px 16px;
border-radius: 16px;
background: #f5faff;
box-shadow: inset 0 0 0 1.5px rgb(0 158 245 / 45%);
padding: 20px;
}
.hc-body .hc-kit-feature::before {
grid-row: 1 / span 3;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--hc-j-i-bolt) center / 26px no-repeat var(--brand-navy);
content: "";
}
.hc-body .hc-kit-feature > * {
grid-column: 2;
margin: 0;
}
.hc-body .hc-kit-feature > .hc-block-title {
font-size: 18px;
}
.hc-body .hc-kit-feature > p {
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
}
.hc-body .hc-kit-feature > .hc-block-actions {
margin-top: 10px;
}
.hc-body .hc-kit-file {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
color: inherit;
padding: 14px 16px;
text-decoration: none;
transition: border-color 0.26s var(--hc-j-ease), transform 0.26s var(--hc-j-ease), box-shadow 0.26s var(--hc-j-ease);
}
.hc-body .hc-kit-file::after {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--hc-j-i-down) center / 20px no-repeat var(--surface-wash);
content: "";
}
.hc-body .hc-kit-file[href]:hover {
border-color: rgb(0 158 245 / 45%);
box-shadow: var(--shadow-lift);
transform: translateY(-3px);
}
.hc-body .hc-kit-file[href]:hover::after {
background: var(--hc-j-i-down-on) center / 20px no-repeat var(--action);
}
.hc-body .hc-kit-type {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 8px;
background: var(--surface-selected);
color: var(--ink-selected);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
}
.hc-body .hc-kit-name {
color: var(--ink-muted);
font-size: 13px;
line-height: 1.45;
}
.hc-body .hc-kit-name strong {
display: block;
color: var(--brand-navy);
font-size: 15px;
}
.hc-body .hc-kit-soon-tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: var(--hc-j-soon);
color: var(--hc-j-soon-ink);
padding: 4px 10px;
font-size: 12px;
font-weight: 800;
line-height: 1.3;
white-space: nowrap;
}
.hc-body .hc-kit-file.hc-kit-soon {
cursor: default;
}
.hc-body .hc-kit-file.hc-kit-soon::after {
content: none;
}
.hc-body .hc-block-button.hc-kit-soon,
.hc-body .hc-block-button.hc-kit-soon:is(:hover, :active) {
border-color: var(--line-button);
background: var(--surface-wash);
box-shadow: none;
color: var(--ink-muted);
cursor: default;
transform: none;
}
.hc-body .hc-block-live {
display: grid;
gap: 20px;
max-width: 480px;
margin: 36px auto;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 28px 56px -28px rgb(2 8 20 / 35%);
color: var(--ink);
padding: 24px;
}
.hc-body .hc-block-live p {
margin: 0;
}
.hc-body .hc-live-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.hc-body .hc-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 6px;
box-shadow: inset 0 0 0 1px rgb(216 24 57 / 25%);
color: var(--hc-j-live);
padding: 5px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-live-badge::before {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hc-j-live);
content: "";
animation: hc-live-pulse 2s ease-in-out infinite;
}
@keyframes hc-live-pulse {
50% {
opacity: 0.45;
transform: scale(0.82);
}
}
.hc-body .hc-live-ep {
color: var(--ink-muted);
font-size: 13px;
font-weight: 700;
}
.hc-body .hc-live-main {
display: flex;
align-items: center;
gap: 16px;
}
.hc-body .hc-live-date {
display: grid;
flex: none;
width: 76px;
height: 80px;
align-content: center;
justify-items: center;
border-radius: 12px;
background: var(--brand-navy);
color: #fff;
line-height: 1;
text-align: center;
}
.hc-body .hc-live-date > span:first-child {
color: var(--brand-mint);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hc-body .hc-live-date > strong {
margin: 4px 0 3px;
font-size: 32px;
font-weight: 900;
letter-spacing: -0.03em;
}
.hc-body .hc-live-date > span:last-child {
color: var(--hc-j-on-navy-soft);
font-size: 11.5px;
}
.hc-body .hc-live-series {
color: var(--blue-ink);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
}
.hc-body .hc-block-live .hc-block-title {
margin: 4px 0 0;
font-size: 20px;
line-height: 1.25;
}
.hc-body .hc-live-times {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
margin: 0;
border-radius: 12px;
background: var(--surface-wash);
padding: 0;
list-style: none;
}
.hc-body .hc-live-times > li {
display: grid;
gap: 2px;
margin: 0;
padding: 12px 14px;
color: var(--ink-muted);
font-size: 12.5px;
line-height: 1.3;
}
.hc-body .hc-live-times > li + li {
box-shadow: inset 1px 0 0 var(--line);
}
.hc-body .hc-live-times strong {
color: var(--brand-navy);
font-size: 20px;
font-weight: 900;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.hc-body .hc-block-live .hc-block-actions {
margin: 0;
}
.hc-body .hc-block-live .hc-block-button {
flex: 1 1 100%;
}
.hc-body .hc-block-live .hc-live-note {
color: var(--ink-muted);
font-size: 13px;
line-height: 1.5;
text-align: center;
}
.hc-body .hc-block-help {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 20px;
}
.hc-body :is(.hc-help-articles, .hc-help-lesson) {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-card);
padding: 24px;
}
.hc-body :is(.hc-help-articles, .hc-help-lesson) > * {
margin: 0;
}
.hc-body .hc-block-help .hc-block-title {
font-size: 20px;
}
.hc-body .hc-help-links {
display: grid;
gap: 4px;
padding: 0;
list-style: none;
}
.hc-body .hc-help-links > li {
margin: 0;
}
.hc-body .hc-help-links a {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 18px;
align-items: center;
gap: 12px;
margin-inline: -12px;
border-radius: 12px;
color: var(--brand-navy);
padding: 10px 12px;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.15s var(--hc-j-ease);
}
.hc-body .hc-help-links a::before {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--hc-j-i-file) center / 18px no-repeat var(--surface-selected);
content: "";
}
.hc-body .hc-help-links a::after {
width: 18px;
height: 18px;
background: var(--hc-j-i-go) center / 18px no-repeat;
content: "";
transition: transform 0.26s var(--hc-j-ease);
}
.hc-body .hc-help-links a:hover {
background: var(--surface-wash);
}
.hc-body .hc-help-links a:hover::after {
background-image: var(--hc-j-i-go-on);
transform: translateX(4px);
}
.hc-body .hc-help-lesson::before {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--hc-j-i-award) center / 22px no-repeat var(--brand-navy);
content: "";
}
.hc-body .hc-help-lesson > .hc-block-eyebrow {
color: var(--mint-ink);
}
.hc-body .hc-help-lesson > p:not([class]) {
color: var(--ink-soft);
font-size: 15px;
}
.hc-body > :is(.hc-block-jobs, .hc-block-stories) {
content-visibility: visible;
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 20px;
padding: 0;
list-style: none;
counter-reset: hc-job;
}
.hc-body .hc-block-stories {
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) > li {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 0;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-card);
padding: 24px;
counter-increment: hc-job;
transition: border-color 0.26s var(--hc-j-ease), box-shadow 0.26s var(--hc-j-ease), transform 0.26s var(--hc-j-ease);
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) > li > * {
margin: 0;
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) > li:is(:hover, :has(a:focus-visible)) {
border-color: rgb(0 158 245 / 45%);
box-shadow: var(--shadow-lift);
transform: translateY(-3px);
}
.hc-body :is(.hc-block-jobs .hc-block-title, .hc-story-more) a::before {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 16px;
content: "";
}
.hc-body :is(.hc-block-jobs .hc-block-title, .hc-story-more) a:focus-visible {
outline: none;
}
.hc-body :is(.hc-block-jobs .hc-block-title, .hc-story-more) a:focus-visible::before {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.hc-body ol.hc-block-jobs > li::before {
display: grid;
width: 44px;
height: 44px;
place-items: center;
margin-bottom: 6px;
border-radius: 12px;
background: var(--surface-selected);
color: var(--ink-selected);
font-size: 15px;
font-weight: 900;
content: counter(hc-job, decimal-leading-zero);
transition: background-color 0.26s var(--hc-j-ease), color 0.26s var(--hc-j-ease);
}
.hc-body ol.hc-block-jobs > li:is(:hover, :has(a:focus-visible))::before {
background: var(--brand-navy);
color: var(--brand-mint);
}
.hc-body .hc-block-jobs > li::after {
position: absolute;
top: 24px;
right: 24px;
width: 22px;
height: 22px;
background: var(--hc-j-i-go-on) center / 22px no-repeat;
content: "";
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.26s var(--hc-j-ease), transform 0.26s var(--hc-j-ease);
}
.hc-body .hc-block-jobs > li:is(:hover, :has(a:focus-visible))::after {
opacity: 1;
transform: none;
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) .hc-block-title {
font-size: 20px;
line-height: 1.3;
}
.hc-body .hc-block-jobs .hc-block-title a {
color: inherit;
text-decoration: none;
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) p:not([class]) {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.6;
}
.hc-body .hc-story-org {
display: flex;
align-items: center;
gap: 12px;
color: var(--brand-navy);
font-size: 15.5px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-story-mark {
display: grid;
width: 44px;
height: 44px;
flex: none;
place-items: center;
border-radius: 50%;
background: var(--brand-navy);
color: var(--brand-mint);
font-size: 15px;
}
.hc-body .hc-story-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hc-body .hc-story-tag {
border-radius: 6px;
background: var(--surface-tint);
color: var(--blue-ink);
padding: 5px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-block-stories blockquote {
border: 0;
background: none;
padding: 0;
font-style: normal;
quotes: "\201C" "\201D";
}
.hc-body .hc-block-stories blockquote > p:not([class]) {
margin: 0;
color: var(--brand-navy);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.45;
}
.hc-body .hc-block-stories blockquote p::before {
content: open-quote;
}
.hc-body .hc-block-stories blockquote p::after {
content: close-quote;
}
.hc-body .hc-story-by {
color: var(--ink-muted);
font-size: 14.5px;
}
.hc-body .hc-story-by strong {
color: var(--brand-navy);
}
.hc-body .hc-block-stories > li > .hc-story-more {
margin-top: auto;
padding-top: 6px;
}
.hc-body .hc-story-more a {
color: var(--action);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
.hc-body .hc-story-end {
white-space: nowrap;
}
.hc-body .hc-story-more .hc-story-end::after {
display: inline-block;
width: 18px;
height: 18px;
margin-left: 8px;
background: var(--hc-j-i-go-on) center / 18px no-repeat;
vertical-align: -4px;
content: "";
transition: transform 0.26s var(--hc-j-ease);
}
.hc-body .hc-block-stories > li:is(:hover, :has(a:focus-visible)) .hc-story-end::after {
transform: translateX(4px);
}
.hc-body .hc-block-faq {
max-width: 780px;
}
.hc-body .hc-block-faq > h2 {
margin-top: 0;
padding-bottom: 0;
font-size: 34px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.12;
}
@media (max-width: 768px) {
.hc-body .hc-block-faq > h2 {
font-size: 26px;
line-height: 1.15;
}
}
.hc-body .hc-block-faq .hc-faq-list {
margin-top: 20px;
}
.hc-body .hc-block-faq .hc-faq-list details > div :where(p) {
margin: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
}
@media (prefers-reduced-motion: reduce) {
.hc-body .hc-live-badge::before {
animation: none;
}
.hc-body :is(.hc-kit-sheet, .hc-kit-file),
.hc-body .hc-help-links a::after {
transition: none;
}
.hc-body :is(.hc-block-jobs, .hc-block-stories) > li,
.hc-body .hc-block-jobs > li::after,
.hc-body .hc-story-end::after {
transform: none !important;
}
}
@media (max-width: 900px) {
.hc-body :is(.hc-block-kit, .hc-block-help) {
grid-template-columns: minmax(0, 1fr);
}
.hc-body .hc-kit-stack {
display: none;
}
}
@media (max-width: 640px) {
.hc-body :is(.hc-kit-cover, .hc-kit-items) {
padding: 20px;
}
.hc-body .hc-block-kit {
border-radius: 18px;
}
.hc-body .hc-kit-feature {
grid-template-columns: minmax(0, 1fr);
}
.hc-body .hc-kit-feature::before {
grid-row: auto;
margin-bottom: 8px;
}
.hc-body .hc-kit-feature > * {
grid-column: 1;
}
.hc-body .hc-kit-file {
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 12px;
padding: 12px;
}
.hc-body .hc-kit-type {
width: 40px;
height: 40px;
}
.hc-body .hc-block-live {
padding: 20px 16px;
}
.hc-body .hc-live-times > li {
padding: 10px;
}
.hc-body :is(.hc-help-articles, .hc-help-lesson, .hc-block-jobs > li, .hc-block-stories > li) {
padding: 20px 18px;
}
.hc-body .hc-block-jobs > li::after {
top: 20px;
right: 18px;
}
}
@media print {
.hc-body :is(.hc-block-kit, .hc-block-live, .hc-help-articles, .hc-help-lesson, .hc-block-jobs > li, .hc-block-stories > li) {
box-shadow: none !important;
break-inside: avoid;
}
.hc-body .hc-kit-cover {
border: 1px solid #999;
background: #fff;
color: #000;
}
.hc-body .hc-kit-cover :is(.hc-block-title, p, li) {
color: #000 !important;
}
.hc-body .hc-kit-stack {
display: none;
}
}