.plans-intro h1, .pricing-workspace h1, .board-workspace h1, .billing-workspace h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1.1; }
.billing-workspace { padding-top: 2rem; }
.billing-receipt { background: var(--surface-card); padding: clamp(1.25rem, 4vw, 2.5rem); line-height: 1.7; }
.billing-receipt > p:first-child { font-size: 1.2rem; }
.board-outline a { min-height: 44px; display: inline-flex; align-items: center; }
.board-workspace h2[id] { scroll-margin-top: 5rem; }
.board-workspace section[aria-labelledby="clears-heading"] { border-top: 1px solid var(--line-strong); padding-top: 1.75rem; }
.plans-intro h1 { margin-top: .7rem; }
.plans-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; margin-top: 2rem; align-items: start; }
.plans-layout .plan-generator { margin-top: 0; padding: 1.75rem; background: var(--surface-card); border-top: 3px solid var(--brand); }
.plan-library-row > div:first-child p:first-child { font-size: 1.25rem; }
.plan-create { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
@media (max-width: 767px) {
  .plans-layout { grid-template-columns: 1fr; gap: 2rem; }
  .plans-layout .plan-generator { padding: 1.25rem; }
}
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .6fr); gap: 3rem; margin-top: 2.5rem; align-items: start; }
.pricing-access { position: sticky; top: 5rem; background: var(--surface-card); border-top: 3px solid var(--brand); padding: 1.5rem; }
.pricing-benefit h3 { font-size: 1.45rem; }
.pricing-benefit p { max-width: 38rem; line-height: 1.7; }
.pricing-free { border-top: 1px solid var(--line-strong); padding-top: 2rem; }
.pricing-free-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
@media (max-width: 767px) {
  .pricing-layout { grid-template-columns: 1fr; gap: 2rem; }
  .pricing-access { position: static; }
  .pricing-free-list { grid-template-columns: 1fr; }
}
.paid-service-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.paid-service-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem 0;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.paid-service-nav a[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: currentColor;
  font-weight: 600;
}
.paid-service-nav a:hover { color: var(--text-primary); }
.paid-service-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.paid-eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ask-intro { padding: .5rem 0 2rem; }
.ask-intro h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -.045em; margin-top: .7rem; }
.ask-lead { font-size: 1.15rem; max-width: 36rem; margin-top: 1rem; color: var(--text-muted); }
.ask-start { padding: 1.5rem 0 .5rem; border-top: 1px solid var(--line); }
.ask-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; gap: 1.5rem; }
.ask-starters p { font-size: .95rem; line-height: 1.5; }
.ask-starter { min-height: 44px; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; text-align: left; font-size: .95rem; line-height: 1.5; }
.ask-starter:hover { border-color: currentColor; }
.ask-starter:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ask-starters span { display: block; color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.ask-composer { background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: 1rem; box-shadow: 0 8px 30px color-mix(in srgb, var(--text-primary) 5%, transparent); }
.ask-composer:focus-within { border-color: var(--text-primary); }
.ask-thread, .ask-composer, .ask-limits { max-width: 48rem; margin-inline: auto; }
.ask-answer { border-bottom: 1px solid var(--line); padding-bottom: 1.75rem; overflow-wrap: anywhere; }
.ask-answer > div { font-size: 1rem; line-height: 1.75; }
.ask-question { line-height: 1.6; }
.ask-limits summary { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 639px) {
  .paid-service-nav { gap: 1.1rem; margin-bottom: 1.5rem; font-size: .9rem; }
  .ask-intro { padding-bottom: 1.5rem; }
  .ask-starters { grid-template-columns: 1fr; gap: 1rem; }
  .ask-starters p { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
  .ask-starters span { margin: .2rem 0 0; }
}

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* THE THINKING DOTS ON /ask.
 *
 * An answer takes several seconds, and longer when the question needs a tool round, because the
 * loop asks, feeds the result back and asks again. Until now the whole feedback for that wait
 * was the browser tab spinner, so a slow answer and a dead button looked the same and readers
 * pressed Ask twice.
 *
 * A working indicator and deliberately not a progress bar: the server does not stream, so
 * nothing here knows how far along it is, and a bar that cannot know would be a lie with an
 * animation on it. */
.think-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
  animation: think-pulse 1.1s ease-in-out infinite;
}

@keyframes think-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-0.15rem); }
}

/* Motion is decoration here: the dots say "working", and they say it just as well standing
 * still. A reader who has asked for less of it gets the message without the movement. */
@media (prefers-reduced-motion: reduce) {
  .think-dot { animation: none; opacity: 0.6; }
}

/* THE QUESTION LEAVING THE BOX.
 *
 * The pending bubble appears directly above the form, so starting it low, small and
 * transparent reads as the text lifting out of the textarea it was typed in. Without it the
 * bubble simply blinks into existence and the eye misses that anything happened at all, which
 * on a form that then waits several seconds is the whole problem this is here to solve.
 *
 * Transform and opacity only. Both are compositor properties, so this cannot cause a layout
 * pass on a page that is about to be replaced anyway. */
@keyframes bubble-out {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)       scale(1); }
}

[data-thinking-target="pending"]:not([hidden]) > * {
  animation: bubble-out 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* The answer bubble follows the question rather than arriving with it, which is the order the
 * two things actually happen in. */
[data-thinking-target="pending"]:not([hidden]) > * + * {
  animation-delay: 0.1s;
}

/* Motion is decoration here. The bubble and the dots both say "working" perfectly well
 * standing still, and a reader who has asked for less movement gets the message either way. */
@media (prefers-reduced-motion: reduce) {
  [data-thinking-target="pending"]:not([hidden]) > * { animation: none; }
}
/* Shared public-page rhythm keeps browsing, saved work and paid tools in one visual family. */
.site-workspace .site-page-header { padding-block: .5rem 1.25rem; border-bottom: 1px solid var(--line); }
.site-workspace .site-page-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.13;
  letter-spacing: -.035em;
  max-width: 100%;
}
.site-workspace .site-page-eyebrow { margin-bottom: .65rem; letter-spacing: .045em; }
.site-workspace .board-workspace .site-page-header { border-bottom: 0; margin-bottom: .5rem; padding-block: .25rem .5rem; }
.site-workspace .board-workspace .site-page-title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.site-workspace .board-workspace .site-page-lead { margin-top: .5rem; font-size: .875rem; }
.site-workspace .site-page-lead { margin-top: .8rem; font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.site-workspace .card { border-radius: .75rem; }
.site-workspace .site-course-row { padding-inline: .75rem; }
.site-workspace .site-course-row:focus-within { background-color: var(--surface-sunk); }
.site-workspace .site-course-row h2 { line-height: 1.45; }
.site-workspace .site-course-row h2 > a { gap: .45rem .8rem; }
.site-workspace .plans-layout .plan-generator,
.site-workspace .pricing-access,
.site-workspace .billing-receipt { border-radius: .75rem; }
@media (max-width: 639px) {
  .site-workspace .site-page-header { padding-bottom: 1rem; }
  .site-workspace .site-page-lead { font-size: .9375rem; }
  .site-workspace .site-course-row { padding-inline: .5rem; }
}