/* Shared article shell for standalone pages (/whats-new, /goodbye).
   Mirrors the privacy page's shell so the family reads as one site, under
   generic names so the privacy page itself stays untouched. Tokens come from
   landing.css. */

html.subpage-root,
html.subpage-root body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.subpage-root::-webkit-scrollbar,
html.subpage-root body::-webkit-scrollbar {
  display: none;
}

.subpage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  min-height: 100svh;
  padding: var(--page-inset) clamp(16px, 4vw, 24px)
    calc(var(--page-inset) + 12px);
  box-sizing: border-box;
}

.subpage__logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-bottom: clamp(48px, 9vh, 80px);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 13px;
  background: var(--page-surface);
  border: 1.5px solid var(--logo-stroke);
  color: #ffffff;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    border-color var(--stroke-ease),
    color 0.3s ease;
}

html[data-page-theme="light"] .subpage__logo {
  color: #141414;
}

.subpage__logo:hover {
  border-color: var(--logo-stroke-hover);
}

.subpage__logo-mark {
  width: 14px;
  height: 21px;
  display: block;
}

.subpage__logo-mark path {
  fill: currentColor;
}

.subpage__main {
  width: 100%;
  max-width: 640px;
  flex: 1 0 auto;
  padding: 0;
  margin-bottom: clamp(64px, 11vh, 104px);
  text-align: left;
}

.subpage__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 28px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--page-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.subpage__back:hover {
  color: var(--page-text);
}

.subpage__title {
  margin: 0 0 8px;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.subpage__updated {
  margin: 0 0 32px;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--fineprint-muted);
}

.subpage__intro {
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--page-text-muted);
}

.subpage__section + .subpage__section {
  margin-top: 28px;
}

.subpage__heading {
  margin: 0 0 10px;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.subpage__text,
.subpage__list {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--page-text-muted);
}

.subpage__text + .subpage__text,
.subpage__text + .subpage__list,
.subpage__list + .subpage__text {
  margin-top: 1.65em;
}

.subpage__list {
  padding-left: 1.25rem;
}

.subpage__list li + li {
  margin-top: 6px;
}

.subpage__text strong,
.subpage__list strong {
  font-weight: 500;
  color: var(--page-text);
}

.subpage__text code,
.subpage__list code,
.subpage__text kbd,
.subpage__list kbd {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--page-text);
  background: var(--page-surface);
  border: 1px solid var(--preview-border);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  /* A key whose label is more than one word must still break as one key */
  white-space: nowrap;
}

.subpage__link {
  color: var(--page-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.subpage__link:hover {
  color: var(--footer-name-hover);
}

.subpage .footer {
  position: relative;
  flex-shrink: 0;
  margin-top: auto;
  padding: clamp(32px, 5vh, 48px) 0 0;
  width: 100%;
}

/* --- What's-new extras --- */

/* The dynamic-accent story in one strip: a band of hues that drifts slowly,
   the closest a static page gets to a UI that wears your colors. */
.hue-ramp {
  height: 6px;
  margin: 0 0 32px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #fa7c75,
    #f5b93e,
    #34d399,
    #38bdf8,
    #7c9cff,
    #e879f9,
    #fa7c75
  );
  background-size: 200% 100%;
  animation: hue-ramp-drift 18s linear infinite;
}

@keyframes hue-ramp-drift {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hue-ramp {
    animation: none;
  }
}

/* --- Goodbye extras --- */

.goodbye__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.goodbye__main .subpage__intro {
  max-width: 44ch;
}

/* The question belongs to the paragraph above it — pull it in tighter than
   the shell's default intro spacing. */
.goodbye__main .goodbye__question {
  margin-top: -12px;
}

.goodbye__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}

.goodbye__fineprint {
  margin: 22px 0 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--fineprint-muted);
}

/* --- Feedback form ---
   Left-aligned inside a centred column: labels and placeholder text are read,
   not admired, and centred form copy is hard to scan. */

.goodbye__form {
  width: 100%;
  max-width: 30rem;
  margin: 30px auto 0;
  text-align: left;
}

.goodbye__form[hidden] {
  display: none;
}

.goodbye__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--page-text);
}

.goodbye__label--inline {
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--page-text-muted);
}

.goodbye__optional {
  font-size: 0.8125rem;
  color: var(--fineprint-muted);
}

.goodbye__textarea,
.goodbye__input {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 300;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--preview-border);
  background: var(--page-surface);
  color: var(--page-text);
  transition:
    border-color 0.2s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.goodbye__textarea {
  min-height: 104px;
  line-height: 1.55;
  resize: vertical;
}

.goodbye__textarea::placeholder,
.goodbye__input::placeholder {
  color: var(--fineprint-muted);
}

.goodbye__textarea:focus-visible,
.goodbye__input:focus-visible {
  outline: none;
  border-color: var(--page-accent);
}

.goodbye__field {
  margin-top: 16px;
}

/* Off-screen rather than display:none — a bot reading the DOM should find a
   field that looks fillable. */
.goodbye__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Same shape as the hero's pair: an even two-column grid that spans the field
   above it, so the buttons read as one block under the form rather than two
   loose chips. .btn is already width:100%, which fills each cell. */
.goodbye__form .goodbye__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

/* The button keeps its width while the label swaps, so nothing reflows
   between "Send feedback", "Sending…" and the ✓. */
.goodbye__send {
  position: relative;
}

.goodbye__send[disabled] {
  cursor: default;
}

.goodbye__check {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.goodbye__form.is-sending .goodbye__send {
  opacity: 0.75;
}

/* Scoped to the send button — unscoped this also blanked the label on the
   "Changed your mind?" button sitting next to it. */
.goodbye__form.is-sent .goodbye__send .btn__label,
.goodbye__form.is-sent .goodbye__send .btn__icon {
  opacity: 0;
}

.goodbye__form.is-sent .goodbye__check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.goodbye__status {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--page-text-muted);
}

.goodbye__status.is-error {
  color: var(--page-accent);
}

.goodbye__status-link {
  color: inherit;
  text-underline-offset: 3px;
}

.goodbye__sent {
  margin: 26px 0 0;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--page-text-muted);
}

.goodbye__sent[hidden] {
  display: none;
}

/* The send moves focus here so the outcome is announced and a keyboard user
   keeps their place. A ring around a paragraph reads as a rendering fault
   rather than as feedback, so only the ring goes — not the focus move. */
.goodbye__sent:focus {
  outline: none;
}

/* Hidden until the note approaches the ceiling; see js/goodbye.js. */
.goodbye__count {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--page-text-muted);
  text-align: right;
}

.goodbye__count.is-full {
  color: var(--page-accent);
}

.goodbye__count[hidden] {
  display: none;
}

.goodbye__sent strong {
  color: var(--page-accent);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .goodbye__check {
    transition: none;
  }
}