/* Doorman — the support page's one piece of furniture: the front desk.

   A glass pane with the three steps on the left and a paper claim tag on the
   right. The tag is the page's argument made physical: the code on it is a
   claim check for one report, the way a coat-check ticket is for one coat.
   Nothing on it says who you are.

   Loaded after page-text.css and only on /support. No script: the tag settles
   once with a CSS transition and lifts on hover, and reduced-motion gets it
   already at rest. */

.desk{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center;
  margin:0 0 72px;padding:40px 44px 40px 44px;border-radius:24px;
  border:1px solid var(--hairline);border-left:2px solid var(--accent);
  background:var(--glass-strong);backdrop-filter:var(--glass-filter);
  box-shadow:var(--lift-2);
}
.desk .eyebrow{margin-bottom:12px}
.desk h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.024em;line-height:1.12;max-width:16ch;margin:0 0 22px}

.steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;max-width:52ch}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;color:var(--ink);font-size:16.5px;line-height:1.5}
.steps strong{font-weight:600}
.step-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:2px;
  color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  box-shadow:0 1px 1px rgba(20,35,28,.12),inset 0 1px 0 rgba(255,255,255,.28);
}
.desk-note{color:var(--muted);font-size:15px;line-height:1.66;margin:0 0 10px;max-width:56ch}
.desk-note:last-child{margin-bottom:0}

/* The tag. Its shadow is the same pine-tinted stack the rest of the site
   uses, offset the way a card hung from a string would hang: heavier at the
   bottom, a touch to the right. */
.tag-figure{margin:0;justify-self:end;width:100%;max-width:340px;position:relative;z-index:2}
.tag{
  display:block;width:100%;height:auto;overflow:visible;
  transform-origin:44px 30px;
  filter:drop-shadow(0 1px 1px rgba(20,35,28,.06)) drop-shadow(0 6px 10px rgba(20,35,28,.10)) drop-shadow(0 18px 28px rgba(20,35,28,.10));
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
  transform:rotate(-4deg);
}
.tag-figure:hover .tag{
  transform:rotate(-1.5deg) translateY(-3px);
  filter:drop-shadow(0 1px 1px rgba(20,35,28,.06)) drop-shadow(0 10px 14px rgba(20,35,28,.11)) drop-shadow(0 26px 36px rgba(20,35,28,.12));
}
.tag-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  fill:var(--dim);
}
.tag-code{
  font-family:var(--mono);font-size:33px;font-weight:600;letter-spacing:.02em;
  fill:var(--accent-deep);
}
.tag-string{stroke-dasharray:1 0}

/* Settle-in. One motion, on load, then never again: the tag arrives hanging
   a little too far and comes to rest. The keyframe only exists when motion
   is welcome, so reduced-motion never sees a frame of it. `backwards`, not
   `both`: the 100% keyframe already equals the resting `.tag` transform, so
   once the animation finishes it should stop holding that value and let the
   static transform (and the hover transition on top of it) take over. With
   `both` the finished animation's fill kept outranking the static transform
   forever, which is why hovering the tag never moved it. */
@media (prefers-reduced-motion:no-preference){
  .tag{animation:tag-settle 1.6s var(--ease) 1 backwards}
  @keyframes tag-settle{
    0%{transform:rotate(-9deg) translateY(-6px)}
    60%{transform:rotate(-2.6deg) translateY(0)}
    100%{transform:rotate(-4deg) translateY(0)}
  }
}

/* The four causes reuse the questions page's fold-away list, but the summary
   is an h3 here, not an h2, and sits a size smaller under the section head. */
.prose .qa{margin:14px 0 8px}
.prose .qa summary{font-size:18px;padding:20px 40px 20px 0}
.prose .qa summary::after{top:28px}
.prose .qa summary h3{margin:0;color:var(--ink)}
.prose .qa .a{padding-bottom:22px}
.prose .qa .a p{font-size:16px}

@media (max-width:980px){
  .desk{grid-template-columns:1fr;gap:28px;padding:28px 24px 30px;margin-bottom:52px}
  .desk h2{max-width:none}
  .tag-figure{justify-self:start;max-width:300px;margin-top:4px}
  .tag{transform:rotate(-2.5deg)}
  @media (prefers-reduced-motion:no-preference){
    @keyframes tag-settle{
      0%{transform:rotate(-7deg) translateY(-6px)}
      60%{transform:rotate(-1.4deg) translateY(0)}
      100%{transform:rotate(-2.5deg) translateY(0)}
    }
  }
}
@media (max-width:520px){
  .desk{padding:24px 18px 26px;border-radius:18px}
  .steps li{font-size:15.5px}
  .tag-figure{max-width:100%}
}

/* Pass 2. The h1 is two words on this page, so the shell's 18ch cap does
   nothing; the two columns of the sheet start level (the prose's first h2
   otherwise carries its section margin above the aside's top edge); and the
   tag's string leaves the eyelet upward, out of the pane, so the tag reads as
   hung from something rather than lying on the desk. */
.sheet-grid .prose>h2:first-child{margin-top:0}
.tag{overflow:visible}
.tag-figure{padding-top:18px}

/* Pass 3. The string runs out through the top of the pane and the pane clips
   it, which is what says the tag hangs from something above rather than
   floating. Clipping is safe here: nothing else in the pane reaches its edge,
   and the tag's own shadow stays well inside. The tag column also grows so
   the object carries its half of the pane. */
.desk{overflow:hidden;grid-template-columns:minmax(0,1fr) 400px}
.tag-figure{max-width:400px}
@media (max-width:980px){
  .desk{grid-template-columns:1fr}
  .tag-figure{max-width:320px}
}

/* Narrow screens stack the tag under the copy, so a string long enough to
   leave the pane would run straight through the steps. The figure clips it
   at its own top edge instead, with enough headroom above the eyelet for a
   short visible run. Padding on the right and bottom keeps the tag's shadow
   inside the clip. */
@media (max-width:980px){
  .tag-figure{overflow:hidden;padding:64px 28px 30px 0;margin-top:-8px}
}