@import url('/assets/phraseflow-home.css');
/* Shared PhraseFlow identity and practice-screen styling. */
:root {
  --background: 140 28% 98%;
  --foreground: 210 25% 19%;
  --card: 0 0% 100%;
  --card-foreground: 210 25% 19%;
  --primary: 127 52% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 144 24% 94%;
  --secondary-foreground: 127 52% 25%;
  --muted: 145 14% 95%;
  --muted-foreground: 207 12% 42%;
  --accent: 198 75% 41%;
  --accent-foreground: 0 0% 100%;
  --border: 144 18% 87%;
  --ring: 127 52% 32%;
  --level-beginner: 127 52% 32%;
  --level-intermediate: 198 75% 41%;
  --level-advanced: 351 72% 57%;
  --card-shadow: 0 8px 26px -14px rgb(36 48 59 / 24%);
  --gradient-primary: linear-gradient(135deg,#287D32,#47AE46);
  --gradient-hero: linear-gradient(160deg,#f8fdf8,#eef8f1);
  --gradient-card: linear-gradient(135deg,#fff,#fbfefb);
}
.dark {
  --background: 213 23% 11%;
  --foreground: 145 20% 95%;
  --card: 211 21% 16%;
  --card-foreground: 145 20% 95%;
  --primary: 127 54% 50%;
  --primary-foreground: 210 25% 12%;
  --secondary: 211 18% 22%;
  --secondary-foreground: 145 20% 95%;
  --muted: 211 18% 22%;
  --muted-foreground: 150 10% 70%;
  --border: 210 15% 28%;
  --ring: 127 54% 50%;
  --gradient-hero: linear-gradient(160deg,#161f25,#1a2928);
  --gradient-card: linear-gradient(135deg,#1d2a2b,#20302e);
}
header a[href="/"] > div:first-child,
header > div > div:first-child > div:first-child {
  background: url('/phraseflow-mark.svg') center / cover no-repeat !important;
  box-shadow: 0 3px 8px rgb(40 125 50 / 20%);
}
header a[href="/"] > div:first-child svg,
header > div > div:first-child > div:first-child svg { visibility: hidden; }
header a[href="/"] > span,
header > div > div:first-child > span { letter-spacing: -.035em; }
/* Home: topic colors live in the icons; readable cards carry the content. */
main .grid[ class*="max-w-5xl"] > [role="button"] {
  background: #fff;
  border: 1px solid #dcebdd;
  box-shadow: 0 5px 18px -12px rgb(36 48 59 / 25%);
}
main .grid[ class*="max-w-5xl"] > [role="button"]:hover,
main .grid[ class*="max-w-5xl"] > [role="button"]:focus-visible {
  box-shadow: 0 12px 26px -13px rgb(36 48 59 / 28%);
}
main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-0 {
  background: linear-gradient(150deg,#fff 0%,#f8fcf8 100%) !important;
  opacity: 1 !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] h3 { color: #24303b !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] p { color: #53666a !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] span {
  color: #32523e !important;
  background: #e9f5e9 !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 { background: #e1eee3 !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 > div { background: #43ad4a !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 { background: linear-gradient(145deg,#39a748,#287d32) !important; box-shadow: 0 5px 12px -5px rgb(40 125 50 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+2) .w-16.h-16 { background: linear-gradient(145deg,#2998c5,#197db5) !important; box-shadow: 0 5px 12px -5px rgb(25 125 181 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+3) .w-16.h-16 { background: linear-gradient(145deg,#ee8a68,#d75d54) !important; box-shadow: 0 5px 12px -5px rgb(215 93 84 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+4) .w-16.h-16 { background: linear-gradient(145deg,#eebd40,#c98c21) !important; box-shadow: 0 5px 12px -5px rgb(201 140 33 / 38%); }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] { background: #1d2a2b; border-color: #375049; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-0 { background: linear-gradient(150deg,#20302e,#1b292b) !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] h3 { color: #f1f8f2 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] p { color: #b8d2c0 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] span { color: #d6f1da !important; background: #294b37 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 { background: #3d5a47 !important; }
.dark main > .text-center > .inline-flex { background: #244533 !important; color: #c6efcc !important; border-color: #386b48 !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #F7C84B; outline-offset: 3px; }
button:not(:disabled) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:not(:disabled):active { transform: translateY(1px); }
button[aria-label="Ouvir pronúncia"] {
  color: #197DB5 !important;
  background-color: #e6f4fb !important;
  border-color: #bddff0 !important;
}
button[aria-label="Ouvir pronúncia"]:hover { background-color: #d4ecf8 !important; }

/* Practice card: compact toolbar, phrase, pronunciation, aligned actions. */
.card-hover-lift .card-flip-inner { display: grid; height: auto; min-height: 340px; aspect-ratio: auto; }
.card-hover-lift .card-face { position: relative; grid-area: 1 / 1; height: auto; min-width: 0; border-radius: 16px; }
.card-face > div { border: 0 !important; border-radius: 16px; background: hsl(var(--card)) !important; box-shadow: 0 8px 24px -14px rgb(22 47 37 / 24%); }
.card-face > div > .h-1 { display: none; }
.practice-card-body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 44px 1fr auto; align-items: center; gap: 24px 12px; padding: 20px !important; min-height: 340px; }
.practice-card-body > .absolute.top-3.right-3 { position: static; grid-area: 1 / 1; justify-self: start; border-radius: 6px; padding: 5px 9px; background: #edf4ef; color: #3f6850; font-size: 11px; font-weight: 650; }
.practice-card-body > .absolute.top-3.left-3 { position: static; grid-area: 1 / 2; justify-self: end; align-items: center; gap: 5px; }
.practice-card-body > .absolute.top-3.left-3 > button:first-child { display: none; }
.practice-card-body > .absolute.top-3.left-3 button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 12px; border-radius: 10px; background: #f2f5f3; color: #5d7065; box-shadow: none; }
.practice-card-body > .absolute.top-3.left-3 button:hover { background: #e7eee9; color: #244c34; }
.practice-card-body > .absolute.top-3.left-3 button[aria-label="Remover da revisão"] { background: #e2f0e5; color: #287d32; }
.practice-card-body > .text-center { grid-area: 2 / 1 / 3 / -1; margin: 0 !important; padding: 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.practice-card-body .icon-enter { display: none; }
.practice-card-body > .text-center > p.font-extrabold { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: -.025em; font-weight: 750; text-wrap: balance; overflow-wrap: anywhere; }
.practice-phonetic-label { display: block; margin-top: 22px; color: #6b776f; font-size: 11px; font-weight: 500; }
.practice-card-body > .text-center > p.font-mono { margin-top: 5px; font-family: inherit; font-size: 17px; line-height: 1.5; font-weight: 500; color: #47718b !important; overflow-wrap: anywhere; }
.practice-card-body > p.absolute.bottom-3 { display: none; }
.practice-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-area: 3 / 1 / 4 / -1; width: 100%; padding-top: 18px; border-top: 1px solid #edf1ee; }
.practice-listen-button, .practice-translate-button, .practice-back-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 10px; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.35; cursor: pointer; }
.practice-listen-button { border: 1px solid transparent; background: #287d32; color: #fff; }
.practice-listen-button:hover:not(:disabled) { background: #206c29; }
.practice-listen-button:disabled { opacity: .7; cursor: wait; }
.practice-translate-button, .practice-back-button { border: 1px solid #dce6df; background: #f5f8f6; color: #345e43; }
.practice-translate-button:hover, .practice-back-button:hover { background: #e9f1ec; }
.practice-card-actions svg, .practice-back-button svg { width: 18px; height: 18px; flex: none; }
.practice-card-actions button:focus-visible, .practice-back-button:focus-visible { outline: 2px solid #287d32; outline-offset: 3px; }
.practice-back-button { grid-area: 3 / 1 / 4 / -1; width: 100%; }
.card-face-back > div { background: #edf6ef !important; }
.card-face-back .practice-card-body > .text-center { flex-direction: column-reverse; gap: 20px; }
.card-face-back .practice-card-body > .text-center > .w-10 { display: none; }
.card-face-back .practice-card-body > .text-center > p.font-extrabold { color: #234c31; }
.card-face-back .space-y-0\.5 > p:first-child { color: #55705e; font-size: 15px; line-height: 1.5; }
.card-face-back .space-y-0\.5 > p.font-mono { display: none; }
.practice-card-body ::selection { color: #173f25; background: #d3e9d8; }
.practice-record-hint { margin: 8px 0 0 74px; color: #427b53; font-size: 12px; font-weight: 650; line-height: 1.35; }
button.practice-recording-active { width: auto !important; min-width: 116px; padding: 0 16px; gap: 8px; border-radius: 16px !important; }
button.practice-recording-active::after { content: "Pronto"; font-size: 13px; font-weight: 750; line-height: 1; }
html[lang="it"] button.practice-recording-active::after { content: "Fatto"; }
.dark .practice-phonetic-label { color: #b3c2b8; }
.dark .practice-card-body > .text-center > p.font-mono { color: #a3c8e0 !important; }
.dark .practice-card-body > .absolute.top-3.right-3, .dark .practice-card-body > .absolute.top-3.left-3 button { background: #2b3d33; color: #bfd5c6; }
.dark .practice-listen-button { background: #87ce94; color: #13361e; }
.dark .practice-listen-button:hover:not(:disabled) { background: #a3dfa9; }
.dark .practice-translate-button, .dark .practice-back-button { background: #26382e; border-color: #435b4b; color: #d6ecdc; }
.dark .practice-card-actions { border-color: #34483b; }
.dark .card-face-back > div { background: #21382a !important; }
.dark .card-face-back .practice-card-body > .text-center > p.font-extrabold { color: #e1f3e6; }
.dark .card-face-back .space-y-0\.5 > p:first-child { color: #b5cebd; }
.dark .practice-record-hint { color: #a6ddb2; }
@media (max-width: 360px) {
  .practice-card-body { padding: 16px !important; gap: 20px 10px; }
  .practice-card-body > .text-center > p.font-extrabold { font-size: 24px; }
  .practice-listen-button, .practice-translate-button { font-size: 12px; gap: 6px; padding-inline: 7px; }
}
.card-face > div[style*="border-left"] { border-left-color: #65CD50 !important; }
.card-face [style*="background-color: rgb(59, 130, 246)"] { background-color: #65CD50 !important; }
.bg-primary { box-shadow: inset 0 -2px rgb(0 0 0 / 9%); }
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled) { transition: none; }
}

/* Practice palette: neutral surfaces, blue actions, semantic score colors. */
body:has(.practice-card-body) {
  --background: 220 23% 97%;
  --foreground: 220 25% 19%;
  --card: 0 0% 100%;
  --primary: 221 73% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 20% 94%;
  --secondary-foreground: 220 16% 37%;
  --muted: 220 20% 95%;
  --muted-foreground: 220 11% 44%;
  --border: 220 18% 88%;
  --ring: 221 73% 53%;
  --gradient-hero: linear-gradient(#f5f6f9,#f5f6f9);
}
body:has(.practice-card-body) .gradient-hero { background: #f5f6f9; }
body:has(.practice-card-body) header { background: #fff; backdrop-filter: none; }
body:has(.practice-card-body) header a[href="/"] > div:first-child { background: #3267df !important; box-shadow: none; }
body:has(.practice-card-body) header a[href="/"] > div:first-child svg { visibility: visible; }
body:has(.practice-card-body) .card-face > div { box-shadow: 0 7px 24px -14px rgb(36 48 70 / 20%); }
body:has(.practice-card-body) .practice-card-body > .absolute.top-3.right-3,
body:has(.practice-card-body) .practice-card-body > .absolute.top-3.left-3 button { background: #f0f2f6; color: #667084; }
body:has(.practice-card-body) .practice-card-body > .absolute.top-3.left-3 button:hover { background: #e5ebf6; color: #315aaa; }
body:has(.practice-card-body) .practice-card-body > .absolute.top-3.left-3 button[aria-label="Remover da revisão"] { background: #e9effe; color: #3267df; }
body:has(.practice-card-body) .practice-phonetic-label { color: #737c8d; }
body:has(.practice-card-body) .practice-card-body > .text-center > p.font-mono { color: #59677e !important; }
body:has(.practice-card-body) .practice-card-actions { border-color: #edf0f5; }
body:has(.practice-card-body) .practice-listen-button { background: #3267df; color: #fff; }
body:has(.practice-card-body) .practice-listen-button:hover:not(:disabled) { background: #2755be; }
body:has(.practice-card-body) .practice-translate-button,
body:has(.practice-card-body) .practice-back-button { background: #f4f6fa; border-color: #e0e5ee; color: #4b5c77; }
body:has(.practice-card-body) .practice-translate-button:hover,
body:has(.practice-card-body) .practice-back-button:hover { background: #e9eef8; }
body:has(.practice-card-body) .card-face-back > div { background: #edf2ff !important; }
body:has(.practice-card-body) .card-face-back .practice-card-body > .text-center > p.font-extrabold { color: #284479; }
body:has(.practice-card-body) .card-face-back .space-y-0\.5 > p:first-child { color: #5f7190; }
body:has(.practice-card-body) .practice-record-hint { color: #63718a; }
body:has(.practice-card-body) .card-hover-lift + div .bg-gradient-to-br:not(button) { background-image: none; }
body:has(.practice-card-body) .card-hover-lift + div .rounded-2xl { background-color: #fff; }
body:has(.practice-card-body) .card-hover-lift + div .rounded-xl.animate-fade-in.border { background-color: #fff; border-color: #e0e5ee; }
body:has(.practice-card-body) button[aria-label="Começar gravação"] { background: #3267df; box-shadow: none; }
body:has(.practice-card-body) .card-hover-lift + div .blur-md { display: none; }
body:has(.practice-card-body) .practice-card-actions button:focus-visible,
body:has(.practice-card-body) .practice-back-button:focus-visible { outline-color: #3267df; }
body:has(.practice-card-body) .practice-card-body ::selection { background: #dce6ff; color: #253e70; }
.dark body:has(.practice-card-body) { --background: 222 24% 11%; --foreground: 220 20% 94%; --card: 222 21% 16%; --secondary: 222 20% 22%; --muted: 222 20% 20%; --muted-foreground: 220 14% 70%; --border: 222 16% 28%; --primary: 220 90% 70%; }
.dark body:has(.practice-card-body) .gradient-hero { background: #151b27; }
.dark body:has(.practice-card-body) header { background: #1b2332; }
.dark body:has(.practice-card-body) .practice-card-body > .absolute.top-3.right-3,
.dark body:has(.practice-card-body) .practice-card-body > .absolute.top-3.left-3 button,
.dark body:has(.practice-card-body) .practice-translate-button,
.dark body:has(.practice-card-body) .practice-back-button { background: #283346; border-color: #3b4a64; color: #c1cde3; }
.dark body:has(.practice-card-body) .practice-phonetic-label,
.dark body:has(.practice-card-body) .practice-record-hint { color: #a9b7cf; }
.dark body:has(.practice-card-body) .practice-card-body > .text-center > p.font-mono { color: #bac9e2 !important; }
.dark body:has(.practice-card-body) .practice-card-actions { border-color: #34415a; }
.dark body:has(.practice-card-body) .card-face-back > div { background: #202e48 !important; }
.dark body:has(.practice-card-body) .card-face-back .practice-card-body > .text-center > p.font-extrabold { color: #e1eaff; }
.dark body:has(.practice-card-body) .card-face-back .space-y-0\.5 > p:first-child { color: #b1c1df; }

/* Shared translation face: all topics and languages, light and dark mode. */
html body:has(.practice-card-body) .card-face-back > div { background: #2454c6 !important; border-color: #2454c6; color: #fff; }
html body:has(.practice-card-body) .card-face-back .practice-card-body > .text-center > p.font-extrabold { color: #fff; font-size: clamp(26px, 5vw, 36px); line-height: 1.25; }
html body:has(.practice-card-body) .card-face-back .space-y-0\.5 > p:first-child { color: #edf3ff; }
html body:has(.practice-card-body) .card-face-back .practice-back-button { background: transparent; border-color: #b8ccff; color: #fff; }
html body:has(.practice-card-body) .card-face-back .practice-back-button:hover { background: #ffffff1f; }
html body:has(.practice-card-body) .card-face-back .practice-back-button:focus-visible { outline-color: #fff; }
.dark body:has(.practice-card-body) .card-hover-lift + div .rounded-2xl { background-color: #1b2332; }
.dark body:has(.practice-card-body) .card-hover-lift + div .rounded-xl.animate-fade-in.border { background-color: #1b2332; border-color: #34415a; }

/* Home composition: one starting point, then a browsable phrasebook. */
main:has(.grid[ class*="max-w-5xl"]) { padding-top: clamp(32px,6vw,72px); }
main:has(.grid[ class*="max-w-5xl"]) > .text-center {
  max-width: 1024px;
  margin: 0 auto 38px;
  text-align: left;
}
main:has(.grid[ class*="max-w-5xl"]) > .text-center > .inline-flex { display: none; }
main:has(.grid[ class*="max-w-5xl"]) h1 {
  max-width: 15ch;
  margin-bottom: 12px;
  font-size: clamp(2.5rem,6vw,4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
main:has(.grid[ class*="max-w-5xl"]) > .text-center > p {
  color: #53666a;
  font-size: clamp(1rem,2vw,1.15rem);
  line-height: 1.45;
}
main .grid[ class*="max-w-5xl"] { gap: 14px !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] {
  min-height: 154px;
  padding: 21px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  animation: none !important;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:hover {
  transform: translateY(-2px) !important;
  border-color: #9dcea4;
  box-shadow: 0 10px 22px -16px rgb(36 48 59 / 24%) !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-x-0 { display: none; }
main .grid[ class*="max-w-5xl"] > [role="button"] > .relative.z-10 {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  column-gap: 16px;
  align-content: start;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-start.justify-between.mb-4 {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  padding: 10px;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 svg { width: 28px; height: 28px; }
main .grid[ class*="max-w-5xl"] > [role="button"] h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 1px 0 4px;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}
main .grid[ class*="max-w-5xl"] > [role="button"] p {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 12px;
  font-size: .875rem;
  line-height: 1.35;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #5a6f62 !important;
  font-size: .76rem;
  font-weight: 600;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span + span::before {
  content: '•';
  margin-right: 8px;
  color: #8aae93;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .mt-3.w-full.h-1 {
  grid-column: 1 / -1;
  margin-top: 18px;
  height: 3px;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child {
  min-height: 318px;
  border: 0;
  background: #174c36;
  color: #fff;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .absolute.inset-0 {
  background: linear-gradient(128deg,#174c36 0%,#23794a 100%) !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .relative.z-10 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .flex.items-start.justify-between.mb-4 { margin-bottom: auto; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .w-16.h-16 {
  width: 70px;
  height: 70px;
  background: #65cd50 !important;
  color: #153b2b;
  box-shadow: none;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .w-16.h-16 svg { width: 38px; height: 38px; color: #153b2b !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child h3 {
  max-width: 18ch;
  margin-bottom: 6px;
  color: #fff !important;
  font-size: clamp(1.65rem,3vw,2.25rem);
  line-height: 1.08;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child p {
  margin-bottom: 16px;
  color: #d9f4df !important;
  font-size: .98rem;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .flex.items-center.justify-between span { color: #e4f8e8 !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .mt-3.w-full.h-1 { background: rgb(255 255 255 / 24%) !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .mt-3.w-full.h-1 > div { background: #a4ec7e !important; }
.dark main:has(.grid[ class*="max-w-5xl"]) > .text-center > p { color: #b8d2c0; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span { color: #b8d2c0 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { background: #174c36; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .absolute.inset-0 { background: linear-gradient(128deg,#174c36,#23794a) !important; }
@media (min-width: 1024px) {
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { grid-column: span 2; }
}
@media (max-width: 639px) {
  main:has(.grid[ class*="max-w-5xl"]) { padding-top: 36px; }
  main:has(.grid[ class*="max-w-5xl"]) > .text-center { margin-bottom: 28px; }
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { min-height: 294px; }
}