/* ============================================================
   RowPal — holding page
   Built from Figma design (node 540:9786)
   ============================================================ */

:root {
  --bg:              #ffffff;
  --text-primary:    #000000;   /* Figma: Text/Primary   */
  --text-secondary:  #64748b;   /* Figma: Text/Secondary */
  --streak:          #16a34a;   /* Figma: Text/Streak    */
  --indigo-500:      #6366f1;   /* Figma: indigo/500     */
  --indigo-600:      #4f46e5;   /* Figma: indigo/600     */

  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito",
                  -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, sans-serif;

  /* Fluid type — the max values are the Figma sizes at an 860px column */
  --size-title:   clamp(1.75rem, 4.30vw, 2.3125rem);   /* 28 → 37px */
  --size-lede:    clamp(1.125rem, 2.67vw, 1.4375rem);  /* 18 → 23px */
  --size-small:   clamp(1rem, 1.98vw, 1.0625rem);      /* 16 → 17px */

  /* Fluid spacing — max values match the Figma auto-layout gaps */
  --gap-columns:  clamp(2rem, 9.5vw, 5.125rem);        /* 32 → 82px */
  --gap-stack:    clamp(2.25rem, 7.3vw, 3.9375rem);    /* 36 → 63px */
  --gap-pitch:    clamp(0.875rem, 2.3vw, 1.25rem);     /* 14 → 20px */

  --phone-width:  clamp(11.25rem, 26vw, 14.0125rem);   /* 180 → 224.2px */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;               /* safety net: never scroll sideways */
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  display: flex;                  /* + `margin: auto` on .page centres it
                                     without ever clipping tall content   */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-rounded);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

p  { margin: 0; }
h1 { margin: 0; font-weight: 600; }

.page {
  margin: auto;
  width: 100%;
  max-width: calc(53.625rem + 2 * clamp(1.5rem, 5vw, 4rem));   /* 858px + padding */
  padding: clamp(3rem, 9vh, 5.375rem) clamp(1.5rem, 5vw, 4rem);
}

/* ===================== Hero ===================== */

.hero {
  display: flex;
  align-items: center;
  gap: var(--gap-columns);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-stack);
  flex: 1 1 auto;
  min-width: 0;
}

.logo {
  width: clamp(5rem, 11.2vw, 6.0395rem);   /* 80 → 96.63px */
  height: auto;
  flex-shrink: 0;
}

/* ===================== Pitch ===================== */

.pitch {
  display: flex;
  flex-direction: column;
  gap: var(--gap-pitch);
  overflow-wrap: break-word;
}

.pitch__title {
  font-size: var(--size-title);
  line-height: 1.4;
  color: var(--text-primary);
}

.pitch__any {
  font-style: normal;
  font-weight: 900;
  color: var(--streak);
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-underline-position: from-font;
}

.pitch__lede {
  font-size: var(--size-lede);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ===================== Contact ===================== */

.contact__title {
  font-size: var(--size-lede);
  line-height: 1.4;
  color: var(--text-primary);
}

.contact__line {
  font-size: var(--size-small);
  line-height: 1.4;
  color: var(--text-secondary);
}

.contact__email {
  color: var(--indigo-600);
  text-decoration: none;
}

.contact__email:hover,
.contact__email:focus-visible {
  text-decoration: underline;
  text-underline-position: from-font;
}

.contact__email:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ===================== App screenshot ===================== */

/* The black frame and its rounded corners are baked into the PNG, so there is
   no CSS border here. Keep the image's own 477:1003 shape — cropping or
   stretching it would throw off the even gap around the app's stats card. */
.phone {
  flex: 0 0 auto;
  width: var(--phone-width);
  aspect-ratio: 477 / 1003;
}

.phone__shot {
  width: 100%;
  height: 100%;
}

/* ===================== Large screens ===================== */

/* The Figma frame is 1438px wide, so at that size everything above is
   pixel-exact. On much bigger monitors an 858px block looks marooned, so
   scale the whole page up 12.5% by nudging the root size — every size in
   this file is in rem, so type, spacing, logo and phone all grow together.
   Delete this block for strict 1:1 fidelity at every width. */
@media (min-width: 1600px) {
  :root { font-size: 112.5%; }
}

/* ===================== Narrow screens ===================== */

@media (max-width: 820px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-stack);
  }

  /* Figma sizes are tied to an 860px column, so re-peg the fluid
     type and spacing to the viewport once the layout stacks. */
  :root {
    --size-title:  clamp(1.75rem, 7.2vw, 2.3125rem);
    --size-lede:   clamp(1.125rem, 4.4vw, 1.4375rem);
    --size-small:  clamp(1rem, 3.3vw, 1.0625rem);
    --gap-stack:   clamp(2.25rem, 6vw, 3.9375rem);
    --phone-width: min(14.0125rem, 62vw);
  }

  .logo { width: clamp(5rem, 18vw, 6.0395rem); }

  .phone { align-self: center; }
}

@media (max-width: 420px) {
  .page { padding: clamp(2.5rem, 7vh, 3.5rem) 1.5rem; }
}

/* ===================== Motion ===================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}