/* New product views, using captures of the actual reader. Existing site design is unchanged. */
.notes-section { padding:30px 0 110px; background:var(--bg-body); }
.notes-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:end; margin-bottom:40px; }
.notes-intro .section-title { margin:18px 0 0; font-size:clamp(32px,3.8vw,46px); }
.notes-intro .section-title span { color:#92969f; }
.notes-intro > p { font-size:16px; color:var(--text-secondary); padding-bottom:3px; }
.notes-section kbd { font-family:inherit; font-size:.9em; padding:0 4px; border:1px solid #4a5260; border-radius:4px; }
.app-capture { margin:0; min-width:0; }
.capture-open { display:block; width:100%; position:relative; padding:0; border:1px solid #30343d; border-radius:14px; overflow:hidden; cursor:zoom-in; background:#111318; text-align:inherit; }
.capture-open img { display:block; width:100%; height:auto; }
.capture-enlarge { position:absolute; bottom:14px; right:14px; background:#11151ee8; color:#c4d7f0; border:1px solid #52657d66; border-radius:6px; padding:7px 10px; font-size:10px; opacity:0; transform:translateY(4px); transition:opacity .18s,transform .18s; pointer-events:none; }
.capture-open:hover .capture-enlarge,.capture-open:focus-visible .capture-enlarge { opacity:1; transform:none; }
.app-capture figcaption { margin-top:14px; font-size:11px; line-height:1.5; color:#939ca9; }
.notes-details { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:44px; }
.notes-details h3 { font-size:18px; font-weight:550; letter-spacing:-.025em; margin-bottom:10px; }
.notes-details p { font-size:14px; color:var(--text-secondary); max-width:440px; }
.feature-tier { display:block; margin-top:11px; color:var(--accent-blue); font-size:11px; }
/* Readlet's Choose PDF pill: inverted foreground, quiet surface, blue focus. */
.capture-switch {
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:212px;
    margin:0 auto 20px;
    padding:4px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:hsl(225 18% 7%);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.capture-switch::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:4px auto 4px 4px;
    width:calc((100% - 8px) / 2);
    border-radius:inherit;
    background:hsl(0 0% 98%);
    box-shadow:0 1px 3px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.7);
    transition:transform 220ms cubic-bezier(.2,.8,.2,1);
}
.capture-switch:has([data-translation-view="fr"][aria-pressed="true"])::before { transform:translateX(100%); }
.capture-switch button {
    min-height:38px;
    padding:8px 18px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:hsl(225 8% 65%);
    font-size:13px;
    font-weight:500;
    line-height:20px;
    cursor:pointer;
    transition:color 150ms ease,transform 150ms ease;
}
.capture-switch button[aria-pressed="true"] { color:hsl(225 18% 7%); font-weight:600; }
.capture-switch button[aria-pressed="false"]:hover { color:hsl(0 0% 98%); }
.capture-switch button:active { transform:scale(.97); }
.capture-switch button:focus-visible { outline:2px solid hsl(218 86% 67%); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) {
    .capture-switch::before,.capture-switch button { transition:none; }
    .capture-switch button:active { transform:none; }
}
.translation-capture .capture-open { border-radius:10px; }
.capture-dialog { position:fixed; inset:0; margin:auto; width:fit-content; max-width:96vw; max-height:94dvh; border:1px solid #3b424e; border-radius:12px; padding:0; background:#14171e; color:#e8edf5; box-shadow:0 24px 80px #0008; }
.capture-dialog::backdrop { background:#080a0ee6; backdrop-filter:blur(8px); }
.capture-dialog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 18px; border-bottom:1px solid #303641; position:sticky; top:0; background:#14171e; }
.capture-dialog-toolbar p { font-size:12px; line-height:1.5; color:#b2bdcb; }
.capture-close { padding:6px 10px; border:1px solid #424c5b; border-radius:6px; background:#202732; color:#dbe6f5; font-size:12px; cursor:pointer; white-space:nowrap; }
.capture-close span { margin-left:8px; }
.capture-dialog > img { display:block; width:auto; height:auto; max-width:94vw; max-height:calc(94dvh - 66px); margin:auto; object-fit:contain; }
.all-releases { text-align:center; font-size:12px; margin-top:9px; }
.all-releases a { color:var(--accent-blue); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) { .notes-intro { gap:32px; } .notes-intro > p { font-size:14px; } .notes-details { gap:38px; } }
@media(max-width:650px) {
  .notes-section { padding:15px 0 75px; }
  .notes-intro { grid-template-columns:1fr; gap:20px; margin-bottom:28px; }
  .notes-intro .section-title { font-size:34px; }
  .notes-details { grid-template-columns:1fr; gap:26px; margin-top:32px; }
  .capture-open { border-radius:8px; }
  .notes-capture img { aspect-ratio:340 / 860; object-fit:cover; object-position:right; }
  .capture-enlarge { display:none; }
  .app-capture figcaption { font-size:10px; }
  .capture-dialog-toolbar { padding:12px; gap:12px; }
}