/* -----------------------------------------
   UNIVERSAL POINTER MODULE
------------------------------------------*/

:root {
    --pointer-base-width: 6.5rem;      /* width of the pointer base */
    --pointer-height: 2rem;          /* long downward length */
    --pointer-tip-width: 0.25rem;       /* sharp, narrow tip */
    --pointer-angle: 45deg;             /* rotate right-facing shape downward */
    --pointer-offset-y: 100%;           /* attach pointer to bottom edge */
    --pointer-offset-x: 0.75rem;        /* horizontal placement */
    --pointer-color: #fafafa;        /* fill color */
}

.pointer-right::after {
    content: "";
    position: absolute;
    top: var(--pointer-offset-y);
    right: var(--pointer-offset-x);
    width: var(--pointer-base-width);
    height: var(--pointer-height);
    background: var(--pointer-color);
    clip-path: polygon(
        0% 0%, 
        100% 50%, 
        0% 100%, 
        var(--pointer-tip-width) 50%
    );
    transform: rotate(var(--pointer-angle));
}

/* doc Section Headings */
.doc-section h2 {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 1.8rem 0 0.8rem;
    color: #e8ecf3; /* soft off‑white */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.3rem;
}

/* doc Content Container */
.doc-section {
    max-width: 50vw;       /* never more than half the viewport */
    margin: 0 auto;        /* center horizontally */
    padding: 0 1rem;       /* small side padding for safety */
    line-height: 1.6;      /* readable text rhythm */
    color: #f5f7fb;        /* your established doc text color */
}
.btn-accent {
    background-color: #4db8ff; /* soft blue or teal */
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 1rem;
    text-align: center;
    text-decoration: none;
}

.doc-link {
  color: #4aa3ff;                 /* bright, modern blue */
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  margin: 0.75rem auto;
  text-align: center;
}

.doc-link:hover {
  color: #82c4ff;                 /* lighter blue on hover */
}

.doc-link:visited {
  color: #4aa3ff;                 /* same as normal — no purple */
}