/* office.dramory.ai additions on top of site.css. Colours: tokens.css only. */
.hero-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.hero .note { margin-top: 1.25rem; font-size: var(--step--1); color: var(--fg-faint); }

/* app diagram (our own drawing — no screenshots) */
.figure { margin: 0; }
.figure svg { width: 100%; height: auto; }
.figure figcaption { margin-top: 0.75rem; font-size: var(--step--1); color: var(--fg-faint); }
.f-frame { fill: var(--bg-raised); stroke: var(--rule-strong); stroke-width: 1.2; }
.f-bar { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }
.f-dot { fill: var(--rule-strong); }
.f-tool { fill: var(--rule); }
.f-desk { fill: var(--bg); }
.f-page { fill: #FFFFFF; stroke: var(--rule); stroke-width: 1; }
.f-text { fill: rgba(18, 38, 32, 0.28); }
.f-head { fill: rgba(18, 38, 32, 0.62); }
.f-cell { fill: none; stroke: rgba(18, 38, 32, 0.3); stroke-width: 1; }
.f-accent { fill: var(--c-forest); }
.f-caret-a { stroke: var(--c-forest); stroke-width: 2; }
.f-caret-b { stroke: #B5652B; stroke-width: 2; }
.f-tag-a { fill: var(--c-forest); }
.f-tag-b { fill: #B5652B; }
.f-tag-text { fill: #FFFFFF; font: 600 11px var(--font-sans); }
.f-sel { fill: rgba(29, 92, 74, 0.16); }
.f-chat { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }

/* features */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
.features li { padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--rule); }
.features .num { font-family: var(--font-display); font-style: italic; color: var(--fg-faint); }
.features h3 { font-size: var(--step-1); margin: 0.35rem 0 0.6rem; }
.features p { color: var(--fg-muted); }
@media (min-width: 44rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 64rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
}
.later { margin-top: 2rem; color: var(--fg-muted); font-size: var(--step--1); }
.later strong { color: var(--fg); font-weight: 600; }

/* download / platforms */
.platforms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.platforms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.platforms .p-name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.platforms .p-desc { grid-column: 1; color: var(--fg-muted); font-size: var(--step--1); }
.platforms .p-act { grid-row: 1 / span 2; grid-column: 2; }
.platforms .soon { font-size: var(--step--1); color: var(--fg-faint); border: 1px dashed var(--rule-strong); padding: 0.35rem 0.75rem; border-radius: var(--radius); white-space: nowrap; }

/* privacy teaser + privacy page */
.privacy-teaser { display: grid; gap: 1.25rem; max-width: 46rem; }
.privacy-teaser a { font-weight: 600; }
.doc { max-width: 46rem; }
.doc h2 { font-size: var(--step-2); margin: 3rem 0 1rem; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc ul { color: var(--fg-muted); margin: 0 0 1rem; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: 0.4rem; }
.doc strong { color: var(--fg); font-weight: 600; }
.callout { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1.1rem; color: var(--fg-muted); max-width: 46rem; }
.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
.table-scroll table { border-collapse: collapse; min-width: 36rem; width: 100%; font-size: var(--step--1); }
.table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule); }
.table-scroll th { color: var(--fg); font-weight: 600; border-bottom-color: var(--rule-strong); }
.table-scroll td { color: var(--fg-muted); }

.site-footer .source-note { color: var(--fg); }
.site-footer .legal { margin-top: 1rem; }
.hero .callout { margin-top: 2rem; }
.doc .todo { color: var(--fg-faint); }