---
title: DSR Plugins Documentation
order: 20
type: doc
description: Official documentation hub for DSR plugins for Atlassian Jira and Confluence.
seoTitle: DSR Plugins documentation for Jira & Confluence apps
seoDescription: Official documentation for DSR plugins for Atlassian. Iota Copy, Simple Diagrams, Start that Call, Alpha Star, Delta Guard, Sigma Tree and Pi Track, for Jira and Confluence, Cloud and Data Center.
visibility: public
---

<!-- ============================================================================
     DSR Plugins docs - welcome landing FRAGMENT (docs.plugins.dsr-corporation.com)
     Faithful re-build of plugins.dsr-corporation.com (same layout, same copy,
     same Open Sans + the two brand oranges), cleaned up: one type family,
     consistent shadows/radii, vector-true grid. Tabs are CSS-only (radio +
     has-checked), which sanitizeWelcomeHtml deliberately allows.
     Assets live on the branding volume: /branding/pl/* (icons + hero GIF made
     from the marketing site hero video; sandboxed welcome iframe blocks video
     autoplay, so it ships as a GIF; see deploy/lightsail-plugins/README.md).
     Rules: fragment only, style leads, everything scoped under .plnd, no
     scripts/forms/buttons, no angle brackets inside CSS comments.
     Source of truth: repo deploy/lightsail-plugins/; deployed copy:
     volumes/content/general/welcome/landing.html.
     ============================================================================ -->
<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=Open+Sans:wght@300;400;600;700;800&family=Inter:wght@400;500;600&family=Bricolage+Grotesque:wght@600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<style>
  .plnd{
    --hl: #F58529;
    --act: #EE5A30;
    --ink: #2B2A29;
    --dim: #55524E;
    --mute: #6A6763;
    --faint: #75726E;
    --line: #EFEDEA;
    --hero-bg: #F3F3F5;
    --r-card: 21px;
    --r-pill: 24px;
    --sec-gap: 76px;
    --shadow-card: 4px 4px 4px rgba(0,0,0,.25);
    --shadow-btn: 0 8px 20px -6px rgba(238,90,48,.45);
    --maxw: 1280px;
    /* Measured height of the whole footer, copyright row included. About is
       sized as viewport minus header minus this, so at its own snap the panel
       and the entire footer make one screen, and at the page's bottom the gap
       above the panel lands behind the header rather than below it. */
    --foot-h: 409px;
    background: #FFFFFF;
    color: var(--ink);
    font-family: "Open Sans", "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .plnd *{ box-sizing: border-box; margin: 0; padding: 0; }
  /* Slide-like travel between sections. The snapping lives on an INNER
     scroller (.plnd), never on html/body: WebKit has never made root-level
     snapping reliable (bugs.webkit.org/203968 and friends — on macOS Safari
     the root snap simply does not fire), while the same rules on a nested
     container behave in every engine. The sandboxed welcome iframe has no
     URL bar, so moving the scroller inside costs nothing visible. */
  html, body{ height: 100%; overflow: hidden; }
  .plnd{ height: 100%; overflow-y: auto; scroll-snap-type: none; outline: none; }
  /* mandatory is a trap whenever a snap target is taller than the viewport:
     there is no legal rest position inside it, so the browser re-targets on
     every one of the small deltas a trackpad emits. The compact rules at the
     end of this sheet shrink the catalog until every section fits a 780px
     viewport — MacBook territory, where the old 900px gate left trackpads
     on proximity and the snap read as broken. The width leg matters too:
     under ~1250px the card grid folds to two columns, the catalog grows a
     third row and stops fitting any laptop height. Outside the gate snapping
     is simply off: free scrolling beats a half-fighting proximity. */
  @media (min-height: 780px) and (min-width: 1250px){
    .plnd{ scroll-snap-type: y mandatory; }
  }
  /* snap-stop keeps one flick to one section: without it WebKit rides the
     whole momentum to the far end of the document, and a Chrome trackpad
     flick skips slides. */
  .plnd .hero{ scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 76px; }
  .plnd .plugins{ scroll-snap-align: start; scroll-snap-stop: always; }
  /* Offset the snap by the header height: the bar then sits over the light gap
     above this section instead of over its black. */
  /* No scroll-margin: the strip is inside this section now, so aligning its
     top to the viewport top already parks the strip behind the header. */
  .plnd .about{ scroll-snap-align: start; scroll-snap-stop: always; }
  /* No snap point on the footer: About is sized so that its own snap already
     brings the whole footer into view, so an end-aligned target here sits
     within a few pixels of that one and the two fight over a trackpad. */
  /* Slide snapping is a desktop-wheel experience; on touch and narrow
     screens the sections are taller than the viewport and mandatory snap
     fights flick inertia. There the scroller goes back to the root, keeping
     the platform's native edge behavior (iOS rubber-banding, bfcache). */
  @media (max-width: 1020px), (pointer: coarse){
    html, body{ height: auto; overflow: visible; }
    .plnd{ height: auto; overflow: visible; scroll-snap-type: none; }
  }
  .plnd ::selection{ background: var(--act); color: #fff; }
  .plnd a{ color: inherit; text-decoration: none; }
  .plnd img{ max-width: 100%; display: block; }
  .plnd .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 56px; }

  .plnd input.pl-tab{ position: absolute; opacity: 0; pointer-events: none; }

  /* ---------- HEADER ---------- */
  /* Thin enough for the section behind it to tint the bar, so a coloured
     ground does not end in a hard white strip under the logo. */
  .plnd .nav{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    /* Translucent, so the rule darkens whatever ground is behind it instead of
       laying its own warm grey over a cool section. */
    border-bottom: 1px solid rgba(20,18,16,.08); }
  .plnd .nav-inner{ display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 28px; }
  .plnd .brand img{ height: 42px; width: auto; display: block; }
  .plnd .nav-links{ display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 600; }
  .plnd .nav-links .nl{ color: var(--act); transition: color .15s ease; }
  .plnd .nav-links .nl:hover{ color: #C74818; }
  .plnd .btn{ display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .plnd .btn-primary{ background: var(--act); color: #fff; padding: 13px 26px; font-size: 15px; box-shadow: var(--shadow-btn); }
  .plnd .btn-primary:hover{ background: #E0501F; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(238,90,48,.55); }
  .plnd .btn-ghost{ border: 2px solid #E3E0DC; background: #fff; color: var(--ink); padding: 11px 24px; font-size: 15px; font-weight: 600; }
  .plnd .btn-ghost:hover{ border-color: #D3CFC9; }
  .plnd .btn-sm{ padding: 11px 22px; font-size: 14px; }

  /* ---------- HERO ---------- */
  .plnd .hero{ background: var(--hero-bg); overflow: hidden; }
  .plnd .hero-grid{ display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; min-height: max(520px, calc(100dvh - 165px)); }
  .plnd .hero-media{ align-self: center; display: flex; align-items: center; justify-content: center; padding: 48px 44px; min-width: 0; }
  /* The frame is zoomed rather than merely widened: zoom scales the type with
     the box, so every glyph gets more pixels and the tilt's resampling eats a
     smaller share of each stroke. Width stays fluid because a percentage
     resolves against the column divided by the zoom factor. */
  .plnd .hero-shot{ zoom: 1.17; width: 100%; max-width: 780px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(20,18,16,.35), var(--shadow-card);
    transform: perspective(1400px) rotateY(8deg) rotateX(3deg);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .plnd .hero-shot:hover{ transform: perspective(1400px) rotateY(3deg) rotateX(1deg); }
  /* Showcase, not a page: nothing inside is clickable or selectable. The
     hero-shot itself keeps pointer events so the hover tilt still fires. */
  .plnd .hero-shot{ user-select: none; -webkit-user-select: none; }
  .plnd .hero-shot *{ pointer-events: none; }
  .plnd .shot-bar{ display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
  .plnd .shot-bar .dot{ width: 10px; height: 10px; border-radius: 50%; background: #E4E1DC; }
  .plnd .shot-bar .dot:nth-child(1){ background: #FF5F57; }
  .plnd .shot-bar .dot:nth-child(2){ background: #FEBC2E; }
  .plnd .shot-bar .dot:nth-child(3){ background: #28C840; }
  .plnd .shot-url{ margin-left: 8px; font-size: 12.5px; color: var(--faint); }
  /* The docs page is redrawn as markup, not a bitmap: the 3D tilt resamples
     any raster texture into mush, while text re-rasterizes crisp at any angle. */
  /* Inside the frame the type is the PRODUCT's, not the landing's:
     Inter body, Bricolage Grotesque headings, JetBrains Mono caps. */
  .plnd .shot-app{ background: #fff; text-align: left; font-family: "Inter", -apple-system, system-ui, sans-serif; }
  .plnd .shot-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .plnd .shot-app svg{ flex: none; }
  .plnd .pic{ display: block; }
  .plnd .shot-brand{ display: flex; align-items: center; gap: 8px; font-family: "Bricolage Grotesque", "Inter", sans-serif; font-weight: 600; font-size: 14px; color: #16181B; }
  .plnd .shot-brand img{ height: 18px; width: auto; }
  .plnd .shot-search{ display: flex; align-items: center; gap: 18px; color: #82868D; font-size: 11.5px; }
  .plnd .shot-search .box{ display: flex; align-items: center; gap: 8px; background: #F1F1F2; border-radius: 9px; padding: 6px 8px 6px 12px; min-width: 190px; }
  .plnd .shot-search .kbd{ margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9px; border-radius: 5px; padding: 2px 6px; background: #fff; color: #82868D; }
  .plnd .shot-signin{ display: flex; align-items: center; gap: 7px; color: #3D4148; }
  .plnd .shot-tabs{ display: flex; gap: 24px; padding: 0 18px; border-bottom: 1px solid var(--line); }
  .plnd .shot-tab{ display: flex; flex: none; align-items: center; gap: 7px; padding: 10px 2px; font-weight: 400; font-size: 12.5px; white-space: nowrap; color: #6B7078; }
  /* Plain imgs, no compositing tricks: an own layer would rasterize the
     icon at its own size and the tilt would then resample that a second
     time, which is measurably softer than letting the SVG rasterize
     straight into the card's texture. */
  .plnd .shot-tab .pic{ width: 17px; height: 17px; }
  .plnd .shot-tab.on{ font-weight: 600; color: #16181B; box-shadow: inset 0 -2px 0 #EC8933; }
  .plnd .shot-body{ display: grid; grid-template-columns: 148px 1fr; }
  .plnd .shot-side{ border-right: 1px solid var(--line); background: #FAFAFA; padding: 16px 12px; }
  .plnd .shot-side .si{ display: flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .12em; color: #82868D; }
  .plnd .shot-side .si .pic{ width: 15px; height: 15px; }
  .plnd .shot-main{ padding: 16px 22px 20px; }
  .plnd .shot-meta{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .plnd .shot-read{ display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .12em; color: #565A60; }
  .plnd .shot-read svg{ color: #EC8933; }
  .plnd .shot-acts{ display: flex; gap: 7px; }
  .plnd .shot-acts span{ display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: #2A2E34; border: 1px solid #E4E5E7; border-radius: 8px; padding: 4px 9px; background: #fff; }
  .plnd .shot-main h4{ font-family: "Bricolage Grotesque", "Inter", sans-serif; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; color: #16181B; }
  .plnd .shot-main .uline{ width: 44px; height: 3px; background: #EC8933; border-radius: 2px; margin: 10px 0 13px; }
  .plnd .shot-main p{ font-size: 12px; line-height: 1.6; color: #23262B; margin-bottom: 8px; }
  .plnd .shot-main p b, .plnd .shot-steps b{ font-weight: 600; color: #16181B; }
  .plnd .shot-ic-w{ display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }
  .plnd .shot-ic-w .pic{ width: 15px; height: 15px; display: block; }
  .plnd .shot-link{ text-decoration: underline; text-decoration-color: #B9BDC4; text-underline-offset: 3px; }
  .plnd .shot-h2{ font-family: "Bricolage Grotesque", "Inter", sans-serif; font-size: 15px; font-weight: 600; margin-top: 14px; color: #16181B; }
  .plnd .shot-steps{ margin-top: 10px; list-style: none; counter-reset: st; }
  .plnd .shot-steps li{ counter-increment: st; display: flex; gap: 8px; font-size: 12px; line-height: 1.6; color: #23262B; margin-bottom: 5px; }
  .plnd .shot-steps li::before{ content: counter(st) "."; color: #EC8933; font-weight: 600; }
  .plnd .hero-copy{ padding: 64px 56px 64px 44px; max-width: none; }
  .plnd h1.hero-h{ font-weight: 800; line-height: 1.04; letter-spacing: -0.01em; font-size: clamp(42px, 5.6vw, 72px); text-transform: uppercase; }
  .plnd h1.hero-h .your{ font-size: clamp(21px, 2.6vw, 32px); text-transform: none; font-weight: 700; color: var(--mute); letter-spacing: 0; }
  .plnd h1.hero-h .game{ color: var(--hl); }
  .plnd .hero-lede{ font-size: 16px; line-height: 1.65; color: var(--dim); margin-top: 22px; }
  .plnd .hero-cta{ display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
  .plnd .hero-facts{ margin-top: 26px; font-size: 14px; color: var(--faint); }

  /* ---------- TRUST BAR ---------- */
  .plnd .trustbar{ background: #111110; }
  .plnd .trust-inner{ display: flex; align-items: center; justify-content: center; gap: 20px 48px; padding: 24px 0; flex-wrap: wrap; }
  .plnd .trust-cap{ font-size: 14px; color: #8C867D; margin-right: 8px; }
  .plnd .trust-inner img{ height: 40px; width: auto; opacity: .8; }
  .plnd .trust-inner img.nx{ height: 21px; }

  /* ---------- MOTION (CSS only, quiet fallback, reduced-motion aware) ---------- */
  @media (prefers-reduced-motion: no-preference){
    /* One-time entrance for the hero copy on page load. */
    .plnd .hero-copy > *{ animation: plnd-enter .65s cubic-bezier(.22,.61,.36,1) both; }
    .plnd .hero-copy > *:nth-child(2){ animation-delay: .09s; }
    .plnd .hero-copy > *:nth-child(3){ animation-delay: .18s; }
    .plnd .hero-copy > *:nth-child(4){ animation-delay: .27s; }
    .plnd .hero-media{ animation: plnd-fade .8s ease-out both; }
    @keyframes plnd-enter{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
    @keyframes plnd-fade{ from{ opacity: 0; } to{ opacity: 1; } }
    /* A grid goes display:none -> flex when its tab is picked, which restarts
       this animation, so the swap rides along with the ground crossfade. */
    .plnd .grid{ animation: plnd-fade .4s ease-out both; }

    /* Scroll-driven reveals: section heads glide in, cards ripple by column. */
    @supports (animation-timeline: view()){
      .plnd .sec-h, .plnd .tabs, .plnd .about-grid, .plnd .foot-grid{
        animation: plnd-rise both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
      .plnd .grid .card{
        animation: plnd-card both;
        animation-timeline: view();
        animation-range: entry 0% cover 32%;
      }
      .plnd .grid .card:nth-child(3n+2){ animation-range: entry 0% cover 40%; }
      .plnd .grid .card:nth-child(3n){ animation-range: entry 0% cover 48%; }
      @keyframes plnd-rise{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }
      @keyframes plnd-card{ from{ opacity: 0; transform: translateY(26px) scale(.985); } to{ opacity: 1; } }
    }
  }

  /* ---------- PLUGINS ---------- */
  /* The section takes the temperature of the chosen tab. A gradient cannot be
     transitioned, so both grounds are stacked and their opacity is crossfaded
     instead; the content sits above them on its own layer. */
  .plnd .plugins{ position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
    /* Top padding carries the header height on top of the normal one: the bar
       covers the section's first 76px, so centring inside the full box would
       park the content that much below the visible middle. */
    padding: calc(76px + 20px) 0 44px; text-align: center; background: #F5F5F6; }
  /* The chosen tab sets the family colour once, on the section; the ground,
     the switch and the cards all read it from here, so they change together.
     Colours are the plugin icons' own (Cloud cyan, Data Center orange). */
  .plnd:has(#pl-tab-cloud:checked) .plugins{ --pc: 0, 165, 236; --pc-deep: 0, 132, 190; }
  .plnd:has(#pl-tab-dc:checked) .plugins{ --pc: 235, 130, 45; --pc-deep: 202, 106, 28; }
  .plnd .plug-bg{ position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
  .plnd .plug-bg-cloud{ background: linear-gradient(180deg, #EDF7FC, #F5F6F7 70%); }
  .plnd .plug-bg-dc{ background: linear-gradient(180deg, #FDF4EC, #F7F6F5 70%); }
  .plnd:has(#pl-tab-cloud:checked) .plug-bg-cloud{ opacity: 1; }
  .plnd:has(#pl-tab-dc:checked) .plug-bg-dc{ opacity: 1; }
  .plnd .plugins > .wrap{ position: relative; z-index: 1; }
  /* An eyebrow gives the section a second step of hierarchy, so the heading
     reads as the top of something rather than a line floating on the ground.
     Real markup, not a ::before, so it is in the DOM for crawlers and readers. */
  .plnd .sec-kicker{ font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #A5A19C; margin-bottom: 12px; }
  .plnd h2.sec-h{ font-weight: 700; font-size: 60px; line-height: 1.05; letter-spacing: -0.028em; }
  /* One continuous track; the chosen half sits pressed into it rather than
     two separate pills sitting next to each other. */
  .plnd .tabs{ display: inline-flex; gap: 0; margin-top: 18px; padding: 4px; border-radius: 999px;
    background: #F2F0ED; box-shadow: inset 0 1px 2px rgba(20,18,16,.07); }
  .plnd .tab-lbl{ border-radius: 999px; padding: 10px 32px; font-weight: 600; font-size: 15px; cursor: pointer; border: 0; color: var(--mute); background: transparent; transition: background-color .18s ease, color .55s ease, box-shadow .18s ease; }
  .plnd .tab-lbl:hover{ color: var(--ink); }
  .plnd:has(#pl-tab-cloud:focus-visible) label[for="pl-tab-cloud"],
  .plnd:has(#pl-tab-dc:focus-visible) label[for="pl-tab-dc"]{ outline: 2px solid var(--act); outline-offset: 2px; }
  /* The track carries the recess; the chosen half rides on it as a raised
     white thumb, which reads lighter than a fully flooded half. */
  .plnd:has(#pl-tab-cloud:checked) label[for="pl-tab-cloud"],
  .plnd:has(#pl-tab-dc:checked) label[for="pl-tab-dc"]{ background: #fff; color: rgb(var(--pc));
    box-shadow: 0 1px 2px rgba(20,18,16,.1), 0 3px 8px -3px rgba(20,18,16,.18); }
  .plnd:has(#pl-tab-cloud:checked) .grid-dc{ display: none; }
  .plnd:has(#pl-tab-dc:checked) .grid-cloud{ display: none; }

  /* Fixed-width cards on a centred track: they reflow by count and never
     stretch with the viewport. Flex (not grid) so a short last row centres
     instead of hugging the left, and min-height keeps every card one size. */
  .plnd .grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 26px; text-align: left; }
  .plnd .grid .card{ width: 372px; flex: none; aspect-ratio: 3 / 2; }
  /* Each grid carries its family's colour, lifted from the plugin icons
     themselves (Cloud cyan, Data Center orange); the cards borrow it for their
     border, their kicker and their hover glow. */
  .plnd .card{ background: #fff; border: 1px solid rgba(var(--pc), .42); border-radius: var(--r-card); padding: 26px 26px 22px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  /* Hover uses a deeper shade of the family colour: the resting tint is bright
     enough that lifting it at the same value reads as a wash, not a response. */
  .plnd .card:hover{ transform: translateY(-3px); border-color: rgba(var(--pc-deep), .72);
    box-shadow: 4px 4px 4px rgba(0,0,0,.14), 0 0 0 3px rgba(var(--pc-deep), .13), 0 16px 34px -18px rgba(var(--pc-deep), .85); }
  /* The card lifts on hover, so it has to actually be clickable: the primary
     documentation link stretches an overlay across it. The link is left
     position:static on purpose, so the overlay's containing block is the card
     and not the link itself; every other link sits above it. */
  .plnd .card{ cursor: pointer; }
  .plnd .card a.main{ position: static; }
  .plnd .card a.main::after{ content: ""; position: absolute; inset: 0; z-index: 0; }
  .plnd .card a:not(.main){ position: relative; z-index: 1; }
  .plnd .card-top{ display: flex; align-items: center; gap: 15px; }
  .plnd .card-ico{ width: 46px; height: 46px; flex: none; }
  /* drop-shadow, not box-shadow: it follows each icon's real silhouette, and
     the icons do not share one (rx 16, rx 8, and a squircle path). */
  .plnd .card-ico img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(var(--pc), .26)); }
  .plnd .card h3{ font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -.012em; color: #232220; }
  /* Host product sits above the name as a kicker, which frees the body copy to
     be one paragraph instead of a bold line plus a muted line. */
  .plnd .card-kicker{ font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(var(--pc), .95); }
  .plnd .card-kicker + h3{ margin-top: 4px; }
  .plnd .card:has(.badge) .card-top{ padding-right: 56px; }
  .plnd .card-txt{ font-size: 14px; line-height: 1.7; color: #6C6965; margin-top: 17px; font-weight: 400; }
  /* One product, several host platforms: each gets its own row of links so a
     multi-platform product stays one card instead of breeding four. */
  /* One grid for the whole block, rows collapsed with display:contents, so the
     label column is as wide as the LONGEST label and every link group starts
     at the same x. A min-width guess cannot do that: the moment a platform
     name outgrows it, the rows fall out of line. */
  .plnd .card-plat{ display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
    margin-top: 16px; border-top: 1px solid rgba(var(--pc), .18); }
  .plnd .card-plat .row{ display: contents; }
  .plnd .card-plat .pl, .plnd .card-plat .lk{ padding: 9px 0; border-bottom: 1px solid #F8F6F3; align-self: center; }
  .plnd .card-plat .row:last-child .pl, .plnd .card-plat .row:last-child .lk{ border-bottom: 0; padding-bottom: 0; }
  .plnd .card-plat .pl{ font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #9B9793; white-space: nowrap; }
  .plnd .card-plat .lk{ display: flex; gap: 15px; justify-content: flex-end; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .plnd .card-links{ display: flex; gap: 18px; margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(var(--pc), .18); font-size: 14px; font-weight: 600; }
  /* The primary link takes the family colour too: on a cool card an orange
     link was the only warm thing left, and it read as a stray. */
  .plnd .card-links .doc, .plnd .card-plat .doc{ color: rgb(var(--pc)); }
  /* Darken on hover. Lightening a coloured link on white reads as the link
     going away, not as a response. The primary link is driven by the CARD's
     hover, not its own: its click target is an overlay across the card, so
     moving the pointer onto any sibling link would otherwise drop the state.
     Hovering a sibling hands the highlight over to it. */
  /* Darken with colour, NEVER with filter: a non-none filter turns the anchor
     into a containing block for its own absolutely positioned ::after, so the
     card-wide click overlay collapsed to the size of the link text the moment
     the pointer entered the card - which is to say, always, at click time. */
  .plnd .card:hover .doc.main{ color: rgb(var(--pc-deep)); }
  .plnd .card:has(a:not(.main):hover) .doc.main{ color: rgb(var(--pc)); }
  .plnd .card a:not(.main).doc:hover{ color: rgb(var(--pc-deep)); }
  .plnd .card-links .mp:hover, .plnd .card-plat .mp:hover{ color: var(--ink); }
  .plnd .card-links .mp, .plnd .card-plat .mp{ color: var(--faint); }
  /* The arrow is drawn, not typed: iOS renders U+2197 from the emoji font, so
     a text glyph turns into a coloured pictograph there. */
  .plnd .ext{ display: inline-block; vertical-align: -1px; margin-left: 5px; flex: none; }
  .plnd .card .spacer{ flex: 1; }
  .plnd .badge{ position: absolute; top: 20px; right: 20px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 4px 10px; background: #F3F0FF; color: #5B4BD6; }
  /* Rising Star reads from the family colour rather than Atlassian's own blue:
     the section already has a palette, and a second blue in it is a stranger.
     It follows the tab, so on Data Center it turns warm with everything else. */
  .plnd .badge.rs{ background: rgba(var(--pc), .13); color: rgb(var(--pc-deep)); }

  /* ---------- ABOUT ---------- */
  /* The light gap above the black is exactly the header height, so the bar
     lands on it when the section snaps. The panel then fills the rest of the
     screen with its content centred, which also carries the gap off the top
     of the viewport at the footer's snap position, where it used to show. */
  /* The header-height strip belongs to this section as a border, not to the
     one above as padding: as padding it made the plugins section bottom-heavy
     by 54px, so its content centred visibly high. The colour is the ground's
     own neutral tail (#F5F6F7 on Cloud, #F7F6F5 on Data Center - two units
     apart, so one value covers both). */
  .plnd .about{ background: #111110; color: #F4F2EF; border-top: 76px solid #F6F6F6;
    min-height: max(400px, calc(100dvh - var(--foot-h))); display: flex; align-items: center; }
  .plnd .about > .wrap{ width: 100%; }
  /* The left column is sized so the company name sits on one line and the
     paragraph runs under it at that same measure. */
  /* No vertical padding here: the panel is a fixed height and centres its
     content, so padding would only fight the height budget. It comes back
     below the snap breakpoint, where the panel is content-sized again. */
  .plnd .about-grid{ display: grid; grid-template-columns: minmax(0, 486px) 1fr; gap: 64px; align-items: start; }
  .plnd .ab-kicker{ font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8C8880; margin-bottom: 16px; }
  .plnd .about h2{ font-weight: 700; font-size: 46px; line-height: 1.1; letter-spacing: -0.028em; white-space: nowrap; }
  .plnd .about-txt{ font-size: 16px; line-height: 1.75; color: #D8D5D0; }
  .plnd .about h2 + .about-txt{ margin-top: 22px; }
  .plnd .ab-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .plnd .ab-c{ border: 1px solid #2A2926; border-radius: 16px; padding: 22px 24px; background: #171715; }
  .plnd .ab-c b{ display: block; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1; }
  .plnd .ab-c span{ display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: #A5A19A; }

  /* ---------- FOOTER ---------- */
  .plnd .foot{ padding: var(--sec-gap) 0 0; }
  .plnd .foot-grid{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
  .plnd .foot-cap{ font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .plnd .foot-list{ display: grid; gap: 11px; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--mute); }
  .plnd .foot-list a:hover{ color: var(--act); }
  .plnd .foot-base{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 44px; padding: 22px 0 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); font-weight: 400; }

  /* ---------- RESPONSIVE ---------- */
  /* Landscape tablets: the headline eats the width the mock needs, so it comes
     down a step and the split leans toward the media, which otherwise renders
     the docs frame too narrow to read. */
  @media (min-width: 1021px) and (max-width: 1400px){
    .plnd .hero-grid{ grid-template-columns: 1.55fr 1fr; }
    /* Pinned left rather than centred in its column: centring left the frame
       hugging the window edge while the slack sat on its right. */
    .plnd .hero-media{ justify-content: flex-start; padding: 40px 16px 40px 56px; }
    .plnd .hero-copy{ padding: 56px 32px 56px 32px; }
    .plnd h1.hero-h{ font-size: clamp(38px, 4.5vw, 56px); }
    .plnd h1.hero-h .your{ font-size: clamp(19px, 2.1vw, 26px); }
    .plnd .hero-lede{ font-size: 16px; }
  }
  @media (max-width: 1020px){
    /* At this width the 3:2 box is shorter than the content, which the card
       then clips. Height goes back to the content, pinned to the tallest so
       every card still matches. */
    .plnd .grid .card{ width: 336px; aspect-ratio: auto; min-height: 262px; }
    /* Five logos plus the caption do not make one line here: the caption takes
       its own, the logos wrap centred beneath it. */
    .plnd .trust-inner{ flex-wrap: wrap; justify-content: center; gap: 22px 40px; padding: 30px 0 34px; }
    .plnd .trust-cap{ flex: 0 0 100%; text-align: center; }
    .plnd .trust-inner img{ height: 32px; }
    .plnd .trust-inner img.nx{ height: 18px; }
    .plnd .hero-grid{ grid-template-columns: 1fr; padding: 0; }
    .plnd .hero-media{ min-height: 0; order: 2; padding: 0 36px 40px; }
    .plnd .hero-shot, .plnd .hero-shot:hover{ transform: none; zoom: 1; max-width: none; }
    .plnd .hero-grid{ min-height: 0; }
    .plnd .hero-copy{ padding: 56px 56px 8px; max-width: none; }
    .plnd .about{ min-height: 0; display: block; border-top-width: 0; }
    /* Fixed-width figure cards on a centred track: once About drops to one
       column they would otherwise stretch the full width of the section. */
    /* minmax, not a bare track: a fixed track sets the grid's min-content, and
       a 1fr parent will not shrink below that, so the block ran off narrow
       screens. min-width:0 lets it shrink; the cap keeps it at two per row. */
    .plnd .ab-cards{ grid-template-columns: repeat(auto-fit, minmax(0, 256px)); justify-content: center;
      max-width: 530px; margin-inline: auto; min-width: 0; }
    .plnd .about-grid{ padding: var(--sec-gap) 0; }
    .plnd .about-grid{ grid-template-columns: 1fr; gap: 30px; }
    .plnd .about h2{ white-space: normal; }
    .plnd .foot-grid{ grid-template-columns: 1fr 1fr; }
  }
  /* Below this the platform label and its links cannot share a line without
     setting a min-content width the card, and therefore the whole section,
     has to honour. They stack instead. */
  @media (max-width: 350px){
    .plnd .card-plat{ display: block; }
    .plnd .card-plat .row{ display: block; padding: 9px 0; border-bottom: 1px solid #F8F6F3; }
    .plnd .card-plat .row:last-child{ border-bottom: 0; padding-bottom: 0; }
    .plnd .card-plat .pl, .plnd .card-plat .lk{ padding: 0; border-bottom: 0; }
    .plnd .card-plat .pl{ display: block; }
    .plnd .card-plat .lk{ justify-content: flex-start; margin-top: 5px; }
  }
  @media (max-width: 660px){
    .plnd .wrap{ padding: 0 24px; }
    .plnd .grid .card{ width: 100%; max-width: 372px; aspect-ratio: auto; }
    .plnd .nav-links .nl{ display: none; }
    .plnd h1.hero-h{ font-size: 46px; }
    .plnd h1.hero-h .your{ font-size: 22px; }
    .plnd h2.sec-h{ font-size: 32px; }
    .plnd .sec-kicker{ font-size: 10.5px; letter-spacing: .2em; margin-bottom: 12px; }
    .plnd .about h2{ font-size: 32px; }
    .plnd .ab-cards{ grid-template-columns: repeat(auto-fit, minmax(0, 256px)); }
    .plnd .foot-grid{ grid-template-columns: 1fr; }
    .plnd .hero-copy > *{ min-width: 0; }
    .plnd .hero-copy{ padding: 52px 24px 56px; }
    /* The docs mock cannot fit a phone at a readable size, so the hero is copy
       only there. */
    .plnd .hero-media{ display: none; }
    /* Two logos per row, the odd one out centred on its own row, the same way
       a short last row of cards behaves. */
    .plnd .trust-inner{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 26px 30px; padding: 34px 24px 38px; }
    .plnd .trust-cap{ flex: 0 0 100%; text-align: center; margin-bottom: 4px; }
    .plnd .trust-inner img{ flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); height: 30px; object-fit: contain; }
    .plnd .trust-inner img.nx{ height: 17px; }
    /* The strip above the black exists for snap alignment; snapping is off. */
    .plnd .plugins{ padding: var(--sec-gap) 0; }
    /* Roomier vertical rhythm: at this width every section otherwise ends up
       a hair from the band below it. */
    .plnd .about-grid{ padding: 52px 0; }
    .plnd .foot{ padding-top: 52px; }
    .plnd .grid{ margin-top: 34px; }
    /* Narrow phones: trim both columns so the longest pair still clears the
       card's inner width. */
    .plnd .card-plat{ column-gap: 10px; }
    .plnd .card-plat .pl{ font-size: 9.5px; letter-spacing: .08em; }
    .plnd .card-plat .lk{ font-size: 13px; gap: 12px; }
  }

  /* ---------- COMPACT DESKTOP (sub-900 viewports, MacBook lids) ----------
     Last in the sheet on purpose: these override the base section rhythm,
     and at equal specificity only source order makes them win. The catalog
     is squeezed until hero, catalog and about each fit a 780px viewport,
     which is what lets the snap gate above include laptop-sized windows.
     Trimmed paddings also let three card columns survive down to ~1250px
     (with a classic scrollbar eating into the width). */
  @media (max-height: 899px) and (min-width: 1021px) and (pointer: fine){
    .plnd .plugins{ padding: calc(76px + 12px) 0 20px; }
    .plnd .plugins .wrap{ padding: 0 40px; }
    .plnd .sec-kicker{ margin-bottom: 6px; }
    .plnd h2.sec-h{ font-size: 40px; }
    .plnd .tabs{ margin-top: 10px; }
    .plnd .grid{ margin-top: 14px; gap: 20px; }
  }
  /* Below ~809px the About minimum (400px) plus the footer no longer fit one
     screen, so a start-aligned About pins the last 20-odd pixels of footer
     out of reach under mandatory snap. Hand the last slide to the footer's
     END edge instead: the document rests fully scrolled, footer complete,
     About a few pixels under the header. */
  @media (max-height: 808px){
    .plnd .about{ scroll-snap-align: none; }
    .plnd .foot{ scroll-snap-align: end; scroll-snap-stop: always; }
  }
</style>

<!-- tabindex + autofocus: with the scroller moved off the root, keyboard
     scrolling (space, PgDn, arrows) needs focus inside the container; there
     is no script in this sandbox to place it, so the markup does. -->
<div class="plnd" tabindex="-1" autofocus>

  <!-- HEADER -->
  <div class="nav">
    <div class="nav-inner">
      <div class="brand">
        <a href="https://en.dsr-corporation.com" aria-label="DSR Corporation"><img src="/branding/pl/dsr-logo-full.png" alt="DSR"></a>
      </div>
      <div class="nav-links">
        <a class="nl" href="https://marketplace.atlassian.com/vendors/1220995/" target="_blank" rel="noopener">Marketplace</a>
        <a class="btn btn-primary btn-sm" href="mailto:plugins@dsr-corporation.com">Contact Support</a>
      </div>
    </div>
  </div>

  <!-- HERO -->
  <div class="hero">
    <div class="hero-grid">
      <div class="hero-media">
        <div class="hero-shot">
          <div class="shot-bar">
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <span class="shot-url">docs.plugins.dsr-corporation.com</span>
          </div>
          <div class="shot-app">
            <div class="shot-head">
              <span class="shot-brand"><img src="/branding/logo-63cf98aa8ebaeadd.png" alt="">DSR Plugins</span>
              <span class="shot-search">
                <span class="box"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>Search docs&#8230;<span class="kbd">Ctrl K</span></span>
                <span class="shot-signin"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></svg>Sign in</span>
              </span>
            </div>
            <div class="shot-tabs">
              <span class="shot-tab on"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2344_1)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6752 12.2246C16.1171 12.7713 15 14.2552 15 16V32C15 34.2091 16.7909 36 19 36H22V34C22 30.6863 24.6863 28 28 28H33V16C33 14.2552 31.8829 12.7713 30.3248 12.2246C29.607 13.2953 28.3858 14 27 14H21C19.6142 14 18.393 13.2953 17.6752 12.2246ZM18 17C18 16.4477 18.4477 16 19 16H20C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H19C18.4477 18 18 17.5523 18 17ZM19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22H20C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20H19ZM18 25C18 24.4477 18.4477 24 19 24H20C20.5523 24 21 24.4477 21 25C21 25.5523 20.5523 26 20 26H19C18.4477 26 18 25.5523 18 25ZM24 16C23.4477 16 23 16.4477 23 17C23 17.5523 23.4477 18 24 18H29C29.5523 18 30 17.5523 30 17C30 16.4477 29.5523 16 29 16H24ZM23 21C23 20.4477 23.4477 20 24 20H29C29.5523 20 30 20.4477 30 21C30 21.5523 29.5523 22 29 22H24C23.4477 22 23 21.5523 23 21ZM24 24C23.4477 24 23 24.4477 23 25C23 25.5523 23.4477 26 24 26H29C29.5523 26 30 25.5523 30 25C30 24.4477 29.5523 24 29 24H24Z" fill="white"/>
<rect x="25" y="31" width="13" height="10" rx="3" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 32V32.001C25 32.3031 25.1366 32.589 25.3717 32.7789L29.8286 36.3787C30.8191 37.1787 32.181 37.1787 33.1715 36.3787L37.6283 32.7789C37.8634 32.5891 38 32.3031 38 32.001V32H35.4975L32.0572 34.7787C31.727 35.0454 31.273 35.0454 30.9429 34.7787L27.5026 32H25Z" fill="white"/>
<mask id="path-5-inside-1_17338_2344_1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z" fill="white"/>
<path d="M21 8V6H19V8H21ZM27 8H29V6H27V8ZM21 10H19V12H21V10ZM27 10V12H29V10H27ZM21 8V8V4C18.7909 4 17 5.79086 17 8H21ZM21 10V8H17V10H21ZM21 10H21H17C17 12.2091 18.7909 14 21 14V10ZM27 10H21V14H27V10ZM27 10V14C29.2091 14 31 12.2091 31 10H27ZM27 8V10H31V8H27ZM27 8H31C31 5.79086 29.2091 4 27 4V8ZM21 8H27V4H21V8ZM21 10H27V6H21V10ZM23 10V8H19V10H23ZM27 8H21V12H27V8ZM25 8V10H29V8H25Z" fill="white" mask="url(#path-5-inside-1_17338_2344_1)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 10H19C15.6863 10 13 12.6863 13 16V32C13 35.3137 15.6863 38 19 38H20C20.5523 38 21 38.4477 21 39C21 39.5257 20.604 40 20.0784 40H19C14.5817 40 11 36.4183 11 32V16C11 11.5817 14.5817 8 19 8H21V10ZM27 10H29C32.3137 10 35 12.6863 35 16V27.1555C35 27.6219 35.3939 27.9946 35.8556 28.0605C36.4326 28.1429 37 27.73 37 27.1472V16C37 11.5817 33.4183 8 29 8H27V10Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2344_1" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg>Iota Copy</span>
              <span class="shot-tab"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="8" fill="url(#paint0_linear_996_404_2)"/>
<path d="M19 33.3333V34C19 35.3261 19.5268 36.5979 20.4645 37.5355C21.4021 38.4732 22.6739 39 24 39C25.3261 39 26.5979 38.4732 27.5355 37.5355C28.4732 36.5979 29 35.3261 29 34V33.3333M39 16.2117C37.9068 13.8338 36.3193 11.7162 34.3433 10M9 16.2117C10.0922 13.8341 11.6786 11.7165 13.6533 10M20.6667 13.3333C20.6667 12.4493 21.0179 11.6014 21.643 10.9763C22.2681 10.3512 23.1159 10 24 10C24.8841 10 25.7319 10.3512 26.357 10.9763C26.9821 11.6014 27.3333 12.4493 27.3333 13.3333C29.2473 14.2384 30.879 15.6472 32.0534 17.4088C33.2278 19.1705 33.9007 21.2185 34 23.3333V28.3333C34.1254 29.3695 34.4924 30.3618 35.0714 31.2302C35.6503 32.0987 36.4251 32.819 37.3333 33.3333H10.6667C11.5749 32.819 12.3497 32.0987 12.9286 31.2302C13.5076 30.3618 13.8746 29.3695 14 28.3333V23.3333C14.0993 21.2185 14.7722 19.1705 15.9466 17.4088C17.121 15.6472 18.7527 14.2384 20.6667 13.3333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_996_404_2" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg>RemindMe</span>
              <span class="shot-tab"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16C0 7.16344 7.16344 0 16 0H32C40.8366 0 48 7.16344 48 16V32C48 40.8366 40.8366 48 32 48H16C7.16344 48 0 40.8366 0 32V16Z" fill="url(#paint0_linear_117_1238_3)"/>
<circle cx="24" cy="20" r="2" stroke="white" stroke-width="2"/>
<path d="M24 24C26.4189 24 28.4361 25.7178 28.8994 28H19.1006C19.5639 25.7178 21.5811 24 24 24Z" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 9C10.2386 9 8 11.2386 8 14V28C8 30.7614 10.2386 33 13 33H20.759L18.4256 37H16C15.4477 37 15 37.4477 15 38C15 38.5523 15.4477 39 16 39H19H29.5H32C32.5523 39 33 38.5523 33 38C33 37.4477 32.5523 37 32 37H30.0352L27.3685 33H35C37.7614 33 40 30.7614 40 28V21V14C40 11.2386 37.7614 9 35 9H24.5H13ZM24.053 31H35C36.6569 31 38 29.6569 38 28V21V14C38 12.3431 36.6569 11 35 11H24.5H13C11.3431 11 10 12.3431 10 14V28C10 29.6569 11.3431 31 13 31H24.053ZM24.053 33C23.447 33 22.8866 33.3219 22.5813 33.8453L20.741 37H27.6315L25.4706 33.7587C25.1546 33.2847 24.6226 33 24.053 33Z" fill="white"/>
<circle cx="24" cy="13" r="1" fill="white"/>
<defs>
<linearGradient id="paint0_linear_117_1238_3" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg>Start that Call</span>
              <span class="shot-tab"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2409_4)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C13.7909 12 12 13.7909 12 16V32C12 34.2091 13.7909 36 16 36H32C34.2091 36 36 34.2091 36 32V16C36 13.7909 34.2091 12 32 12H16ZM19 18C18.6247 18 18.2811 18.2101 18.11 18.5441C17.9389 18.8781 17.9692 19.2798 18.1885 19.5843L21.3678 24L18.1885 28.4157C17.9692 28.7202 17.9389 29.1219 18.11 29.4559C18.2811 29.7899 18.6247 30 19 30H28C28.5523 30 29 29.5523 29 29V26.5H27V28H20.9522L23.4115 24.5843C23.6628 24.2353 23.6628 23.7647 23.4115 23.4157L20.9522 20H27V21.5H29V19C29 18.4477 28.5523 18 28 18H19ZM16 15C16 14.4477 16.4477 14 17 14H31C31.5523 14 32 14.4477 32 15C32 15.5523 31.5523 16 31 16H17C16.4477 16 16 15.5523 16 15ZM17 32C16.4477 32 16 32.4477 16 33C16 33.5523 16.4477 34 17 34H31C31.5523 34 32 33.5523 32 33C32 32.4477 31.5523 32 31 32H17Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2409_4" x1="47.9585" y1="16.4033" x2="-5.01954" y2="12.5877" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFC769"/>
<stop offset="1" stop-color="#F58529"/>
</linearGradient>
</defs>
</svg>Sigma Tree</span>
              <span class="shot-tab"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2372_5)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.65 12.95H12.1C11.6306 12.95 11.25 13.3306 11.25 13.8C11.25 14.2695 11.6306 14.65 12.1 14.65H13.65C14.2023 14.65 14.65 15.0977 14.65 15.65V17.2C14.65 17.6695 15.0306 18.05 15.5 18.05C15.9694 18.05 16.35 17.6695 16.35 17.2L16.35 14.65V13.95C16.35 13.3977 15.9023 12.95 15.35 12.95H14.65Z" fill="white"/>
<rect x="21" y="7" width="6" height="2" rx="1" fill="white"/>
<rect x="36.252" y="11.25" width="3.4" height="1.7" rx="0.85" transform="rotate(45 36.252 11.25)" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.65 15.4344C14.65 14.6817 13.797 14.2741 13.2609 14.8026C10.4458 17.5773 8.70078 21.4346 8.70078 25.6996C8.70078 34.1496 15.5508 40.9996 24.0008 40.9996C32.4507 40.9996 39.3008 34.1496 39.3008 25.6996C39.3008 17.2496 32.4507 10.3996 24.0008 10.3996C23.9843 10.3996 23.9679 10.3996 23.9515 10.3997C23.5017 10.4011 23.15 10.775 23.15 11.2248V11.2745C23.15 11.7359 23.5393 12.0996 24.0008 12.0996C31.5118 12.0996 37.6008 18.1885 37.6008 25.6996C37.6008 33.2107 31.5118 39.2996 24.0008 39.2996C16.4897 39.2996 10.4008 33.2107 10.4008 25.6996C10.4008 21.9508 11.9175 18.5563 14.3709 16.0962C14.5466 15.92 14.65 15.6832 14.65 15.4344Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9977 13.8008C30.5698 13.8008 35.8977 19.1286 35.8977 25.7008C35.8977 32.273 30.5698 37.6008 23.9977 37.6008C17.4255 37.6008 12.0977 32.273 12.0977 25.7008C12.0977 23.5333 12.6772 21.5011 13.6897 19.7508H15.0477C16.7045 19.7508 18.0477 18.4076 18.0477 16.7508V15.3928C19.798 14.3803 21.8301 13.8008 23.9977 13.8008ZM34.2008 25.7C34.2008 20.0667 29.6341 15.5 24.0008 15.5C22.1215 15.5 20.3609 16.0082 18.8489 16.8948C18.5613 18.7754 17.0753 20.2616 15.1948 20.5495C14.3087 22.0611 13.8008 23.8212 13.8008 25.7C13.8008 31.3333 18.3675 35.9 24.0008 35.9C29.6341 35.9 34.2008 31.3333 34.2008 25.7ZM23.2736 18.4143C23.2736 18.8166 23.5998 19.1428 24.0022 19.1428C24.4046 19.1428 24.7308 18.8166 24.7308 18.4143V16.9571C24.7308 16.5547 24.4046 16.2285 24.0022 16.2285C23.5998 16.2285 23.2736 16.5547 23.2736 16.9571V18.4143ZM23.2736 34.4431C23.2736 34.8454 23.5998 35.1716 24.0022 35.1716C24.4046 35.1716 24.7308 34.8454 24.7308 34.4431V32.9859C24.7308 32.5835 24.4046 32.2573 24.0022 32.2573C23.5998 32.2573 23.2736 32.5835 23.2736 32.9859V34.4431ZM17.7857 31.9191C17.5012 31.6346 17.5012 31.1733 17.7857 30.8887L18.8161 29.8584C19.1006 29.5738 19.5619 29.5738 19.8464 29.8584C20.1309 30.1429 20.1309 30.6042 19.8464 30.8887L18.8161 31.9191C18.5315 32.2036 18.0702 32.2036 17.7857 31.9191ZM28.1617 20.5119C27.8771 20.7964 27.8771 21.2578 28.1617 21.5423C28.4462 21.8268 28.9075 21.8268 29.192 21.5423L30.2224 20.5119C30.5069 20.2274 30.5069 19.7661 30.2224 19.4816C29.9378 19.197 29.4765 19.197 29.192 19.4816L28.1617 20.5119ZM19.8432 21.4792C20.1277 21.1947 20.1277 20.7334 19.8432 20.4488L18.8129 19.4185C18.5283 19.134 18.067 19.134 17.7825 19.4185C17.498 19.703 17.498 20.1643 17.7825 20.4488L18.8129 21.4792C19.0974 21.7637 19.5587 21.7637 19.8432 21.4792ZM30.2225 30.8887C30.507 31.1733 30.507 31.6346 30.2225 31.9191C29.938 32.2036 29.4767 32.2036 29.1922 31.9191L28.1618 30.8887C27.8773 30.6042 27.8773 30.1429 28.1618 29.8584C28.4463 29.5738 28.9076 29.5738 29.1922 29.8584L30.2225 30.8887ZM30.5584 25.7002C30.5584 25.2978 30.8846 24.9716 31.287 24.9716H32.7441C33.1465 24.9716 33.4727 25.2978 33.4727 25.7002C33.4727 26.1026 33.1465 26.4288 32.7441 26.4288H31.287C30.8846 26.4288 30.5584 26.1026 30.5584 25.7002ZM15.2598 24.9716C14.8574 24.9716 14.5312 25.2978 14.5312 25.7002C14.5312 26.1026 14.8574 26.4288 15.2598 26.4288H16.717C17.1193 26.4288 17.4455 26.1026 17.4455 25.7002C17.4455 25.2978 17.1193 24.9716 16.717 24.9716H15.2598Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2372_5" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFC769"/>
<stop offset="1" stop-color="#F58529"/>
</linearGradient>
</defs>
</svg>Pi Track</span>
              <span class="shot-tab"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2454_6)"/>
<circle cx="31" cy="26" r="1" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 20C9 17.7909 10.7909 16 13 16H35C37.2091 16 39 17.7909 39 20V28C39 30.2091 37.2091 32 35 32H13C10.7909 32 9 30.2091 9 28V20ZM34 28V24H28V28H34ZM28 22C26.8954 22 26 22.8954 26 24V28C26 29.1046 26.8954 30 28 30H34C35.1046 30 36 29.1046 36 28V24C36 22.8954 35.1046 22 34 22V21C34 19.3431 32.6569 18 31 18C29.3431 18 28 19.3431 28 21V22ZM32 22V21C32 20.4477 31.5523 20 31 20C30.4477 20 30 20.4477 30 21V22H32ZM14.1724 27L14.3379 25.1667L12.8276 26.2292L12 24.7708L13.6552 24L12 23.2292L12.8276 21.7708L14.3379 22.8333L14.1724 21H15.8276L15.6621 22.8333L17.1724 21.7708L18 23.2292L16.3448 24L18 24.7708L17.1724 26.2292L15.6621 25.1667L15.8276 27H14.1724ZM21.3379 25.1667L21.1724 27H22.8276L22.6621 25.1667L24.1724 26.2292L25 24.7708L23.3448 24L25 23.2292L24.1724 21.7708L22.6621 22.8333L22.8276 21H21.1724L21.3379 22.8333L19.8276 21.7708L19 23.2292L20.6552 24L19 24.7708L19.8276 26.2292L21.3379 25.1667Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2454_6" x1="47.9585" y1="16.4033" x2="-5.01954" y2="12.5877" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFC769"/>
<stop offset="1" stop-color="#F58529"/>
</linearGradient>
</defs>
</svg>Delta Guard</span>
            </div>
            <div class="shot-body">
              <div class="shot-side"><span class="si"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="#82868D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2344_7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6752 12.2246C16.1171 12.7713 15 14.2552 15 16V32C15 34.2091 16.7909 36 19 36H22V34C22 30.6863 24.6863 28 28 28H33V16C33 14.2552 31.8829 12.7713 30.3248 12.2246C29.607 13.2953 28.3858 14 27 14H21C19.6142 14 18.393 13.2953 17.6752 12.2246ZM18 17C18 16.4477 18.4477 16 19 16H20C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H19C18.4477 18 18 17.5523 18 17ZM19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22H20C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20H19ZM18 25C18 24.4477 18.4477 24 19 24H20C20.5523 24 21 24.4477 21 25C21 25.5523 20.5523 26 20 26H19C18.4477 26 18 25.5523 18 25ZM24 16C23.4477 16 23 16.4477 23 17C23 17.5523 23.4477 18 24 18H29C29.5523 18 30 17.5523 30 17C30 16.4477 29.5523 16 29 16H24ZM23 21C23 20.4477 23.4477 20 24 20H29C29.5523 20 30 20.4477 30 21C30 21.5523 29.5523 22 29 22H24C23.4477 22 23 21.5523 23 21ZM24 24C23.4477 24 23 24.4477 23 25C23 25.5523 23.4477 26 24 26H29C29.5523 26 30 25.5523 30 25C30 24.4477 29.5523 24 29 24H24Z" fill="white"/>
<rect x="25" y="31" width="13" height="10" rx="3" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 32V32.001C25 32.3031 25.1366 32.589 25.3717 32.7789L29.8286 36.3787C30.8191 37.1787 32.181 37.1787 33.1715 36.3787L37.6283 32.7789C37.8634 32.5891 38 32.3031 38 32.001V32H35.4975L32.0572 34.7787C31.727 35.0454 31.273 35.0454 30.9429 34.7787L27.5026 32H25Z" fill="white"/>
<mask id="path-5-inside-1_17338_2344_7" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z" fill="white"/>
<path d="M21 8V6H19V8H21ZM27 8H29V6H27V8ZM21 10H19V12H21V10ZM27 10V12H29V10H27ZM21 8V8V4C18.7909 4 17 5.79086 17 8H21ZM21 10V8H17V10H21ZM21 10H21H17C17 12.2091 18.7909 14 21 14V10ZM27 10H21V14H27V10ZM27 10V14C29.2091 14 31 12.2091 31 10H27ZM27 8V10H31V8H27ZM27 8H31C31 5.79086 29.2091 4 27 4V8ZM21 8H27V4H21V8ZM21 10H27V6H21V10ZM23 10V8H19V10H23ZM27 8H21V12H27V8ZM25 8V10H29V8H25Z" fill="white" mask="url(#path-5-inside-1_17338_2344_7)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 10H19C15.6863 10 13 12.6863 13 16V32C13 35.3137 15.6863 38 19 38H20C20.5523 38 21 38.4477 21 39C21 39.5257 20.604 40 20.0784 40H19C14.5817 40 11 36.4183 11 32V16C11 11.5817 14.5817 8 19 8H21V10ZM27 10H29C32.3137 10 35 12.6863 35 16V27.1555C35 27.6219 35.3939 27.9946 35.8556 28.0605C36.4326 28.1429 37 27.73 37 27.1472V16C37 11.5817 33.4183 8 29 8H27V10Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2344_7" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg>IOTA COPY</span></div>
              <div class="shot-main">
                <div class="shot-meta">
                  <span class="shot-read"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>7 MIN READ</span>
                  <span class="shot-acts">
                    <span><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>Copy for LLM</span>
                    <span><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>PDF</span>
                  </span>
                </div>
                <h4>Iota Copy: PDF, Word &amp; Markdown Export for Confluence</h4>
                <div class="uline"></div>
                <p><span class="shot-ic-w"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2344_8)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6752 12.2246C16.1171 12.7713 15 14.2552 15 16V32C15 34.2091 16.7909 36 19 36H22V34C22 30.6863 24.6863 28 28 28H33V16C33 14.2552 31.8829 12.7713 30.3248 12.2246C29.607 13.2953 28.3858 14 27 14H21C19.6142 14 18.393 13.2953 17.6752 12.2246ZM18 17C18 16.4477 18.4477 16 19 16H20C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H19C18.4477 18 18 17.5523 18 17ZM19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22H20C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20H19ZM18 25C18 24.4477 18.4477 24 19 24H20C20.5523 24 21 24.4477 21 25C21 25.5523 20.5523 26 20 26H19C18.4477 26 18 25.5523 18 25ZM24 16C23.4477 16 23 16.4477 23 17C23 17.5523 23.4477 18 24 18H29C29.5523 18 30 17.5523 30 17C30 16.4477 29.5523 16 29 16H24ZM23 21C23 20.4477 23.4477 20 24 20H29C29.5523 20 30 20.4477 30 21C30 21.5523 29.5523 22 29 22H24C23.4477 22 23 21.5523 23 21ZM24 24C23.4477 24 23 24.4477 23 25C23 25.5523 23.4477 26 24 26H29C29.5523 26 30 25.5523 30 25C30 24.4477 29.5523 24 29 24H24Z" fill="white"/>
<rect x="25" y="31" width="13" height="10" rx="3" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 32V32.001C25 32.3031 25.1366 32.589 25.3717 32.7789L29.8286 36.3787C30.8191 37.1787 32.181 37.1787 33.1715 36.3787L37.6283 32.7789C37.8634 32.5891 38 32.3031 38 32.001V32H35.4975L32.0572 34.7787C31.727 35.0454 31.273 35.0454 30.9429 34.7787L27.5026 32H25Z" fill="white"/>
<mask id="path-5-inside-1_17338_2344_8" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z" fill="white"/>
<path d="M21 8V6H19V8H21ZM27 8H29V6H27V8ZM21 10H19V12H21V10ZM27 10V12H29V10H27ZM21 8V8V4C18.7909 4 17 5.79086 17 8H21ZM21 10V8H17V10H21ZM21 10H21H17C17 12.2091 18.7909 14 21 14V10ZM27 10H21V14H27V10ZM27 10V14C29.2091 14 31 12.2091 31 10H27ZM27 8V10H31V8H27ZM27 8H31C31 5.79086 29.2091 4 27 4V8ZM21 8H27V4H21V8ZM21 10H27V6H21V10ZM23 10V8H19V10H23ZM27 8H21V12H27V8ZM25 8V10H29V8H25Z" fill="white" mask="url(#path-5-inside-1_17338_2344_8)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 10H19C15.6863 10 13 12.6863 13 16V32C13 35.3137 15.6863 38 19 38H20C20.5523 38 21 38.4477 21 39C21 39.5257 20.604 40 20.0784 40H19C14.5817 40 11 36.4183 11 32V16C11 11.5817 14.5817 8 19 8H21V10ZM27 10H29C32.3137 10 35 12.6863 35 16V27.1555C35 27.6219 35.3939 27.9946 35.8556 28.0605C36.4326 28.1429 37 27.73 37 27.1472V16C37 11.5817 33.4183 8 29 8H27V10Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2344_8" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg></span> <b>Iota Copy</b> plugin for Confluence allows you to copy any page content with just a click, keeping the original formatting intact.</p>
                <p>It also helps you share content easily by automatically opening your email client with the content ready to be sent.</p>
                <p>With Iota Copy your copied content won&#8217;t change a iota.</p>
                <div class="shot-h2">Installation</div>
                <ol class="shot-steps">
                  <li><span>Navigate to <span class="shot-ic-w"><svg class="pic" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16" fill="url(#paint0_linear_17338_2344_9)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6752 12.2246C16.1171 12.7713 15 14.2552 15 16V32C15 34.2091 16.7909 36 19 36H22V34C22 30.6863 24.6863 28 28 28H33V16C33 14.2552 31.8829 12.7713 30.3248 12.2246C29.607 13.2953 28.3858 14 27 14H21C19.6142 14 18.393 13.2953 17.6752 12.2246ZM18 17C18 16.4477 18.4477 16 19 16H20C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H19C18.4477 18 18 17.5523 18 17ZM19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22H20C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20H19ZM18 25C18 24.4477 18.4477 24 19 24H20C20.5523 24 21 24.4477 21 25C21 25.5523 20.5523 26 20 26H19C18.4477 26 18 25.5523 18 25ZM24 16C23.4477 16 23 16.4477 23 17C23 17.5523 23.4477 18 24 18H29C29.5523 18 30 17.5523 30 17C30 16.4477 29.5523 16 29 16H24ZM23 21C23 20.4477 23.4477 20 24 20H29C29.5523 20 30 20.4477 30 21C30 21.5523 29.5523 22 29 22H24C23.4477 22 23 21.5523 23 21ZM24 24C23.4477 24 23 24.4477 23 25C23 25.5523 23.4477 26 24 26H29C29.5523 26 30 25.5523 30 25C30 24.4477 29.5523 24 29 24H24Z" fill="white"/>
<rect x="25" y="31" width="13" height="10" rx="3" stroke="white" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 32V32.001C25 32.3031 25.1366 32.589 25.3717 32.7789L29.8286 36.3787C30.8191 37.1787 32.181 37.1787 33.1715 36.3787L37.6283 32.7789C37.8634 32.5891 38 32.3031 38 32.001V32H35.4975L32.0572 34.7787C31.727 35.0454 31.273 35.0454 30.9429 34.7787L27.5026 32H25Z" fill="white"/>
<mask id="path-5-inside-1_17338_2344_9" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6C19.8954 6 19 6.89543 19 8V10C19 11.1046 19.8954 12 21 12H27C28.1046 12 29 11.1046 29 10V8C29 6.89543 28.1046 6 27 6H21ZM27 8H21V10H27V8Z" fill="white"/>
<path d="M21 8V6H19V8H21ZM27 8H29V6H27V8ZM21 10H19V12H21V10ZM27 10V12H29V10H27ZM21 8V8V4C18.7909 4 17 5.79086 17 8H21ZM21 10V8H17V10H21ZM21 10H21H17C17 12.2091 18.7909 14 21 14V10ZM27 10H21V14H27V10ZM27 10V14C29.2091 14 31 12.2091 31 10H27ZM27 8V10H31V8H27ZM27 8H31C31 5.79086 29.2091 4 27 4V8ZM21 8H27V4H21V8ZM21 10H27V6H21V10ZM23 10V8H19V10H23ZM27 8H21V12H27V8ZM25 8V10H29V8H25Z" fill="white" mask="url(#path-5-inside-1_17338_2344_9)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 10H19C15.6863 10 13 12.6863 13 16V32C13 35.3137 15.6863 38 19 38H20C20.5523 38 21 38.4477 21 39C21 39.5257 20.604 40 20.0784 40H19C14.5817 40 11 36.4183 11 32V16C11 11.5817 14.5817 8 19 8H21V10ZM27 10H29C32.3137 10 35 12.6863 35 16V27.1555C35 27.6219 35.3939 27.9946 35.8556 28.0605C36.4326 28.1429 37 27.73 37 27.1472V16C37 11.5817 33.4183 8 29 8H27V10Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_17338_2344_9" x1="-2.82818e-08" y1="26.5714" x2="48" y2="25.7143" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A5EC"/>
<stop offset="1" stop-color="#00CCCC"/>
</linearGradient>
</defs>
</svg></span> <b>Iota Copy</b> in the <span class="shot-link">Atlassian Marketplace</span>.</span></li>
                  <li><span>Click on the <b>Get it now</b> button.</span></li>
                  <li><span>Follow the prompts on the window that appears, and click <b>Get it now</b>.</span></li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hero-copy">
        <h1 class="hero-h">Level<br>up! <span class="your">your</span><br><span class="game">Atlassian game</span></h1>
        <p class="hero-lede">Official documentation for every DSR plugin for Jira and Confluence.</p>
        <div class="hero-cta">
          <a class="btn btn-primary" href="/docs/iota-copy/iota-copy-markdown-for-llm-pdf-word-email-export">Read the docs</a>
          <a class="btn btn-ghost" href="https://marketplace.atlassian.com/vendors/1220995/" target="_blank" rel="noopener">Visit Atlassian Marketplace</a>
        </div>
        <div class="hero-facts">9 plugins · 2 platforms · Cloud and Data Center</div>
      </div>
    </div>
  </div>

  <!-- TRUST BAR -->
  <div class="trustbar">
    <div class="wrap trust-inner">
      <span class="trust-cap">Trusted by teams at</span>
      <img class="nx" src="/branding/pl/logo-netflix.png" alt="Netflix" loading="lazy">
      <img src="/branding/pl/logo-nordic.png" alt="Nordic Semiconductor" loading="lazy">
      <img src="/branding/pl/logo-seagate.png" alt="Seagate" loading="lazy">
      <img src="/branding/pl/logo-panasonic.png" alt="Panasonic" loading="lazy">
      <img src="/branding/pl/logo-toyota.png" alt="Toyota" loading="lazy">
    </div>
  </div>

  <!-- PLUGINS -->
  <div class="plugins" id="plugins">
    <div class="plug-bg plug-bg-cloud"></div>
    <div class="plug-bg plug-bg-dc"></div>
    <div class="wrap">
      <div class="sec-kicker">The Collection</div>
      <h2 class="sec-h">Plugins for Atlassian</h2>
      <input class="pl-tab" type="radio" name="pl-tabs" id="pl-tab-cloud" checked>
      <input class="pl-tab" type="radio" name="pl-tabs" id="pl-tab-dc">
      <div class="tabs">
        <label class="tab-lbl" for="pl-tab-cloud">Cloud</label>
        <label class="tab-lbl" for="pl-tab-dc">Data Center</label>
      </div>

      <div class="grid grid-cloud">
        <div class="card">
          <div class="badge rs">Rising Star</div>
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/IotaCopy.svg" alt="Iota Copy icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Confluence</div>
              <h3>Iota Copy</h3>
            </div>
          </div>
          <div class="card-txt">Copy pages as Markdown for ChatGPT, Claude, Cursor and other LLMs, export branded PDF &amp; Word docs, send pages as emails.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/iota-copy/iota-copy-markdown-for-llm-pdf-word-email-export">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/1234910/iota-copy-pdf-word-markdown-export-for-confluence?hosting=cloud" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="badge">New</div>
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/RemindMe.svg" alt="RemindMe icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira &amp; Rovo</div>
              <h3>RemindMe</h3>
            </div>
          </div>
          <div class="card-txt">Never miss a follow-up or deadline. RemindMe reads the issue, picks the time, recipients, and sets the reminder in one click.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/remindme/remindme-context-aware-ai-reminders-for-jira-rovo">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/3952829457/remindme-context-aware-ai-reminders-for-jira-rovo?hosting=cloud" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/SimpleDiagrams.svg" alt="Simple Diagrams icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Confluence · Free</div>
              <h3>Simple Diagrams</h3>
            </div>
          </div>
          <div class="card-txt">Interactive diagrams for Confluence, drawn and edited right on the page.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/simple-diagrams/simple-diagrams-for-confluence">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/1234802/simple-diagrams-for-confluence-free?hosting=cloud" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/StartThatCall.svg" alt="Start that Call icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira</div>
              <h3>Start that Call</h3>
            </div>
          </div>
          <div class="card-txt">Plan and schedule calendar events, and launch calls from Jira in just a click.</div>
          <div class="spacer"></div>
          <div class="card-plat">
            <div class="row">
              <span class="pl">Google Meet</span>
              <span class="lk">
                <a class="doc main" href="/docs/start-that-call-google-meet-integration-for-confluence-and-jira/start-that-call-google-meet-integration-for-confluence-and-jira">Docs</a>
                <a class="mp" href="https://marketplace.atlassian.com/apps/1236910" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
              </span>
            </div>
            <div class="row">
              <span class="pl">Microsoft Teams</span>
              <span class="lk">
                <a class="doc" href="/docs/start-that-call-microsoft-teams/start-that-call-microsoft-teams-integration-for-confluence-and-jira">Docs</a>
                <a class="mp" href="https://marketplace.atlassian.com/apps/1913164386/microsoft-teams-meetings-video-calls-for-jira?hosting=cloud" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
              </span>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/StartThatCall.svg" alt="Start that Call icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Confluence</div>
              <h3>Start that Call</h3>
            </div>
          </div>
          <div class="card-txt">Plan and schedule calendar events, and launch calls from Confluence in just a click.</div>
          <div class="spacer"></div>
          <div class="card-plat">
            <div class="row">
              <span class="pl">Google Meet</span>
              <span class="lk">
                <a class="doc main" href="/docs/start-that-call-google-meet-integration-for-confluence-and-jira/start-that-call-google-meet-integration-for-confluence-and-jira">Docs</a>
                <a class="mp" href="https://marketplace.atlassian.com/apps/1236911" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
              </span>
            </div>
            <div class="row">
              <span class="pl">Microsoft Teams</span>
              <span class="lk">
                <a class="doc" href="/docs/start-that-call-microsoft-teams/start-that-call-microsoft-teams-integration-for-confluence-and-jira">Docs</a>
                <a class="mp" href="https://marketplace.atlassian.com/apps/2600924314/microsoft-teams-meetings-video-calls-for-confluence?hosting=cloud" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
              </span>
            </div>
          </div>
        </div>

      </div>

      <div class="grid grid-dc">
        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/AlphaStar.svg" alt="Alpha Star icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira · Free</div>
              <h3>Alpha Star</h3>
            </div>
          </div>
          <div class="card-txt">Fast and flexible favorites management: the issues, boards and filters you live in, one click away.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/alpha-star/alpha-star-personal-favorites-for-jira">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/1230137/alpha-star-personal-favorites-for-jira-free?hosting=datacenter" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/DeltaGuard.svg" alt="Delta Guard icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira</div>
              <h3>Delta Guard</h3>
            </div>
          </div>
          <div class="card-txt">Bulletproof issue protection: control who can see and edit sensitive custom fields.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/delta-guard/delta-guard-custom-fields-security-for-jira">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/1237331" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/SigmaTree.svg" alt="Sigma Tree icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira</div>
              <h3>Sigma Tree</h3>
            </div>
          </div>
          <div class="card-txt">Your project, mapped and measured: work-breakdown structure and budget brought into focus.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/sigma-tree/sigma-tree-wbs-tasks-structure-for-jira">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/2825185935/sigma-tree-wbs-tasks-structure-for-jira" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

        <div class="card">
          <div class="badge">New</div>
          <div class="card-top">
            <div class="card-ico"><img src="/branding/pl/svg/PiTrack.svg" alt="Pi Track icon" loading="lazy"></div>
            <div>
              <div class="card-kicker">For Jira</div>
              <h3>Pi Track</h3>
            </div>
          </div>
          <div class="card-txt">Simple time tracking, reliable timesheets, accurate budgets and clear reporting.</div>
          <div class="spacer"></div>
          <div class="card-links">
            <a class="doc main" href="/docs/pi-track/pi-track-smart-timetracking-for-jira">Documentation</a>
            <a class="mp" href="https://marketplace.atlassian.com/apps/3350707476/pi-track-smart-timetracking-for-jira" target="_blank" rel="noopener">Marketplace<svg class="ext" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M9 7h8v8"/></svg></a>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- ABOUT -->
  <div class="about" id="about">
    <div class="wrap">
    <div class="about-grid">
      <div>
        <div class="ab-kicker">About Us</div>
        <h2>DSR Corporation</h2>
        <p class="about-txt">We build enterprise-grade software, mission-critical applications and complex systems, with over 300 engineers and project managers across the USA, Japan, Portugal and Uzbekistan. These plugins started as internal tools for our own Atlassian stack; we shipped them because they were worth sharing.</p>
      </div>
      <div class="ab-cards">
        <div class="ab-c"><b>300+</b><span>engineers and project managers</span></div>
        <div class="ab-c"><b>4</b><span>countries: USA, Japan, Portugal, Uzbekistan</span></div>
        <div class="ab-c"><b>20+</b><span>years of building software</span></div>
        <div class="ab-c"><b>9</b><span>plugins on the Atlassian Marketplace</span></div>
      </div>
    </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="foot">
    <div class="wrap">
      <div class="foot-grid">
        <div>
          <div class="foot-cap">Cloud</div>
          <div class="foot-list">
            <a href="https://marketplace.atlassian.com/apps/1234910/iota-copy-pdf-word-markdown-export-for-confluence?hosting=cloud" target="_blank" rel="noopener">Iota Copy</a>
            <a href="https://marketplace.atlassian.com/apps/3952829457/remindme-context-aware-ai-reminders-for-jira-rovo?hosting=cloud" target="_blank" rel="noopener">RemindMe</a>
            <a href="https://marketplace.atlassian.com/apps/1234802/simple-diagrams-for-confluence-free?hosting=cloud" target="_blank" rel="noopener">Simple Diagrams</a>
            <a href="https://marketplace.atlassian.com/apps/1236910" target="_blank" rel="noopener">Start that Call for Jira</a>
            <a href="https://marketplace.atlassian.com/apps/1236911" target="_blank" rel="noopener">Start that Call for Confluence</a>
          </div>
        </div>
        <div>
          <div class="foot-cap">Data Center</div>
          <div class="foot-list">
            <a href="https://marketplace.atlassian.com/apps/1230137/alpha-star-personal-favorites-for-jira-free?hosting=datacenter" target="_blank" rel="noopener">Alpha Star</a>
            <a href="https://marketplace.atlassian.com/apps/1237331" target="_blank" rel="noopener">Delta Guard</a>
            <a href="https://marketplace.atlassian.com/apps/2825185935/sigma-tree-wbs-tasks-structure-for-jira" target="_blank" rel="noopener">Sigma Tree</a>
            <a href="https://marketplace.atlassian.com/apps/3350707476/pi-track-smart-timetracking-for-jira" target="_blank" rel="noopener">Pi Track</a>
          </div>
        </div>
        <div>
          <div class="foot-cap">Support</div>
          <div class="foot-list">
            <a href="mailto:plugins@dsr-corporation.com">plugins@dsr-corporation.com</a>
            <a href="https://marketplace.atlassian.com/vendors/1220995/" target="_blank" rel="noopener">Atlassian Marketplace</a>
            <a href="https://en.dsr-corporation.com" target="_blank" rel="noopener">DSR Corporation</a>
          </div>
        </div>
      </div>
      <div class="foot-base">
        <span>All Rights Reserved © 2005–2026 DSR Corporation</span>
        <a href="https://plugins.dsr-corporation.com" target="_blank" rel="noopener">plugins.dsr-corporation.com</a>
      </div>
    </div>
  </div>
</div>