/* Avia Loom product walkthroughs. Media and supplied narratives stay intact. */
.loom-page {
  --detail-accent: #0874dc;
  --detail-ink: #0b315d;
  --detail-soft: #e8f3ff;
  --detail-line: #ccdef1;
  --detail-glow: #0b8ff0;
  color: var(--detail-ink);
  max-width: 1440px;
  padding: 30px clamp(20px, 4vw, 58px) 72px;
}
.loom-page.lp-trade {
  --detail-accent: #007e77;
  --detail-ink: #063f45;
  --detail-soft: #e4f6ef;
  --detail-line: #bfdfd6;
  --detail-glow: #24b79c;
}
.loom-page.lp-planning {
  --detail-accent: #235bd3;
  --detail-ink: #163565;
  --detail-soft: #eaf0ff;
  --detail-line: #c9d8f5;
  --detail-glow: #5893ff;
}
.loom-page.lp-records {
  --detail-accent: #7850b6;
  --detail-ink: #35245d;
  --detail-soft: #f1eafb;
  --detail-line: #ddcfee;
  --detail-glow: #a880dc;
}
.loom-page *, .loom-page *::before, .loom-page *::after { box-sizing: border-box; min-width: 0; }
.loom-page .loom-back {
  color: #536e86;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 23px;
  transition: color .2s ease;
}
.loom-page .loom-back:hover { color: var(--detail-accent); }
.loom-page .lp-page-top {
  padding-bottom: 22px;
  border-color: #dde6ef;
  gap: 22px;
}
.loom-page .lp-page-top .loom-back { margin: 0; }
.loom-page .lp-product-nav {
  padding: 4px;
  gap: 3px;
  background: #eaf0f6;
  border-color: #dbe5ef;
  border-radius: 14px;
}
.loom-page .lp-product-nav a {
  font-size: 11px;
  line-height: 1.4;
  padding: 11px 15px;
  border-radius: 10px;
  color: #5a7087;
  transition: background .2s ease, color .2s ease;
}
.loom-page .lp-product-nav a[aria-current="page"] {
  color: #fff;
  background: var(--detail-accent);
  box-shadow: 0 3px 9px #0b315d16;
}
.loom-page .lp-product-nav a:not([aria-current="page"]):hover { background: #fff; color: #0b315d; }

/* A coloured editorial introduction, with the video given its own clear stage. */
.loom-page .loom-intro {
  position: relative;
  isolation: isolate;
  align-items: center;
  gap: 34px;
  margin: 22px 0 24px;
  padding: 34px 36px;
  background: #fff;
  border: 1px solid var(--detail-line);
  border-radius: 25px;
  box-shadow: 0 14px 35px -29px #123c6380;
  overflow: hidden;
}
.loom-page .loom-intro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 32px;
  bottom: 32px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--detail-accent);
}
.loom-page .loom-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -150px;
  top: -180px;
  border-radius: 50%;
  border: 64px solid var(--detail-soft);
  pointer-events: none;
}
.loom-page .software-eyebrow {
  color: var(--detail-accent);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1.65px;
}
.loom-page .loom-intro h1 {
  color: #0b2851;
  font-size: clamp(36px, 4vw, 57px);
  line-height: 1.1;
  letter-spacing: -1.9px;
  margin: 17px 0 19px;
}
.loom-page .loom-intro h1 em {
  display: inline-block;
  font: italic .88em/1.16 Georgia, serif;
  letter-spacing: -1.1px;
  color: var(--detail-accent);
  margin-top: 5px;
}
.loom-page.lp-walkthrough .loom-intro h1 em { font-size: .83em; }
.loom-page .loom-intro p {
  color: #526f87;
  font-size: 14px;
  line-height: 1.85;
  max-width: 720px;
  margin: 0;
}
.loom-page .loom-tags { gap: 7px; margin: 19px 0 0; }
.loom-page .loom-tags span {
  background: var(--detail-soft);
  border: 1px solid var(--detail-line);
  color: var(--detail-ink);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 650;
  padding: 7px 10px;
  border-radius: 7px;
}
.loom-page .loom-intro-fact {
  position: relative;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid #ffffff30;
  background: var(--detail-ink);
  color: #fff;
  box-shadow: 0 12px 27px -19px var(--detail-accent);
  overflow: hidden;
  flex-basis: 245px;
}
.loom-page .loom-intro-fact::after {
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  right: -35px;
  top: -45px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  pointer-events: none;
}
.loom-page .loom-intro-fact strong { color: #fff; font-size: 57px; line-height: 1; letter-spacing: -2px; }
.loom-page .loom-intro-fact span { color: #e4effc; font-size: 11px; line-height: 1.75; }
.loom-page .loom-main-demo {
  position: relative;
  margin: 0 0 27px;
  padding: 25px;
  background: var(--detail-soft);
  border: 1px solid var(--detail-line);
  border-radius: 25px;
}
.loom-page .loom-demo-heading { gap: 30px; margin-bottom: 22px; grid-template-columns: 1.2fr 1fr; }
.loom-page .loom-demo-heading h2 { color: var(--detail-ink); font-size: clamp(24px, 2.45vw, 33px); letter-spacing: -.9px; line-height: 1.22; margin-top: 11px; }
.loom-page .loom-demo-heading > p { font-size: 12px; line-height: 1.8; color: #536e85; max-width: 370px; }
.loom-page .loom-main-demo video { border: 1px solid #ffffff90; border-radius: 13px; box-shadow: 0 12px 25px -19px #0b28515c; }
.loom-page .loom-main-demo .lp-video-slot { border-radius: 14px; background: #eff4fb; }
.loom-page .lp-video-pending { font-size: 8px; line-height: 1.5; padding: 9px 12px; letter-spacing: 1px; color: var(--detail-ink); border-color: var(--detail-line); box-shadow: 0 4px 15px #0b285115; }

/* Six persistent-looking shortcuts, styled as clear numbered workflow tiles. */
.loom-page .loom-module-nav {
  gap: 9px;
  padding: 0 0 29px;
  margin: 0 0 35px;
  border-bottom-color: #dae5ef;
}
.loom-page .loom-module-nav a {
  gap: 9px;
  min-height: 63px;
  padding: 11px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--detail-ink);
  background: #fff;
  border: 1px solid var(--detail-line);
  border-radius: 11px;
  box-shadow: 0 4px 10px #0b285104;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.loom-page .loom-module-nav a > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 29px;
  flex: 0 0 27px;
  color: var(--detail-accent);
  background: var(--detail-soft);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
}
.loom-page .loom-module-nav a:hover { border-color: var(--detail-accent); background: var(--detail-soft); transform: translateY(-2px); }
.loom-page .loom-module-nav a:hover > span { color: #fff; background: var(--detail-accent); }
.loom-page .loom-module { margin-bottom: 48px; scroll-margin-top: 30px; }
.loom-page .loom-module-copy { column-gap: 38px; margin-bottom: 19px; }
.loom-page .loom-module-copy h2 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.25; letter-spacing: -.85px; color: var(--detail-ink); }
.loom-page .loom-module-copy > p { color: #526d84; font-size: 13px; line-height: 1.85; }
.loom-page .loom-module-copy .software-eyebrow { margin-bottom: 8px; }
.loom-page .loom-module-copy .loom-tags { margin-top: 13px; }
.loom-page.lp-walkthrough .loom-module-copy .loom-tags { margin-top: 0; }
.loom-page .loom-module figure {
  position: relative;
  background: #fff;
  border: 1px solid var(--detail-line);
  border-top: 3px solid var(--detail-accent);
  border-radius: 19px;
  box-shadow: 0 15px 35px -27px #0b28515e;
}
.loom-page .loom-module-video { background: #eef3fb; }
.loom-page .loom-video-open {
  background: var(--detail-soft);
  border-top: 1px solid var(--detail-line);
  color: var(--detail-ink);
  padding: 12px 21px;
  min-height: 49px;
  font-size: 11px;
  letter-spacing: .1px;
  transition: color .2s ease, background .2s ease;
}
.loom-page .loom-video-open > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #ffffffb3; color: var(--detail-accent); font-size: 17px; }
.loom-page .loom-video-open:hover { color: #fff; background: var(--detail-accent); }
.loom-page .loom-module figcaption { font-size: 10px; line-height: 1.7; padding: 13px 21px; color: #688097; border-top-color: #e3eaf1; }
.loom-page.lp-walkthrough .loom-module figcaption.lp-walkthrough-caption { padding: 27px 30px 30px; border-top: 0; }
.loom-page .lp-walkthrough-caption .software-eyebrow { color: var(--detail-accent); font-size: 8px; line-height: 1.5; letter-spacing: 1.4px; margin-bottom: 10px; }
.loom-page .lp-walkthrough-caption > strong { color: var(--detail-ink); font-size: 23px; line-height: 1.3; letter-spacing: -.5px; }
.loom-page .lp-walkthrough-caption > p { font-size: 14px; line-height: 1.9; color: #526d83; margin-top: 12px; max-width: 1040px; }
.loom-page .loom-legend { padding: 11px 14px; gap: 17px; border: 1px solid #e0e8f0; border-radius: 8px; background: #fff; }
.loom-page .loom-legend span { font-size: 10px; }
.loom-page .loom-end {
  position: relative;
  isolation: isolate;
  padding: 34px 36px;
  border: 1px solid #ffffff30;
  border-radius: 22px;
  background: var(--detail-ink);
  box-shadow: 0 15px 30px -25px #0b285170;
  overflow: hidden;
}
.loom-page .loom-end::after { content: ''; position: absolute; z-index: -1; width: 245px; height: 245px; right: -50px; top: -95px; border-radius: 50%; border: 36px solid #ffffff08; pointer-events: none; }
.loom-page .loom-end h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.25; letter-spacing: -.8px; max-width: 850px; }
.loom-page .loom-end p { font-size: 13px; color: #d5e3f2; line-height: 1.85; max-width: 880px; margin: 12px 0 20px; }
.loom-page .loom-end a { font-size: 11px; line-height: 1.5; color: #fff; background: #ffffff12; border: 1px solid #ffffff38; border-radius: 8px; padding: 11px 15px; margin: 0; transition: background .2s ease; }
.loom-page .loom-end a:hover { background: #ffffff26; }
.loom-page a:focus-visible, .loom-page button:focus-visible { outline: 3px solid var(--detail-glow); outline-offset: 4px; }

@media (max-width: 1100px) {
  .loom-page .loom-intro { padding: 29px; gap: 24px; }
  .loom-page .loom-intro-fact { flex-basis: 210px; padding: 20px; gap: 12px; }
  .loom-page .loom-intro-fact strong { font-size: 48px; }
  .loom-page .loom-intro-fact span { font-size: 10px; }
  .loom-page .loom-module-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loom-page .loom-module-nav a { min-height: 53px; }
}
@media (max-width: 800px) {
  .loom-page .lp-page-top { display: block; }
  .loom-page .lp-page-top .loom-back { margin-bottom: 16px; }
  .loom-page .lp-product-nav { width: 100%; }
  .loom-page .lp-product-nav a { flex: 1; text-align: center; }
  .loom-page .loom-intro { display: block; }
  .loom-page .loom-intro-fact { display: inline-flex; margin: 24px 0 0; padding: 15px 20px; }
  .loom-page .loom-intro-fact strong { font-size: 39px; }
  .loom-page .loom-intro-fact span { font-size: 10px; line-height: 1.6; }
  .loom-page .loom-demo-heading { gap: 23px; grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 650px) {
  .loom-page { padding: 21px 18px 46px; }
  .loom-page .loom-back { font-size: 11px; margin-bottom: 15px; }
  .loom-page .lp-page-top { padding-bottom: 17px; }
  .loom-page .lp-product-nav { border-radius: 11px; }
  .loom-page .lp-product-nav a { font-size: 9px; line-height: 1.4; padding: 10px 7px; border-radius: 8px; }
  .loom-page .loom-intro { margin: 17px 0 19px; padding: 25px 21px; border-radius: 20px; }
  .loom-page .loom-intro::before { top: 25px; bottom: 25px; width: 3px; }
  .loom-page .software-eyebrow { font-size: 8px; letter-spacing: 1.25px; }
  .loom-page .loom-intro h1 { font-size: clamp(32px, 8.8vw, 44px); letter-spacing: -1.25px; line-height: 1.14; margin: 16px 0; }
  .loom-page .loom-intro h1 em, .loom-page.lp-walkthrough .loom-intro h1 em { font-size: .86em; line-height: 1.18; letter-spacing: -.75px; }
  .loom-page .loom-intro p { font-size: 13px; line-height: 1.85; }
  .loom-page .loom-tags { gap: 6px; margin-top: 17px; }
  .loom-page .loom-tags span { padding: 6px 8px; font-size: 9px; }
  .loom-page .loom-intro-fact { margin-top: 20px; padding: 13px 17px; border-radius: 12px; gap: 12px; }
  .loom-page .loom-intro-fact strong { font-size: 34px; letter-spacing: -1px; }
  .loom-page .loom-intro-fact span { font-size: 10px; }
  .loom-page .loom-main-demo { margin-bottom: 22px; padding: 15px; border-radius: 18px; }
  .loom-page .loom-demo-heading { display: block; margin-bottom: 17px; }
  .loom-page .loom-demo-heading h2 { font-size: 24px; letter-spacing: -.65px; }
  .loom-page .loom-demo-heading > p { font-size: 12px; line-height: 1.75; margin-top: 13px; }
  .loom-page .loom-main-demo video, .loom-page .loom-main-demo .lp-video-slot { border-radius: 9px; }
  .loom-page .lp-video-pending { left: 9px; bottom: 9px; font-size: 6px; padding: 7px 9px; letter-spacing: .6px; }
  .loom-page .loom-module-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-bottom: 24px; margin-bottom: 28px; }
  .loom-page .loom-module-nav a { min-height: 59px; gap: 8px; font-size: 10px; line-height: 1.45; padding: 9px; border-radius: 9px; }
  .loom-page .loom-module-nav a > span { width: 25px; height: 27px; flex-basis: 25px; font-size: 8px; }
  .loom-page .loom-module { margin-bottom: 34px; scroll-margin-top: 21px; }
  .loom-page .loom-module-copy { display: block; margin-bottom: 16px; }
  .loom-page .loom-module-copy h2 { font-size: 26px; letter-spacing: -.7px; line-height: 1.25; margin-bottom: 11px; }
  .loom-page .loom-module-copy > p { font-size: 12px; line-height: 1.85; }
  .loom-page.lp-walkthrough .loom-module-copy .loom-tags { justify-content: flex-start; margin-top: 12px; }
  .loom-page .loom-module figure { border-radius: 13px; border-top-width: 2px; }
  .loom-page .loom-video-open { padding: 11px 14px; min-height: 46px; font-size: 10px; }
  .loom-page .loom-video-open > span { height: 24px; width: 24px; font-size: 16px; }
  .loom-page .loom-module figcaption { padding: 11px 14px; font-size: 9px; }
  .loom-page.lp-walkthrough .loom-module figcaption.lp-walkthrough-caption { padding: 21px; }
  .loom-page .lp-walkthrough-caption .software-eyebrow { font-size: 7px; letter-spacing: 1.1px; margin-bottom: 9px; }
  .loom-page .lp-walkthrough-caption > strong { font-size: 21px; line-height: 1.3; letter-spacing: -.4px; }
  .loom-page .lp-walkthrough-caption > p { font-size: 13px; line-height: 1.85; margin-top: 11px; }
  .loom-page .loom-legend { gap: 10px 15px; padding: 10px 12px; margin-top: 14px; }
  .loom-page .loom-legend span { font-size: 9px; }
  .loom-page .loom-end { padding: 25px 22px; border-radius: 17px; }
  .loom-page .loom-end h2 { font-size: 25px; letter-spacing: -.65px; }
  .loom-page .loom-end p { font-size: 12px; line-height: 1.85; margin-bottom: 19px; }
  .loom-page .loom-end a { font-size: 11px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .loom-page .loom-back, .loom-page .lp-product-nav a, .loom-page .loom-module-nav a,
  .loom-page .loom-video-open, .loom-page .loom-end a { transition: none; }
  .loom-page .loom-module-nav a:hover { transform: none; }
}
/* All four products are first-class peers in the cross-product navigation. */
@media(max-width:650px){.loom-page .lp-product-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.loom-page .lp-product-nav a{white-space:normal;display:grid;place-items:center;min-height:43px;font-size:10px}.loom-page .loom-intro-fact{max-width:100%}}
.loom-page.lp-planning{--detail-accent:#9b5e0d;--detail-ink:#653f17;--detail-soft:#fff0dc;--detail-line:#ecd4ae;--detail-glow:#d19b42}