/* Shared by the three F layouts. Tokens come from the app's design system (Design/family/page/tokens.css). */
@font-face { font-family: "Inter"; src: url("fonts/InterVariable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --font: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --c-ink: #0A0A0A; --c-grey: #8E8E93; --c-accent: #111113; --c-white: #fff; --c-on: #fff; --c-on-2: rgba(255,255,255,.78);
  --t-display: clamp(40px, 8vw, 56px); --t-hero: 34px; --t-headline: 17px; --t-body: 15px; --t-caption: 13px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 40px; --s-7: 48px;
  --button-h: 52px; --r-button: 999px; --r-card: 28px; --r-sheet: 32px;
  --shadow-sheet: 0 10px 60px rgba(0,0,0,.18); --ease: cubic-bezier(.3,1.4,.5,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--font); color: var(--c-on); -webkit-font-smoothing: antialiased; background: #111113; }
body { min-height: 100svh; }
.bg { position: fixed; inset: 0; overflow: hidden; background: #111113; }
.bg canvas { position: absolute; inset: -4%; width: 108%; height: 108%; opacity: 0; transition: opacity 1.8s ease; animation: drift 16s ease-in-out infinite alternate; }
.bg canvas.on { opacity: 1; }
.bg::before { content: ""; position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .8s steps(1) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 12% { transform: translate(-7%,5%); } 25% { transform: translate(6%,-9%); } 37% { transform: translate(-11%,-3%); } 50% { transform: translate(9%,8%); } 62% { transform: translate(-4%,11%); } 75% { transform: translate(12%,-6%); } 87% { transform: translate(-9%,-10%); } }
.bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
@keyframes drift { to { transform: translate(-1.5%, 2%) scale(1.04); } }
.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.tile { position: relative; display: block; width: 96px; height: 96px; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.tile.big { width: 132px; height: 132px; border-radius: 30px; }
a:hover > .tile, .tile:hover { transform: translateY(-4px) scale(1.04); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile canvas { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; transform: translate(-50%,-50%); border-radius: 50%; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--button-h); padding: 0 var(--s-5); border-radius: var(--r-button); background: var(--c-white); color: var(--c-accent); font: 600 var(--t-headline) var(--font); text-decoration: none; transition: transform .2s var(--ease); }
.cta.dark { background: var(--c-accent); color: #fff; }
.cta:hover { transform: scale(1.03); } .cta:active { transform: scale(.97); }
.cta svg { width: 20px; height: 20px; fill: currentColor; }
.lede { margin: 0; font-size: var(--t-body); line-height: 1.35; color: var(--c-on-2); }
h1 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
footer { display: flex; justify-content: center; gap: var(--s-4); padding: var(--s-4) var(--s-4) max(env(safe-area-inset-bottom), var(--s-5)); font-size: var(--t-caption); }
footer a { color: var(--c-on-2); text-decoration: none; } footer a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }