@import url("/assets/reference-palette.css");
@import url("/addboards/loader.css");
/* Shared Sakinlab tokens and grid; the landing has its own SaaS composition. */
.ab-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* the logo's boards stand on the text baseline: its box is exactly as tall as the drawing */
.ab-brand span {
  width: 33px;
  aspect-ratio: 33.6 / 18;
  color: var(--ink);
  overflow: visible;
}
.masthead .brand {
  align-items: baseline;
}
.masthead .ab-brand > span {
  display: block;
}
.ab-brand svg {
  width: 100%;
  height: 100%;
}
.ab-content {
  margin-inline: var(--m);
  padding-inline: var(--inset);
}
.ab-content h1 {
  font: 500 clamp(36px, 4.5vw, 68px) / 1.04 var(--font-sans);
  letter-spacing: -0.045em;
  margin: 24px 0;
}
.ab-content h2 {
  font: 500 clamp(28px, 3vw, 44px) / 1.12 var(--font-sans);
  letter-spacing: -0.035em;
  margin: 16px 0 32px;
}
.ab-content h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ab-content p {
  line-height: 1.5;
}
.ab-kicker {
  font: 500 11px var(--font-sans);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.ab-note {
  font-size: 12px;
  color: var(--ink-soft);
}
.ab-content button,
.ab-primary {
  font: 500 14px var(--font-sans);
  padding: 12px 20px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-chip);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ab-primary,
.ab-content button.ab-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: transparent;
}
.ab-content button:hover:not(:disabled) {
  background: var(--chip-hover);
}
.ab-content button.ab-primary:hover:not(:disabled),
a.ab-primary:hover {
  background: var(--c-accent-hover);
}
.ab-content button:disabled {
  cursor: default;
  color: var(--ink-soft);
}
.ab-content button.ab-primary:disabled {
  color: var(--c-on-accent);
}
.ab-content [hidden] {
  display: none !important;
}
.ab-content :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
/* Hero: the pitch in the middle, ads flowing past on both sides. Add turns them into board tags,
   then small boxes inside the folders under the buttons (landing.js). */
.ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr);
  gap: var(--u);
  height: clamp(640px, calc(100vh - 72px), 820px);
  margin-bottom: 24px;
}
.ab-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.ab-stream {
  display: flex;
  gap: 12px;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.ab-col {
  flex: 1;
  min-width: 0;
}
.ab-col-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ab-ad {
  margin: 0;
  flex: none;
  transition: opacity var(--duration-scene, 400ms) var(--ease-out-ui, ease-out);
}
.ab-ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* once the ads are added, their empty cards keep flowing behind, soft fills at mixed strengths */
.ab-ad {
  border-radius: 12px;
}
.ab-hero.is-added .ab-ad {
  visibility: visible;
  background: var(--hair);
  opacity: 0.55;
}
.ab-hero.is-added .ab-ad:nth-child(3n + 1) {
  opacity: 0.25;
}
.ab-hero.is-added .ab-ad:nth-child(5n + 2) {
  opacity: 0.9;
}
.ab-hero.is-added .ab-ad:nth-child(7n + 4) {
  opacity: 0.4;
}
.ab-hero.is-added .ab-ad img {
  opacity: 0;
}
.ab-ad img {
  transition: opacity var(--duration-scene, 400ms) var(--ease-out-ui, ease-out);
}
.ab-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* the boards start as quiet pills and open into folders when the ads arrive */
/* before Add the four pills sit side by side in the middle (8px apart); Add spreads them to their folders */
@media (min-width: 1000px) {
  .demo-boards:not(.is-open) .demo-board {
    transform: translateX(calc((1.5 - var(--n)) * ((100cqw - 36px) / 4 + 12px - 120px)));
  }
}
/* the same grid before and after, so the pill only grows into its folder: width, height and corners ease */
.demo-boards:not(.is-open) .demo-board {
  width: 112px;
  padding: 8px 10px;
  border-radius: 18px;
}
.demo-boards:not(.is-open) .demo-board::before {
  opacity: 0;
}
.demo-boards:not(.is-open) .demo-slot {
  max-height: 0;
  margin-top: 0;
}
.demo-board,
.demo-board::before,
.demo-slot {
  transition: all 640ms cubic-bezier(0.3, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .demo-board,
  .demo-board::before,
  .demo-slot {
    transition: none;
  }
}
.ab-hero #demo-add,
.ab-hero .ab-actions > a {
  font-size: 15px;
  padding: 11px 56px;
  border-radius: 999px;
  min-width: 0;
}
.ab-ad.is-taken {
  visibility: hidden;
}
.topic-sage {
  --topic: var(--folder-sage);
}
.topic-clay {
  --topic: var(--folder-clay);
}
.topic-sky {
  --topic: var(--folder-sky);
}
.topic-ochre {
  --topic: var(--folder-ochre);
}
.ab-hero .ab-actions {
  margin-top: 8px;
}
.ab-hero #demo-add {
  min-width: 112px;
}
/* Folders: a tab on the top-left corner, as in the library */
.demo-boards {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 36px;
}
.demo-board {
  position: relative;
  justify-self: center;
  width: 100%;
  padding: 10px 10px 12px;
  border-radius: 0 12px 12px 12px;
  background: color-mix(in srgb, var(--topic) 10%, var(--paper));
  text-align: left;
}
.demo-board::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 48%;
  height: 12px;
  border-radius: 8px 10px 0 0;
  background: color-mix(in srgb, var(--topic) 10%, var(--paper));
}
.demo-board > span {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.demo-board > small {
  float: right;
  font-size: 11px;
  color: var(--ink-soft);
}
.demo-slot {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  max-height: 80px;
  margin-top: 10px;
  overflow: hidden;
}
/* an ad in a folder: a tag with its headline */
.demo-box {
  display: block;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--topic) 22%, var(--paper));
  font: 500 11px/24px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ab-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-soft);
}
.ab-facts li + li::before {
  content: "·";
  margin: 0 10px;
}
/* the moving piece: an ad, then its board's tag, then a small box (landing.js animates it) */
.ab-morph {
  position: fixed;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--topic) 22%, var(--paper));
  color: var(--ink);
  font: 500 13px var(--font-sans);
  white-space: nowrap;
}
.ab-morph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-morph span {
  position: relative;
  max-width: 100%;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#demo-status {
  min-height: 20px;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.ab-content .ab-pause {
  margin-top: 4px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  font-size: 11px;
  color: var(--ink-soft);
}
@media (max-width: 1219px) {
  .ab-col + .ab-col {
    display: none;
  }
  .ab-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  }
}
/* narrow: one row of ads flowing sideways between the pitch and the folders */
@media (max-width: 999px) {
  .ab-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    gap: 0;
    padding-top: 24px;
  }
  .ab-hero-text {
    display: contents;
  }
  .ab-hero-text > * {
    order: 1;
  }
  .ab-hero .ab-stream.is-left {
    order: 2;
    align-self: stretch;
    margin-top: 32px;
  }
  .ab-hero :is(.demo-boards, #demo-status, .ab-pause, .ab-facts) {
    order: 3;
  }
  .ab-stream.is-right {
    display: none;
  }
  .ab-stream {
    -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .ab-col-track {
    flex-direction: row;
    width: max-content;
  }
  .ab-ad {
    width: 104px;
  }
}
.ab-hero h1 {
  max-width: none;
  font-size: clamp(36px, 4vw, 58px);
}
.ab-lead {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 42ch;
}
.ab-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
}
.ab-section {
  padding: calc(var(--m) * 0.65) 0;
  border-top: 1px solid var(--hair-strong);
}
.ab-workflow,
.ab-plans {
  text-align: center;
}
.ab-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--m);
  padding-top: 24px;
}
.ab-three p {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 30ch;
  margin-inline: auto;
}
.step-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 28px;
  background: var(--c-accent-soft);
  border-radius: var(--r-chip);
  color: var(--c-accent-text);
}
.ab-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m);
  align-items: center;
}
.ab-product p:not(.ab-kicker) {
  color: var(--ink-soft);
  font-size: 18px;
}
.ab-product .ab-primary {
  margin-top: 16px;
}
.library-preview {
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-chip);
  background: var(--paper);
  overflow: hidden;
}
.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding: 16px;
  font-size: 12px;
}
.preview-bar > [data-glyph] {
  width: 29px;
  height: 16px;
}
.preview-bar svg {
  width: 100%;
  height: 100%;
}
.preview-bar > span:last-child {
  margin-left: auto;
  color: var(--ink-soft);
}
#library-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px;
}
#library-art img {
  width: 100%;
  border-radius: 4px;
}
.preview-tags {
  display: flex;
  gap: 8px;
  padding: 0 24px 24px;
  font-size: 11px;
}
.preview-tags span {
  padding: 4px 8px;
  background: var(--chip);
  border-radius: 4px;
}
.ab-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u);
  text-align: left;
  max-width: calc(var(--m) * 10);
  margin-inline: auto;
}
.ab-two article {
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-chip);
  padding: 32px;
  background: var(--paper);
}
.ab-two p {
  font-size: 15px;
  color: var(--ink-soft);
}
.ab-two small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}
.ab-two li {
  line-height: 1.8;
}
.ab-faq {
  max-width: calc(var(--m) * 10);
  margin-inline: auto;
}
.ab-faq h2 {
  font-size: 28px;
}
.ab-faq details {
  border-bottom: 1px solid var(--hair);
  padding: 20px 0;
}
.ab-faq summary {
  cursor: pointer;
  font-size: 16px;
}
.ab-faq p {
  max-width: 64ch;
  color: var(--ink-soft);
}
.ab-editorial {
  max-width: 900px;
  padding-block: var(--m);
  min-height: 55vh;
}
.ab-editorial > p {
  max-width: 58ch;
  font-size: 18px;
  color: var(--ink-soft);
}
.colophon nav {
  display: flex;
  gap: 20px;
}
/* The sliding mark of the day/night switch (tool.js) floats over the group; without this it would take room
   and push the header's links left for a moment. Same rule as tool-base.css, which these pages do not load. */
.sk-sliding {
  isolation: isolate;
}
.sk-slide-mark {
  position: absolute;
  z-index: -1;
  margin: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
/* Sign up in the header, the plans, the features, the closing call and the sign-up dialog. */
.ab-signup {
  white-space: nowrap;
  font: 500 13px var(--font-sans);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--c-accent);
  color: var(--c-on-accent);
  cursor: pointer;
}
.ab-signup:hover {
  background: var(--c-accent-hover);
}
.ab-signup:focus-visible,
.ab-dialog :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.ab-content .ab-big {
  font-size: 16px;
  padding: 16px 28px;
}
.ab-center {
  text-align: center;
}
h2.ab-center {
  margin-inline: auto;
}
.ab-ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.ab-ticks li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--c-accent-text);
  font-weight: 600;
}
.ab-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u);
  text-align: left;
  max-width: calc(var(--m) * 10);
  margin: 0 auto;
}
.ab-plan {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-chip);
  background: var(--paper);
}
.ab-plan.is-plus {
  border: 2px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent-soft) 45%, var(--paper));
}
.ab-plan h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ab-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 24px;
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}
.ab-price {
  margin: 16px 0 4px;
}
.ab-price b {
  font: 500 44px / 1 var(--font-sans);
  letter-spacing: -0.04em;
}
.ab-price span {
  font-size: 13px;
  color: var(--ink-soft);
}
.ab-plan > p:not(.ab-price) {
  font-size: 14px;
  color: var(--ink-soft);
}
.ab-plan ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
  flex: 1;
}
.ab-plan li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.35;
}
.ab-plan li svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--c-accent-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-plan > .ab-limit {
  margin: -8px 0 24px;
  font-size: 13px;
}
.ab-plan > :is(a, button) {
  align-self: stretch;
}
.ab-plan.is-plus > button {
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}
.ab-cta {
  text-align: center;
  padding-bottom: calc(var(--m) * 0.8);
}
.ab-cta h2 {
  margin-bottom: 24px;
}
.ab-dialog {
  max-width: min(460px, calc(100vw - 32px));
  padding: 32px;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}
.ab-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.ab-dialog h2 {
  font: 500 26px / 1.15 var(--font-sans);
  letter-spacing: -0.03em;
  margin: 8px 0 16px;
}
.ab-dialog p:not(.ab-kicker) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ab-points {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
  display: grid;
  gap: 16px;
}
.ab-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ab-points svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--c-accent-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-points span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ab-points b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.ab-dialog p.ab-note {
  font-size: 13px;
  margin: 0;
}
.ab-dialog .ab-actions {
  justify-content: flex-start;
  gap: 16px;
}
.ab-dialog .ab-primary {
  font: 500 14px var(--font-sans);
  padding: 12px 20px;
  border-radius: var(--r-chip);
  text-decoration: none;
}
.ab-link {
  color: var(--ink);
}
.ab-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--ink-soft);
  font-size: 22px;
  cursor: pointer;
}
.ab-close:hover {
  background: var(--chip);
}
@media (max-width: 1000px) {
  .ab-content {
    margin-inline: var(--u);
  }

  .ab-three {
    gap: 24px;
  }
  .ab-two,
  .ab-faq,
  .ab-plans-grid {
    max-width: 100%;
  }
}
@media (max-width: 613px) {
  .ab-three,
  .ab-two,
  .ab-product,
  .ab-plans-grid {
    grid-template-columns: 1fr;
  }
  .demo-boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .ab-ad {
    width: 88px;
  }
  .ab-hero {
    padding: 32px 0 24px;
  }
  .ab-content h1 {
    font-size: 42px;
    margin: 20px 0;
  }
  .ab-lead {
    font-size: 16px;
  }
  .ab-lead br {
    display: none;
  }
  .ab-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .ab-actions > * {
    font-size: 12px;
    padding: 12px;
  }
  .ab-plan {
    padding: 24px;
  }
  .ab-signup {
    padding: 6px 12px;
    font-size: 12px;
  }
  .ab-dialog {
    padding: 24px;
  }
  .ab-section {
    padding: 40px 0;
  }
  .ab-three {
    gap: 24px;
  }
  .ab-product {
    gap: 32px;
  }
  .ab-product h2 {
    font-size: 36px;
  }
  .ab-two article {
    padding: 24px;
  }
  .colophon .inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .masthead .brand > span {
    display: none;
  }
  .masthead .tail {
    gap: 12px;
  }
  .masthead .tail .nav-link[href="/addboards/app/"],
  .masthead .tail .nav-link[href="/app/"] {
    display: none;
  }
  .ab-brand span {
    width: 28px;
  }
  .ab-editorial {
    padding-block: 32px;
  }
  .preview-bar {
    padding: 12px;
  }
  .preview-tags {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-col-track {
    animation: none;
  }
  .ab-ad {
    transition: none;
  }
}

/* Hero title: the words arrive one by one; "Add" first shows the logo's shimmer, then turns into the word.
   What follows the title comes in right after, briefly. Still when motion is reduced. */
.ab-title .ab-w {
  display: inline-block;
  animation: ab-word 560ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(80ms + var(--i) * 70ms);
}
.ab-add-word {
  position: relative;
}
.ab-add-logo {
  position: absolute;
  left: 50%;
  top: 52%;
  translate: -50% -50%;
  display: block;
  width: 1.493333em; /* six boards at their native 33.6:18 ratio; pairs have a slightly wider gap */
  height: 0.8em;
  color: var(--c-accent);
  animation: ab-logo-out 260ms ease-in both 1.5s;
}
.ab-add-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.ab-add-text {
  display: inline-block;
  opacity: 0;
  animation: ab-add-in 420ms cubic-bezier(0.2, 0, 0, 1) forwards 1.6s;
}
@keyframes ab-add-in {
  from {
    opacity: 0;
    transform: translateY(0.3em);
    filter: blur(4px);
  }
  to {
    opacity: 1;
  }
}
.ab-hero-text > :not(h1, .ab-kicker) {
  animation: ab-word 420ms cubic-bezier(0.2, 0, 0, 1) both 760ms;
}
@keyframes ab-word {
  from {
    opacity: 0;
    transform: translateY(0.3em);
    filter: blur(4px);
  }
}
@keyframes ab-logo-out {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-title .ab-w,
  .ab-add-text,
  .ab-hero-text > * {
    animation: none;
    opacity: 1;
  }
  .ab-add-logo {
    display: none;
  }
}

/* Home header: existing theme buttons fold into one cycling control. */
.ab-home .ab-nav-links { display:flex; align-items:center; gap:20px; }
.ab-home .ab-extension { color:var(--muted); }
.ab-home .ab-signup { text-decoration:none; }
.ab-home .settings [data-theme-set]:not([aria-pressed="true"]) { display:none; }
@media (max-width:1000px) {
  .ab-home .masthead .inner { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding-block:12px; }
  .ab-home .masthead .brand > span { display:none; }
  .ab-home .masthead .tail { display:contents; }
  .ab-home .ab-nav-links { grid-column:1/-1; grid-row:2; justify-content:space-between; gap:10px; font-size:11px; }
}