/* =========================================================================
   NinoClip Web — landing

   The colors are NOT this page's choices: they are the app's palette, copied
   from app/src/main/java/com/jalloft/ninoclip/ui/theme/Color.kt (NinoPalette).
   When the app changes tone, it changes here and nowhere else.

   The only exception is the PAPER block: the cream and the ink that reads on
   it do not exist in the app's chrome. They come from the PROJECT on stage —
   "Raposa correndo" stored #F2E4CE as its background color — and the page
   opens and closes on them. That is the whole idea: paper first, tool second.
   The dark between the two is the app's, with no tone of its own.
   ========================================================================= */

:root {
  /* surfaces (NinoPalette) — the page's dark is the SAME as the app's.
     It did have tones of its own, warmer, to marry the paper's cream. They
     went: two sets of nearly identical greys is the start of the two
     disagreeing, and the app had already settled that choice. */
  --page:        #141414;
  --canvas:      #141414;
  --bar:         #17171B;
  --card:        #1A1A1E;
  --raised:      #1D1D21;
  --divider:     #26262C;
  --border:      #2E2E38;

  /* content */
  --c-primary:   #F4F4F6;
  --c-secondary: #C9C9D2;
  --c-muted:     #8A8A93;
  --c-subtle:    #75757E;
  --c-disabled:  #5E5E68;

  /* highlight */
  --accent:      #8E4FF0;
  --accent-deep: #6C2BE0;
  --accent-soft: #C6A9FF;
  --accent-chip: #2A1D45;
  --accent-chip-border: #6C3BE0;
  --ice:         #4FC3F7;
  --sky:         #5AA8F0;
  --like:        #FF5C8A;

  /* onion skin */
  --onion-prev:  #B05A5A;
  --onion-next:  #5A8A62;

  /* the paper on stage, and the ink that reads well on it */
  --paper:       #F2E4CE;
  --ink:         #23201B;
  --ink-muted:   #6B6157;
  --ink-subtle:  #8C8073;
  --ink-line:    #D9C8AE;

  /* radii (NinoRadius) */
  --r-xs: 4px;  --r-md: 8px;  --r-xl: 12px;
  --r-card: 18px; --r-dialog: 20px; --r-pill: 24px;

  --shell: 1320px;
  --gutter: 60px;
}

/* =========================================================================
   THE SIGNATURE.

   It is not a font chosen for the site: it is the file the app loads,
   res/font/oleo_script_bold.ttf, copied without conversion. Type.kt leaves no
   room — "brand is a SIGNATURE: it applies to the name NinoClip and nothing
   else".

   And the "nothing else" is literal, so it stays confined to .nav__name and
   the footer. The app's own comment explains it: "a script font does not read
   at 11sp on a tool label — it exists to be recognized from a distance".
   ========================================================================= */
@font-face {
  font-family: 'Oleo Script';
  src: url('assets/oleo-script-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--page);
  color: var(--c-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--card); color: var(--c-secondary);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--raised); border-color: #3A3A46; color: var(--c-primary); }
.btn--lg { font-size: 15px; padding: 16px 24px; border-radius: 14px; }

/* ---- the two primaries, copied from the app ----

   The app does NOT have a solid purple button. Its large CTA
   (CartaoNovaAnimacao, in ui/project/ProjectsScreen.kt) is a CARD in
   GradienteMarca, and the button INSIDE it is dark:
   `.background(NinoColors.Canvas)`, with a little white square and the "+" in
   Accent. The gradient shows up in 20 places in the app — CTA, FAB, avatar
   ring; the solid purple, in none.

   Hence the two: over the paper the app's dark button applies; over the dark,
   where dark-on-dark does not read, the brand gradient applies. */
.btn--primary { background: var(--canvas); border-color: var(--canvas); color: #fff; }
.btn--primary:hover { background: #000; border-color: #000; color: #fff; }

/* GradienteMarca = linearGradient(AccentDeep, Accent, Ceu) — Color.kt:217 */
.btn--brand {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent) 55%, var(--sky));
  border-color: transparent; color: #fff;
}
.btn--brand:hover { filter: brightness(1.08); color: #fff; }

/* With the store icon. The `gap` is what keeps the glyph from sticking to the
   word, since here the button is an <a> and inherits spacing from nothing. */
.btn--play { gap: 9px; }
.btn--play svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* On the paper the secondary fades to an outline — two filled buttons side by
   side fight over the click. */
.btn--ink { background: transparent; border-color: var(--ink-line); color: var(--ink); }
.btn--ink:hover { background: rgba(35, 32, 27, .06); border-color: var(--ink-subtle); color: var(--ink); }

/* ================================================================ PAPER ==
   The cream block, which opens and closes the page.
   ======================================================================== */

.paper {
  background: var(--paper);
  color: var(--ink);
  position: relative;
}

/* The seam between the paper and the dark. A single line, the ink's color at
   8% — no shadow and no gradient, which is what would make this look like a card. */
.paper + * { border-top: 1px solid rgba(35, 32, 27, .08); }

/* ------------------------------------------------------------- top bar -- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; }
/* The real icon: res/drawable/logo_app.png, the same one in the store. This
   used to be a gradient square with a white dot in the middle — my invention,
   and the app already had an "n". */
.nav__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; display: block; }
/* A script does not take negative tracking — the letters touch by design, and
   tightening further muddles the "li" in Clip. The size goes from 17 to 23
   because Oleo's x-height is much smaller than Jakarta's: at the same body
   size it would look smaller than the rest of the menu. */
.nav__name {
  font-family: 'Oleo Script', 'Plus Jakarta Sans', cursive;
  font-size: 23px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.nav__links a { color: var(--ink-muted); }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

.tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  color: var(--accent-deep); background: rgba(142, 79, 240, .12);
  border: 1px solid rgba(142, 79, 240, .3); padding: 3px 8px; border-radius: 6px;
}

/* ---------------------------------------------------------------- hero -- */

/* The text column is 560 and not 480: at 480 the title broke into FOUR short
   lines and the two buttons (243 + 245 + 10) did not fit side by side — they
   stacked, and stacking by accident looks like a defect. */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 48px; align-items: center;
  padding-block: 24px 60px;
}

/* Manual kerning of punctuation at display size.

   Plus Jakarta Sans leaves a generous gap BEFORE the ink of the comma and the
   period: measured at 52px/800, the comma has an advance of 20.07px with the
   ink starting 5px in, and the period 6px (on a system font, 0). At 16px that
   is 1.5px and nobody sees it; at 52px it is a clear space, and the title
   starts reading as "frame , now".

   Titles only: in body text the gap is correct and pulling the punctuation in
   would leave it stuck. */
.k { margin-inline-start: -.1em; }

.hero__kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--ink-subtle); margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; font-weight: 800;
  letter-spacing: -1.6px; text-wrap: balance; margin: 0 0 20px;
}
.hero__sub {
  font-size: 17px; line-height: 1.62; color: var(--ink-muted);
  text-wrap: pretty; margin: 0 0 30px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hero__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 13px; color: var(--ink-subtle); font-weight: 600;
  list-style: none; padding: 0; margin: 0;
}
.hero__facts .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-line); }

/* The fox. The ratio is the DRAWING BOX's (1.3722), not the paper's: the hero
   strip comes out cropped to the content — see CROP in make-sprites.mjs. */
.hero__art { position: relative; width: 100%; aspect-ratio: 1.3722; }

/* ================================================================ ANIM ==
   A .nino project's sprite: one horizontal strip with all the frames.

   The step is always the same — the image is 100%×n of the window's width, and
   a translateX of -100%/n moves ONE frame. A transform percentage is relative
   to the element itself, so this stays exact at any size, which is exactly
   what background-position in percentages does NOT give.
   ======================================================================== */

.anim {
  --frames: 12;
  --q: 0;             /* still frame, 0-based */
  --dur: 1s;          /* 12 frames at 12 fps */
  position: absolute; inset: 0; overflow: hidden;
}
.anim__strip {
  position: absolute; top: 0; left: 0;
  height: 100%; width: calc(100% * var(--frames)); max-width: none;
  transform: translateX(calc(-100% / var(--frames) * var(--q)));
}
.anim--playing .anim__strip {
  animation: run var(--dur) steps(var(--frames)) infinite;
}
@keyframes run { from { transform: translateX(0) } to { transform: translateX(-100%) } }

/* The app's onion skin is a PorterDuffColorFilter SRC_IN with alpha 70 — flat
   ink over the alpha, at 27.5%. On the web that is a mask + a solid color, and
   not a filter over the colored art. */
/* ============================================================= SECTIONS == */

.section { padding-block: 104px; }
.section--tight { padding-top: 0; }

.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--accent-soft); margin: 0 0 14px;
}
.eyebrow--cold { color: #7FD7FF; }

.h2 {
  font-size: clamp(29px, 3.2vw, 40px); font-weight: 800; letter-spacing: -1.3px;
  line-height: 1.13; max-width: 680px; text-wrap: pretty; margin: 0 0 16px;
}
.lede {
  font-size: 16px; color: var(--c-muted); max-width: 560px; line-height: 1.6; margin: 0;
}
.section__head { margin-bottom: 44px; }

/* -------------------------------------------------------- workspace ---- */

/* No window bar and no macOS traffic lights: this is not a photo of an
   operating system, it is the studio's workspace. */
.workspace {
  border-radius: var(--r-dialog); background: #101013;
  border: 1px solid var(--divider); overflow: hidden;
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 250px;
  min-height: 512px;
}

.ws__rail {
  border-right: 1px solid #1F1F26; background: #0D0D10;
  padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ws__rail hr { width: 34px; height: 1px; border: 0; background: #22222A; margin: 6px 0; }

.ws__stage { display: flex; flex-direction: column; background: var(--canvas); min-width: 0; }
.ws__viewport { flex: 1; display: grid; place-items: center; padding: 28px; position: relative; }
.ws__paper {
  width: 100%; max-width: 430px; aspect-ratio: 4 / 3; background: var(--paper);
  border-radius: 3px; box-shadow: 0 12px 44px rgba(0, 0, 0, .55);
  position: relative; overflow: hidden;
}
.ws__badge {
  position: absolute; left: 28px; top: 28px;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
  background: rgba(0, 0, 0, .5); color: var(--accent-soft);
}

.ws__foot { border-top: 1px solid #1F1F26; padding: 12px 16px; background: #0D0D10; }
.ws__transport {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--c-muted);
}
.ws__play {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  display: grid; place-items: center; color: #fff; flex: none;
}
.ws__play svg { width: 15px; height: 15px; fill: currentColor; }

.ws__panel {
  border-left: 1px solid #1F1F26; background: #0D0D10; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}

/* The studio's strip shows the WHOLE project, so the cells split the width
   into equal parts instead of having the phone's fixed 64dp — on the desktop
   what matters is fitting everything in view. */
.ws__strip { display: flex; overflow: hidden; position: relative; }
.ws__strip .ed-cell { flex: 1 1 0; width: auto; border-radius: 0; border-left-width: 0; }
.ws__strip .ed-cell:first-child { border-left-width: 1px; }

/* While playing, the highlight moves with playback: one step per frame, on the
   fox's own clock. In a fraction of the strip, and not in pixels, so it
   follows the cells when the window changes size. */
.ws__cursor {
  position: absolute; top: 0; left: 0; height: 44px;
  width: calc(100% / var(--frames, 12));
  border: 2px solid var(--accent); pointer-events: none;
  animation: walk var(--dur, 1s) steps(var(--frames, 12)) infinite;
}
@keyframes walk { from { left: 0 } to { left: 100% } }

/* A faixa de som, embaixo dos quadros e na mesma régua deles. O nome à
   esquerda fica FORA da régua, como no estúdio: é cabeçalho de faixa, não
   conteúdo — se andasse junto, sumiria no primeiro arrasto. */
.ws__lane { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; height: 38px; }
.ws__lane-name {
  flex: 0 0 96px; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--c-muted);
  letter-spacing: .3px; white-space: nowrap;
}
.ws__lane-name svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

.ws__clip {
  flex: 1 1 auto; position: relative; overflow: hidden;
  border-radius: 6px; border: 1px solid #3C2E63;
  background: linear-gradient(180deg, #241B3D, #1B1530);
  display: flex; align-items: center; padding: 0 9px;
}
/* O nome do arquivo fica SOBRE a onda, como no estúdio — e por isso precisa da
   própria base: letra roxa clara sobre barras roxas é o tipo de coisa que só
   fica ilegível depois, na tela de outra pessoa. */
.ws__clip b {
  position: relative; font-size: 10.5px; font-weight: 700;
  color: #E4D5FF; letter-spacing: .2px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(15, 11, 26, .82);
}

/* A onda: cem barras em torno da linha do meio, com batida e vale, que é o
   desenho de um som. A primeira versão era listra de gradiente e parecia
   código de barras — som tem picos, e é o pico que faz o olho reconhecer.

   É ILUSTRAÇÃO: o estúdio desenha a onda dos picos reais do arquivo.
   preserveAspectRatio="none" para ela esticar com o clipe. */
.ws__wave {
  position: absolute; inset: 0; width: 100%; height: 100%;
  stroke: #A87BFF; stroke-width: 2; opacity: .55;
}

@media (max-width: 720px) {
  .ws__lane-name { flex-basis: 62px; font-size: 10px; }
}

.panel-label { font-size: 11.5px; font-weight: 800; color: var(--c-muted); letter-spacing: .4px; }
.brush-card { border-radius: var(--r-card); background: var(--bar); border: 1px solid var(--divider); padding: 12px; }
.brush-card__swatch { height: 44px; border-radius: var(--r-md); background: #0C0C0F; display: grid; place-items: center; margin-bottom: 10px; }
.brush-card__swatch span { width: 80%; height: 6px; border-radius: 99px; background: var(--c-primary); }
.brush-card__meta { display: flex; align-items: center; justify-content: space-between; }
.brush-card__meta b { font-size: 12.5px; font-weight: 700; }
.brush-card__meta code { font-size: 11px; font-weight: 700; color: var(--accent-soft); font-family: ui-monospace, Menlo, monospace; }

.seg { display: flex; gap: 5px; background: var(--bar); border: 1px solid var(--divider); border-radius: var(--r-xl); padding: 4px; }
.seg span { flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; font-size: 11px; font-weight: 700; color: var(--c-subtle); }
.seg span.is-on { background: var(--accent-chip); color: var(--accent-soft); }

.layer { display: flex; align-items: center; gap: 10px; border-radius: var(--r-xl); background: var(--bar); border: 1px solid var(--divider); padding: 9px 11px; }
.layer.is-on { background: var(--accent-chip); border-color: #43308A; }
.layer.is-on .layer__name { color: var(--accent-soft); }
.layer__swatch { width: 26px; height: 26px; border-radius: var(--r-md); flex: none; }
.layer__name { flex: 1; font-size: 12px; font-weight: 700; }
.layer__opacity { font-size: 10.5px; color: #6E6E77; font-weight: 700; }

/* ------------------------------------------------------------ features -- */

/* Twelve columns with bays of different sizes. A perfect 3×2 grid is legible
   and is exactly what makes a page look generated. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.feature {
  border-radius: var(--r-dialog); background: var(--card); border: 1px solid var(--divider);
  padding: 26px 24px; grid-column: span 4;
}
.feature--wide { grid-column: span 7; }
.feature--narrow { grid-column: span 5; }
.feature--half { grid-column: span 6; }
.feature__icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  margin-bottom: 18px; background: var(--accent-chip); color: var(--accent-soft);
}
.feature__icon svg { width: 19px; height: 19px; fill: currentColor; }
.feature__icon--cold { background: #12303B; color: #7FD7FF; }
.feature h3 { font-size: 16px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 9px; }
.feature p { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); margin: 0; text-wrap: pretty; }

/* ------------------------------------------------------------- brushes -- */

/* Multi-column and not grid: the families have 4, 4, 2, 2 and 4 brushes, and a
   grid of equal columns would leave holes under the short ones. `columns`
   packs them by itself, and `break-inside` keeps a card from splitting between
   the columns. */
.families { columns: 2; column-gap: 16px; }
.family {
  break-inside: avoid; margin: 0 0 16px;
  border-radius: var(--r-dialog); background: var(--card);
  border: 1px solid var(--divider); padding: 18px 18px 10px;
}
.family__name {
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  color: var(--c-muted); margin: 0 0 14px;
}
.brush { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.brush__name { font-size: 13px; font-weight: 700; color: var(--c-secondary); }

/* The sample is drawn over the PAPER, not over the page's dark — which is what
   the app does: "barPaint.color = paper" and a drawRect BEFORE the stroke, in
   ui/BrushPickerScreen.kt. Without it the marker and the watercolor, which are
   translucent, darken instead of lightening and stop looking like what they are.

   The svg element clips whatever runs past its edges by itself, which is the
   same "clipToBounds()" as the Canvas over there — it matters because the blur
   of Soft and Airbrush and the displacement of Watercolor leak outside the
   stroke. */
.stroke {
  width: 148px; height: 34px; flex: none; display: block;
  border-radius: var(--r-md); background: var(--paper);
}

/* --------------------------------------------------------------- phone -- */

.sync { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; }
.sync ul { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.sync li { display: flex; gap: 12px; font-size: 14.5px; color: var(--c-secondary); line-height: 1.5; }
.sync li b { color: var(--c-primary); font-weight: 700; }
.link { color: var(--accent-soft); font-weight: 700; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.sync li::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-top: 8px;
}

/* The marketing piece, cut out — with no box at all.

   It did have a frame in the #D3D3D3 grey of the original background. That
   went when the alpha cut-out arrived: the pieces have a WHITE OUTLINE, and it
   is that outline that separates everything from the dark. A box around it
   would only add a border the art no longer needed.

   No CSS box-shadow, on purpose: the image brings its own shadows in alpha
   (black at ~10% — measured), drawn for the composition. A second shadow on
   the outside would fight the ones inside. */
.piece { margin: 0; flex: none; width: min(420px, 100%); }
.piece img { display: block; width: 100%; height: auto; }

/* ================================================= EDITOR PIECES ==
   What the desktop workspace uses from the app's chrome: the tool button and
   the frame strip's cell.

   There was an ENTIRE reconstruction of the phone editor here — top bar,
   floating pill, strip with the playhead arrow, onion skin by mask. It went
   when the marketing piece (.piece) started showing the real app, with the
   device's frame already built in. Git keeps it, if it ever comes back.

   The measurements still come from the code, not from a mockup:
     ToolButton 38dp, Raised floor, md radius .... ui/ToolButton.kt
     strip cell 64×44dp ......................... ui/FrameStripBar.kt */

/* The app's ToolButton — ui/ToolButton.kt, line by line.

   I had drawn it wrong: a transparent button, and the selected one as a chip
   (AccentChip background + border + AccentSoft icon). The real one is the
   opposite in everything, and the file's comment says why:

     "The rework's rule: a bar button has a FLOOR (rounded Raised) — it does
      not float bare."

   So: 38dp with 2dp of padding, a floor in Raised (#1D1D21) and md radius (8,
   not 12). Selected is SOLID Accent with the icon in OnAccent — it is the
   solid purple square that shows up on the device. Disabled does not change
   color: it is the same button at 30% opacity. */
.tbtn {
  width: 38px; height: 38px; flex: none; padding: 2px;
  display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--raised); color: var(--c-muted);
}
.tbtn svg { width: 20px; height: 20px; fill: currentColor; }
.tbtn.is-selected { background: var(--accent); color: #fff; }
.tbtn.is-disabled { opacity: .3; }
.ws__rail .tbtn { width: 44px; height: 44px; border-radius: 10px; }
.ws__rail .tbtn svg { width: 22px; height: 22px; }

/* The tool pill: a translucent capsule, flush right. */
/* Frame strip: wave + 64×44 cells + arrow fixed at 18%. */
.ed-cell {
  width: 64px; height: 44px; flex: none; position: relative;
  border-radius: var(--r-xs); background: var(--raised);
  border: 1px solid var(--divider); overflow: hidden;
}
.ed-cell.is-current { border: 2px solid var(--accent); }
/* The thumbnail keeps the paper's ratio and stays centered in the cell — the
   cell is 64×44 (1.45:1) and the paper is 4:3, so there is a band left on both
   sides. */
.ed-cell__art {
  position: absolute; top: 0; bottom: 0; left: 50%; right: auto; translate: -50% 0;
  aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden;
}
.ed-cell__n {
  position: absolute; left: 3px; top: 2px; z-index: 1;
  font-size: 8px; font-weight: 700; color: #6E6E77;
  font-family: ui-monospace, Menlo, monospace;
}
/* The playhead arrow: fixed, the content runs underneath it. */
/* ----------------------------------------------------------- community -- */

.community__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.community__head p { font-size: 14.5px; color: var(--c-muted); max-width: 380px; line-height: 1.6; text-align: right; margin: 0; }

.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.post { border-radius: var(--r-dialog); overflow: hidden; background: var(--card); border: 1px solid var(--divider); }
/* The card shows the project's PAPER. The box's background is the same color
   as the paper, so the leftover from a 16:9 project in a taller box does not
   become a black band — it disappears. A project taller than the box is
   cropped from the center, as in the feed. */
.post__art { height: 196px; position: relative; overflow: hidden; display: grid; place-items: center; background: var(--paper); }
.post__paper { width: 100%; aspect-ratio: var(--ar); position: relative; }
.post__fps { position: absolute; right: 11px; top: 11px; font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #fff; padding: 4px 8px; border-radius: 6px; }
.post__meta { padding: 14px 16px 16px; }
.post__meta h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.post__by { display: flex; align-items: center; gap: 8px; }
.post__avatar { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.post__author { font-size: 11.5px; color: var(--c-subtle); font-weight: 600; flex: 1; }
.post__likes { font-size: 11px; color: var(--c-subtle); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.post__likes svg { width: 11px; height: 11px; fill: var(--like); }

/* --------------------------------------------------------------- plans -- */

.plans__head { text-align: center; margin-bottom: 44px; }
.plans__head .h2 { max-width: none; margin-inline: auto; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.plan { border-radius: var(--r-dialog); background: var(--card); border: 1px solid var(--divider); padding: 30px 28px; }
.plan--featured { border-color: var(--accent-chip-border); background: #16131E; }
.plan__head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.plan__head b { font-size: 15px; font-weight: 800; }
.plan__tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; color: var(--c-muted); background: var(--raised); }
.plan__tag--accent { color: var(--accent-soft); background: var(--accent-chip); }
.plan__tag--cold { color: #7FD7FF; background: #12303B; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.plan__price b { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; }
.plan__price small { font-size: 12.5px; color: var(--c-subtle); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.plan li::before {
  content: '✓'; flex: none; margin-top: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-chip); color: var(--accent-soft);
  font-size: 9px; font-weight: 800; display: grid; place-items: center;
}
.plan .btn { width: 100%; padding: 14px; font-size: 14px; font-weight: 800; }

/* ------------------------------------------------------------- closing -- */

/* The page closes on the same paper it opened on. */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: center; padding-block: 88px; }
.closing h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -1.5px; margin: 0 0 16px; line-height: 1.1; text-wrap: pretty; }
.closing p { font-size: 16.5px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 30px; max-width: 460px; }
.closing__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.closing__art { position: relative; width: 100%; aspect-ratio: 1.3856; }

/* -------------------------------------------------------------- footer -- */

.footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-block: 64px 48px; }
.footer__about { max-width: 280px; }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__brand b {
  font-family: 'Oleo Script', 'Plus Jakarta Sans', cursive;
  font-size: 21px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.footer__about p { font-size: 12.5px; color: var(--c-subtle); line-height: 1.6; margin: 0; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 64px; }
.footer__cols h4 { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--c-muted); margin: 0 0 14px; }
.footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__cols a { font-size: 12.5px; color: var(--c-subtle); font-weight: 600; }
.footer__cols a:hover { color: var(--c-secondary); }

.legal { border-top: 1px solid var(--divider); padding-bottom: 40px; }
.legal__row { padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11.5px; color: var(--c-disabled); font-weight: 600; }
.legal__row nav { display: flex; gap: 22px; }

/* ------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  :root { --gutter: 40px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 24px 64px; }
  .hero h1 { max-width: 620px; }
  .hero__art { max-width: 620px; }
  .workspace { grid-template-columns: 64px minmax(0, 1fr); }
  .ws__panel { display: none; }
  .sync { grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: start; }
  .closing { grid-template-columns: 1fr; gap: 40px; }
  .closing__art { max-width: 460px; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .feature, .feature--wide, .feature--narrow, .feature--half { grid-column: span 6; }
  .families { columns: 1; }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .community__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .community__head p { text-align: left; }
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .section { padding-block: 76px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .nav__actions .btn:not(.btn--primary) { display: none; }
  .feature, .feature--wide, .feature--narrow, .feature--half { grid-column: span 12; }
  .posts { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .ws__rail { flex-direction: row; border-right: 0; border-bottom: 1px solid #1F1F26; overflow-x: auto; }
  .ws__rail hr { display: none; }
  /* The screen is a FIXED-size drawing: the 372px are what makes the arrow
     land at the app's 113px, and the cells measure 64×44 as on the device. On
     the phone it shrinks by transform — and the negative margins make the
     layout box shrink along with it. Without them the grid keeps reserving
     372px, and the text beside it runs off the edge of the screen without the
     page scrolling. */
.footer__cols { gap: 32px; }
}