@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@700&family=Nunito:wght@400;600;700;800;900;1000&display=swap");

:root {
  --ink: #10213d;
  --muted: #5b677a;
  --paper: #fffdf8;
  --cream: #fff3d8;
  --sky: #2f91cf;
  --sky-soft: #dff3ff;
  --orange: #ff5b35;
  --logo-black: #07142b;
  --yellow: #ffd84f;
  --green: #26b58b;
  --red: #d92d20;
  --red-bg: #fff0f0;
  --line: rgba(16, 33, 61, .14);
  --focus: #ffd84f;
  --shadow: 0 24px 58px rgba(8, 34, 66, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, #2f9bd3 0%, #58b6de 45%, #ffd798 78%, #26314e 100%);
  font-family: "Nunito", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 156px;
  background:
    linear-gradient(180deg, rgba(30,42,68,.88), rgba(10,18,35,.96)) 4% 100% / 52px 88px no-repeat,
    linear-gradient(180deg, rgba(22,34,58,.92), rgba(8,16,31,.98)) 10% 100% / 34px 124px no-repeat,
    linear-gradient(180deg, rgba(36,48,72,.86), rgba(11,20,38,.98)) 15% 100% / 74px 66px no-repeat,
    linear-gradient(180deg, rgba(18,31,54,.94), rgba(7,15,30,.99)) 24% 100% / 44px 112px no-repeat,
    linear-gradient(180deg, rgba(36,48,72,.88), rgba(10,19,36,.98)) 30% 100% / 70px 78px no-repeat,
    linear-gradient(180deg, rgba(20,32,55,.96), rgba(8,16,31,1)) 42% 100% / 56px 136px no-repeat,
    linear-gradient(180deg, rgba(31,43,68,.9), rgba(8,17,33,.98)) 49% 100% / 88px 92px no-repeat,
    linear-gradient(180deg, rgba(18,30,54,.94), rgba(7,15,30,1)) 60% 100% / 38px 118px no-repeat,
    linear-gradient(180deg, rgba(34,46,70,.88), rgba(10,19,36,.98)) 66% 100% / 76px 74px no-repeat,
    linear-gradient(180deg, rgba(19,31,55,.96), rgba(7,15,30,1)) 78% 100% / 48px 130px no-repeat,
    linear-gradient(180deg, rgba(34,45,68,.88), rgba(10,18,35,.98)) 84% 100% / 82px 84px no-repeat,
    linear-gradient(180deg, rgba(20,32,55,.94), rgba(8,16,31,1)) 94% 100% / 42px 108px no-repeat;
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 156px;
  background:
    repeating-linear-gradient(90deg, rgba(255,214,112,.76) 0 4px, transparent 4px 13px) 4% 92px / 52px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,226,143,.62) 5px 9px, transparent 9px 16px) 4% 116px / 52px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,226,143,.68) 0 3px, transparent 3px 11px) 10% 54px / 34px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,196,112,.48) 4px 8px, transparent 8px 14px) 10% 86px / 34px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,203,101,.52) 0 5px, transparent 5px 16px) 15% 110px / 74px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,221,148,.42) 7px 12px, transparent 12px 19px) 15% 132px / 74px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,214,121,.62) 0 4px, transparent 4px 13px) 24% 66px / 44px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,176,82,.44) 5px 9px, transparent 9px 15px) 24% 94px / 44px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,226,151,.58) 0 5px, transparent 5px 15px) 30% 104px / 70px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,190,97,.42) 6px 11px, transparent 11px 18px) 30% 126px / 70px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,219,132,.66) 0 4px, transparent 4px 14px) 42% 48px / 56px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,184,91,.46) 5px 10px, transparent 10px 16px) 42% 84px / 56px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,203,104,.62) 0 5px, transparent 5px 17px) 49% 88px / 88px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,234,171,.44) 6px 11px, transparent 11px 20px) 49% 118px / 88px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,225,147,.62) 0 4px, transparent 4px 12px) 60% 58px / 38px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,190,95,.38) 4px 8px, transparent 8px 13px) 60% 92px / 38px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,202,106,.58) 0 5px, transparent 5px 16px) 66% 108px / 76px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,184,92,.36) 6px 11px, transparent 11px 18px) 66% 130px / 76px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,225,145,.72) 0 4px, transparent 4px 13px) 78% 54px / 48px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,197,110,.42) 5px 9px, transparent 9px 15px) 78% 92px / 48px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,199,102,.52) 0 5px, transparent 5px 17px) 84% 98px / 82px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,226,151,.42) 6px 11px, transparent 11px 19px) 84% 122px / 82px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,216,131,.54) 0 4px, transparent 4px 13px) 94% 72px / 42px 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,181,87,.38) 5px 9px, transparent 9px 14px) 94% 108px / 42px 6px no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) 4% 100% / 52px 88px no-repeat,
    linear-gradient(#000 0 0) 10% 100% / 34px 124px no-repeat,
    linear-gradient(#000 0 0) 15% 100% / 74px 66px no-repeat,
    linear-gradient(#000 0 0) 24% 100% / 44px 112px no-repeat,
    linear-gradient(#000 0 0) 30% 100% / 70px 78px no-repeat,
    linear-gradient(#000 0 0) 42% 100% / 56px 136px no-repeat,
    linear-gradient(#000 0 0) 49% 100% / 88px 92px no-repeat,
    linear-gradient(#000 0 0) 60% 100% / 38px 118px no-repeat,
    linear-gradient(#000 0 0) 66% 100% / 76px 74px no-repeat,
    linear-gradient(#000 0 0) 78% 100% / 48px 130px no-repeat,
    linear-gradient(#000 0 0) 84% 100% / 82px 84px no-repeat,
    linear-gradient(#000 0 0) 94% 100% / 42px 108px no-repeat;
  mask:
    linear-gradient(#000 0 0) 4% 100% / 52px 88px no-repeat,
    linear-gradient(#000 0 0) 10% 100% / 34px 124px no-repeat,
    linear-gradient(#000 0 0) 15% 100% / 74px 66px no-repeat,
    linear-gradient(#000 0 0) 24% 100% / 44px 112px no-repeat,
    linear-gradient(#000 0 0) 30% 100% / 70px 78px no-repeat,
    linear-gradient(#000 0 0) 42% 100% / 56px 136px no-repeat,
    linear-gradient(#000 0 0) 49% 100% / 88px 92px no-repeat,
    linear-gradient(#000 0 0) 60% 100% / 38px 118px no-repeat,
    linear-gradient(#000 0 0) 66% 100% / 76px 74px no-repeat,
    linear-gradient(#000 0 0) 78% 100% / 48px 130px no-repeat,
    linear-gradient(#000 0 0) 84% 100% / 82px 84px no-repeat,
    linear-gradient(#000 0 0) 94% 100% / 42px 108px no-repeat;
  opacity: .52;
  pointer-events: none;
  z-index: 0;
  animation: building-lights 5.8s ease-in-out infinite;
}

@keyframes building-lights {
  0%, 100% { opacity: .48; }
  45% { opacity: .66; }
  72% { opacity: .54; }
}

button,
input { font: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 4px solid rgba(255, 216, 79, .95);
  outline-offset: 4px;
}

.site-shell {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.hero {
  width: min(1220px, calc(100% - 34px));
  height: 100vh;
  min-height: 720px;
  margin: 0 auto;
  padding: 16px 0 20px;
  position: relative;
  z-index: 1;
}

.topbar {
  width: min(1000px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: white;
}

.brandmark {
  color: white;
  text-decoration: none;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  font-family: "Fredoka", "Nunito", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 2px 14px rgba(8, 34, 66, .18);
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: .82;
  text-shadow:
    2px 0 0 #fff,
    -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    1.5px 1.5px 0 #fff,
    -1.5px 1.5px 0 #fff,
    1.5px -1.5px 0 #fff,
    -1.5px -1.5px 0 #fff,
    0 4px 10px rgba(8, 34, 66, .2);
}

.logo-gimme {
  color: var(--logo-black);
}

.logo-studocu {
  color: var(--orange);
}

h1 .logo-gimme,
h1 .logo-studocu {
  text-shadow: none;
}

.brand-buddy {
  width: 38px;
  height: 42px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transform: rotate(-4deg);
}

.brand-buddy-head {
  position: absolute;
  inset: 0 4px 11px;
  border: 2px solid var(--ink);
  border-radius: 14px 14px 10px 10px;
  background: var(--orange);
  box-shadow: 3px 3px 0 rgba(16,33,61,.32);
}

.brand-eye {
  position: absolute;
  top: 8px;
  width: 12px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: white;
}

.brand-eye:first-child { left: 5px; }
.brand-eye:nth-child(2) { right: 5px; }

.brand-eye::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.brand-smile {
  position: absolute;
  left: 15px;
  top: 23px;
  width: 10px;
  height: 7px;
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 999px 999px;
}

.brand-buddy-book {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #2bb4e8;
  box-shadow: 3px 3px 0 rgba(16,33,61,.18);
}

.threads-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
  color: white;
  text-decoration: none;
  transition: transform .14s ease, opacity .14s ease;
}

.threads-link img {
  width: 22px;
  height: 22px;
  display: block;
  filter: invert(1);
}

.threads-link:hover {
  transform: translateY(-1px);
  opacity: .86;
}

.hero-stage {
  height: calc(100% - 48px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: clamp(16px, 3vh, 28px) 0 0;
  position: relative;
}

.sky-decor {
  position: absolute;
  inset: 0 calc((100vw - 100%) / -2) 86px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  width: 108px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  filter: drop-shadow(0 10px 18px rgba(8,34,66,.05));
  animation: cloud-left-to-right 24s linear infinite;
  will-change: transform;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  width: 42px;
  height: 42px;
  left: 19px;
  top: -19px;
}

.cloud::after {
  width: 54px;
  height: 54px;
  right: 17px;
  top: -29px;
}

.cloud-one {
  left: -180px;
  top: 8%;
  transform: scale(.72);
  opacity: .5;
  animation-duration: 36s;
  animation-delay: -3s;
}

.cloud-two {
  right: -230px;
  top: 29%;
  transform: scale(.96);
  opacity: .42;
  animation-name: cloud-right-to-left;
  animation-duration: 46s;
  animation-delay: -19s;
}

.cloud-three {
  left: -210px;
  bottom: 18%;
  transform: scale(.58);
  opacity: .28;
  animation-duration: 52s;
  animation-delay: -28s;
}

.cloud-four {
  right: -260px;
  top: 52%;
  transform: scale(.68);
  opacity: .26;
  animation-name: cloud-right-to-left;
  animation-duration: 40s;
  animation-delay: -8s;
}

.cloud-five {
  left: -280px;
  top: 68%;
  transform: scale(.9);
  opacity: .22;
  animation-duration: 58s;
  animation-delay: -37s;
}

.cloud-six {
  right: -190px;
  top: 15%;
  transform: scale(.48);
  opacity: .3;
  animation-name: cloud-right-to-left;
  animation-duration: 32s;
  animation-delay: -14s;
}

@keyframes cloud-left-to-right {
  from { translate: 0 0; }
  to { translate: calc(100vw + 360px) 0; }
}

@keyframes cloud-right-to-left {
  from { translate: 0 0; }
  to { translate: calc(-100vw - 360px) 0; }
}

.flight-path,
.flock-path,
.aircraft,
.aircraft-wing,
.aircraft-tail,
.aircraft-window,
.contrail,
.flock,
.bird {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.flight-path {
  width: 180px;
  height: 86px;
  filter: drop-shadow(0 16px 22px rgba(8,34,66,.11));
  z-index: 1;
}

.flight-path-aircraft-primary {
  left: -230px;
  top: 30%;
  opacity: .58;
  animation: flight-path-primary 28s linear infinite;
}

.flight-path-aircraft-distant {
  right: -210px;
  top: 16%;
  opacity: .34;
  animation: flight-path-distant 36s linear infinite;
  animation-delay: -18s;
}

.aircraft {
  right: 0;
  top: 25px;
  width: 118px;
  height: 28px;
  border: 3px solid rgba(16,33,61,.52);
  border-radius: 999px 22px 22px 999px;
  background:
    linear-gradient(90deg, #ffffff 0%, #f6fbfe 46%, #dbeaf2 100%);
  transform-origin: 60% 50%;
  animation: aircraft-attitude 6s ease-in-out infinite;
}

.aircraft::before,
.aircraft::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.aircraft::before {
  right: -9px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-top: 3px solid rgba(16,33,61,.52);
  border-right: 3px solid rgba(16,33,61,.52);
  border-radius: 4px 14px 4px 0;
  background: #dbeaf2;
  transform: rotate(45deg);
}

.aircraft::after {
  left: 8px;
  top: 8px;
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: rgba(16,33,61,.18);
  box-shadow: 38px 0 0 rgba(16,33,61,.12);
}

.aircraft-wing {
  left: 42px;
  width: 66px;
  height: 24px;
  border: 3px solid rgba(16,33,61,.42);
  background: linear-gradient(90deg, #ffffff 0%, #dcebf4 100%);
  transform-origin: 17px center;
}

.aircraft-wing-main {
  top: -21px;
  border-radius: 12px 34px 5px 5px;
  transform: skewX(-27deg) rotate(-2deg);
}

.aircraft-wing-shadow {
  bottom: -22px;
  width: 72px;
  height: 22px;
  border-radius: 5px 5px 36px 12px;
  transform: skewX(25deg) rotate(2deg);
  opacity: .82;
}

.aircraft-tail {
  left: 1px;
  top: -14px;
  width: 28px;
  height: 29px;
  border: 3px solid rgba(16,33,61,.43);
  border-radius: 7px 18px 4px 7px;
  background: linear-gradient(90deg, #ffffff, #dcebf4);
  transform: skewX(18deg) rotate(-7deg);
}

.aircraft-window {
  right: 20px;
  top: 7px;
  width: 16px;
  height: 11px;
  border: 2px solid rgba(16,33,61,.36);
  border-radius: 8px 12px 8px 8px;
  background: rgba(47,145,207,.64);
}

.aircraft-primary .aircraft-wing {
  animation: aircraft-wing-flex 6s ease-in-out infinite;
}

.aircraft-distant {
  opacity: .82;
  animation-delay: -2s;
}

.aircraft-distant,
.aircraft-distant .aircraft-wing,
.aircraft-distant .aircraft-tail {
  border-color: rgba(16,33,61,.32);
}

.contrail {
  left: 0;
  top: 36px;
  width: 94px;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 12%, rgba(255,255,255,.6) 68%, rgba(255,255,255,.92) 100%);
  opacity: .62;
  transform-origin: right center;
  animation: contrail-pulse 2.2s ease-in-out infinite;
}

.contrail::before,
.contrail::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 62px;
  height: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46));
  opacity: .68;
}

.contrail::before { top: -8px; }
.contrail::after { bottom: -8px; width: 48px; }

.flight-path-aircraft-distant .contrail {
  left: 12px;
  width: 74px;
}

.flock-path {
  width: 156px;
  height: 84px;
  filter: drop-shadow(0 10px 14px rgba(8,34,66,.08));
  z-index: 1;
}

.flock-path-near {
  left: -180px;
  top: 20%;
  opacity: .62;
  animation: flock-path-near 22s linear infinite;
  animation-delay: -5s;
}

.flock-path-far {
  right: -160px;
  top: 38%;
  opacity: .42;
  animation: flock-path-far 27s linear infinite;
  animation-delay: -14s;
}

.flock {
  inset: 0;
  animation: flock-bob 4.8s ease-in-out infinite;
}

.flock-far {
  transform: scaleX(-1) scale(.78);
  transform-origin: center;
  animation-delay: -1.2s;
}

.bird {
  width: 34px;
  height: 22px;
  --flap-delay: 0s;
}

.bird::before,
.bird::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 20px;
  height: 13px;
  border-top: 3px solid rgba(16,33,61,.68);
  border-radius: 50%;
  transform-origin: center top;
  animation: wing-flap .62s ease-in-out infinite;
  animation-delay: var(--flap-delay);
}

.bird::before {
  left: 0;
  --wing-angle: 20deg;
}

.bird::after {
  right: 0;
  --wing-angle: -20deg;
}

.bird-lead {
  left: 60px;
  top: 7px;
  transform: scale(.9);
}

.bird-left {
  left: 24px;
  top: 28px;
  transform: scale(.74);
}

.bird-right {
  left: 98px;
  top: 31px;
  transform: scale(.7);
}

.bird-tail {
  left: 0;
  top: 51px;
  transform: scale(.58);
}

.bird-left { --flap-delay: -.17s; }

.bird-right { --flap-delay: -.34s; }

.bird-tail { --flap-delay: -.48s; }

@keyframes flight-path-primary {
  0% {
    transform: translate3d(0, 38px, 0) rotate(-10deg) scale(.78);
    opacity: 0;
  }
  8% { opacity: .58; }
  30% { transform: translate3d(calc(30vw + 150px), -64px, 0) rotate(-13deg) scale(.84); }
  58% { transform: translate3d(calc(62vw + 150px), 34px, 0) rotate(7deg) scale(.9); }
  78% { transform: translate3d(calc(82vw + 150px), -48px, 0) rotate(-9deg) scale(.84); }
  92% { opacity: .58; }
  100% {
    transform: translate3d(calc(100vw + 320px), 22px, 0) rotate(4deg) scale(.78);
    opacity: 0;
  }
}

@keyframes flight-path-distant {
  0% {
    transform: translate3d(0, -28px, 0) rotate(9deg) scale(.58) scaleX(-1);
    opacity: 0;
  }
  10% { opacity: .34; }
  34% { transform: translate3d(calc(-34vw - 150px), 52px, 0) rotate(-5deg) scale(.64) scaleX(-1); }
  62% { transform: translate3d(calc(-66vw - 150px), -42px, 0) rotate(8deg) scale(.68) scaleX(-1); }
  80% { transform: translate3d(calc(-84vw - 150px), 28px, 0) rotate(-3deg) scale(.63) scaleX(-1); }
  92% { opacity: .34; }
  100% {
    transform: translate3d(calc(-100vw - 300px), -18px, 0) rotate(5deg) scale(.58) scaleX(-1);
    opacity: 0;
  }
}

@keyframes aircraft-attitude {
  0%, 100% { transform: rotate(0deg); }
  42% { transform: rotate(-2.5deg); }
  70% { transform: rotate(1.5deg); }
}

@keyframes aircraft-wing-flex {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}

@keyframes contrail-pulse {
  0%, 100% { opacity: .36; transform: scaleX(.72); }
  45% { opacity: .78; transform: scaleX(1); }
}

@keyframes flock-path-near {
  0% {
    transform: translate3d(0, 18px, 0) rotate(-2deg) scale(.5);
    opacity: 0;
  }
  10% { opacity: .44; }
  30% { transform: translate3d(calc(30vw + 130px), -24px, 0) rotate(2deg) scale(.76); opacity: .58; }
  58% { transform: translate3d(calc(62vw + 130px), 12px, 0) rotate(-1deg) scale(1.08); opacity: .68; }
  78% { transform: translate3d(calc(82vw + 130px), -16px, 0) rotate(2deg) scale(.86); opacity: .58; }
  92% { opacity: .42; }
  100% {
    transform: translate3d(calc(100vw + 260px), 10px, 0) rotate(1deg) scale(.56);
    opacity: 0;
  }
}

@keyframes flock-path-far {
  0% {
    transform: translate3d(0, -8px, 0) rotate(2deg) scale(1.04) scaleX(-1);
    opacity: 0;
  }
  12% { opacity: .48; }
  34% { transform: translate3d(calc(-34vw - 120px), 18px, 0) rotate(-2deg) scale(.86) scaleX(-1); opacity: .44; }
  66% { transform: translate3d(calc(-70vw - 120px), -20px, 0) rotate(2deg) scale(.62) scaleX(-1); opacity: .34; }
  92% { opacity: .24; }
  100% {
    transform: translate3d(calc(-100vw - 240px), 6px, 0) rotate(-1deg) scale(.42) scaleX(-1);
    opacity: 0;
  }
}

@keyframes flock-bob {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -7px; }
  70% { translate: 0 4px; }
}

@keyframes wing-flap {
  0%, 100% { transform: rotate(var(--wing-angle)) translateY(0); }
  50% { transform: rotate(calc(var(--wing-angle) * -1.55)) translateY(-5px); }
}

.hero-board {
  width: min(980px, 100%);
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: clamp(28px, 3.4vw, 42px) clamp(26px, 5vw, 64px) clamp(30px, 3.8vw, 46px);
  border: 6px solid rgba(16,33,61,.82);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72), transparent 18%, transparent 82%, rgba(255,255,255,.58)),
    linear-gradient(180deg, #fff9ec 0%, var(--cream) 100%);
  box-shadow:
    0 7px 0 rgba(16,33,61,.68),
    0 15px 0 rgba(16,33,61,.36),
    0 34px 72px rgba(8,34,66,.24);
  position: relative;
  text-align: center;
  z-index: 2;
}

.hero-board::before,
.hero-board::after {
  content: "";
  position: absolute;
  top: -17px;
  width: 34%;
  height: 12px;
  border-radius: 3px 3px 0 0;
  background: #214160;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16);
}

.hero-board::before { left: 24px; }
.hero-board::after { right: 24px; }

.billboard-supports {
  width: min(610px, calc(100% - 120px));
  height: 44px;
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.billboard-supports span {
  width: 46px;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(180deg, #45515f 0%, #263142 100%);
  box-shadow: 10px 0 0 rgba(16,33,61,.12);
}

.buddy-card {
  position: absolute;
  right: clamp(24px, 4vw, 46px);
  top: clamp(28px, 4vw, 42px);
  width: 60px;
  height: 80px;
  transform: rotate(5deg);
}

.grad-hat {
  position: absolute;
  left: 6px;
  top: -7px;
  width: 52px;
  height: 20px;
  z-index: 4;
  transform: rotate(-5deg);
}

.grad-hat::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 51px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: #324761;
  transform: skewX(-16deg);
  box-shadow: 4px 4px 0 rgba(16,33,61,.14);
}

.grad-hat::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 30px;
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 7px 7px 10px 10px;
  background: #25344f;
}

.grad-hat span {
  position: absolute;
  right: 4px;
  top: 11px;
  width: 3px;
  height: 21px;
  border-radius: 999px;
  background: var(--yellow);
  z-index: 5;
  transform: rotate(8deg);
}

.grad-hat span::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -7px;
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  background: var(--yellow);
  transform: rotate(-45deg);
}

.buddy-head {
  position: absolute;
  inset: 6px 6px 25px;
  border: 3px solid var(--ink);
  border-radius: 24px 24px 16px 16px;
  background: var(--orange);
  box-shadow: 6px 6px 0 rgba(16,33,61,.18);
}

.eye {
  position: absolute;
  top: 17px;
  width: 15px;
  height: 17px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: white;
}

.eye:first-child { left: 9px; }
.eye:nth-child(2) { right: 9px; }

.eye::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.smile {
  position: absolute;
  left: 25px;
  top: 40px;
  width: 14px;
  height: 8px;
  border-bottom: 3px solid var(--ink);
  border-radius: 0 0 999px 999px;
}

.buddy-book {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #2bb4e8;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { overflow-wrap: anywhere; }

h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(46px, 6vw, 72px);
  line-height: 1;
  font-family: "Fredoka", "Nunito", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

.hero-copy {
  max-width: 680px;
  margin: 12px 0 0;
  color: #263553;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
  font-weight: 700;
}

.keep-line {
  white-space: nowrap;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.hero-points span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 2px solid rgba(16,33,61,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #33415e;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(16,33,61,.08);
}

.hero-form {
  width: min(840px, 100%);
  margin-top: clamp(20px, 2.7vw, 28px);
}

label {
  display: block;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 3px solid rgba(16,33,61,.9);
  border-radius: 24px;
  background: white;
  box-shadow: 7px 7px 0 rgba(16,33,61,.18), 0 16px 34px rgba(16,33,61,.1);
}

input[type="url"] {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: 18px;
  padding: 0 20px;
  background: #f6f8fb;
  color: var(--ink);
  font-size: 17px;
  outline: none;
}

input[type="url"]:focus {
  background: #fbfdff;
  box-shadow: inset 0 0 0 3px rgba(47,145,207,.34);
}

#submitButton,
.quiet-button,
.export-button,
#retryButton {
  min-height: 44px;
  border: 0;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: var(--ink);
  color: white;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 5px 5px 0 rgba(16,33,61,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease;
  white-space: nowrap;
}

#submitButton {
  height: 64px;
  min-width: 168px;
  background: var(--orange);
  box-shadow: 5px 5px 0 rgba(16,33,61,.24);
}

.input-helper {
  max-width: 680px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

#submitButton:hover:not(:disabled),
.quiet-button:hover,
.export-button:hover,
#retryButton:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 rgba(16,33,61,.18);
}

#submitButton:disabled {
  opacity: .72;
  cursor: not-allowed;
  transform: none;
  box-shadow: 3px 3px 0 rgba(16,33,61,.14);
}

.export-button:disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: 3px 3px 0 rgba(16,33,61,.14);
}

.export-button.is-loading {
  position: relative;
  opacity: .86;
}

.export-button.is-loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: export-spin .72s linear infinite;
}

@keyframes export-spin {
  to { transform: rotate(360deg); }
}

.progress-panel,
.error-panel {
  width: min(760px, 100%);
  margin-top: 20px;
  border: 1px solid rgba(16,33,61,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 48px rgba(16,33,61,.14);
}

.progress-panel { padding: 18px; }

.progress-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.progress-header strong {
  display: block;
  font-size: 15px;
}

.progress-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

#progressPercent {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.progress-track {
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  background: #dfeaf2;
  overflow: hidden;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width .22s ease;
}

.stage-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.stage-list li {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 12px;
  background: #f3f8fb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.stage-list li.active {
  background: #fff1b8;
  color: var(--ink);
}

.stage-list li.done {
  background: #e7f7f2;
  color: #11634d;
}

.error-panel {
  padding: 16px;
  background: var(--red-bg);
  color: var(--red);
  text-align: left;
}

.error-panel p {
  margin: 6px 0 12px;
  color: #9f1f16;
  font-size: 13px;
  font-weight: 750;
}

#retryButton {
  min-height: 38px;
  background: var(--red);
}

.stats-row {
  width: min(700px, calc(100% - 42px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: -10px 0 0;
  position: relative;
  z-index: 3;
}

.stats-row div {
  min-height: 64px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 16px;
  background: rgba(255,255,255,.93);
  box-shadow:
    inset 0 0 0 1px rgba(16,33,61,.08),
    0 12px 22px rgba(16,33,61,.1);
  text-align: center;
  backdrop-filter: blur(12px);
}

.stats-row strong {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
}

.stats-row span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.result-workspace {
  width: min(1320px, calc(100% - 34px));
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}

.result-summary,
.preview-panel {
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

.result-summary {
  align-self: start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
  z-index: 4;
  scrollbar-width: thin;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.quiet-button,
.export-button {
  background: white;
  color: var(--ink);
}

.export-button {
  background: var(--orange);
  color: white;
}

.result-summary h2,
.preview-header h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.summary-grid div {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: #f2f8fc;
}

.summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.summary-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.preview-panel {
  min-width: 0;
  overflow: hidden;
  align-self: start;
}

.preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid rgba(16,33,61,.09);
}

.preview-count {
  flex-shrink: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sky-soft);
  font-size: 12px;
  font-weight: 950;
}

.preview-pages {
  display: grid;
  gap: 18px;
  padding: 20px 26px 28px;
}

.preview-page {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.preview-page-header {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.preview-page-body {
  min-height: 260px;
  padding: 16px;
  background: #f8fafc;
}

.preview-frame {
  width: 100%;
  height: 900px;
  display: block;
  border: 0;
  border-radius: 12px;
  background: white;
  overflow: hidden;
}

.source-preview-frame {
  height: 1120px;
}

.skeleton-page {
  pointer-events: none;
}

.skeleton-document {
  min-height: 680px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 42px 9%;
  border-radius: 12px;
  background: white;
  overflow: hidden;
}

.skeleton-document span {
  display: block;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf3f7 0%, #f8fbfd 44%, #e7eff5 88%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.25s ease-in-out infinite;
}

.skeleton-document span:nth-child(1) {
  width: 42%;
  height: 28px;
  margin: 0 auto 16px;
}

.skeleton-document span:nth-child(2) { width: 72%; }
.skeleton-document span:nth-child(3) { width: 84%; }
.skeleton-document span:nth-child(4) { width: 68%; }
.skeleton-document span:nth-child(5) { width: 78%; }

@keyframes skeleton-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.page-message,
.empty-preview {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.skeleton-caption {
  margin-top: 14px;
  text-align: center;
}

.result-mode .hero {
  height: auto;
  min-height: auto;
  padding-bottom: 24px;
}

.result-mode .hero-stage {
  min-height: auto;
}

.result-mode .hero-board {
  min-height: 0;
  padding: 22px;
  align-content: center;
  box-shadow: 0 7px 0 rgba(16,33,61,.44), 0 18px 42px rgba(8,34,66,.18);
}

.result-mode .hero-board h1,
.result-mode .hero-copy,
.result-mode .hero-points,
.result-mode .sky-decor,
.result-mode .buddy-card,
.result-mode .billboard-supports,
.result-mode .stats-row {
  display: none;
}

.result-mode .hero-form {
  margin-top: 0;
}

.result-mode .input-helper {
  display: none;
}

.hidden { display: none !important; }

.result-loading .result-summary h2,
.result-loading .summary-grid strong,
.result-loading .preview-header h2,
.result-loading .preview-count {
  opacity: .68;
}

.scroll-top-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.34), transparent 30%),
    var(--orange);
  box-shadow:
    0 5px 0 rgba(16,33,61,.55),
    0 16px 34px rgba(8,34,66,.24);
  z-index: 20;
  transition: transform .14s ease, box-shadow .14s ease;
}

.scroll-top-button span {
  width: 17px;
  height: 17px;
  display: block;
  border-left: 4px solid white;
  border-top: 4px solid white;
  transform: translateY(4px) rotate(45deg);
  filter: drop-shadow(0 2px 0 rgba(16,33,61,.2));
}

.scroll-top-button::after {
  content: "";
  width: 19px;
  height: 4px;
  margin-top: -14px;
  border-radius: 999px;
  background: white;
  filter: drop-shadow(0 2px 0 rgba(16,33,61,.2));
}

.scroll-top-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 rgba(16,33,61,.55),
    0 20px 40px rgba(8,34,66,.28);
}

@media (min-width: 981px) {
  .result-mode .result-workspace {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 420px;
  }

  .result-mode .result-summary {
    position: fixed;
    top: var(--result-panel-top, 320px);
    left: max(17px, calc((100vw - 1320px) / 2 + 17px));
    width: min(360px, calc(100vw - 34px));
    max-height: calc(100vh - 32px);
    transform: translateY(-50%);
  }
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    padding-bottom: 34px;
  }

  .hero-stage {
    min-height: auto;
    align-content: start;
    padding-top: 34px;
  }

  .result-workspace {
    grid-template-columns: 1fr;
  }

  .result-summary {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .buddy-card {
    display: none;
  }

  .sky-decor {
    left: -20px;
    right: -20px;
    bottom: 120px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body {
    background: white;
  }

  body::before,
  body::after,
  .hero,
  .result-summary,
  .preview-header,
  .preview-page-header {
    display: none !important;
  }

  .site-shell,
  .result-workspace,
  .preview-panel,
  .preview-pages,
  .preview-page,
  .preview-page-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: white !important;
  }

  .result-workspace {
    min-height: 0;
  }

  .preview-page {
    break-after: page;
    page-break-after: always;
  }

  .preview-frame {
    width: 100% !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 760px) {
  body::before {
    height: 118px;
    background:
      linear-gradient(180deg, rgba(22,34,58,.92), rgba(8,16,31,.98)) 10% 100% / 36px 94px no-repeat,
      linear-gradient(180deg, rgba(36,48,72,.86), rgba(11,20,38,.98)) 38% 100% / 58px 70px no-repeat,
      linear-gradient(180deg, rgba(20,32,55,.96), rgba(8,16,31,1)) 62% 100% / 44px 104px no-repeat,
      linear-gradient(180deg, rgba(34,45,68,.88), rgba(10,18,35,.98)) 88% 100% / 52px 80px no-repeat;
    opacity: .58;
  }

  body::after {
    height: 118px;
    background:
      repeating-linear-gradient(90deg, rgba(255,226,143,.68) 0 3px, transparent 3px 11px) 10% 50px / 36px 6px no-repeat,
      repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,196,112,.48) 4px 8px, transparent 8px 14px) 10% 78px / 36px 6px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,203,101,.52) 0 5px, transparent 5px 16px) 38% 88px / 58px 6px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,219,132,.66) 0 4px, transparent 4px 14px) 62% 42px / 44px 6px no-repeat,
      repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,184,91,.46) 5px 10px, transparent 10px 16px) 62% 72px / 44px 6px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,199,102,.52) 0 5px, transparent 5px 17px) 88% 74px / 52px 6px no-repeat;
    -webkit-mask:
      linear-gradient(#000 0 0) 10% 100% / 36px 94px no-repeat,
      linear-gradient(#000 0 0) 38% 100% / 58px 70px no-repeat,
      linear-gradient(#000 0 0) 62% 100% / 44px 104px no-repeat,
      linear-gradient(#000 0 0) 88% 100% / 52px 80px no-repeat;
    mask:
      linear-gradient(#000 0 0) 10% 100% / 36px 94px no-repeat,
      linear-gradient(#000 0 0) 38% 100% / 58px 70px no-repeat,
      linear-gradient(#000 0 0) 62% 100% / 44px 104px no-repeat,
      linear-gradient(#000 0 0) 88% 100% / 52px 80px no-repeat;
    opacity: .44;
  }

  .hero,
  .result-workspace {
    width: min(100% - 22px, 1220px);
  }

  .result-workspace {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .hero {
    padding-top: 12px;
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .brandmark > .brand-text {
    display: none;
  }

  .hero-board {
    padding: 28px 14px 30px;
    border-width: 4px;
    border-radius: 7px;
    box-shadow:
      0 6px 0 rgba(16,33,61,.58),
      0 22px 50px rgba(8,34,66,.22);
  }

  .hero-board::before,
  .hero-board::after {
    top: -13px;
    height: 9px;
    width: 30%;
  }

  .hero-stage {
    padding-top: 24px;
    gap: 10px;
  }

  h1 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .hero-copy {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero-form {
    margin-top: 20px;
  }

  .input-row,
  .stage-list,
  .stats-row,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .input-row {
    gap: 9px;
    padding: 9px;
    border-radius: 20px;
  }

  input[type="url"],
  #submitButton {
    height: 58px;
  }

  input[type="url"] {
    border-radius: 15px;
    padding: 0 16px;
    font-size: 16px;
  }

  .stage-list {
    gap: 7px;
  }

  .billboard-supports {
    width: min(360px, calc(100% - 72px));
    height: 34px;
  }

  .billboard-supports span {
    width: 38px;
  }

  .cloud {
    opacity: .18;
  }

  .flight-path,
  .flock-path {
    display: none;
  }

  #submitButton {
    width: 100%;
    min-width: 0;
  }

  .stats-row {
    width: min(420px, 100%);
    margin-top: 0;
  }

  .stats-row div {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .stats-row span {
    margin-top: 0;
  }

  .preview-header {
    flex-direction: column;
  }

  .preview-pages,
  .preview-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .preview-pages {
    display: grid;
    gap: 18px;
  }

}

@media (max-width: 430px) {
  .hero,
  .result-workspace {
    width: min(100% - 16px, 1220px);
  }

  .brand-buddy {
    transform: scale(.92) rotate(-4deg);
    transform-origin: left center;
  }

  .threads-link {
    width: 34px;
    height: 34px;
  }

  .hero-board {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-points {
    gap: 7px;
  }

  .hero-points span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  label {
    font-size: 13px;
  }

  .progress-header {
    display: grid;
  }
}