@import"https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@75..125,400;75..125,700&family=Libertinus+Serif:wght@400;600;700&display=swap";

*,
:before,
:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,
:after {
    --tw-content: ""
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

button,
[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-width: 320px;
    background: #fbf9f1
}

a {
    outline-offset: 4px
}

a:focus-visible {
    outline: 3px solid #ff5f64
}

.comic-button {
    display: inline-flex;
    --tw-rotate: -1.5deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-width: 3px;
    --tw-border-opacity: 1;
    border-color: rgb(37 22 14 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 95 100 / var(--tw-bg-opacity, 1));
    padding: 1rem 2rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 4px 4px 0 #25160e;
    --tw-shadow-colored: 4px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.comic-button:hover {
    --tw-translate-y: -.125rem;
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.comic-button:focus-visible {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 768px) {
    .comic-button {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.section-label {
    display: inline-block;
    --tw-rotate: -1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(223 232 166 / var(--tw-bg-opacity, 1));
    padding: .25rem .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -.04em;
    --tw-text-opacity: 1;
    color: rgb(27 28 23 / var(--tw-text-opacity, 1))
}

.section-label-dark {
    border-width: 3px;
    --tw-border-opacity: 1;
    border-color: rgb(37 22 14 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(37 22 14 / var(--tw-bg-opacity, 1));
    padding: .5rem 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 6px 6px 0 #25160e;
    --tw-shadow-colored: 6px 6px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nav-link {
    display: inline-block;
    padding: .25rem .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.nav-link:hover {
    --tw-text-opacity: 1;
    color: rgb(255 95 100 / var(--tw-text-opacity, 1))
}

.nav-link.active {
    --tw-rotate: -1.5deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(255 95 100 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.-right-12 {
    right: -3rem
}

.top-0 {
    top: 0
}

.top-16 {
    top: 4rem
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-16 {
    margin-top: 4rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-square {
    aspect-ratio: 1 / 1
}

.h-16 {
    height: 4rem
}

.h-20 {
    height: 5rem
}

.h-7 {
    height: 1.75rem
}

.h-9 {
    height: 2.25rem
}

.h-full {
    height: 100%
}

.min-h-screen {
    min-height: 100vh
}

.w-16 {
    width: 4rem
}

.w-7 {
    width: 1.75rem
}

.w-9 {
    width: 2.25rem
}

.w-\[250px\] {
    width: 250px
}

.w-full {
    width: 100%
}

.max-w-\[1024px\] {
    max-width: 1024px
}

.max-w-\[1152px\] {
    max-width: 1152px
}

.max-w-\[1216px\] {
    max-width: 1216px
}

.max-w-\[1280px\] {
    max-width: 1280px
}

.max-w-\[510px\] {
    max-width: 510px
}

.max-w-\[545px\] {
    max-width: 545px
}

.max-w-\[700px\] {
    max-width: 700px
}

.shrink-0 {
    flex-shrink: 0
}

.-rotate-3 {
    --tw-rotate: -3deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-6 {
    --tw-rotate: 6deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-\[-1deg\] {
    --tw-rotate: -1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-\[1deg\] {
    --tw-rotate: 1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scroll-mt-20 {
    scroll-margin-top: 5rem
}

.flex-wrap {
    flex-wrap: wrap
}

.items-center {
    align-items: center
}

.justify-between {
    justify-content: space-between
}

.gap-12 {
    gap: 3rem
}

.gap-14 {
    gap: 3.5rem
}

.gap-16 {
    gap: 4rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.overflow-x-hidden {
    overflow-x: hidden
}

.rounded {
    border-radius: .25rem
}

.rounded-\[42\%\] {
    border-radius: 42%
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.border-\[3px\] {
    border-width: 3px
}

.border-\[5px\] {
    border-width: 5px
}

.border-y-\[3px\] {
    border-top-width: 3px;
    border-bottom-width: 3px
}

.border-b-\[3px\] {
    border-bottom-width: 3px
}

.border-t-\[3px\] {
    border-top-width: 3px
}

.border-ink {
    --tw-border-opacity: 1;
    border-color: rgb(37 22 14 / var(--tw-border-opacity, 1))
}

.border-text {
    --tw-border-opacity: 1;
    border-color: rgb(27 28 23 / var(--tw-border-opacity, 1))
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}

.bg-\[\#f0eee7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(240 238 231 / var(--tw-bg-opacity, 1))
}

.bg-\[\#f5f4ec\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 244 236 / var(--tw-bg-opacity, 1))
}

.bg-burgundy {
    --tw-bg-opacity: 1;
    background-color: rgb(100 0 16 / var(--tw-bg-opacity, 1))
}

.bg-coral {
    --tw-bg-opacity: 1;
    background-color: rgb(255 95 100 / var(--tw-bg-opacity, 1))
}

.bg-ink {
    --tw-bg-opacity: 1;
    background-color: rgb(37 22 14 / var(--tw-bg-opacity, 1))
}

.bg-lime {
    --tw-bg-opacity: 1;
    background-color: rgb(223 232 166 / var(--tw-bg-opacity, 1))
}

.bg-olive {
    --tw-bg-opacity: 1;
    background-color: rgb(90 99 46 / var(--tw-bg-opacity, 1))
}

.bg-paper {
    --tw-bg-opacity: 1;
    background-color: rgb(251 249 241 / var(--tw-bg-opacity, 1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.box-decoration-clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.p-1 {
    padding: .25rem
}

.\ !px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.\ !py-2\.5 {
    padding-top: .625rem !important;
    padding-bottom: .625rem !important
}
.py-25 {
    padding-top: .625rem !important;
    padding-bottom: .625rem !important
}
.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem
}

.pt-6 {
    padding-top: 1.5rem
}

.text-center {
    text-align: center
}

.font-display {
    font-family: Anybody, Arial Narrow, sans-serif
}

.font-serif {
    font-family: "Libertinus Serif", Georgia, serif
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-my {
    font-size: clamp(1.65rem, 3vw, 2.35rem)
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.font-bold {
    font-weight: 700
}

.uppercase {
    text-transform: uppercase
}

.leading-6 {
    line-height: 1.5rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-8 {
    line-height: 2rem
}

.leading-\[1\.25\] {
    line-height: 1.25
}

.tracking-\[\.04em\] {
    letter-spacing: .04em
}

.\ !text-coral {
    --tw-text-opacity: 1 !important;
    color: rgb(255 95 100 / var(--tw-text-opacity, 1)) !important
}

.text-coral {
    --tw-text-opacity: 1;
    color: rgb(255 95 100 / var(--tw-text-opacity, 1))
}

.text-muted {
    --tw-text-opacity: 1;
    color: rgb(79 69 64 / var(--tw-text-opacity, 1))
}

.text-text {
    --tw-text-opacity: 1;
    color: rgb(27 28 23 / var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.underline {
    text-decoration-line: underline
}

.shadow-\[7px_7px_0_\#000\] {
    --tw-shadow: 7px 7px 0 #000;
    --tw-shadow-colored: 7px 7px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hero-section {
    position: relative;
    background: #fbf9f1
}

.hero-photo-wrap {
    position: relative;
    padding: 26px 8px 26px 20px
}

.hero-backdrop {
    position: absolute;
    top: 55px;
    right: 22px;
    bottom: 4px;
    left: -14px;
    transform: rotate(-3deg);
    border: 3px solid #25160e;
    background: #dfe8a6
}

.photo-frame {
    position: relative;
    margin: 0;
    transform: rotate(1deg);
    border: 3px solid #25160e;
    background: #fff;
    padding: 9px;
    box-shadow: 7px 7px #25160e
}

.photo-frame img {
    display: block
}

.torn-edge {
    position: absolute;
    z-index: 2;
    bottom: -1px;
    width: 100%;
    height: 33px;
    background: #25160e;
    mask: url(/wa-data/public/site/themes/default1/assets/torn-edge.svg) center / 100% 100%;
    -webkit-mask: url(/wa-data/public/site/themes/default1/assets/torn-edge.svg) center / 100% 100%
}

.speech-card {
    position: relative;
    transform: rotate(1deg);
    border: 3px solid #25160e;
    background: #fff;
    padding: 46px 50px;
    box-shadow: 8px 8px #00000059
}

.fact-sticker {
    position: absolute;
    right: -22px;
    bottom: -30px;
    transform: rotate(-10deg);
    border: 2px solid #25160e;
    background: #dfe8a6;
    padding: 6px 12px;
    font-family: Anybody, sans-serif;
    color: #ff5f64;
    box-shadow: 3px 3px #25160e
}

.method-item {
    text-align: center
}

.method-icon {
    display: grid;
    width: 128px;
    height: 128px;
    margin: 0 auto 24px;
    place-items: center;
    border: 3px solid #25160e;
    filter: drop-shadow(5px 5px 0 #25160e);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat
}

.method-icon img {
    width: 44px;
    height: 44px;
    -o-object-fit: contain;
    object-fit: contain
}

.method-item h3 {
    display: inline-block;
    transform: rotate(-1deg);
    border: 3px solid #25160e;
    background: #fff;
    padding: 3px 11px;
    text-transform: uppercase
}

.method-item p {
    max-width: 370px;
    margin: 14px auto 0;
    color: #4f4540;
    line-height: 1.5
}

.about-photo {
    position: relative;
    transform: rotate(-2deg);
    border: 3px solid #25160e;
    background: #fff;
    padding: 18px 18px 46px;
    box-shadow: 10px 10px #25160e
}

.about-photo:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 54px;
    right: -48px;
    width: 150px;
    height: 205px;
    transform: rotate(5deg);
    border: 3px solid #25160e;
    background: #f4d4cc
}

.about-photo img {
    display: block;
    aspect-ratio: 504 / 659;
    -o-object-fit: cover;
    object-fit: cover
}

.tape {
    position: absolute;
    z-index: 2;
    top: -17px;
    left: 41%;
    width: 98px;
    height: 34px;
    transform: rotate(1deg);
    background: #d9dbc6d1
}

.tag {
    display: inline-block;
    border: 3px solid #25160e;
    background: #dfe8a6;
    padding: 10px 18px;
    box-shadow: 4px 4px #25160e
}

.journey {
    position: relative;
    max-width: 960px;
    margin-inline: auto
}

.journey:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: 24px;
    width: 4px;
    transform: translate(-50%);
    background: #25160e
}

.journey-step {
    position: relative;
    display: flex;
    min-height: 170px;
    align-items: center
}

.journey-step article {
    width: 42%;
    border: 3px solid #25160e;
    padding: 24px 26px;
    box-shadow: 6px 6px #25160e
}

.journey-step article h3 {
    text-transform: uppercase
}

.journey-step article p {
    margin-top: 8px;
    color: #4f4540;
    line-height: 1.5
}

.right-step {
    justify-content: flex-end
}

.left-step {
    justify-content: flex-start;
    text-align: right
}

.journey-step:nth-child(2) article {
    transform: rotate(-1deg)
}

.journey-step:nth-child(3) article {
    transform: rotate(1deg)
}

.journey-step:nth-child(4) article {
    transform: rotate(-1deg)
}

.step-number {
    position: absolute;
    z-index: 2;
    left: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    transform: translate(-50%);
    place-items: center;
    border: 3px solid #25160e;
    border-radius: 50%;
    background: #25160e;
    color: #fff
}

.journey-step:nth-child(1) .step-number {
    background: #ff5f64
}

.journey-step:nth-child(2) .step-number {
    background: #5a632e
}

.journey-step:nth-child(3) .step-number {
    background: #640010
}

.audience-card {
    min-height: 222px;
    border: 3px solid #25160e;
    padding: 26px;
    box-shadow: 6px 6px #25160e
}

.audience-card h3 {
    margin-top: 14px;
    text-transform: uppercase
}

.audience-card p {
    margin-top: 8px;
    line-height: 1.5;
    opacity: .86
}

.audience-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 3px solid #25160e;
    border-radius: 999px;
    background: #25160e
}

.audience-icon img {
    width: 22px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain
}

.audience-card:nth-child(2) .audience-icon {
    background: #fbf9f1
}

.audience-card:nth-child(3) .audience-icon {
    background: #5a632e
}

.audience-card:nth-child(5) .audience-icon {
    background: #ff5f64
}

.price-card {
    width: 307px;
    transform: rotate(-1deg);
    border: 3px solid #25160e;
    background: #fff;
    padding: 48px;
    box-shadow: 12px 12px #25160e
}

.price-card strong {
    display: block;
    font-family: Anybody, sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #ff5f64
}

.price-card span {
    display: block;
    margin-top: 12px;
    color: #4f4540;
    opacity: .65
}

.price-card p {
    margin-top: 24px;
    border-top: 2px dashed #d3c3bd;
    padding-top: 24px;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap
}

.final-cta {
    position: relative;
    display: grid;
    min-height: 414px;
    place-items: center;
    overflow: hidden;
    border-top: 3px solid #25160e;
    background: #ff5f64
}

.final-cta>img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 767px) {
    .hero-photo-wrap {
        order: -1;
        max-width: 410px
    }

    .speech-card {
        padding: 34px 26px
    }

    .journey:before {
        left: 23px
    }

    .journey-step {
        justify-content: flex-end;
        min-height: 215px;
        text-align: left
    }

    .journey-step article {
        width: calc(100% - 65px)
    }

    .step-number {
        left: 23px;
        width: 44px;
        height: 44px
    }

    .about-photo:before {
        right: -18px
    }
}

@media (max-width: 420px) {
    .price-card {
        width: calc(100% - 24px);
        padding: 40px 26px
    }

    .price-card p {
        font-size: 18px
    }

    .comic-button {
        width: 100%
    }
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media (min-width: 768px) {
    .md\:mt-12 {
        margin-top: 3rem
    }

    .md\:mt-24 {
        margin-top: 6rem
    }

    .md\:flex {
        display: flex
    }

    .md\:w-\[270px\] {
        width: 270px
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-\[1\.18fr_\.82fr\] {
        grid-template-columns: 1.18fr .82fr
    }

    .md\:grid-cols-\[304px_1fr\] {
        grid-template-columns: 304px 1fr
    }

    .md\:gap-20 {
        gap: 5rem
    }

    .md\:gap-6 {
        gap: 1.5rem
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .md\:text-\[25px\] {
        font-size: 25px
    }

    .md\:text-\[28px\] {
        font-size: 28px
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .md\:leading-7 {
        line-height: 1.75rem
    }

    .md\:leading-8 {
        line-height: 2rem
    }
}

@media (min-width: 1024px) {
    .lg\:min-h-\[541px\] {
        min-height: 541px
    }

    .lg\:min-h-\[607px\] {
        min-height: 607px
    }

    .lg\:min-h-\[616px\] {
        min-height: 616px
    }

    .lg\:min-h-\[622px\] {
        min-height: 622px
    }

    .lg\:min-h-\[717px\] {
        min-height: 717px
    }

    .lg\:min-h-\[911px\] {
        min-height: 911px
    }

    .lg\:min-h-\[972px\] {
        min-height: 972px
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
    }
}