Equal-height timer tiles; hero stat labels fit two lines

- Timer: the speech grid uses equal rows (auto-rows-fr) and each tile
  stretches through a flex item instead of a percentage height, so a row
  with a wrapped name ("A Rebuttal", "B Summary") no longer has tiles of
  different heights. Every tile is at least 44 px.
- Landing hero: on phones the stat labels drop their extra letter-spacing,
  the cards use tighter side padding, and below 380 px the label steps down
  to 10 px, with hyphenation where the browser has the language.
  "PREPARACIÓN DIARIA CON IA" and the Hungarian trial label fit two lines
  at 360 to 414 px. The copy is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Programcode

src/components/free-tools/DebateTimer.tsx

@@ -255,20 +255,20 @@ export function DebateTimer({ storageKey, embedded = false, onFirstStart, footer
       )}
 
       <nav aria-label={t('timer.speeches')} className="px-4 pt-4">
-        {/* Every speech in view, in rows of equal length: 8 speeches are 4 + 4 on a phone and one row from md. */}
+        {/* Every speech in view, in rows of equal length (8 speeches are 4 + 4 on a phone, one row from md), every tile as tall as the tallest. */}
         <ol
-          className="grid grid-cols-[repeat(var(--chips),minmax(0,1fr))] gap-2 pb-2 sm:grid-cols-[repeat(var(--chips-sm),minmax(0,1fr))] md:grid-cols-[repeat(var(--chips-md),minmax(0,1fr))]"
+          className="grid auto-rows-fr grid-cols-[repeat(var(--chips),minmax(0,1fr))] gap-2 pb-2 sm:grid-cols-[repeat(var(--chips-sm),minmax(0,1fr))] md:grid-cols-[repeat(var(--chips-md),minmax(0,1fr))]"
           style={chipColumns(format.segments.length)}
         >
           {format.segments.map((entry, index) => (
-            <li key={entry.id} className="min-w-0">
+            <li key={entry.id} className="flex min-w-0">
               <button
                 type="button"
                 onClick={() => select(index)}
                 aria-current={index === round.segmentIndex ? 'step' : undefined}
                 title={entry.label}
                 className={cn(
-                  'flex h-full min-h-11 w-full flex-col items-center justify-center rounded-md border px-2 py-1 text-[0.8125rem] leading-tight sm:text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring',
+                  'flex min-h-11 w-full flex-col items-center justify-center rounded-md border px-2 py-1 text-[0.8125rem] leading-tight sm:text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring',
                   index === round.segmentIndex ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-background hover:bg-muted',
                 )}
               >

src/components/landing/Hero.tsx

@@ -73,8 +73,9 @@ const Hero = () => {
                         {/* Three across at every width, so on a phone they take one short row under the buttons. */}
                         <Reveal onLoad delay={0.15} className="mt-8 grid grid-cols-3 gap-2 sm:gap-3">
                             {planHighlights.map((item) => (
-                                <div key={item.label} className="rounded-lg border-2 border-border bg-card p-3 sm:p-4">
-                                    <p className="text-balance text-[0.6875rem] font-extrabold uppercase leading-4 tracking-[0.04em] text-muted-foreground sm:text-xs sm:tracking-[0.08em]">{item.label}</p>
+                                <div key={item.label} className="rounded-lg border-2 border-border bg-card px-2.5 py-3 max-[379px]:px-2 sm:p-4">
+                                    {/* On phones no extra tracking, so long Spanish and Hungarian labels take two lines at most. */}
+                                    <p className="text-balance text-[0.6875rem] font-extrabold uppercase leading-4 tracking-normal text-muted-foreground hyphens-auto max-[379px]:text-[0.625rem] sm:text-xs sm:tracking-[0.08em] sm:hyphens-manual">{item.label}</p>
                                     <p className="mt-1 text-balance font-display text-base font-[600] text-heading sm:text-lg">{item.value}</p>
                                 </div>
                             ))}