SpaceXAI Grok 4.7 – Social Media

via xAI · Generated

  • AIMAC Debt 0.00
  • Cost $0.07
  • Total Violations 0
  • HTML Size 35 KB
  • Em Dashes 6

Screenshot

View SpaceXAI Grok 4.7 Social Media page View Live Page

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kinora — Communities that stay</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,520;9..144,640&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
:root {
  --ink: #1b1916;
  --muted: #5c564e;
  --paper: #f4efe7;
  --card: #fffdf9;
  --line: #e4dcd0;
  --deep: #1c3d4a;
  --deep-2: #14303a;
  --clay: #c2562d;
  --clay-d: #9d4120;
  --sage: #3f6b58;
  --gold: #c9a15b;
  --shadow: 0 18px 40px rgba(28, 25, 22, 0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-size: 18px;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 239, 231, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 220px; }
.brand img { width: 46px; height: 46px; border-radius: 12px; }
.brand strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand span { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.25; max-width: 220px; }
nav.primary { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
nav.primary a {
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 8px 12px; border-radius: 999px; color: var(--deep);
}
nav.primary a:hover, nav.primary a[aria-current="page"] { background: var(--deep); color: #f7f3ec; }
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px;
  align-items: center; padding: 64px 0 40px;
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: #efe4d4; color: var(--clay-d); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem;
  padding: 6px 12px; border-radius: 999px;
}
h1 {
  font-family: Fraunces, Georgia, serif; font-weight: 640;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05;
  letter-spacing: -0.03em; margin: 14px 0 16px;
}
.lede { font-size: 1.15rem; color: #3d3832; max-width: 58ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.btn {
  border: 0; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-family: inherit; font-size: 1rem;
  padding: 12px 18px; border-radius: 12px;
}
.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: var(--clay-d); }
.btn-ghost { background: transparent; color: var(--deep); border: 1.5px solid var(--deep); }
.btn-ghost:hover { background: var(--deep); color: #fff; }
.btn-small { padding: 8px 12px; font-size: 0.9rem; border-radius: 10px; }
.stats { display: flex; gap: 22px; padding: 0; margin: 8px 0 0; list-style: none; }
.stats strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.45rem; }
.stats span { color: var(--muted); font-size: 0.88rem; }
.hero-visual { position: relative; }
.hero-visual img.cover { width: 100%; height: 460px; object-fit: cover; border-radius: 28px; }
.float-card {
  position: absolute; left: -28px; bottom: 28px;
  background: var(--card); border-radius: 18px; padding: 14px 16px;
  box-shadow: var(--shadow); width: min(280px, 80%);
  display: flex; gap: 10px; align-items: center;
}
.float-card img { width: 42px; height: 42px; border-radius: 50%; }
.float-card p { margin: 0; font-size: 0.92rem; }
.section { padding: 56px 0; }
.section h2 {
  font-family: Fraunces, Georgia, serif; font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.1;
}
.sub { color: var(--muted); max-width: 68ch; margin-top: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.card h3 { margin: 12px 0 8px; font-size: 1.25rem; letter-spacing: -0.02em; }
.card p { margin: 0 0 12px; color: #3a352f; }
.tag {
  display: inline-block; background: #efe7da; color: var(--deep);
  font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 999px;
}
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.group {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; margin-bottom: 16px;
}
.group img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.group div { padding: 14px 16px 16px 0; }
.group h3 { margin: 6px 0; }
.side { position: sticky; top: 92px; display: grid; gap: 16px; }
.side h3 { margin: 0 0 10px; font-size: 1.05rem; }
.person { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.person img { width: 44px; height: 44px; border-radius: 50%; }
.person p { margin: 0; font-size: 0.95rem; }
.person small { color: var(--muted); }
.live { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d64545; display: inline-block; margin-right: 6px; }
.post {
  display: grid; grid-template-columns: 220px 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 18px;
}
.post img.media { width: 100%; height: 100%; object-fit: cover; min-height: 210px; }
.post .body { padding: 18px 20px; }
.meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.meta img { width: 36px; height: 36px; border-radius: 50%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.reacted { background: #f3d7cc !important; color: var(--clay-d) !important; }
.studio {
  background: var(--deep); color: #f6f1ea; border-radius: 28px; padding: 32px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px;
}
.studio h2, .studio p { color: #f6f1ea; }
.studio .sub { color: #d7cfc3; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.chip {
  background: transparent; color: #f6f1ea; border: 1px solid rgba(246,241,234,0.35);
  border-radius: 999px; padding: 8px 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.chip.active { background: var(--gold); color: #1b1916; border-color: var(--gold); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 14px;
}
.metric strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.8rem; }
.metric span { color: #d7cfc3; font-size: 0.88rem; }
.barline { height: 8px; background: rgba(255,255,255,0.12); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.barline i { display: block; height: 100%; background: var(--gold); width: 40%; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
blockquote {
  margin: 0; background: var(--card); border-radius: 18px; padding: 20px;
  border: 1px solid var(--line);
}
blockquote p { font-size: 1.02rem; }
.who { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.who img { width: 40px; height: 40px; border-radius: 50%; }
details {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
}
summary { cursor: pointer; font-weight: 700; }
footer {
  background: var(--deep-2); color: #efe8de; margin-top: 40px; padding: 48px 0 24px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
footer a { color: #efe8de; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer h4 { margin: 0 0 10px; font-family: Fraunces, Georgia, serif; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 6px 0; }
.legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 28px; padding-top: 16px; font-size: 0.9rem; color: #cfc6ba; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.note { font-size: 0.92rem; color: #d7cfc3; }
@media (max-width: 960px) {
  .hero, .layout, .studio, .quotes, .grid-3, .foot-grid, .post, .group { grid-template-columns: 1fr; }
  .group img, .post img.media, .hero-visual img.cover { height: 240px; }
  .float-card { left: 12px; }
  nav.primary { margin-left: 0; }
  .bar { flex-wrap: wrap; }
  .side { position: static; }
}
</style>
</head>
<body>
<header class="site">
  <div class="wrap bar">
    <a class="brand" href="#top">
      <img src="https://placehold.co/92x92/1c3d4a/f4efe7?text=K&font=montserrat" alt="Kinora logo">
      <div>
        <strong>Kinora</strong>
        <span>Communities that stay, not feeds that vanish.</span>
      </div>
    </a>
    <nav class="primary" aria-label="Primary">
      <a href="#about">About</a>
      <a href="#feed" aria-current="page">Feed</a>
      <a href="#groups">Groups</a>
      <a href="#updates">Updates</a>
      <a href="#studio">Creators</a>
      <a href="#stories">Stories</a>
      <a href="#faq">Help</a>
    </nav>
  </div>
</header>

<main id="top">
  <div class="wrap hero">
    <div>
      <span class="kicker">Social network for lasting circles</span>
      <h1>Share with people who actually stay in the conversation.</h1>
      <p class="lede">Kinora is a social platform for networking, messaging, and online communities that reward depth over volume. Members publish user-generated content, host small groups, and read engagement metrics that describe real relationships—not just a spike from a single influencer post. We built the product for neighborhoods, studios, alumni circles, and independent creators who were tired of shouting into an algorithmic void.</p>
      <p class="lede">The homepage you are reading is the public front door: a living snapshot of platform updates, group discoveries, and featured posts from members who opted into the open feed. Private circles stay private. Public ones are here so newcomers can see the tone before they join.</p>
      <div class="cta-row">
        <a class="btn btn-primary" href="#groups">Connect</a>
        <a class="btn btn-ghost" href="#feed">Send Message</a>
      </div>
      <ul class="stats">
        <li><strong>4.8M</strong><span>active members</span></li>
        <li><strong>126k</strong><span>moderated groups</span></li>
        <li><strong>41%</strong><span>replies within a day</span></li>
      </ul>
    </div>
    <div class="hero-visual">
      <img class="cover" src="https://picsum.photos/880/700?grayscale" alt="Members gathered around a shared table during a community evening">
      <div class="float-card">
        <img src="https://i.pravatar.cc/84?u=kinora-mira" alt="Avatar of Mira Chen">
        <p><strong>Mira Chen</strong> reacted to your field note. “This is the kind of thread our pottery circle actually finishes.”</p>
      </div>
    </div>
  </div>

  <section class="section" id="about">
    <div class="wrap">
      <h2>About Kinora</h2>
      <p class="sub">Kinora began as a private messaging room for three design studios in Portland and Lisbon who wanted a shared place that was neither a workplace chat nor a public broadcast network. The name comes from an old word for kindred company. Today the platform still treats every circle as a room with a host, a purpose, and a pace.</p>
      <div class="grid-3">
        <article class="card">
          <span class="tag">Networking</span>
          <h3>Introductions with context</h3>
          <p>Profiles show what you make, where you gather, and which groups vouched for you. A connection request is a short letter, not a tap. Hosts can see mutual circles before they accept, which keeps cold outreach from flooding quiet communities.</p>
          <p>We publish a quarterly trust review so members can see how introductions convert into ongoing conversations, not vanity follower counts.</p>
        </article>
        <article class="card">
          <span class="tag">Messaging</span>
          <h3>Threads that remember</h3>
          <p>Direct messages, small rooms, and group channels share one composer. You can pin a decision, quote a photo, or hand a thread to a co-host without exporting the history into another app. Quiet hours are respected across time zones.</p>
          <p>End-to-end options are available for private circles. Public groups remain searchable so newcomers can read the room first.</p>
        </article>
        <article class="card">
          <span class="tag">Communities</span>
          <h3>Hosts, not algorithms</h3>
          <p>Ranking inside a group is set by the host: newest, most discussed, or a curated shelf. Kinora’s wider discovery feed only surfaces posts that a circle has marked as open. That keeps user-generated content from being stripped of the community that gave it meaning.</p>
          <p>Moderation tools include shared guidelines, appeal notes, and a human review desk staffed in three regions.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section" id="updates">
    <div class="wrap">
      <h2>Platform updates</h2>
      <p class="sub">This spring’s release focuses on clearer engagement metrics for hosts and a calmer way for influencers—whether they have two hundred neighbors or two hundred thousand readers—to collaborate without taking over a room.</p>
      <div class="grid-3">
        <article class="card">
          <img src="https://picsum.photos/640/360?random=21" alt="A host reviewing a calm analytics board on a laptop" style="border-radius:14px; height:160px; width:100%; object-fit:cover;">
          <h3>Atlas, the host desk</h3>
          <p>Atlas replaces the old insights page. Hosts can see which prompts sparked replies, which members returned after thirty days, and where a thread went quiet. The numbers are explained in plain language: a rising save rate means people intend to come back, not that a post “won.”</p>
          <p>We removed public like-races from group homepages. Reactions still exist, but they sit beside comments so a heart is not the only signal a creator receives.</p>
          <a class="btn btn-ghost btn-small" href="#studio">Open the studio preview</a>
        </article>
        <article class="card">
          <img src="https://picsum.photos/640/360?random=22" alt="Hands arranging printed photographs on a cork wall" style="border-radius:14px; height:160px; width:100%; object-fit:cover;">
          <h3>Shelves for user-generated content</h3>
          <p>Members can gather photos, voice notes, and short essays onto a shelf that a group co-owns. Shelves are how potters, birders, and city archivists have been publishing seasonal collections without turning every image into a separate post fighting for attention.</p>
          <p>Downloads stay with the creator’s license. Kinora does not claim ownership of member work, and attribution travels with every share.</p>
        </article>
        <article class="card">
          <img src="https://picsum.photos/640/360?random=23" alt="A small stage with warm lights before an evening talk" style="border-radius:14px; height:160px; width:100%; object-fit:cover;">
          <h3>Guest hours for creators</h3>
          <p>An influencer can visit a group for a hosted hour without being added as a permanent member. The visit is announced, time-boxed, and followed by a reflection thread the host controls. It is collaboration with a door that closes.</p>
          <p>Brands that want a presence apply through Circles for Organizations. We decline campaigns that ask hosts to hide sponsorship.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section" id="groups">
    <div class="wrap">
      <h2>Group discoveries</h2>
      <p class="sub">These circles opened their doors this week. Each one publishes a charter, a weekly rhythm, and a note on what kind of contribution they welcome. If a room fits, send a connection note to the host rather than dropping a link and leaving.</p>
      <div class="layout">
        <div>
          <article class="group">
            <img src="https://picsum.photos/400/320?random=31" alt="Coastal path at dusk">
            <div>
              <span class="tag">Outdoors · 2,410 members</span>
              <h3>Low Tide Field Notes</h3>
              <p>A coastal walking circle that trades tide charts, sketch scans, and short audio from shorelines between Galicia and the Pacific Northwest. Hosts ask for observation before opinion. New members introduce themselves with one place they return to every season.</p>
              <p>This month’s prompt, “what the water kept,” has already drawn 180 pieces of user-generated content and a unusually high save rate—people are bookmarking essays to reread on the next walk.</p>
              <a class="btn btn-primary btn-small" href="#feed">Connect</a>
            </div>
          </article>
          <article class="group">
            <img src="https://picsum.photos/400/320?random=32" alt="Kitchen counter with shared dishes">
            <div>
              <span class="tag">Food · 890 members</span>
              <h3>Weeknight Supper League</h3>
              <p>Home cooks trading thirty-minute meals that survive a tired Tuesday. The group bans brand placements unless a member genuinely uses the product at home. Recipes are written so a neighbor can cook them without a specialty shop.</p>
              <p>Engagement metrics here favor completed cook-alongs over impressions. Hosts celebrate the quiet metric: how many people reported making the dish twice.</p>
              <a class="btn btn-primary btn-small" href="#feed">Send Message</a>
            </div>
          </article>
          <article class="group">
            <img src="https://picsum.photos/400/320?random=33" alt="Sketchbooks open on a studio table">
            <div>
              <span class="tag">Design · 1,120 members</span>
              <h3>Margin Studies</h3>
              <p>Typographers and independent publishers sharing works-in-progress before they are polished for a portfolio. Critique is structured: one observation, one question, one suggestion. The room has become a reliable alternative to performing expertise in public.</p>
              <p>A visiting letterpress influencer joins for guest hours on the first Thursday, then the regulars take the thread back.</p>
              <a class="btn btn-primary btn-small" href="#feed">Connect</a>
            </div>
          </article>
        </div>
        <aside class="side" aria-label="Community sidebar">
          <div class="card">
            <h3>Suggested follows</h3>
            <div class="person">
              <img src="https://i.pravatar.cc/88?u=kinora-ade" alt="">
              <p><strong>Ade Okonkwo</strong><br><small>Hosts city archive walks</small></p>
            </div>
            <div class="person">
              <img src="https://i.pravatar.cc/88?u=kinora-leah" alt="">
              <p><strong>Leah Voss</strong><br><small>Documents neighborhood kitchens</small></p>
            </div>
            <div class="person">
              <img src="https://i.pravatar.cc/88?u=kinora-jon" alt="">
              <p><strong>Jon Park</strong><br><small>Moderates night-sky circles</small></p>
            </div>
            <a class="btn btn-ghost btn-small" href="#stories">See why members follow</a>
          </div>
          <div class="card">
            <h3>Live streams</h3>
            <div class="live"><span><i class="dot"></i>Press check, Lisbon</span><span>142 watching</span></div>
            <div class="live"><span><i class="dot"></i>Tide walk audio</span><span>67 listening</span></div>
            <div class="live"><span><i class="dot"></i>Host office hours</span><span>39 in room</span></div>
            <p style="font-size:0.92rem;color:var(--muted);">Streams are opt-in and archived only if the host marks them public. No surprise recordings.</p>
          </div>
          <div class="card">
            <h3>Community highlights</h3>
            <p>Margin Studies crossed a year without a removed post. Weeknight Supper League funded three community fridges from optional member dues. Low Tide Field Notes partnered with a coastal school on a spring sketch exchange.</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section" id="feed">
    <div class="wrap">
      <h2>Featured posts</h2>
      <p class="sub">A small selection from the open feed. React if a piece stays with you, or send a message to the author. Reactions here are weighted lightly in discovery so a thoughtful comment still outranks a passing tap.</p>
      <article class="post">
        <img class="media" src="https://picsum.photos/520/420?random=41" alt="Notebook and pencil beside a window">
        <div class="body">
          <div class="meta">
            <img src="https://i.pravatar.cc/72?u=kinora-sora" alt="">
            <div><strong>Sora Almeida</strong><br><small>Margin Studies · 6 hours ago</small></div>
          </div>
          <h3>On leaving the last line unfinished</h3>
          <p>I used to publish only when a layout felt sealed. This month I posted the rough leading, the bad rag, and the note I wrote to myself in the margin. The replies were better than any polished case study I have shared on other networks. People annotated the problem instead of applauding the finish.</p>
          <p>If you host a critique circle, try a rule we stole from a print shop: no praise in the first ten comments. It sounds severe. It made the room kinder, because members stopped performing enthusiasm and started helping.</p>
          <div class="actions">
            <button class="btn btn-ghost btn-small" data-react>React</button>
            <a class="btn btn-primary btn-small" href="#studio">Send Message</a>
          </div>
        </div>
      </article>
      <article class="post">
        <img class="media" src="https://picsum.photos/520/420?random=42" alt="Evening market stalls with warm light">
        <div class="body">
          <div class="meta">
            <img src="https://i.pravatar.cc/72?u=kinora-leah" alt="">
            <div><strong>Leah Voss</strong><br><small>Weeknight Supper League · yesterday</small></div>
          </div>
          <h3>The market list that survived a storm week</h3>
          <p>Our city lost power in pockets on Tuesday. Members posted what they could cook from a cold kitchen: canned tomatoes, sturdy greens, bread that was already in the house. Nobody asked for a brand. The thread became a map of who had a gas ring and who needed a plate dropped at the door.</p>
          <p>This is the engagement I want our metrics to honor. Not reach. Return. Twelve people cooked the same pot of beans and wrote back the next night. That is a community, not a campaign.</p>
          <div class="actions">
            <button class="btn btn-ghost btn-small" data-react>React</button>
            <a class="btn btn-primary btn-small" href="#groups">Connect</a>
          </div>
        </div>
      </article>
    </div>
  </section>

  <section class="section" id="studio">
    <div class="wrap">
      <div class="studio">
        <div>
          <span class="kicker" style="background:#2c5564;color:#f6e7c8;">Engagement analytics</span>
          <h2>Read the room before you post again.</h2>
          <p class="sub">Kinora’s studio is a lightweight desk for hosts and independent creators. Pick a content type and a window. The figures below are a sample from a composite circle—useful for learning the language of our metrics, not a live account. Saves, reply depth, and return rate matter more here than raw impressions.</p>
          <p>An influencer collaboration shows up as a separate series so a guest hour does not distort a group’s baseline. If reply depth falls while impressions rise, Atlas will say so in a sentence, not a chart you have to decode.</p>
          <div class="controls" role="group" aria-label="Content type">
            <button class="chip active" data-kind="essay">Essays</button>
            <button class="chip" data-kind="photo">Photo shelves</button>
            <button class="chip" data-kind="audio">Audio notes</button>
            <button class="chip" data-kind="guest">Guest hours</button>
          </div>
          <div class="controls" role="group" aria-label="Time window">
            <button class="chip active" data-window="7">7 days</button>
            <button class="chip" data-window="30">30 days</button>
            <button class="chip" data-window="90">90 days</button>
          </div>
          <p class="note" id="insight">Essays this week are being saved more than they are skimmed. Members are treating them as references, which usually predicts a strong return rate next week.</p>
        </div>
        <div class="metric-grid" aria-live="polite">
          <div class="metric"><strong id="m-reach">18.4k</strong><span>qualified impressions</span><div class="barline"><i id="b-reach"></i></div></div>
          <div class="metric"><strong id="m-save">12.6%</strong><span>save rate</span><div class="barline"><i id="b-save"></i></div></div>
          <div class="metric"><strong id="m-reply">4.8</strong><span>avg. reply depth</span><div class="barline"><i id="b-reply"></i></div></div>
          <div class="metric"><strong id="m-return">63%</strong><span>7-day return</span><div class="barline"><i id="b-return"></i></div></div>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="stories">
    <div class="wrap">
      <h2>Stories from the circles</h2>
      <p class="sub">We ask members to describe Kinora the way they would describe it to a friend, not to a billboard. These notes are edited for length and published with permission.</p>
      <div class="quotes">
        <blockquote>
          <p>“I stopped counting followers the month our pottery group started finishing threads. Kinora’s engagement metrics finally match the feeling in the room: fewer spectators, more people who come back with clay on their hands.”</p>
          <div class="who">
            <img src="https://i.pravatar.cc/80?u=kinora-mira" alt="">
            <div><strong>Mira Chen</strong><br><small>Host, River Kiln Circle</small></div>
          </div>
        </blockquote>
        <blockquote>
          <p>“As a small influencer I was used to being booked like a banner. Guest hours let me visit a design group, answer questions, and leave. The user-generated content that followed was theirs. That felt like respect.”</p>
          <div class="who">
            <img src="https://i.pravatar.cc/80?u=kinora-omar" alt="">
            <div><strong>Omar Haddad</strong><br><small>Independent type designer</small></div>
          </div>
        </blockquote>
        <blockquote>
          <p>“Our alumni network tried three platforms. This is the first where messaging, groups, and a public feed do not fight each other. New graduates can read featured posts before they ever send a connection note.”</p>
          <div class="who">
            <img src="https://i.pravatar.cc/80?u=kinora-nina" alt="">
            <div><strong>Nina Okoye</strong><br><small>Alumni host, Northline</small></div>
          </div>
        </blockquote>
      </div>
    </div>
  </section>

  <section class="section" id="faq">
    <div class="wrap">
      <h2>Questions hosts actually ask</h2>
      <p class="sub">A short guide while you decide whether Kinora fits the community you already have. If you need a person, the member desk answers within one business day.</p>
      <details open>
        <summary>How is discovery different from a typical social feed?</summary>
        <p>The open feed only includes posts a host has marked public. Inside a group, the host chooses the order. We do not boost paid posts into private circles. Suggested follows are based on shared groups and topics you have explicitly followed, not on silent tracking across other sites.</p>
      </details>
      <details>
        <summary>What do engagement metrics include?</summary>
        <p>Qualified impressions, saves, reply depth, reaction mix, and return rate. We exclude bot-like bursts and we separate guest-hour traffic so an influencer visit does not rewrite a circle’s baseline. Hosts can export a monthly summary for their own notes. We do not sell those exports.</p>
      </details>
      <details>
        <summary>Can brands join?</summary>
        <p>Organizations can host a circle if a real person moderates it and sponsorship is labeled. We decline requests that ask members to produce user-generated content without credit, or that want direct-message access to people who have not opted in. Send a message to partnerships and a producer will reply with the charter template.</p>
      </details>
      <details>
        <summary>How do I report a room that feels unsafe?</summary>
        <p>Every post and profile has a report path that reaches a human review desk. Urgent safety reports are prioritized over spam. You can also mute, leave, and block without announcing it to the other person. Appeals are written, not automated scorecards.</p>
      </details>
      <div class="cta-row">
        <a class="btn btn-primary" href="#feed">Send Message</a>
        <a class="btn btn-ghost" href="#groups">Connect with a host</a>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <h4>Kinora</h4>
        <p>A social platform for networking, sharing, messaging, and communities that prefer a long conversation to a loud one. Offices in Portland and Lisbon. Member desk hours follow the Pacific and Western European workday.</p>
        <p>14 Harbor Lane, Suite 400<br>Portland, OR 97204<br>hello@kinora.example<br>+1 (503) 555-0148</p>
      </div>
      <div>
        <h4>Explore</h4>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#feed">Feed</a></li>
          <li><a href="#groups">Groups</a></li>
          <li><a href="#updates">Platform updates</a></li>
          <li><a href="#studio">Creator studio</a></li>
        </ul>
      </div>
      <div>
        <h4>Members</h4>
        <ul>
          <li><a href="#faq">Help center</a></li>
          <li><a href="#stories">Community stories</a></li>
          <li><a href="#studio">Engagement guide</a></li>
          <li><a href="#groups">Host a circle</a></li>
        </ul>
      </div>
      <div>
        <h4>Elsewhere</h4>
        <ul>
          <li><a href="#feed">Kinora Journal</a></li>
          <li><a href="#stories">Member notes</a></li>
          <li><a href="#updates">Release notes</a></li>
          <li><a href="#faq">Status</a></li>
        </ul>
      </div>
    </div>
    <div class="legal">
      <span>© 2026 Kinora Collective. All rights reserved.</span>
      <span>
        <a href="#faq">Privacy</a> ·
        <a href="#faq">Terms</a> ·
        <a href="#about">Accessibility</a> ·
        <a href="#faq">Community guidelines</a>
      </span>
    </div>
  </div>
</footer>
<script>
(function () {
  var data = {
    essay: { 7: ["18.4k", "12.6%", "4.8", "63%", 62, 70, 76, 63, "Essays this week are being saved more than they are skimmed. Members are treating them as references, which usually predicts a strong return rate next week."],
             30: ["71.2k", "11.1%", "4.2", "58%", 74, 62, 68, 58, "Over thirty days, essays hold reply depth even as reach grows. That pattern usually means hosts are prompting well, not just posting more often."],
             90: ["198k", "9.4%", "3.9", "54%", 88, 52, 60, 54, "A ninety-day view shows a gentle dip in save rate. Consider a shelf that gathers the best essays so newcomers are not asked to scroll an entire season."] },
    photo: { 7: ["26.1k", "8.2%", "2.4", "49%", 80, 46, 40, 49, "Photo shelves travel farther than essays but invite shorter replies. Pair each shelf with one question if you want conversation, not only saves."],
             30: ["96.4k", "7.5%", "2.1", "44%", 92, 40, 36, 44, "Monthly photo reach is healthy. Return rate lags essays, which is normal unless the shelf is tied to a recurring walk, meal, or studio night."],
             90: ["240k", "6.8%", "1.9", "41%", 96, 36, 32, 41, "Long-window photo impressions look impressive and mean less alone. Watch whether the same members contribute twice. Repeat contributors are the real signal."] },
    audio: { 7: ["9.6k", "15.4%", "3.6", "67%", 40, 84, 58, 67, "Audio notes have the highest save rate in this sample. People listen on walks and come back to comment later, so do not judge a note in the first hour."],
             30: ["34.8k", "14.1%", "3.3", "61%", 48, 78, 54, 61, "Thirty-day audio holds attention inside smaller circles. It is a poor format for cold discovery and an excellent one for members who already trust the host."],
             90: ["88.2k", "13.2%", "3.1", "59%", 55, 72, 50, 59, "Across a season, audio return rate stays unusually steady. If you host a field circle, a weekly note outperforms a monthly long episode."] },
    guest: { 7: ["42.7k", "5.1%", "6.2", "38%", 90, 30, 92, 38, "Guest hours spike impressions and reply depth on the day itself. The return rate is the number that tells you whether the visit belonged in the room."],
             30: ["61.5k", "6.4%", "4.4", "46%", 70, 36, 70, 46, "A month later, healthy guest hours still show a modest lift in return rate. If that lift is missing, the visit entertained more than it connected."],
             90: ["74.0k", "6.9%", "3.7", "51%", 60, 38, 58, 51, "Over ninety days the best collaborations look ordinary in the metrics and vivid in the comments. Read the thread, not only the bars."] }
  };
  var kind = "essay";
  var windowDays = "7";
  function render() {
    var row = data[kind][windowDays];
    document.getElementById("m-reach").textContent = row[0];
    document.getElementById("m-save").textContent = row[1];
    document.getElementById("m-reply").textContent = row[2];
    document.getElementById("m-return").textContent = row[3];
    document.getElementById("b-reach").style.width = row[4] + "%";
    document.getElementById("b-save").style.width = row[5] + "%";
    document.getElementById("b-reply").style.width = row[6] + "%";
    document.getElementById("b-return").style.width = row[7] + "%";
    document.getElementById("insight").textContent = row[8];
  }
  document.querySelectorAll("[data-kind]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      kind = btn.getAttribute("data-kind");
      document.querySelectorAll("[data-kind]").forEach(function (b) { b.classList.toggle("active", b === btn); });
      render();
    });
  });
  document.querySelectorAll("[data-window]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      windowDays = btn.getAttribute("data-window");
      document.querySelectorAll("[data-window]").forEach(function (b) { b.classList.toggle("active", b === btn); });
      render();
    });
  });
  document.querySelectorAll("[data-react]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var on = btn.classList.toggle("reacted");
      btn.textContent = on ? "Reacted" : "React";
    });
  });
  render();
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:04:26.340Z",
  "url": "https://benchmark.aimac.invalid/c3499cb0ea56da3178e20f2e5a0940c3e318391316affa1c61c75bb182433641.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<nav class=\"primary\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"controls\" role=\"group\" aria-label=\"Content type\">",
          "target": [
            "div[aria-label=\"Content type\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<nav class=\"primary\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"controls\" role=\"group\" aria-label=\"Content type\">",
          "target": [
            "div[aria-label=\"Content type\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"controls\" role=\"group\" aria-label=\"Content type\">",
          "target": [
            "div[aria-label=\"Content type\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary\" aria-label=\"Primary\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://picsum.photos/640/360?random=21\" alt=\"A host reviewing a calm analytics board on a laptop\" style=\"border-radius:14px; height:160px; width:100%; object-fit:cover;\">",
          "target": [
            ".card:nth-child(1) > img"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-ghost btn-small\" data-react=\"\">React</button>",
          "target": [
            ".post:nth-child(3) > .body > .actions > .btn-ghost[data-react=\"\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Share with people who actually stay in the conversation.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>About Kinora</h2>",
                  "target": [
                    "#about > .wrap > h2"
                  ]
                },
                {
                  "html": "<h3>Introductions with context</h3>",
                  "target": [
                    "#about > .wrap > .grid-3 > .card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Threads that remember</h3>",
                  "target": [
                    "#about > .wrap > .grid-3 > .card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Hosts, not algorithms</h3>",
                  "target": [
                    "#about > .wrap > .grid-3 > .card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Platform updates</h2>",
                  "target": [
                    "#updates > .wrap > h2"
                  ]
                },
                {
                  "html": "<h3>Atlas, the host desk</h3>",
                  "target": [
                    "#updates > .wrap > .grid-3 > .card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Shelves for user-generated content</h3>",
                  "target": [
                    "#updates > .wrap > .grid-3 > .card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Guest hours for creators</h3>",
                  "target": [
                    "#updates > .wrap > .grid-3 > .card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Group discoveries</h2>",
                  "target": [
                    "#groups > .wrap > h2"
                  ]
                },
                {
                  "html": "<h3>Low Tide Field Notes</h3>",
                  "target": [
                    ".group:nth-child(1) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Weeknight Supper League</h3>",
                  "target": [
                    ".group:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Margin Studies</h3>",
                  "target": [
                    ".group:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Suggested follows</h3>",
                  "target": [
                    "aside > .card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Live streams</h3>",
                  "target": [
                    "aside > .card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Community highlights</h3>",
                  "target": [
                    "aside > .card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Featured posts</h2>",
                  "target": [
                    "#feed > .wrap > h2"
                  ]
                },
                {
                  "html": "<h3>On leaving the last line unfinished</h3>",
                  "target": [
                    ".post:nth-child(3) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>The market list that survived a storm week</h3>",
                  "target": [
                    ".post:nth-child(4) > .body > h3"
                  ]
                },
                {
                  "html": "<h2>Read the room before you post again.</h2>",
                  "target": [
                    ".studio > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2>Stories from the circles</h2>",
                  "target": [
                    "#stories > .wrap > h2"
                  ]
                },
                {
                  "html": "<h2>Questions hosts actually ask</h2>",
                  "target": [
                    "#faq > .wrap > h2"
                  ]
                },
                {
                  "html": "<h4>Kinora</h4>",
                  "target": [
                    "div:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    "div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Members</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Elsewhere</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1b1916",
                "bgColor": "#f4efe7",
                "contrastRatio": 15.32,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 15.32"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<strong>Kinora</strong>",
          "target": [
            ".brand > div > strong"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/92x92/1c3d4a/f4efe7?text=K&amp;font=montserrat\" alt=\"Kinora logo\">",
          "target": [
            "img[alt=\"Kinora logo\"]"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<article class=\"card\">",
                  "target": [
                    "#updates > .wrap > .grid-3 > .card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"btn btn-ghost btn-small\" href=\"#studio\">Open the studio preview</a>",
          "target": [
            ".btn-ghost.btn-small[href$=\"#studio\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\">\n      <img src=\"https://placehold.co/92x92/1c3d4a/f4efe7?text=K&amp;font=montserrat\" alt=\"Kinora logo\">\n      <div>\n        <strong>Kinora</strong>\n        <span>Communities that stay, not feeds that vanish.</span>\n      </div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"stats\">\n        <li><strong>4.8M</strong><span>active members</span></li>\n        <li><strong>126k</strong><span>moderated groups</span></li>\n        <li><strong>41%</strong><span>replies within a day</span></li>\n      </ul>",
          "target": [
            ".stats"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><strong>4.8M</strong><span>active members</span></li>",
          "target": [
            ".stats > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/92x92/1c3d4a/f4efe7?text=K&amp;font=montserrat\" alt=\"Kinora logo\">",
          "target": [
            "img[alt=\"Kinora logo\"]"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How is discovery different from a typical social feed?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 278,
                "height": 64.2
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (278px by 64.2px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\">\n      <img src=\"https://placehold.co/92x92/1c3d4a/f4efe7?text=K&amp;font=montserrat\" alt=\"Kinora logo\">\n      <div>\n        <strong>Kinora</strong>\n        <span>Communities that stay, not feeds that vanish.</span>\n      </div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "incomplete": [],
  "violations": [],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7762
      },
      {
        "y": 576,
        "height": 7762
      },
      {
        "y": 1152,
        "height": 7762
      },
      {
        "y": 1728,
        "height": 7762
      },
      {
        "y": 2304,
        "height": 7762
      },
      {
        "y": 2880,
        "height": 7762
      },
      {
        "y": 3456,
        "height": 7762
      },
      {
        "y": 4032,
        "height": 7762
      },
      {
        "y": 4608,
        "height": 7762
      },
      {
        "y": 5184,
        "height": 7762
      },
      {
        "y": 5760,
        "height": 7762
      },
      {
        "y": 6336,
        "height": 7762
      },
      {
        "y": 6912,
        "height": 7762
      },
      {
        "y": 7042,
        "height": 7762
      }
    ],
    "scans": 15,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Social Media" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Social Media"
- Description: Platforms for social networking, sharing, messaging, and online communities.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Social Media" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "About", "Feed", "Groups".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Social Media" category. Consider themes similar to: "Platform Updates", "Group Discoveries", "Featured Posts".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "influencer", "engagement metrics", "user-generated content".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Send Message", "Connect", "React".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "engagement analytics".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "suggested follows", "live streams", "community highlights".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.