.gf-features,
.gf-access,
.gf-footer {
  --gf-paper: #faf7f0;
  --gf-ink: #262344;
  --gf-apricot: #ffa66c;
  font-family: 'DM Sans', sans-serif;
  color: var(--gf-ink);
}
.gf-features {
  padding: clamp(4.6rem, 8.5vw, 8rem) 0 clamp(5.25rem, 9vw, 8.5rem);
  background: var(--gf-paper);
  scroll-margin-top: 5rem;
}
.gf-features-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.8rem 3rem;
  margin-bottom: clamp(2rem, 3.6vw, 3.5rem);
}
.gf-features-intro h2,
.gf-access-copy h2 {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(3rem, 5.4vw, 5.25rem);
  line-height: .96;
  letter-spacing: -.072em;
  font-weight: 590;
  text-wrap: balance;
}
.gf-features-intro p,
.gf-feature figcaption p,
.gf-access-copy p {
  margin: 0;
  color: #534f5b;
  line-height: 1.55;
  letter-spacing: -.014em;
}
.gf-features-intro p { max-width: 29ch; padding-bottom: .12rem; }
.gf-triptych {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
}
.gf-feature { min-width: 0; margin: 0; }
.gf-art {
  container-type: inline-size;
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  height: clamp(13.6rem, 24vw, 21.5rem);
  overflow: hidden;
  isolation: isolate;
}
.gf-feature figcaption { display: block; padding-top: 1.45rem; }
.gf-feature figcaption h3 {
  margin: 0 0 .5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.3rem, 2.03vw, 1.8rem);
  line-height: 1.08;
  font-weight: 610;
  letter-spacing: -.052em;
}
.gf-feature figcaption p { max-width: 37ch; font-size: 1rem; }
.gf-accounts { background: #302c60; color: #faf7f0; }
.gf-accounts::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -11% -31% 0 58%;
  background: repeating-linear-gradient(120deg, transparent 0 17px, #b3a7dc52 17px 18px);
  clip-path: polygon(78% 0, 100% 0, 100% 100%, 0 100%, 0 70%);
  opacity: .74;
}
.gf-accounts-top,
.gf-accounts-amount,
.gf-accounts-lines { position: absolute; left: 8%; }
.gf-accounts-top {
  top: 10.5%; right: 8%; display: flex; justify-content: space-between;
  align-items: baseline; font-size: clamp(.76rem, 4.1cqw, 1.02rem); font-weight: 550;
}
.gf-account-period { color: #d5cfe9; font-size: .75em; }
.gf-accounts-amount {
  top: 19%;
  font-family: 'DM Sans', sans-serif;
  font-size: 17cqw;
  font-weight: 490;
  line-height: 1;
  letter-spacing: -.085em;
}
.gf-accounts-lines { right: 16%; bottom: 11%; }
.gf-accounts-lines div {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .36em; line-height: 1.2;
  font-size: clamp(.69rem, 3.7cqw, .94rem);
}
.gf-accounts-lines b { font-weight: 600; }
.gf-accounts-lines i { display: block; height: 1.85cqw; min-height: 4px; }
.gf-income-rule { width: 100%; margin-bottom: 4cqw; background: #ffa66c; }
.gf-cost-rule { width: 49.4%; background: #c7bbea; }
.gf-stock { background: #b77741; }
.gf-stock > img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: 48% 35%; transition: transform .6s ease-out;
}
.gf-stock-ticket {
  position: absolute; left: 8%; bottom: 10%; width: 72%; max-width: 16.1rem;
  box-sizing: border-box; padding: 4cqw 4.5cqw;
  color: #322b36; background: #fcf4e1;
  box-shadow: 3px 5px 8px #4d2c2233;
  transform: rotate(-6deg);
}
.gf-ticket-top, .gf-ticket-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: .3em; }
.gf-ticket-top { padding-bottom: 2.1cqw; color: #655547; border-bottom: 1px solid #bba483; font-size: clamp(.52rem, 2.9cqw, .75rem); }
.gf-stock-ticket > strong { display: block; margin: 2.7cqw 0 3.3cqw; font-size: 7.6cqw; line-height: 1.1; letter-spacing: -.06em; font-weight: 600; }
.gf-ticket-bottom { font-size: clamp(.55rem, 3cqw, .76rem); }
.gf-ticket-bottom b { margin-left: .12em; font-weight: 750; }
.gf-invoice {
  background-color: #d7cbed;
  background-image: repeating-linear-gradient(0deg, transparent 0 32px, #9f8bb344 32px 33px), repeating-linear-gradient(90deg, transparent 0 32px, #9f8bb344 32px 33px);
  display: grid; place-items: center;
}
.gf-bill {
  position: relative; width: 73%; box-sizing: border-box;
  margin-top: 3.6%; padding: 5cqw 5.2cqw 4cqw;
  transform: rotate(5deg); background: #fffaf1; color: #302b43;
  filter: drop-shadow(1px 4px 4px #55466d30);
  transition: transform .45s ease-out;
}
.gf-bill::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px;
  background: linear-gradient(135deg, #fffaf1 25%, transparent 25%) 0 0/9px 9px repeat-x, linear-gradient(225deg, #fffaf1 25%, transparent 25%) 0 0/9px 9px repeat-x;
}
.gf-bill-heading, .gf-bill-number, .gf-bill-items > div, .gf-bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; }
.gf-bill-heading { align-items: center; border-bottom: 1px solid #958b95; padding-bottom: 2.6cqw; line-height: 1; font-size: clamp(.58rem, 3cqw, .82rem); font-weight: 650; }
.gf-printed-flower { font-size: 1.5em; }
.gf-bill-number { margin: 3.4cqw 0 4cqw; }
.gf-bill-number strong { font-size: 7.6cqw; line-height: 1; letter-spacing: -.07em; font-weight: 600; }
.gf-bill-number span { font-size: clamp(.53rem, 2.6cqw, .72rem); }
.gf-bill-items > div { margin-top: 2.5cqw; font-size: clamp(.57rem, 2.85cqw, .8rem); line-height: 1.22; }
.gf-bill-items b { font-weight: 650; }
.gf-bill-items small { display: block; margin-top: .22em; font-size: .86em; color: #655f6c; }
.gf-bill-total { margin-top: 3cqw; padding-top: 2.4cqw; border-top: 1px solid #958b95; font-size: 4cqw; font-weight: 600; }
.gf-bill-total strong { font-size: 6.2cqw; line-height: 1; font-weight: 640; letter-spacing: -.065em; }
.gf-access { overflow: hidden; background: var(--gf-apricot); position: relative; }
.gf-access-inner {
  position: relative; display: grid; isolation: isolate;
  grid-template-columns: 1.55fr 1fr; align-items: center;
  min-height: clamp(21rem, 33vw, 29rem);
}
.gf-access-copy { position: relative; z-index: 1; padding: clamp(3rem, 5.5vw, 5.7rem) 0; }
.gf-access-copy h2 { font-size: clamp(3.3rem, 6.6vw, 6.4rem); }
.gf-access-copy p { margin-top: 1.1rem; color: #482e39; }
.gf-access-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  margin-top: 1.45rem; padding: .87rem 1.2rem;
  background: #292642; color: #fff9ed; border: 1px solid #292642; border-radius: 100px;
  font-size: .96rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15;
  text-decoration: none;
}
.gf-access-button span { transition: transform .24s ease; }
.gf-access-button:focus-visible, .gf-footer a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.gf-fold-art { position: relative; justify-self: end; width: 83%; max-width: 22.4rem; aspect-ratio: 1; transform: rotate(-8deg); }
.gf-fold-art i { position: absolute; display: block; }
.gf-fold-echo { inset: 0; border: 1px solid #764c53; transform: translate(var(--gf-d), var(--gf-d)); }
.gf-fold-echo-one { --gf-d: -12%; }
.gf-fold-echo-two { --gf-d: -8%; }
.gf-fold-echo-three { --gf-d: -4%; }
.gf-fold-sheet { inset: 0; background: #282443; clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 35% 100%, 0 65%); }
.gf-fold-crease { inset: 0; clip-path: polygon(0 0, 65% 0, 100% 35%, 65% 35%, 65% 65%, 35% 65%, 35% 100%, 0 65%); background: #3a335c; }
.gf-fold-tip { inset: 0; clip-path: polygon(65% 0, 100% 35%, 65% 35%); background: #fff1db; }
.gf-footer { background: var(--gf-paper); }
.gf-footer-inner { min-height: 7.5rem; display: flex; align-items: center; gap: clamp(1.25rem, 3.3vw, 3rem); }
.gf-footer a { color: var(--gf-ink); text-decoration: none; }
.gf-footer-brand { display: inline-flex; align-items: center; gap: .53rem; font-size: 1.55rem; font-weight: 720; letter-spacing: -.065em; }
.gf-footer-brand img { width: 1.92rem; height: 1.92rem; border-radius: .35rem; }
.gf-footer-maker, .gf-footer nav a { font-size: .92rem; }
.gf-footer-maker span { margin-left: .1em; }
.gf-footer nav { display: flex; gap: clamp(1rem, 2.25vw, 2rem); margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .gf-feature:hover .gf-stock > img { transform: scale(1.025); }
  .gf-feature:hover .gf-bill { transform: translateY(-1%) rotate(3deg); }
  .gf-access-button:hover span { transform: translate(2px, -2px); }
  .gf-footer-maker:hover, .gf-footer nav a:hover { text-decoration: underline; text-underline-offset: .25em; }
}
@media (max-width: 900px) and (min-width: 741px) {
  .gf-accounts-lines { right: 11%; bottom: 14%; }
  .gf-stock-ticket { width: 82%; }
  .gf-bill { width: 86%; }
}
@media (max-width: 740px) {
  .gf-features-intro { display: block; }
  .gf-features-intro p { max-width: 41ch; margin-top: 1rem; }
  .gf-triptych { display: block; }
  .gf-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 1.6rem; }
  .gf-feature + .gf-feature { margin-top: 1.7rem; }
  .gf-feature figcaption { padding: 0; }
  .gf-art { height: auto; aspect-ratio: 1.16; }
  .gf-access-inner { grid-template-columns: 1.5fr .75fr; min-height: 0; }
  .gf-access-copy p { max-width: 29ch; }
}
@media (max-width: 540px) {
  .gf-features { padding-block: 4.2rem; }
  .gf-triptych { display: grid; grid-template-columns: 1fr; gap: 2.6rem; }
  .gf-feature { display: block; }
  .gf-feature + .gf-feature { margin: 0; }
  .gf-art { aspect-ratio: 1.34; }
  .gf-feature figcaption { padding: 1rem 0 0; }
  .gf-feature figcaption h3 { font-size: 1.5rem; }
  .gf-feature figcaption p { max-width: 45ch; }
  .gf-access-inner { display: block; }
  .gf-access-copy h2 { font-size: clamp(2.75rem, 10.8vw, 3.75rem); }
  .gf-access-copy p { max-width: 22ch; font-size: .95rem; }
  .gf-fold-art { position: absolute; right: -12%; bottom: -12%; width: 38%; transform: rotate(-10deg); opacity: .86; }
  .gf-footer-inner { flex-wrap: wrap; gap: 1.5rem 2rem; padding-block: 2rem; }
  .gf-footer-maker { margin-left: auto; }
  .gf-footer nav { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-access-button span, .gf-stock > img, .gf-bill { transition: none; }
  .gf-feature:hover .gf-stock > img, .gf-access-button:hover span { transform: none; }
  .gf-feature:hover .gf-bill { transform: rotate(5deg); }
}
