/* LEGAL DISCLAIMER
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * pinkant.com
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
 *
 * optimo.ch
 */
@font-face {
  font-family: 'Facility';
  src: url('/fonts/Facility-Book.woff2') format('woff2'),
       url('/fonts/Facility-Book.woff') format('woff');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   PINK ANT holding page — layout by KF (Figma: PINK ANT Landing Page)
   Reference frame 1716px. Everything is a % of viewport width so the
   proportions hold at any size. One spine at 50vw: the logo is centred
   on it, TEXT 1 ends on it, SIGN UP starts on it, TEXT 2 ends on it.
   Boxes are grid rows, so they touch corner to corner and never clip.
   ------------------------------------------------------------------ */
:root {
  --ink: #000;
  --paper: #fff;
  --spine: 50vw;
}

html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: 'Facility', Helvetica, Arial, sans-serif;
  font-weight: 450;
  font-size: clamp(11px, .932vw, 18px);   /* 12pt at 1716px */
  line-height: 1.55;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.page {
  min-height: 100vh;
  display: grid;
  align-content: start;
  grid-template-columns: 9.9vw 40.1vw 40.2vw 1fr;
  grid-template-rows: auto auto auto auto auto;
  padding: 14.6vw 0 8vw;   /* 1.9 top + 6.4 mark + 6.3 gap: content starts where it always did */
}

/* The mark is pinned to the top of the viewport. Everything scrolls up
   under it. The void is transparent in the PNG, so whatever passes
   beneath fills it: black boxes read as black, paper as paper. */
.logo {
  position: fixed;
  top: 1.9vw;
  left: 50vw;
  transform: translateX(-50%);
  height: 6.4vw;
  width: auto;
  display: block;
  z-index: 10;
  pointer-events: none;
}

.box { background: var(--ink); color: var(--paper); box-sizing: border-box; }
.box p { margin: 0; }

.t1 {
  grid-column: 2; grid-row: 2;
  padding: 2.85vw 3.2vw 2.85vw 2.7vw;
}
.t1 p + p { margin-top: 1.55em; }

.signup {
  grid-column: 3; grid-row: 3;
  min-height: 6.2vw;
  padding: 1.4em 3.2vw 1.4em 2.7vw;
  display: flex; align-items: center; gap: 1em;
  position: relative;
}
.signup label { white-space: nowrap; }
.signup input {
  flex: 1; min-width: 0;
  border: 0; border-bottom: 1px solid var(--paper); border-radius: 0;
  background: transparent; color: var(--paper);
  font: inherit; letter-spacing: inherit; text-transform: none;
  padding: 0 0 3px; outline: none;
}
.signup input:focus-visible { border-bottom-width: 2px; }
.signup input:user-invalid { border-bottom-style: dashed; }
.signup button {
  border: 0; background: none; color: var(--paper);
  font: inherit; cursor: pointer; padding: 0 .2em;
}
.signup button:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }

/* success / error take over the box, same type, no new colours */
.signup .status { display: none; margin: 0; }
.signup.is-done label, .signup.is-done input, .signup.is-done button { display: none; }
.signup.is-done .status { display: block; }
.signup.is-busy { opacity: .6; pointer-events: none; }

.t2 {
  grid-column: 2; grid-row: 4;
  justify-self: end;
  width: 27.2vw; min-height: 6.2vw;
  padding: 1.4em 2.7vw;
  display: flex; align-items: center;
}


@media (max-width: 700px) {
  /* Phone: the three boxes must all sit inside the first screen.
     Spine stays at 50vw. Type and paddings tightened; page height is
     the small viewport (svh) so Safari's bars don't push TEXT 2 under the fold. */
  body { font-size: 8pt; letter-spacing: .07em; line-height: 1.4; }
  .page { grid-template-columns: 2vw 48vw 48vw 2vw; min-height: 100svh; padding: 24vw 0 8vw; }
  .logo { height: 13vw; top: 4vw; }
  .t1 { min-height: 0; padding: 4vw 3.5vw; }
  .t1 p + p { margin-top: 1.2em; }
  .signup { min-height: 0; padding: 3.5vw; gap: .6em; }
  .t2 { width: 36vw; min-height: 0; padding: 3.5vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .signup.is-done .status { animation: in .25s steps(1); }
  @keyframes in { from { visibility: hidden; } to { visibility: visible; } }
}

@media print { .signup { display: none; } }

/* ------------------------------------------------------------------
   Footer — from Figma "Pink Ant 260724" footer band.
   Full-width black. Four heads on one row at the columns measured from
   the prototype (5.5 / 11.2 / 22 / 32 vw). One panel open at a time;
   a panel starts under its head and runs to the right margin.
   ------------------------------------------------------------------ */
.foot {
  background: var(--ink); color: var(--paper);
  display: grid;
  grid-template-columns: 5.5vw 5.7vw 10.8vw 10vw 1fr 5.5vw;
  grid-template-rows: auto auto;
  padding: 1.6vw 0;
  align-content: start;
  font-size: .78em;
  line-height: 1.7;
}
.foot-heads { display: contents; }
.foot-head {
  grid-row: 1;
  justify-self: start; align-self: start;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: rgba(255,255,255,.5); cursor: pointer; white-space: nowrap;
}
.foot-head:nth-child(1) { grid-column: 2; }
.foot-head:nth-child(2) { grid-column: 3; }
.foot-head:nth-child(3) { grid-column: 4; }
.foot-head:hover, .foot-head:focus-visible { color: var(--paper); outline: none; }
.foot-head[aria-expanded="true"] { color: var(--paper); }

.foot-panel { grid-row: 2; margin-top: .6em; max-width: 46vw; }
.foot-panel[hidden] { display: block; visibility: hidden; }
.foot-panel[data-col="1"] { grid-column: 2 / 6; }
.foot-panel[data-col="2"] { grid-column: 3 / 6; }
.foot-panel[data-col="3"] { grid-column: 4 / 6; }
.foot-panel[data-col="4"] { grid-column: 5 / 6; }
.foot-panel p { margin: 0; }
.foot-panel p + p { margin-top: 0; }
#p-pp p + p, #p-info p + p { margin-top: 1em; }
.dev { font-family: 'Facility', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; text-transform: none; }
.foot-panel a { color: inherit; text-decoration: none; }
.foot-panel a:hover, .foot-panel a:focus-visible { text-decoration: underline; text-underline-offset: .2em; outline: none; }

@media (max-width: 700px) {
  .foot {
    grid-template-columns: 4vw 1fr 1fr 4vw;
    padding: 5vw 0;
    font-size: .9em;
  }
  .foot-head:nth-child(1) { grid-column: 2; grid-row: 1; }
  .foot-head:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: center; }
  .foot-head:nth-child(3) { grid-column: 3; grid-row: 1; }
  .foot-panel, .foot-panel[data-col] { grid-column: 2 / 4; grid-row: 2; max-width: none; margin-top: .5em; justify-self: stretch; }
}