/* The tour shares the Team workspace canvas, paper and type colors. */
.tour-section {
  --tour-canvas:#101214;
  --tour-paper:#1b1e21;
  --tour-inset:#24282d;
  --tour-ink:#f3f4f5;
  --tour-muted:#b0b5bd;
  min-height:100svh;
  display:grid;
  padding-block:clamp(94px,12svh,154px) clamp(36px,5.4svh,80px);
  background:var(--tour-canvas);
  color:var(--tour-ink);
  color-scheme:dark;
}
.wrap.feature-wrap {
  width:min(1632px,calc(100% - clamp(36px,5.6vw,112px)));
  display:grid;
  grid-template-rows:auto 1fr;
  gap:clamp(24px,4svh,55px);
}
.feature-heading h2 {
  margin:0;
  font-size:clamp(48px,5.8vw,92px);
  line-height:1;
  font-weight:570;
  letter-spacing:-.04em;
}
.feature-grid {
  container-type:inline-size;
  --team-preview-width:29cqw;
  --team-preview-height:clamp(58px,calc(40svh - 214px),174px);
  display:grid;
  min-height:0;
  grid-template-columns:repeat(20,minmax(0,1fr));
  grid-template-rows:minmax(226px,1.12fr) minmax(192px,.88fr);
  gap:clamp(11px,1.05vw,19px);
}
@media (min-width:1051px) {
  .tour-section {height:max(690px,100svh);grid-template-rows:minmax(0,1fr)}
  .feature-wrap {min-height:0}
}
.feature-tile {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  --gutter:clamp(20px,1.9vw,33px);
  gap:clamp(10px,1.2svh,20px);
  min-width:0;
  overflow:hidden;
  border-radius:16px;
  background:var(--tour-paper);
}
.tile-send {grid-column:span 9; --art-left:15%}
.tile-group {grid-column:span 5; --art-left:12%}
.tile-archive {grid-column:span 6; --art-left:14%}
.tile-accounts {grid-column:span 7; --art-left:16%}
.tile-access {grid-column:span 8; --art-left:24%}
.tile-redaction {grid-column:span 5; --art-left:10%}
.feature-copy {padding:var(--gutter) var(--gutter) 0;min-width:0;align-self:start}
.feature-copy h3 {margin:0}
.feature-toggle {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:0;
  color:inherit;
  text-align:start;
  font-size:clamp(22px,1.95vw,32px);
  font-weight:575;
  line-height:1.08;
  letter-spacing:-.035em;
}
.feature-toggle span {text-wrap:balance}
.feature-plus {
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#30353a;
  color:var(--tour-ink);
  transition:background-color .17s;
}
.feature-plus svg {width:15px;height:15px}
.feature-toggle:hover .feature-plus {background:#4a5159}
.feature-toggle:focus-visible {outline:none}
.feature-tile:has(.feature-toggle:focus-visible) {outline:3px solid #a8cbb5;outline-offset:3px}
.feature-toggle::after {content:"";position:absolute;inset:0;z-index:2}
.feature-copy p {
  margin:9px 0 0;
  max-width:36ch;
  color:var(--tour-muted);
  font-size:clamp(15px,1.17vw,19px);
  line-height:1.38;
  text-wrap:pretty;
}
.tile-send .feature-toggle {font-size:clamp(32px,3.1vw,52px)}
.tile-send .feature-copy p {max-width:42ch}
.feature-art {
  align-self:end;
  overflow:hidden;
  min-height:0;
  margin:0 -1px -1px var(--art-left);
  border-radius:12px 0 0 0;
  pointer-events:none;
  box-shadow:-6px 7px 20px #0004;
}
.art-shot {
  height:100%;
  max-height:calc(100% - 2px);
  background:var(--tour-inset);
}
.art-shot img {display:block;width:100%;height:auto;max-width:none}
.tile-archive .art-shot img {width:126%;margin-left:-21%}
.tile-accounts .art-shot img {width:111%;margin-left:-4%}
.tile-send .art-shot {background:#fafafa}
.art-example {display:grid;align-content:start;background:#2a2e33}
.group-example,.mask-example,.access-example {width:100%;margin:0;min-width:0}
.group-example {display:grid;gap:12px;padding:clamp(12px,1.4vw,24px)}
.group-prompt {
  justify-self:end;
  max-width:96%;
  padding:9px 13px;
  margin:0;
  border-radius:12px 12px 3px 12px;
  background:#3a4045;
  color:#f3f4f5;
  font-size:clamp(13px,1vw,17px);
  line-height:1.3;
  text-wrap:pretty;
}
.group-result {display:flex;gap:9px;align-items:center;line-height:1.2}
.group-icon {
  display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;
  color:#bddec8;background:#31483b;
}
.group-icon svg {width:19px;height:19px}
.group-result strong,.group-result small {display:block}
.group-result strong {font-size:clamp(14px,1.06vw,18px)}
.group-result small,.access-example small {color:#c0c5cb;font-size:clamp(12px,.9vw,14px)}
.group-result small {margin-top:3px}
.mask-example,.access-example {padding:clamp(13px,1.4vw,24px)}
.mask-example div,.access-example dl div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  padding-block:7px;
  line-height:1.24;
}
.mask-example div + div,.access-example dl div + div {border-top:1px solid #42484d}
.mask-example dt,.access-example dt {color:#e5e7e9;font-size:clamp(13px,1.06vw,17px)}
.mask-example dd,.access-example dd {margin:0;font-size:clamp(12px,1vw,16px);font-weight:530}
.mask-example .field-masked {background:#41474c;color:#e1e5e8;padding:3px 6px;border-radius:4px}
.access-example {color:#f3f4f5}
.access-identity {display:flex;align-items:center;gap:8px;font-size:clamp(14px,1.13vw,20px);line-height:1.15}
.access-identity img {width:1.12em;height:1.12em;filter:invert(1)}
.access-example dl {margin:9px 0 6px}
.access-example dd {color:#c9d7ce}
.access-example small {display:block}
.feature-sample-dialog {padding:clamp(14px,2.4vw,29px);background:#2a2e33;border-radius:12px}
.feature-sample-dialog .group-example,.feature-sample-dialog .access-example {padding:8px}
.feature-sample-dialog .access-identity {font-size:21px}
.feature-sample-dialog .access-example dl {margin-block:18px}
.feature-sample-dialog .group-prompt {font-size:17px}
.feature-sample-dialog .group-result strong {font-size:18px}
.feature-sample-dialog .group-result small,.feature-sample-dialog .access-example small {font-size:14px}
.feature-sample-dialog .access-example dt,.feature-sample-dialog .access-example dd {font-size:16px}
.feature-dialog {
  width:min(670px,calc(100% - 36px));
  max-width:none;
  max-height:min(88svh,810px);
  border:0;
  border-radius:18px;
  padding:0;
  overflow:auto;
  overscroll-behavior:contain;
  color:#f5f6f8;
  background:#202228;
  color-scheme:dark;
  box-shadow:0 24px 76px #10203439;
}
.feature-dialog::backdrop {background:#06070bd1}
html:has(.feature-dialog[open]) {overflow:hidden}
.feature-dialog-body {padding:clamp(22px,3vw,38px)}
.feature-dialog-top {display:flex;align-items:start;justify-content:space-between;gap:18px}
.feature-dialog h2 {
  margin:0;
  align-self:center;
  color:#f5f6f8;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.07;
  letter-spacing:-.037em;
  text-wrap:balance;
}
.feature-dialog-top form {margin:0;flex:none}
.feature-close {
  display:grid;place-items:center;
  min-width:38px;min-height:38px;
  border-radius:50%;background:#353940;color:#f5f6f8;
}
.feature-close:hover,.feature-close:focus-visible {background:#454b54}
#feature-dialog-description {
  margin:14px 0 22px;
  font-size:clamp(16px,1.27vw,19px);
  line-height:1.48;color:#c3c8d0;text-wrap:pretty;
}
.feature-zoom {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border-radius:9px;background:#f5f5f7;cursor:zoom-in;
  box-shadow:0 4px 15px #1c344c21;
}
.feature-zoom img {display:block;width:100%;height:auto}
.feature-zoom span {
  position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:99px;background:white;color:#1d1d1f;font-size:12px;font-weight:600;box-shadow:0 3px 10px #18263622;
}
.feature-dialog .tour-redaction {margin:0}
.feature-dialog .rd-sample {border-radius:12px}
.feature-dialog figcaption {margin-top:9px;font-size:12px;color:#bfc6cf}

@media (max-width:1050px) {
  .tour-section {padding-block:clamp(76px,10svh,112px) clamp(32px,4.8svh,55px)}
  .feature-grid {
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:clamp(220px,27svh,320px) repeat(2,clamp(188px,23svh,272px));
  }
  .feature-grid {--team-preview-width:35.5cqw;--team-preview-height:clamp(60px,calc(23svh - 98px),150px)}
  .tile-send,.tile-accounts {grid-column:span 7}
  .tile-group,.tile-archive {grid-column:span 5}
  .tile-access,.tile-redaction {grid-column:span 6}
  .feature-tile {--gutter:19px}
  .feature-toggle {font-size:24px}
  .tile-send .feature-toggle {font-size:31px}
  .feature-copy p {font-size:15px;margin-top:6px}
}
@media (max-width:680px) {
  .tour-section {padding-block:78px 38px}
  .wrap.feature-wrap {width:calc(100% - 32px);gap:26px}
  .feature-heading h2 {font-size:clamp(38px,8.9vw,54px)}
  .feature-grid {
    grid-template-rows:auto;grid-auto-rows:minmax(180px,auto);gap:9px;
    --team-preview-width:43cqw;--team-preview-height:clamp(64px,16.5vw,96px);
  }
  .feature-tile {--gutter:clamp(13px,3vw,19px);gap:11px;border-radius:13px}
  .feature-toggle {font-size:clamp(19px,3.7vw,23px);gap:4px}
  .feature-copy p {font-size:clamp(13px,2.75vw,16px);line-height:1.33}
  .feature-plus {width:21px;height:21px}
  .feature-plus svg {width:12px;height:12px}
  .tile-send {grid-column:span 12;grid-template-rows:auto minmax(100px,1fr);min-height:225px;--art-left:17%}
  .tile-send .feature-toggle {font-size:clamp(29px,6vw,37px)}
  .tile-send .art-shot {height:clamp(105px,24vw,142px)}
  .tile-group,.tile-access {grid-column:span 6;--art-left:10%}
  .tile-archive,.tile-accounts {grid-column:span 6;--art-left:12%}
  .tile-redaction {grid-column:span 12;--art-left:26%}
  .tile-group .group-example {padding:10px 8px}
  .tile-group .group-prompt {display:none}
  .tile-group .group-result {gap:6px}
  .tile-group .group-result strong {font-size:13px}
  .tile-group .group-result small {font-size:11px}
  .tile-group .group-icon {width:24px;height:24px}
  .tile-group .group-icon svg {width:14px;height:14px}
  .tile-access .access-example {padding:10px}
  .tile-access .access-example dl,.tile-access .access-example small {margin:5px 0 0}
  .tile-access .access-example dl>div+div,.tile-access .access-example small {display:none}
  .tile-access .access-example dl div {padding:2px 0;gap:3px}
  .tile-access .access-example dd,.tile-access .access-example dt {font-size:12px}
  .tile-access .access-identity {gap:5px;font-size:13px}
  .art-shot {max-height:100px;min-height:64px}
  .feature-dialog {max-height:90svh;width:calc(100% - 22px);border-radius:14px}
  .feature-dialog-body {padding:20px}
}
@media (max-width:360px) {
  .feature-grid {grid-auto-rows:minmax(198px,auto)}
  .feature-toggle {font-size:17px}
  .feature-tile {--gutter:10px}
}
.tile-accounts,.tile-access {grid-template-rows:1fr var(--team-preview-height)}
.tile-accounts .feature-art,.tile-access .feature-art {
  justify-self:end;
  width:var(--team-preview-width);
  height:var(--team-preview-height);
  min-height:0;
  max-height:none;
  margin:0 -1px -1px 0;
}
@media(prefers-reduced-motion:reduce){.feature-plus{transition:none}}