/* MonsterLink — home page v2. Lives alongside the original, not instead of it.
   index.html + landing.css stay untouched; this file owns everything on
   home2.html except the shared tokens, buttons and the rendered-page styles
   that come from tokens.css and page.css.

   The look: a cream page with big rounded colour boxes sitting on it, huge
   display type, and the five poster pairings Jonathan picked. Every box's
   colours are set in the PAINTBOX block below, one line per section, so
   recolouring the page is one edit per box. */

:root {
  --gap: clamp(10px, 2.2vw, 26px);      /* inset around every box */
  --rad: clamp(22px, 2.8vw, 40px);      /* corner on every box */
  --edge: clamp(20px, 4.5vw, 72px);     /* padding inside a box */
}

/* ------------------------------------------------------------------ PAINTBOX
   One line per box. bg, ink (headings + big type), body (reading text).
   The pairings are Jonathan's swatch sheet. */
/* Brighter than the palette butter, by request: the hero glows a little. */
.hero2    { --bg: #FFC61A;             --ink2: var(--c-pine);    --body2: var(--c-pine); }
.four2    { --bg: var(--c-yellow);     --ink2: var(--c-pine);    --body2: var(--c-pine); }
.devices2 { --bg: var(--c-ember);      --ink2: var(--c-celery);  --body2: var(--c-celery); }
.close2   { --bg: var(--c-cornflower); --ink2: var(--c-celery);  --body2: var(--c-celery); }

body.home2 { background: #FFFFFF; overflow-x: clip; }

/* The boxes themselves */
.box {
  background: var(--bg); color: var(--body2);
  margin: 0 var(--gap) var(--gap);
  border-radius: var(--rad);
  padding: clamp(56px, 8vw, 110px) var(--edge);
  position: relative; overflow: hidden;
}
.box :is(h1, h2, h3):not(.ml-page *) { color: var(--ink2); }

/* Display type. Gabarito 900 in caps is the whole personality of the page. */
.shout {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: .96;
}

/* ---------------------------------------------------------------------- NAV */
.nav2 {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px clamp(16px, 3vw, 34px) 14px;
}
.nav2-right { display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
/* The wordmark PNG, cropped tight so the box IS the letters. Width does the
   sizing: about seven percent of the page, the proportion signed off against
   the HIPPEAS reference. */
.logo2 img { width: clamp(140px, 12vw, 190px); height: auto; }
.nav2-login { font-weight: 700; text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.nav2-login:hover { background: rgba(25, 22, 33, .06); }

/* --------------------------------------------------------------------- HERO */
.hero2 {
  padding-block: clamp(44px, 6vw, 76px);
  /* Tone-on-tone doodles, the same trick as the yellow reference sheet:
     one shade darker than the box, quiet enough to read over. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23E29500' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 9 L7 7 L9 0 L11 7 L18 9 L11 11 L9 18 L7 11 Z' transform='translate(30 30) rotate(15)'/%3E%3Cpath d='M0 9 L7 7 L9 0 L11 7 L18 9 L11 11 L9 18 L7 11 Z' transform='translate(148 192) rotate(-10)'/%3E%3Cpath d='M9 0 L0 12 h6 L4 22 L14 9 h-6 Z' transform='translate(200 58) rotate(10)'/%3E%3Cpath d='M9 0 L0 12 h6 L4 22 L14 9 h-6 Z' transform='translate(58 208) rotate(-12)'/%3E%3Cg transform='translate(118 88) rotate(-8)'%3E%3Ccircle cx='9' cy='9' r='8'/%3E%3Cpath d='M5 11 q4 4 8 0'/%3E%3C/g%3E%3Cpath d='M0 5 q4 -7 9 0 t9 0 t9 0' transform='translate(188 158) rotate(6)'/%3E%3Cpath d='M0 5 q4 -7 9 0 t9 0 t9 0' transform='translate(18 128) rotate(-4)'/%3E%3Cpath d='M9 16 C2 10 0 5 4 2 C7 0 9 3 9 5 C9 3 11 0 14 2 C18 5 16 10 9 16 Z' transform='translate(212 214) rotate(14)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sticker pills, tilted like they were slapped on */
.stickers { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(22px, 3.5vw, 36px); }
.stickers span {
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 16px; font-weight: 800; font-size: 14px;
  box-shadow: 3px 3px 0 var(--c-pine);
}
.stickers span:nth-child(1) { transform: rotate(-3deg); }
.stickers span:nth-child(2) { transform: rotate(2deg); }
.stickers span:nth-child(3) { transform: rotate(-2deg); }

/* Words left, phones right, the original home page's arrangement wearing
   home2's box, type and fields. */
.hero2-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(20px, 4vw, 60px); align-items: center;
  text-align: left;
}
/* The same size as the closing box's heading, so the page opens and closes
   at the same volume. */
.hero2-words h1 {
  font-size: clamp(40px, 4.9vw, 76px);
}
.hero2-words .claim2 { justify-content: flex-start; margin-left: 0; }

/* One card, one dice. The card holds two faces so the next page can render
   out of sight before the turn; the phone frames are scaled to keep the
   butter box above the fold. */
.hero2-flip { position: relative; height: 560px; display: flex; justify-content: center; perspective: 1400px; }
.flipcard {
  position: relative; width: 320px; height: 560px;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .7, .3, 1);
}
.flipface {
  position: absolute; inset: 0;
  display: flex; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flipface .phone { transform: scale(.85); transform-origin: top center; }
.flipback { transform: rotateY(180deg); }

.dicebtn {
  position: absolute; right: -8px; bottom: 14px; z-index: 4;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); color: var(--slime);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--slime-dark), 0 14px 30px rgba(25, 22, 33, .3);
  transition: transform .15s;
}
.dicebtn svg { width: 30px; height: 30px; }
.dicebtn:hover { transform: translateY(-2px); }
.dicebtn.rolling { animation: dice-roll .6s ease; }
@keyframes dice-roll {
  50% { transform: rotate(200deg) scale(1.12); }
  100% { transform: rotate(360deg); }
}
/* The slapped-on word. Slime sticker, slightly off true. */
.hero2 h1 .stick {
  display: inline-block; background: var(--slime); color: var(--ink);
  padding: 0 .18em; border-radius: .14em;
  transform: rotate(-1.5deg); box-shadow: .06em .06em 0 var(--c-pine);
}
.hero2 .sub {
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 600;
  max-width: 46ch; margin: clamp(18px, 2.5vw, 28px) 0 0;
}

/* The claim bar. The one thing on this page that earns money. */
.claim2 { display: flex; gap: 10px; justify-content: center; max-width: 620px; margin: clamp(26px, 3.5vw, 40px) auto 0; }
.claim2 .userinput {
  flex: 1; background: #fff; border: 0; border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.claim2 .userinput:focus-within { box-shadow: var(--shadow-soft), 0 0 0 3px var(--slime-deep); }
.claim2 .userinput .prefix { border-right: 0; background: transparent; padding-right: 2px; color: var(--ink); font-size: 15px; }
.claim2 .userinput input { padding: 16px 14px 16px 2px; font-weight: 600; font-size: 16px; }
.claim2 .btn-slime { flex: none; padding: 16px 28px; font-size: 16px; }
.claim2-note { margin-top: 14px; font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------------------ MARQUEE
   Real pages, edge to edge. No box: the cards ARE the colour here, and the
   row running under both edges of the screen is the point of it. */
.mq { overflow: hidden; margin-bottom: var(--gap); }
.mq-run { display: flex; gap: 16px; width: max-content; animation: mq-roll 95s linear infinite; will-change: transform; }
.mq-card {
  height: clamp(230px, 26vw, 330px); aspect-ratio: 3 / 4; width: auto;
  object-fit: cover; object-position: top;
  border-radius: 22px;
}
@keyframes mq-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-run { animation: none; } }

/* ------------------------------------------------------ NO PANEL SECTIONS
   The three that survived the judging: build yours, before and after, and
   the three questions. All straight on the cream. Shared bones first. */
.idea { padding: clamp(56px, 9vw, 120px) max(var(--edge), calc((100% - 1160px) / 2)); }
.idea h2:not(.ml-page *) { color: var(--ink); font-size: clamp(32px, 4.4vw, 58px); }
.idea .small { color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); margin-top: 14px; max-width: 44ch; }

/* ---- 1. Type a name, the builder draws your page while you do ---------- */
.try2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.try2 .claim2 { justify-content: flex-start; margin-left: 0; }
.try2-frame {
  border: 3px solid var(--ink); border-radius: 22px; overflow: hidden;
  background: #fff;
}
.try2-page { height: 560px; overflow: hidden; }
.try2-page .ml-page { min-height: 100%; }

/* The judging label, back while there are candidates on the page again. */
.idea .kick {
  font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}

/* Mono captions under the example cards. */
.mono-tag {
  text-align: center; margin-top: 16px;
  font-family: 'DM Mono', monospace; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* The build-it-first form: name, url and a line about yourself, all three
   feeding the live page on the right before Claim it is ever pressed. */
.try2-form { display: grid; gap: 10px; max-width: 560px; margin-top: clamp(26px, 3.5vw, 40px); }
.tryrow { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.tfield {
  background: #fff; border: 0; border-radius: 999px;
  padding: 14px 20px; font-weight: 600; font-size: 16px; min-width: 0;
  box-shadow: var(--shadow-soft);
}
.tfield:focus { outline: none; box-shadow: var(--shadow-soft), 0 0 0 3px var(--slime-deep); }
.tfield-u { border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow-soft); }
.tfield-u:focus-within { box-shadow: var(--shadow-soft), 0 0 0 3px var(--slime-deep); }
.tfield-u .prefix { border-right: 0; background: transparent; padding-right: 2px; color: var(--ink); font-size: 15px; }
.tfield-u input { padding: 14px 14px 14px 2px; font-weight: 600; font-size: 16px; }
.try2-form .btn-slime { justify-self: start; padding: 14px 30px; font-size: 16px; }

/* ---- 6. Keep it simple or make it fancy --------------------------------- */
.sf2-head { text-align: center; margin-bottom: clamp(30px, 4vw, 54px); }
.sf2-head .small { margin-inline: auto; }
.sf2-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 72px); }
.sf2-card {
  width: min(370px, 44vw); height: 560px; overflow: hidden;
  border-radius: 22px; border: 3px solid var(--ink);
}
.sf2-card .ml-page { min-height: 100%; }


/* ---- Four things that will surprise you --------------------------------- */
.four2 > h2 { font-size: clamp(30px, 4vw, 52px); max-width: 24ch; margin-bottom: clamp(24px, 3.5vw, 44px); }
.four2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f2tile { border-radius: 20px; padding: clamp(22px, 2.6vw, 34px); }
.f2tile h3 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; margin-bottom: 8px; }
.f2tile p { font-size: clamp(14.5px, 1.4vw, 16.5px); }
.f2dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.f2dot svg { width: 20px; height: 20px; }
/* Tile and dot colours, one line each. These four are lifted straight from
   the crisp-packet reference rather than the palette tokens: orange, a
   lighter yellow than the panel, maroon, and vermilion, on the butter box. */
/* One ground for all four since 23 September, Jonathan's call: the celery
   offwhite the cornflower close box writes in. The dots keep the old
   crisp-packet colours; the maroon tile's pale text swaps for its own
   maroon so it stays readable on the light ground. */
.f2-a { background: var(--c-celery); color: #3B1E07; } .f2-a .f2dot { background: #5D2431; color: #F6CE45; }
.f2-b { background: var(--c-celery); color: #3B1E07; } .f2-b .f2dot { background: #D9502F; color: #fff; }
.f2-c { background: var(--c-celery); color: #5D2431; } .f2-c .f2dot { background: #F6CE45; color: #5D2431; }
.f2-d { background: var(--c-celery); color: #2A0F06; } .f2-d .f2dot { background: #5D2431; color: #F6CE45; }
.four2 .f2tile h3 { color: inherit; }
.f2tile p { color: inherit; opacity: .82; }

/* ---- 5. Three questions, answered straight ------------------------------ */
.qa2-wrap { max-width: 680px; margin: 0 auto; }
.qa2-item { border-top: 2px solid var(--line); padding: clamp(22px, 3vw, 34px) 0; }
.qa2-item:last-child { border-bottom: 2px solid var(--line); }
.qa2-item h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 27px); color: var(--ink); }
.qa2-item p { color: var(--muted); font-size: clamp(15px, 1.5vw, 17.5px); margin-top: 8px; }

/* ------------------------------------------------------------------ DEVICES */
.devices2 { text-align: center; padding-block: clamp(44px, 5.5vw, 80px); }
.devices2 > h2 { font-size: clamp(34px, 4.6vw, 62px); max-width: 18ch; margin: 0 auto; }
.devices2 .sub2 { font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); margin: 14px auto clamp(22px, 3vw, 34px); }
.devices2-row { position: relative; width: min(760px, 100%); margin: 0 auto; min-height: 520px; }
.devices2 .mac {
  width: min(560px, 100%);
  border: 3px solid var(--ink); border-radius: 16px; overflow: hidden;
  background: var(--ink); box-shadow: 0 26px 60px rgba(25, 22, 33, .35);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.devices2 .mac-bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #262232; }
.devices2 .mac-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); flex: none; }
.devices2 .mac-bar em {
  flex: 1; text-align: center; font-style: normal; font-size: 11.5px;
  color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden;
}
.devices2 .mac-screen { height: 460px; overflow: hidden; background: var(--c-cream); }
.devices2 .mac-scale { width: 1180px; transform: scale(var(--mac-scale, .59)); transform-origin: 0 0; }
.devices2 .phone {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) scale(.78); transform-origin: center right;
  z-index: 2; box-shadow: 0 30px 70px rgba(25, 22, 33, .4);
}

/* ------------------------------------------------------------------ PRICING
   Not a box. Pricing sits straight on the cream at full width, the way it did
   on the first home page before the colour panels arrived, so the panels
   either side of it get real air between them. */
.price2 {
  text-align: center;
  padding: clamp(56px, 9vw, 130px) var(--edge);
}
.price2 h2 {
  color: var(--ink); font-family: var(--font-display); font-weight: 900;
  letter-spacing: -0.02em; font-size: clamp(28px, 4vw, 52px);
}
.price2 p { color: var(--muted); max-width: 56ch; margin: 14px auto 0; font-size: clamp(15px, 1.5vw, 18px); }

/* ------------------------------------------------------------------ CLOSING
   The box Jonathan signed off. Cornflower, celery type, celery button, the
   soft circle in the corner. Kept exactly as it is on the current home page. */
.close2 { text-align: center; }
.close2::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 45% 55% 52% 48% / 55% 44% 56% 45%;
  background: rgba(252, 251, 236, .14); top: -220px; right: -140px;
  pointer-events: none;
}
.close2 > h2 { font-size: clamp(40px, 6vw, 76px); }
.close2 .claim2 { max-width: 560px; }
.close2 .btn-slime {
  background: var(--c-celery); color: var(--c-cornflower); border-color: var(--c-celery);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------------- FOOTER */
.foot2 {
  padding: 10px clamp(16px, 3vw, 34px) 44px;
  text-align: center;
  color: var(--muted); font-size: 15.5px;
}
.foot2 a { font-weight: 700; margin: 0 clamp(8px, 1.4vw, 22px); display: inline-block; }

/* ---------------------------------------------------------------- MOVEMENT
   The quiet layer. Nothing here informs; it just keeps the page breathing.
   Every rule lives behind no-preference, so asking the OS for reduced motion
   turns the whole layer off at once. */
@media (prefers-reduced-motion: no-preference) {
  /* The hero settles in: words cascade, the card rises with them. */
  @keyframes rise { from { opacity: 0; translate: 0 14px; } }
  .hero2-words > * { animation: rise .55s cubic-bezier(.2, .7, .3, 1) backwards; }
  .hero2-words > *:nth-child(2) { animation-delay: .08s; }
  .hero2-words > *:nth-child(3) { animation-delay: .16s; }
  .hero2-words > *:nth-child(4) { animation-delay: .24s; }
  .hero2-flip { animation: rise .6s .15s cubic-bezier(.2, .7, .3, 1) backwards; }

  /* The doodles drift, one tile every four minutes. Perceptible only as a
     feeling that the surface is alive. */
  @keyframes doodle-drift { to { background-position: 520px 260px; } }
  .hero2 { animation: rise 0s, doodle-drift 240s linear infinite; }

  /* The card bobs on the translate property, which stays out of the way of
     the rotateY the dice writes to transform. */
  @keyframes bob { 50% { translate: 0 -8px; } }
  .flipcard { animation: bob 7s 1.2s ease-in-out infinite; }

  /* Every six seconds the dice asks for a click. */
  @keyframes dice-nudge {
    0%, 88%, 100% { rotate: 0deg; }
    92% { rotate: -10deg; }
    96% { rotate: 7deg; }
  }
  .dicebtn { animation: dice-nudge 6s 3s infinite; }

  /* Scroll reveal. The page script tags below-the-fold units with .rv and an
     IntersectionObserver flips them to .inview; anything already on screen is
     never tagged, so nothing visible ever blinks out. No JavaScript, no .rv,
     no hidden content. */
  .rv { opacity: 0; translate: 0 16px; transition: opacity .55s ease, translate .55s cubic-bezier(.2, .7, .3, 1); }
  .rv.inview { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------------------------------- MOBILE */
@media (max-width: 900px) {
  .four2-grid { grid-template-columns: 1fr; }
  .hero2-grid { grid-template-columns: 1fr; text-align: center; }
  .hero2-words .claim2 { justify-content: center; }
  .hero2 h1 { margin-inline: auto; }
  .hero2 .sub { margin-inline: auto; }
  .hero2-flip { margin-top: 10px; }
  .try2 { grid-template-columns: 1fr; }
  .try2-frame { width: min(370px, 100%); margin-inline: auto; }
  .tryrow { grid-template-columns: 1fr; }
  .try2-form .btn-slime { justify-self: stretch; }
  .sf2-row { flex-direction: column; align-items: center; }
  .sf2-card { width: min(340px, 88vw); }
  .devices2-row { min-height: 0; }
  .devices2 .mac { position: static; transform: none; width: 100%; }
  .devices2 .mac-screen { height: 300px; }
  .devices2 .phone { display: none; }
  .claim2 { flex-direction: column; }
  .claim2 .btn-slime { width: 100%; }
}