*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-left-4 {
  left: -1rem;
}

.-top-2\.5 {
  top: -0.625rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-5 {
  top: -1.25rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-\[calc\(100\%-1px\)\] {
  bottom: calc(100% - 1px);
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-5 {
  left: 1.25rem;
}

.right-0 {
  right: 0px;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-6 {
  right: 1.5rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-\[150px\] {
  top: 150px;
}

.top-\[60px\] {
  top: 60px;
}

.top-\[calc\(100\%\+\.4rem\)\] {
  top: calc(100% + .4rem);
}

.top-\[calc\(100\%\+\.5rem\)\] {
  top: calc(100% + .5rem);
}

.top-\[calc\(100\%-1px\)\] {
  top: calc(100% - 1px);
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[140\] {
  z-index: 140;
}

.z-\[150\] {
  z-index: 150;
}

.z-\[400\] {
  z-index: 400;
}

.z-\[450\] {
  z-index: 450;
}

.z-\[500\] {
  z-index: 500;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-last {
  order: 9999;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.\!m-0 {
  margin: 0px !important;
}

.-m-0\.5 {
  margin: -0.125rem;
}

.-m-1 {
  margin: -0.25rem;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-my-2\.5 {
  margin-top: -0.625rem;
  margin-bottom: -0.625rem;
}

.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.\!mb-0 {
  margin-bottom: 0px !important;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.\!mt-1\.5 {
  margin-top: 0.375rem !important;
}

.\!mt-10 {
  margin-top: 2.5rem !important;
}

.\!mt-2 {
  margin-top: 0.5rem !important;
}

.\!mt-3 {
  margin-top: 0.75rem !important;
}

.-mb-1 {
  margin-bottom: -0.25rem;
}

.-ml-0\.5 {
  margin-left: -0.125rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-mr-1\.5 {
  margin-right: -0.375rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3\.5 {
  margin-left: 0.875rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-28 {
  margin-right: 7rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[1px\] {
  margin-top: 1px;
}

.mt-auto {
  margin-top: auto;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.\!inline {
  display: inline !important;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.\!h-1\.5 {
  height: 0.375rem !important;
}

.\!h-10 {
  height: 2.5rem !important;
}

.\!h-12 {
  height: 3rem !important;
}

.\!h-8 {
  height: 2rem !important;
}

.\!h-9 {
  height: 2.25rem !important;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[420px\] {
  height: 420px;
}

.h-\[49px\] {
  height: 49px;
}

.h-\[520px\] {
  height: 520px;
}

.h-\[60px\] {
  height: 60px;
}

.h-\[60vh\] {
  height: 60vh;
}

.h-\[61px\] {
  height: 61px;
}

.h-\[68px\] {
  height: 68px;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-52 {
  max-height: 13rem;
}

.max-h-\[46vh\] {
  max-height: 46vh;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.max-h-\[62vh\] {
  max-height: 62vh;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[75vh\] {
  max-height: 75vh;
}

.max-h-\[78vh\] {
  max-height: 78vh;
}

.max-h-\[92vh\] {
  max-height: 92vh;
}

.\!min-h-0 {
  min-height: 0px !important;
}

.\!min-h-\[28px\] {
  min-height: 28px !important;
}

.\!min-h-\[30px\] {
  min-height: 30px !important;
}

.\!min-h-\[32px\] {
  min-height: 32px !important;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-\[220px\] {
  min-height: 220px;
}

.min-h-\[38px\] {
  min-height: 38px;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-10 {
  width: 2.5rem !important;
}

.\!w-12 {
  width: 3rem !important;
}

.\!w-44 {
  width: 11rem !important;
}

.\!w-8 {
  width: 2rem !important;
}

.\!w-9 {
  width: 2.25rem !important;
}

.\!w-auto {
  width: auto !important;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-10 {
  width: 2.5rem;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-2\/5 {
  width: 40%;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-3\/5 {
  width: 60%;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-60 {
  width: 15rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[124px\] {
  width: 124px;
}

.w-\[176px\] {
  width: 176px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30\%\] {
  width: 30%;
}

.w-\[34\%\] {
  width: 34%;
}

.w-\[52px\] {
  width: 52px;
}

.w-\[calc\(100vw-2rem\)\] {
  width: calc(100vw - 2rem);
}

.w-\[min\(340px\2c calc\(100vw-16px\)\)\] {
  width: min(340px, calc(100vw - 16px));
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[4rem\] {
  min-width: 4rem;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-\[1000px\] {
  max-width: 1000px;
}

.max-w-\[1060px\] {
  max-width: 1060px;
}

.max-w-\[1080px\] {
  max-width: 1080px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[220px\] {
  max-width: 220px;
}

.max-w-\[24ch\] {
  max-width: 24ch;
}

.max-w-\[26ch\] {
  max-width: 26ch;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[30ch\] {
  max-width: 30ch;
}

.max-w-\[34ch\] {
  max-width: 34ch;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[36rem\] {
  max-width: 36rem;
}

.max-w-\[40ch\] {
  max-width: 40ch;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[460px\] {
  max-width: 460px;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[504px\] {
  max-width: 504px;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[52ch\] {
  max-width: 52ch;
}

.max-w-\[52vw\] {
  max-width: 52vw;
}

.max-w-\[54ch\] {
  max-width: 54ch;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[58ch\] {
  max-width: 58ch;
}

.max-w-\[60ch\] {
  max-width: 60ch;
}

.max-w-\[620px\] {
  max-width: 620px;
}

.max-w-\[62ch\] {
  max-width: 62ch;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[680px\] {
  max-width: 680px;
}

.max-w-\[72ch\] {
  max-width: 72ch;
}

.max-w-\[740px\] {
  max-width: 740px;
}

.max-w-\[760px\] {
  max-width: 760px;
}

.max-w-\[820px\] {
  max-width: 820px;
}

.max-w-\[880px\] {
  max-width: 880px;
}

.max-w-\[900px\] {
  max-width: 900px;
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.\!flex-none {
  flex: none !important;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.basis-\[15rem\] {
  flex-basis: 15rem;
}

.basis-full {
  flex-basis: 100%;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.\!cursor-default {
  cursor: default !important;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.columns-3 {
  -moz-columns: 3;
       columns: 3;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.\!items-start {
  align-items: flex-start !important;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.\!justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.\!gap-2 {
  gap: 0.5rem !important;
}

.\!gap-3 {
  gap: 0.75rem !important;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.self-start {
  align-self: flex-start;
}

.self-stretch {
  align-self: stretch;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-stretch {
  justify-self: stretch;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-all {
  word-break: break-all;
}

.\!rounded-2xl {
  border-radius: 1rem !important;
}

.\!rounded-lg {
  border-radius: 0.5rem !important;
}

.\!rounded-md {
  border-radius: 0.375rem !important;
}

.\!rounded-xl {
  border-radius: 0.75rem !important;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[18px\] {
  border-radius: 18px;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[22px\] {
  border-radius: 22px;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-\[7px\] {
  border-width: 7px;
}

.\!border-t-0 {
  border-top-width: 0px !important;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[rgba\(255\2c 152\2c 0\2c \.6\)\] {
  border-color: rgba(255,152,0,.6);
}

.border-line {
  border-color: rgba(0,0,0,.08);
}

.border-line\/60 {
  border-color: rgba(0, 0, 0, 0.6);
}

.border-line\/70 {
  border-color: rgba(0, 0, 0, 0.7);
}

.border-orange\/25 {
  border-color: rgb(255 138 0 / 0.25);
}

.border-sagedeep {
  --tw-border-opacity: 1;
  border-color: rgb(107 142 104 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-b-line {
  border-bottom-color: rgba(0,0,0,.08);
}

.border-b-white {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-t-line {
  border-top-color: rgba(0,0,0,.08);
}

.border-t-sagedeep {
  --tw-border-opacity: 1;
  border-top-color: rgb(107 142 104 / var(--tw-border-opacity, 1));
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.\!bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9) !important;
}

.bg-\[rgba\(255\2c 193\2c 7\2c \.35\)\] {
  background-color: rgba(255,193,7,.35);
}

.bg-beige {
  --tw-bg-opacity: 1;
  background-color: rgb(249 245 238 / var(--tw-bg-opacity, 1));
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-copilot {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 238 / var(--tw-bg-opacity, 1));
}

.bg-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(246 240 229 / var(--tw-bg-opacity, 1));
}

.bg-cream\/85 {
  background-color: rgb(246 240 229 / 0.85);
}

.bg-cream\/90 {
  background-color: rgb(246 240 229 / 0.9);
}

.bg-cream\/95 {
  background-color: rgb(246 240 229 / 0.95);
}

.bg-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(30 26 23 / var(--tw-bg-opacity, 1));
}

.bg-dark2 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 19 17 / var(--tw-bg-opacity, 1));
}

.bg-ink\/30 {
  background-color: rgb(38 32 26 / 0.3);
}

.bg-line {
  background-color: rgba(0,0,0,.08);
}

.bg-line\/60 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg-line\/70 {
  background-color: rgba(0, 0, 0, 0.7);
}

.bg-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 138 0 / var(--tw-bg-opacity, 1));
}

.bg-sage\/60 {
  background-color: rgb(168 185 165 / 0.6);
}

.bg-sagedeep {
  --tw-bg-opacity: 1;
  background-color: rgb(107 142 104 / var(--tw-bg-opacity, 1));
}

.bg-sagetint {
  --tw-bg-opacity: 1;
  background-color: rgb(237 244 236 / var(--tw-bg-opacity, 1));
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-cream {
  --tw-gradient-from: #F6F0E5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(246 240 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.\!p-0\.5 {
  padding: 0.125rem !important;
}

.\!p-2 {
  padding: 0.5rem !important;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.\!px-1\.5 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}

.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.\!px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.\!px-3\.5 {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}

.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.\!px-7 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.\!py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

.\!py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.\!pb-1 {
  padding-bottom: 0.25rem !important;
}

.\!pb-16 {
  padding-bottom: 4rem !important;
}

.\!pb-20 {
  padding-bottom: 5rem !important;
}

.\!pt-16 {
  padding-top: 4rem !important;
}

.\!pt-20 {
  padding-top: 5rem !important;
}

.\!pt-6 {
  padding-top: 1.5rem !important;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-0\.5 {
  padding-right: 0.125rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.align-middle {
  vertical-align: middle;
}

.align-\[2px\] {
  vertical-align: 2px;
}

.\!text-\[\.55rem\] {
  font-size: .55rem !important;
}

.\!text-\[\.56rem\] {
  font-size: .56rem !important;
}

.\!text-\[\.58rem\] {
  font-size: .58rem !important;
}

.\!text-\[\.62rem\] {
  font-size: .62rem !important;
}

.\!text-\[\.64rem\] {
  font-size: .64rem !important;
}

.\!text-\[\.66rem\] {
  font-size: .66rem !important;
}

.\!text-\[\.6rem\] {
  font-size: .6rem !important;
}

.\!text-\[\.7rem\] {
  font-size: .7rem !important;
}

.\!text-\[\.85rem\] {
  font-size: .85rem !important;
}

.\!text-\[\.8rem\] {
  font-size: .8rem !important;
}

.\!text-\[\.9rem\] {
  font-size: .9rem !important;
}

.\!text-\[1\.05rem\] {
  font-size: 1.05rem !important;
}

.\!text-\[12px\] {
  font-size: 12px !important;
}

.\!text-\[13px\] {
  font-size: 13px !important;
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[\.62rem\] {
  font-size: .62rem;
}

.text-\[\.66rem\] {
  font-size: .66rem;
}

.text-\[\.68rem\] {
  font-size: .68rem;
}

.text-\[\.6rem\] {
  font-size: .6rem;
}

.text-\[\.72rem\] {
  font-size: .72rem;
}

.text-\[\.76rem\] {
  font-size: .76rem;
}

.text-\[\.78rem\] {
  font-size: .78rem;
}

.text-\[\.7rem\] {
  font-size: .7rem;
}

.text-\[\.82rem\] {
  font-size: .82rem;
}

.text-\[\.84rem\] {
  font-size: .84rem;
}

.text-\[\.85rem\] {
  font-size: .85rem;
}

.text-\[\.86rem\] {
  font-size: .86rem;
}

.text-\[\.875rem\] {
  font-size: .875rem;
}

.text-\[\.88rem\] {
  font-size: .88rem;
}

.text-\[\.8rem\] {
  font-size: .8rem;
}

.text-\[\.92rem\] {
  font-size: .92rem;
}

.text-\[\.93rem\] {
  font-size: .93rem;
}

.text-\[\.95rem\] {
  font-size: .95rem;
}

.text-\[\.98rem\] {
  font-size: .98rem;
}

.text-\[\.9rem\] {
  font-size: .9rem;
}

.text-\[1\.02rem\] {
  font-size: 1.02rem;
}

.text-\[1\.05rem\] {
  font-size: 1.05rem;
}

.text-\[1\.12rem\] {
  font-size: 1.12rem;
}

.text-\[1\.18rem\] {
  font-size: 1.18rem;
}

.text-\[1\.1rem\] {
  font-size: 1.1rem;
}

.text-\[1\.2rem\] {
  font-size: 1.2rem;
}

.text-\[1\.35rem\] {
  font-size: 1.35rem;
}

.text-\[1\.3rem\] {
  font-size: 1.3rem;
}

.text-\[1\.45rem\] {
  font-size: 1.45rem;
}

.text-\[1\.4rem\] {
  font-size: 1.4rem;
}

.text-\[1\.55rem\] {
  font-size: 1.55rem;
}

.text-\[1\.5rem\] {
  font-size: 1.5rem;
}

.text-\[1\.6rem\] {
  font-size: 1.6rem;
}

.text-\[1\.7rem\] {
  font-size: 1.7rem;
}

.text-\[1\.9rem\] {
  font-size: 1.9rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[1rem\] {
  font-size: 1rem;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-\[clamp\(1\.4rem\2c 3vw\2c 1\.8rem\)\] {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.text-\[clamp\(1\.4rem\2c 3vw\2c 1\.9rem\)\] {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.text-\[clamp\(1\.5rem\2c 3\.2vw\2c 2rem\)\] {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.text-\[clamp\(1\.6rem\2c 3\.6vw\2c 2\.3rem\)\] {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
}

.text-\[clamp\(1\.7rem\2c 3\.6vw\2c 2\.4rem\)\] {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}

.text-\[clamp\(1\.7rem\2c 3\.8vw\2c 2\.4rem\)\] {
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
}

.text-\[clamp\(1\.7rem\2c 4vw\2c 2\.2rem\)\] {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

.text-\[clamp\(1\.8rem\2c 4\.2vw\2c 2\.4rem\)\] {
  font-size: clamp(1.8rem, 4.2vw, 2.4rem);
}

.text-\[clamp\(1\.8rem\2c 4\.2vw\2c 2\.5rem\)\] {
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
}

.text-\[clamp\(1\.8rem\2c 4\.2vw\2c 2\.6rem\)\] {
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
}

.text-\[clamp\(1\.8rem\2c 4vw\2c 2\.5rem\)\] {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.text-\[clamp\(1\.8rem\2c 4vw\2c 2\.6rem\)\] {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.text-\[clamp\(1\.95rem\2c 4\.4vw\2c 3\.1rem\)\] {
  font-size: clamp(1.95rem, 4.4vw, 3.1rem);
}

.text-\[clamp\(1\.9rem\2c 4\.4vw\2c 3rem\)\] {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}

.text-\[clamp\(1\.9rem\2c 4\.6vw\2c 3rem\)\] {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}

.text-\[clamp\(1\.9rem\2c 4vw\2c 2\.7rem\)\] {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.text-\[clamp\(2\.1rem\2c 4\.4vw\2c 3rem\)\] {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
}

.text-\[clamp\(2\.5rem\2c 5\.8vw\2c 4\.6rem\)\] {
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
}

.text-\[clamp\(2rem\2c 4\.5vw\2c 3\.2rem\)\] {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.text-\[clamp\(2rem\2c 4\.6vw\2c 3\.2rem\)\] {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\!font-normal {
  font-weight: 400 !important;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.\!leading-\[1\.4\] {
  line-height: 1.4 !important;
}

.leading-\[1\.04\] {
  line-height: 1.04;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.06\] {
  line-height: 1.06;
}

.leading-\[1\.0\] {
  line-height: 1.0;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.45\] {
  line-height: 1.45;
}

.leading-\[1\.4\] {
  line-height: 1.4;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[\.18em\] {
  letter-spacing: .18em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-copilotink {
  --tw-text-opacity: 1 !important;
  color: rgb(122 74 18 / var(--tw-text-opacity, 1)) !important;
}

.\!text-ink {
  --tw-text-opacity: 1 !important;
  color: rgb(38 32 26 / var(--tw-text-opacity, 1)) !important;
}

.\!text-red-700 {
  --tw-text-opacity: 1 !important;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#0A66C2\] {
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}

.text-\[\#1877F2\] {
  --tw-text-opacity: 1;
  color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}

.text-\[\#3A2206\] {
  --tw-text-opacity: 1;
  color: rgb(58 34 6 / var(--tw-text-opacity, 1));
}

.text-\[\#8d8273\] {
  --tw-text-opacity: 1;
  color: rgb(141 130 115 / var(--tw-text-opacity, 1));
}

.text-\[\#A99E8E\] {
  --tw-text-opacity: 1;
  color: rgb(169 158 142 / var(--tw-text-opacity, 1));
}

.text-\[\#C9BFB0\] {
  --tw-text-opacity: 1;
  color: rgb(201 191 176 / var(--tw-text-opacity, 1));
}

.text-\[\#D9CFC0\] {
  --tw-text-opacity: 1;
  color: rgb(217 207 192 / var(--tw-text-opacity, 1));
}

.text-copilotink {
  --tw-text-opacity: 1;
  color: rgb(122 74 18 / var(--tw-text-opacity, 1));
}

.text-copilotink\/90 {
  color: rgb(122 74 18 / 0.9);
}

.text-darktext {
  --tw-text-opacity: 1;
  color: rgb(255 249 240 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(38 32 26 / var(--tw-text-opacity, 1));
}

.text-ink\/85 {
  color: rgb(38 32 26 / 0.85);
}

.text-ink\/90 {
  color: rgb(38 32 26 / 0.9);
}

.text-muted {
  --tw-text-opacity: 1;
  color: rgb(110 98 88 / var(--tw-text-opacity, 1));
}

.text-muted\/45 {
  color: rgb(110 98 88 / 0.45);
}

.text-muted\/60 {
  color: rgb(110 98 88 / 0.6);
}

.text-muted\/70 {
  color: rgb(110 98 88 / 0.7);
}

.text-orangetext {
  --tw-text-opacity: 1;
  color: rgb(201 95 0 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-sage {
  --tw-text-opacity: 1;
  color: rgb(168 185 165 / var(--tw-text-opacity, 1));
}

.text-sagedeep {
  --tw-text-opacity: 1;
  color: rgb(107 142 104 / var(--tw-text-opacity, 1));
}

.text-sageink {
  --tw-text-opacity: 1;
  color: rgb(65 104 78 / var(--tw-text-opacity, 1));
}

.text-sageink\/80 {
  color: rgb(65 104 78 / 0.8);
}

.text-sageink\/85 {
  color: rgb(65 104 78 / 0.85);
}

.text-sageink\/90 {
  color: rgb(65 104 78 / 0.9);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.\!decoration-current {
  text-decoration-color: currentColor !important;
}

.decoration-ink\/30 {
  text-decoration-color: rgb(38 32 26 / 0.3);
}

.decoration-line {
  text-decoration-color: rgba(0,0,0,.08);
}

.decoration-white\/40 {
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accent-sageink {
  accent-color: #41684E;
}

.\!opacity-0 {
  opacity: 0 !important;
}

.\!opacity-100 {
  opacity: 1 !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-45 {
  opacity: 0.45;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.\!shadow-\[0_10px_28px_rgba\(0\2c 0\2c 0\2c \.09\)\] {
  --tw-shadow: 0 10px 28px rgba(0,0,0,.09) !important;
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_28px_rgba\(0\2c 0\2c 0\2c \.09\)\] {
  --tw-shadow: 0 10px 28px rgba(0,0,0,.09);
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_30px_rgba\(0\2c 0\2c 0\2c \.12\)\] {
  --tw-shadow: 0 12px 30px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[text-wrap\:balance\] {
  text-wrap: balance;
}

/* The locked Sunlit recipes (theme.css) are appended AFTER this Tailwind output by the
   `build:css` npm script — kept unprocessed so the design system can't drift, and placed
   last so recipes win over equal-specificity utilities (matches the mockup load order). */

/* THE EDITOR'S FIRST-PAINT COVER (`#boot-overlay`, resumes/edit.html.erb) has to be invisible while
   it carries the `hidden` attribute, and it does NOT get that for free.

   Nothing hides it at a specificity its own classes cannot beat. Preflight's
   `[hidden]:where(:not([hidden="until-found"])){display:none}` scores (0,1,0) — `:where()`
   contributes nothing — and the node carries `flex` to centre its card, which also scores (0,1,0)
   and is emitted LATER (base layer, then utilities). Equal specificity, later wins: the cover
   painted on EVERY editor open, and a member who had never mentioned a job read "Writing your
   version for this job…" over the page until React mounted and removed the node. Founder,
   2026-09-16, walking into the editor after uploading a resume with no job post: "An unnecessary
   screen appeared in between for an instant."

   This ID selector scores (1,1,0), so it wins wherever it sits. It is the only thing standing
   between that cover and every ordinary editor open: DO NOT delete it as redundant with the
   attribute. theme.css carries the same one-line fix at `.tgate[hidden]`, for the same reason and
   with the same warning. */

#boot-overlay[hidden] {
  display: none;
}

/* Rich-text resume content (job_description / descriptions, rendered from Mabon HTML) — paragraph/
   inline styling only; bullet lists get the LOCKED theme `.doc__bullets` recipe (added in ResumeDoc). */

.doc__rich p {
  margin: 0 0 0.4em;
}

.doc__rich p:last-child {
  margin-bottom: 0;
}

.doc__rich a {
  color: inherit;
}

.doc__rich strong, .doc__rich b {
  font-weight: 700;
}

.doc__rich em, .doc__rich i {
  font-style: italic;
}

/* Knowledge-base article prose (todos/kb-buildout-plan.md §4). Tailwind's preflight zeroes
   headings, lists and margins, and this project carries no typography plugin, so a written guide's
   body needs one recipe rather than a utility class on every element. Scoped to `.kbdoc` so it can
   never reach the resume canvas or a marketing page.

   Every element selector sits inside `:where()`, which contributes ZERO specificity, so each rule
   scores (0,1,0) from `.kbdoc` alone — the same trick Tailwind's own typography plugin uses.
   Without it `.kbdoc a` would be (0,1,1) and would outrank the `.btn` and `.nav-link` recipes,
   underlining every button placed inside a guide.
   What it does NOT do is let a Tailwind utility win: a utility is also (0,1,0), and these rules are
   emitted after the utility layer, so `mt-3` inside `.kbdoc` loses to `:where(* + *)`. Use `!`
   (Tailwind's important modifier) on a utility that has to hold inside a guide. Colors are the
   Sunlit tokens, with one deliberate literal noted at the link rule. */

.kbdoc {
  line-height: 1.75;
}

.kbdoc :where(* + *) {
  margin-top: 1rem;
}

/* `.kick` is the design system's own eyebrow heading and carries its own size, tracking and color;
   it must not be re-weighted here, or the same markup reads differently in an article than on the
   knowledge-base index. */

.kbdoc :where(h2:not(.kick)) {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 2.25rem;
}

.kbdoc :where(h3) {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.75rem;
}

.kbdoc :where(ul, ol) {
  padding-left: 1.35rem;
}

.kbdoc :where(ul) {
  list-style: disc;
}

.kbdoc :where(ol) {
  list-style: decimal;
}

.kbdoc :where(li + li) {
  margin-top: .45rem;
}

.kbdoc :where(li > ul, li > ol) {
  margin-top: .45rem;
}

/* Prose links use the app's OWN link treatment, copied from theme.css's `[data-rich] a` (the one
   place this design system already styles a link inside running text). The hairline underline the
   card layouts use is 8% black, which disappears in a long article: a reader scanning a guide has
   to be able to see which words are links. Change both rules together. */

.kbdoc :where(a) {
  color: #1F6F5C;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* The related-guides links inherit this on purpose: inside an article they should read as links,
   not as the quiet ink list the knowledge-base index renders. */

.kbdoc :where(a):hover {
  text-decoration-thickness: 2px;
}

.kbdoc :where(figure) {
  margin-top: 1.25rem;
}

.kbdoc :where(figcaption) {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--muted);
}

.kbdoc :where(figure img) {
  border-radius: 14px;
  border: 1px solid var(--line);
}

/* A screenshot of a wide desktop control is unreadable when a 390px phone scales it to a third of
   its size. A wide figure keeps a legible minimum width and scrolls inside its own box instead, so
   the PAGE still never scrolls sideways. The figure carries role="group" and a label in the markup,
   because a scrollable region has to be reachable, and nameable, from a keyboard. */

.kbdoc :where(.kbwide) {
  overflow-x: auto;
}

.kbdoc :where(.kbwide img) {
  max-width: none;
  width: 100%;
  min-width: 640px;
}

/* The related-guides list is navigation, not prose: no disc markers, no prose indent. */

.kbdoc :where(.kblinks) {
  list-style: none;
  padding-left: 0;
}

/* The numbered steps. A step owns its screenshot and its prose, so the numbering runs across the
   whole procedure however tall one step gets. It is an <ol>, so it inherits the marker above. */

.kbdoc :where(.kbsteps) {
  padding-left: 1.6rem;
}

.kbdoc :where(.kbsteps > li) {
  margin-top: 1.5rem;
}

.kbdoc :where(.kbsteps > li)::marker {
  font-weight: 700;
  color: var(--muted);
}

/* A remote-jobs posting body (`remote_jobs/jobs/show`), rendered from the feed's own HTML through
   `sanitize_relaxed`. The class was on the markup with NO rule behind it, so Tailwind's preflight
   (which zeroes `list-style` and list padding, and flattens headings) was the last word: every
   `<ul>` of requirements — and `<li>` is the most common tag in these payloads by a wide margin —
   rendered as run-on lines with no marker and no indent, at both widths. This is the same problem
   `.kbdoc` above and `.doc__rich` in theme.css each solve for their own surface; a third recipe
   rather than a shared one, because the three bodies want different rhythm and this one is styling
   markup we did not author.

   Read gompa's own job-description rendering first (standing instruction; `main` @ 5d380eb,
   `mabon/lib/markdownRenderer.ts` + `pages/JobDetailPage.tsx`). Two things came across. (1) Its
   wrapper carries `prose prose-sm prose-stone` and gompa has NO `@tailwindcss/typography` plugin
   installed either — those classes are inert, and the markers come only from the `list-disc` /
   `list-decimal` utilities its renderer writes onto each list. So "add prose classes" was never
   the fix in either app: the markers have to be declared. (2) It deliberately demotes markdown
   H1-H3 to sized bold paragraphs, so a posting's own headings never compete with the page title.
   We can't rewrite the tags the way a generator can, so the demotion happens here in CSS.

   `:where()` everywhere, for the zero specificity `.kbdoc` explains at length above. */

/* At 390 a posting is the widest thing on this page, and its content is not ours: these payloads
   routinely use a bare URL as the link text ("URL: https://www.example-clinic-marketing.com/"),
   which is one unbreakable word. The page body must never scroll sideways. */

/* The MEMBER jobs surface styles the same kind of content as `.jobdesc` in theme.css (markdown it
   renders itself); this recipe covers sanitized feed HTML (tables, images, code) on the public board.
   Keep the shared numbers (indent, item gap, subhead size) in step between the two. */

.prose-job {
  overflow-wrap: break-word;
}

/* The same rule for the two blocks that can be wider than any word: they scroll inside their own
   box instead. No wrapper element, for the reason theme.css gives at `.edoc .doc__rich:has(table)`
   — except that here the markup is the feed's, so we cannot add one at all. */

.prose-job :where(pre) {
  overflow-x: auto;
}

.prose-job :where(table) {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

/* Block rhythm. There is deliberately no `<br>` rule: a break is the author's own, it takes the
   article's 1.75 line-height, and the runs of `<br><br>` these feeds use as paragraph breaks
   cannot be told from single ones in CSS — spacing them would double every real line break. */

.prose-job :where(p, ul, ol, blockquote, figure, pre, table) {
  margin: 0 0 .9em;
}

/* Bold subheads, never page titles: a posting that opens with an <h1> must not out-shout the H1
   above it. Every level lands on one size, because feeds skip levels at random. */

.prose-job :where(h1, h2, h3, h4, h5, h6) {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 1.6em 0 .5em;
}

.prose-job :where(ul, ol) {
  padding-left: 1.25em;
}

.prose-job :where(ul) {
  list-style: disc;
}

.prose-job :where(ol) {
  list-style: decimal;
}

.prose-job :where(li) {
  margin-bottom: .35em;
}

.prose-job :where(li)::marker {
  color: var(--sagedeep);
}

/* Feeds wrap list items in paragraphs (`<li><p>…</p></li>` is common in the WWR payloads), which
   would otherwise stack the <li> gap on top of the <p> gap and space a list like body copy. */

.prose-job :where(li > p) {
  margin-bottom: .35em;
}

.prose-job :where(li > p:last-child) {
  margin-bottom: 0;
}

.prose-job :where(li > ul, li > ol) {
  margin: .35em 0 0;
}

.prose-job :where(strong, b) {
  font-weight: 700;
  color: var(--ink);
}

.prose-job :where(em, i) {
  font-style: italic;
}

/* Links keep the page's ink, like every other link on this surface, but with a FULL-strength
   underline rather than the 8%-black hairline the cards use: the `.kbdoc` note above is about
   exactly this, and a posting is a long body of text where a hairline disappears. */

.prose-job :where(a) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.prose-job :where(a):hover {
  text-decoration-thickness: 2px;
}

.prose-job :where(hr) {
  margin: 1.5em 0;
  border-top: 1px solid var(--line);
}

.prose-job :where(img) {
  margin: 0 0 .9em;
  border-radius: 10px;
}

.prose-job :where(blockquote) {
  padding-left: .9em;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.prose-job :where(code) {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: .9em;
}

/* The payload's first and last elements carry their own margins; the article's own spacing owns
   the edges, so a posting never opens or closes on a stray gap. */

.prose-job > :where(:first-child) {
  margin-top: 0;
}

.prose-job > :where(:last-child) {
  margin-bottom: 0;
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-sage\/40:focus-within {
  --tw-ring-color: rgb(168 185 165 / 0.4);
}

.hover\:bg-beige:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 245 238 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/\[\.03\]:hover {
  background-color: rgb(0 0 0 / .03);
}

.hover\:bg-black\/\[\.04\]:hover {
  background-color: rgb(0 0 0 / .04);
}

.hover\:bg-line\/50:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.hover\:text-darktext:hover {
  --tw-text-opacity: 1;
  color: rgb(255 249 240 / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(38 32 26 / var(--tw-text-opacity, 1));
}

.hover\:text-sageink:hover {
  --tw-text-opacity: 1;
  color: rgb(65 104 78 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:decoration-ink:hover {
  text-decoration-color: #26201A;
}

.hover\:decoration-white:hover {
  text-decoration-color: #fff;
}

.hover\:decoration-2:hover {
  text-decoration-thickness: 2px;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:m-3:focus {
  margin: 0.75rem;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-sage\/40:focus {
  --tw-ring-color: rgb(168 185 165 / 0.4);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

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

@media (min-width: 640px) {
  .sm\:bottom-4 {
    bottom: 1rem;
  }

  .sm\:left-auto {
    left: auto;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:order-none {
    order: 0;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mr-32 {
    margin-right: 8rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:\!inline-flex {
    display: inline-flex !important;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:\!hidden {
    display: none !important;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-11 {
    height: 2.75rem;
  }

  .sm\:w-\[15rem\] {
    width: 15rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[14rem\] {
    min-width: 14rem;
  }

  .sm\:max-w-\[1040px\] {
    max-width: 1040px;
  }

  .sm\:max-w-\[300px\] {
    max-width: 300px;
  }

  .sm\:max-w-\[430px\] {
    max-width: 430px;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:basis-auto {
    flex-basis: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-3\.5 {
    padding: 0.875rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-12 {
    padding-bottom: 3rem;
  }

  .sm\:pt-12 {
    padding-top: 3rem;
  }

  .sm\:pt-14 {
    padding-top: 3.5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:pt-5 {
    padding-top: 1.25rem;
  }

  .sm\:pt-7 {
    padding-top: 1.75rem;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-\[1\.65rem\] {
    font-size: 1.65rem;
  }

  .sm\:text-\[1\.6rem\] {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.5fr_1fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:pb-12 {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-\[76px\] {
    top: 76px;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 200px minmax(0,1fr);
  }

  .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)_290px\] {
    grid-template-columns: 200px minmax(0,1fr) 290px;
  }

  .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)_52px\] {
    grid-template-columns: 200px minmax(0,1fr) 52px;
  }

  .lg\:grid-cols-\[256px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 256px minmax(0,1fr);
  }

  .lg\:grid-cols-\[64px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 64px minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.05fr\)_auto_minmax\(0\2c 1\.05fr\)\] {
    grid-template-columns: minmax(0,1.05fr) auto minmax(0,1.05fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_296px\] {
    grid-template-columns: minmax(0,1fr) 296px;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-7 {
    gap: 1.75rem;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-line\/70 {
    border-color: rgba(0, 0, 0, 0.7);
  }

  .lg\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .lg\:pl-5 {
    padding-left: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .xl\:order-none {
    order: 0;
  }

  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:w-auto {
    width: auto;
  }

  .xl\:max-w-\[20vw\] {
    max-width: 20vw;
  }

  .xl\:grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }

  .xl\:justify-self-center {
    justify-self: center;
  }
}

@media (max-height: 820px) {
  .short\:mb-2\.5 {
    margin-bottom: 0.625rem;
  }

  .short\:mt-2 {
    margin-top: 0.5rem;
  }

  .short\:mt-3 {
    margin-top: 0.75rem;
  }

  .short\:mt-4 {
    margin-top: 1rem;
  }

  .short\:mt-5 {
    margin-top: 1.25rem;
  }

  .short\:inline {
    display: inline;
  }

  .short\:\!hidden {
    display: none !important;
  }

  .short\:hidden {
    display: none;
  }

  .short\:\!h-\[60px\] {
    height: 60px !important;
  }

  .short\:\!h-\[80px\] {
    height: 80px !important;
  }

  .short\:p-3 {
    padding: 0.75rem;
  }

  .short\:p-5 {
    padding: 1.25rem;
  }

  .short\:\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .short\:\!py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  .short\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .short\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .short\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .short\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .short\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .short\:pt-3 {
    padding-top: 0.75rem;
  }

  .short\:pt-7 {
    padding-top: 1.75rem;
  }

  .short\:text-\[\.95rem\] {
    font-size: .95rem;
  }

  .short\:text-\[clamp\(1\.45rem\2c 3vw\2c 1\.75rem\)\] {
    font-size: clamp(1.45rem, 3vw, 1.75rem);
  }
}

.\[\&_td\]\:border-t td {
  border-top-width: 1px;
}

.\[\&_td\]\:border-line td {
  border-color: rgba(0,0,0,.08);
}

.\[\&_td\]\:px-4 td {
  padding-left: 1rem;
  padding-right: 1rem;
}

.\[\&_td\]\:py-2\.5 td {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.\[\&_td\]\:py-3 td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_th\]\:border-t th {
  border-top-width: 1px;
}

.\[\&_th\]\:border-line th {
  border-color: rgba(0,0,0,.08);
}

.\[\&_th\]\:py-2\.5 th {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.\[\&_th\]\:py-3 th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_th\]\:pr-4 th {
  padding-right: 1rem;
}

.\[\&_th\]\:text-left th {
  text-align: left;
}

.\[\&_th\]\:align-top th {
  vertical-align: top;
}

.\[\&_th\]\:font-medium th {
  font-weight: 500;
}

.\[\&_th\]\:font-semibold th {
  font-weight: 600;
}
/* ============================================================================
   Resumonk Revamp — "v10 Sunlit" shared design system
   SINGLE SOURCE OF TRUTH for every mockup. The homepage (index.html) and every
   app/marketing screen <link> this file + load assets/tailwind-theme.js, so the
   system cannot drift. See DESIGN.md for the prose spec.

   Two zones:
     1) MARKETING + SHARED  — the recipes lifted verbatim out of the original
        homepage <style> (so index.html renders byte-identically).
     2) APP / EDITOR        — the signed-in shell + Resume Editor recipes.

   Palette (warm, one family): cream #F6F0E5 · beige #F9F5EE · white surface ·
   copilot tint #FFF8EE · dark #1E1A17 / #161311. Orange #FF8A00 is RESERVED for
   primary CTAs, the recommended pricing card, one hero word, and the AI-change
   moment in the editor. Sage green is the secondary (icons, pills, checks,
   selection, status). Type: Hanken Grotesk (UI) + Spline Sans Mono (metrics);
   resume template OUTPUT may add a paired serif (Source Serif 4).
   ============================================================================ */

:root {
  --ease: cubic-bezier(.22,1,.36,1);

  --cream:#F6F0E5; --beige:#F9F5EE; --surface:#FFFFFF; --copilot:#FFF8EE;
  --dark:#1E1A17; --dark2:#161311; --darktext:#FFF9F0;
  --ink:#26201A; --muted:#6E6258; --line:rgba(0,0,0,.08);
  --orange:#FF8A00; --orangehover:#F97316; --orangetext:#C95F00;
  --sage:#A8B9A5; --sagedeep:#6B8E68; --sageink:#41684E; --sagetint:#EDF4EC;
  /* `--sagetint` on a CREAM ground; see .nav-app.is-active. */
  --sagetint-warm:#E4EBDB;

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;

  /* Preview & Download geometry (v5, 2026-07-31): the CONTROLS set the width and the artifact
     spans exactly their extremities, with the paper centred inside — legacy's shape. */
  --desk:#EDE4D5; --col:1100px; --paper:800px;
}

/* ============================================================================
   1) MARKETING + SHARED  (verbatim from the original homepage <style>)
   ============================================================================ */
html,body{ background:#F6F0E5; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; color:#26201A; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ letter-spacing:-.03em; text-wrap:balance; }
.pretty{ text-wrap:pretty; }
.mono{ font-family:"Spline Sans Mono",ui-monospace,monospace; }
::selection{ background:#FFE0B8; }
:focus-visible{ outline:2px solid #C95F00; outline-offset:3px; border-radius:6px; } /* solid orangetext — ≥3:1 on cream/white (WCAG 2.2 non-text) */

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
/* The APP shell — one column shared by the header, any screen toolbar, and the page body, so the
   nav links sit on the same left edge as the content beneath them (founder 2026-07-30; legacy did
   this and it is why legacy reads as calm). Same 1180px as marketing's .wrap, so moving between
   the two never shifts the brand. Above 1180 everything stays a centered band. */
.appwrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .appwrap{ padding-inline:1.5rem; } }

/* Preview & Download's shared column. v5 (2026-07-31) replaced the full-bleed `.desk` band: the
   controls and the artifact now sit in ONE 1100px column so they share a left and a right edge —
   before, a 1180px controls card floated above a 760px centred sheet and lined up with nothing. */
.artcol{ width:100%; max-width:var(--col); margin-inline:auto; }
/* The controls, card-less, directly on the page. A hairline separates them from the artifact
   without introducing yet another filled surface. */
.pdcontrols{ border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:14px; }
/* The artifact panel: a recessed warm surface (legacy's dark canvas, kept warm for Sunlit) with the
   paper centred inside it, so the paper's edges read as paper instead of floating on the page. */
/* NO `overflow:hidden` here, deliberately: the Download popover lives in `.artpanel__hd` and is
   absolutely positioned, so clipping the panel sliced it in half (and clipped content is not
   hit-testable) whenever the panel was short — a Free user on the cover tab, whose body is just the
   paywall card, could not reach the download buttons at all. Nothing paints into the rounded
   corners, so the radius holds without it. */
.artpanel{ background:var(--desk); border:1px solid rgba(0,0,0,.07); border-radius:16px;
  box-shadow:inset 0 10px 22px -14px rgba(0,0,0,.28), inset 0 -8px 18px -12px rgba(0,0,0,.16); }
/* Three columns, so the doc tabs are TRULY centred over the paper: a flex space-between row shifted
   them every time the Download button's width changed (founder 2026-07-31). */
.artpanel__hd{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.07); }
.artpanel__hd > .seg{ grid-column:2; justify-self:center; }
.artpanel__hd > .dlwrap{ grid-column:3; justify-self:end; }
.artpanel__body{ padding:24px 22px 30px; }
.artpanel__body > *{ max-width:var(--paper); margin-inline:auto; }
@media (max-width:640px){
  .artpanel{ border-radius:12px; }
  .artpanel__body{ padding:14px 10px 18px; }
  .artpanel__hd{ grid-template-columns:1fr auto; }
  .artpanel__hd > .seg{ grid-column:1; justify-self:start; }
  .artpanel__hd > .dlwrap{ grid-column:2; }
}
.sec{ padding-top:100px; padding-bottom:100px; }
@media (max-width:640px){ .sec{ padding-top:72px; padding-bottom:72px; } }

.sun{ background-color:#F6F0E5; background-image:radial-gradient(1300px 680px at 50% -220px, rgba(255,170,70,.20), transparent 66%); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:1rem; line-height:1; padding:.95rem 1.6rem; border-radius:18px; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s; }
.btn-primary{ background:#FF8A00; color:#3A2206; box-shadow:0 6px 20px rgba(255,138,0,.35); }
.btn-primary:hover{ background:#F97316; transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,138,0,.4); }
.btn-soft{ background:#fff; color:#26201A; border-color:rgba(0,0,0,.10); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.btn-soft:hover{ transform:translateY(-2px); border-color:rgba(0,0,0,.18); }
.btn-ghost{ color:#26201A; background:transparent; font-weight:600; }
/* An action that belongs to the JOBS tools rather than to the document beside it (the dashboard
   card's "Find jobs for this resume", 2026-08-24 — the founder asked for a different shade to mark
   the different kind of functionality). A CHIP rather than a button: it sits in the identity column
   under the sharing line, where a full button read as a fourth document action and looked orphaned,
   and where it must not compete with Edit for weight. */
.chip-jobs{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none;
  background:var(--sagetint); color:var(--sageink); border:1px solid rgba(107,142,104,.30);
  transition:border-color .2s, background .2s; }
.chip-jobs:hover{ border-color:var(--sagedeep); }
.chip-jobs[data-locked]{ opacity:.75; }

.card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
/* A card that is one ROW OF A LIST, not a thing on its own (founder 2026-08-18: "Dashboard with lot
   of resumes looks very heavy"). The base .card carries a 30px-blur drop shadow, which is right for
   one or two cards floating on the cream and wrong for twenty-four stacked: each shadow pools into
   the gap above the next row, and the page reads as a grey wash with white slabs in it. Here the
   card keeps its hairline and takes a shadow small enough to lift it off the ground and no more.
   The full lift returns on hover, where it means something — this row, under the pointer. */
.card--row{ border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.card--row:hover{ box-shadow:0 6px 18px rgba(0,0,0,.07); }
.card-hover:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.12); }
/* The optional job post on /start (founder 2026-08-15: the old muted sentence was missed). It is a
   real row rather than fine print, and still subordinate to the primary card above it: a sage
   hairline on a barely-tinted ground, with no fill and NO shadow, so nothing here competes with the
   one action the surface is about. */
/* Tokens only: the cream page shows through at rest, and the hover ground is `sagetint` — the
   documented sage tint, not a new one. The hairline is `sagedeep`: .42 dashed at rest (2026-08-17 —
   a dash reads lighter than a solid line at the same opacity, so the value rose to keep it visible),
   and .30 solid once open, the value `.chip.is-selected` also uses. */
/* The optional job post. COLLAPSED it is deliberately the quietest thing inside the card (founder
   2026-08-17: on the upload card it sat straight under the description line and "seems too much").
   A dashed hairline reads as an aside rather than a second field; the filled sage disc, the bold
   heading and the solid button all stood down with it. It stays a bordered ROW and not a sentence,
   because the 2026-08-15 ruling that made it one still holds — a member was missing it entirely.
   OPEN it firms up (`.jdcard--open`): it is a field being filled in by then, not an offer. */
/* `[open]` is the NO-JS twin of `--open` (founder 2026-09-17): the KB LinkedIn article offers the
   same job post from a native <details>, so the open card has to be reachable with CSS alone. The
   two selectors share one declaration block so the two surfaces cannot drift apart. */
.jdcard{ background:transparent; border:1px dashed rgba(107,142,104,.42); border-radius:18px; }
.jdcard--open, .jdcard[open]{ border-style:solid; border-color:rgba(107,142,104,.30); background:var(--sagetint); }
/* The <details> summary holds BOTH faces of the card — the dashed offer row and the open card's
   header — and the disclosure state picks one. The React picker swaps its whole block instead, so
   this pair exists only for the article. Each of these selectors outweighs the `flex` utility that
   the two faces carry, and theme.css is appended after the Tailwind build besides, so the hidden
   one really is hidden. */
.jdcard[open] > summary .jd-offer-closed{ display:none; }
.jdcard:not([open]) > summary .jd-offer-open{ display:none; }
.jdcard--tap{ cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease); }
.jdcard--tap:hover{ background:var(--sagetint); border-color:var(--sagedeep); }
.sheet{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.16), 0 10px 24px rgba(0,0,0,.07); }

.kick{ font-family:"Spline Sans Mono"; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#41684E; } /* sageink — sagedeep fails AA at this size (3.25:1 on cream) */

.icon-sage{ width:52px; height:52px; border-radius:9999px; background:#EDF4EC; color:#6B8E68; display:flex; align-items:center; justify-content:center; flex:none; }
.pill-sage{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:999px; font-size:.8rem; font-weight:600; background:#EDF4EC; color:#41684E; }
.tag{ display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .7rem; border-radius:999px; font-size:.72rem; font-weight:500; background:#fff; border:1px solid rgba(0,0,0,.08); color:#5a5147; }

.doc__name{ font-weight:800; letter-spacing:-.02em; line-height:1.02; }
.doc__role{ color:#5a5147; font-weight:600; }
.doc__rule{ height:2px; border:0; border-radius:3px; background:#E7E1D5; }
.doc__sec{ font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#7A7265; display:flex; align-items:center; gap:.5rem; } /* 4.75:1 on white — #8a8275 failed AA */
.doc__sec::after{ content:""; flex:1; height:1px; background:#EEE8DC; }
.doc__meta{ font-family:"Spline Sans Mono"; color:#7A7265; }

/* Reveal motion is gated on html.js (set by a one-line head script) so content
   is visible by default when JS fails — per the DESIGN.md motion rule. */
.js .rise{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rise{opacity:1;transform:none;transition:none} .shimmer,.livedot{animation:none!important} *{scroll-behavior:auto!important} }

.nav-link{ color:#6E6258; text-decoration:none; font-weight:500; transition:color .2s; }
.nav-link:hover{ color:#26201A; }

/* dramatic transformation (homepage hero) */
.xarrow-circle{ width:64px; height:64px; border-radius:9999px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 12px 28px rgba(107,142,104,.22); display:flex; align-items:center; justify-content:center; color:#6B8E68; }
.shimmer{ position:absolute; inset:0; border-radius:20px; overflow:hidden; pointer-events:none; }
.shimmer::after{ content:""; position:absolute; inset:0; transform:translateX(-130%); background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); animation:sweep 1.7s var(--ease) .5s 1 forwards; }
@keyframes sweep{ to{ transform:translateX(130%) } }

/* alive: pulsing live dot + soft pulse (homepage widget) */
.livedot{ width:9px; height:9px; border-radius:9999px; background:#6B8E68; position:relative; }
.livedot::after{ content:""; position:absolute; inset:0; border-radius:9999px; background:#6B8E68; animation:ping 2.4s var(--ease) infinite; }
/* The same dot, at rest. A ping beside a finished one-off search claimed activity that was not
   happening (founder, 2026-08-22) — the still variant keeps the mark without the claim. */
.livedot--still::after{ display:none; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.6 } 70%,100%{ transform:scale(3); opacity:0 } }
.newdot{ width:7px;height:7px;border-radius:9999px;background:#6B8E68; box-shadow:0 0 0 0 rgba(107,142,104,.5); animation:newping 2s ease-in-out infinite; }
@keyframes newping{ 0%,100%{ box-shadow:0 0 0 0 rgba(107,142,104,.45) } 50%{ box-shadow:0 0 0 5px rgba(107,142,104,0) } }
.notif{ animation:floaty 4s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }


/* ============================================================================
   2) APP / EDITOR  (signed-in shell + Resume Editor, v10 Sunlit)
   Orange stays reserved: primary actions + the AI-change moment. Sage carries
   passive selection / active-nav / status. The page is cream; the resume is a
   white sheet floating on it.
   ============================================================================ */

/* thin warm scrollbars for panels */
.scroll-thin{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent; }
.scroll-thin::-webkit-scrollbar{ width:10px; height:10px; }
.scroll-thin::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.14); border-radius:999px; border:3px solid transparent; background-clip:content-box; }

/* small secondary button variant (for toolbar Design/Download) — reuses .btn */
.btn-sm{ padding:.55rem .9rem; font-size:.9rem; border-radius:13px; } /* mirrored in layouts/public_resume.html.erb's corrections block, where the inlined render sheet clobbers it for every chrome row on a public resume; keep in step */

/* App nav link active state — sage tint (orange stays reserved) */
.nav-app{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:10px; font-weight:600; font-size:.95rem; color:#6E6258; text-decoration:none; transition:color .2s, background-color .2s; }
.nav-app:hover{ color:#26201A; background:rgba(0,0,0,.035); }
/* The active pill uses the WARM sage tint, not `--sagetint` (founder, 2026-09-05: "the highlight
   bg color for Jobs menu link is not suitable for this page bg"). `--sagetint` #EDF4EC is mixed for
   WHITE surfaces — on the cream header it is both a cool cast against a warm ground and within a
   point of cream's own lightness, so it read as a smudge rather than as "you are here". This one
   sits in the same sage family, warmed toward cream and a shade deeper, so it reads as a pill. */
.nav-app.is-active{ color:#41684E; background:var(--sagetint-warm); }

/* Plan pill (sage) + account avatar */
.plan-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem; border-radius:999px; font-size:.74rem; font-weight:700; background:#EDF4EC; color:#41684E; border:1px solid rgba(107,142,104,.22); }
/* The Free viewer's chip is an OFFER, not a label (founder 2026-08-02). Warm enough to read as the
   action it is, quiet enough not to nag next to the resume itself. */
.plan-pill--upgrade{ background:#FFF1E0; color:#8A4B12; border-color:rgba(214,122,32,.28); cursor:pointer; }
.plan-pill--upgrade:hover{ background:#FDE6CC; }
.avatar{ width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:#26201A; background:#F1EADD; border:1px solid var(--line); box-shadow:inset 0 0 0 2px #fff; }
/* The CSP-safe <details> disclosures (account menu, delete confirm) carry their own affordance, so
   the native triangle is suppressed everywhere — Tailwind's list-none alone misses WebKit. */
summary::-webkit-details-marker{ display:none; }
summary.avatar{ list-style:none; }

/* In-place editable field — the document IS the canvas. A resting cue (2026-07-20 founder ruling —
   users didn't realise the canvas was editable and reached for the toolbar "Edit" button): a faint
   dotted underline reads as "fillable" without looking like the template, and firms up on hover. */
.edit{ border-radius:6px; transition:background-color .15s var(--ease), box-shadow .15s var(--ease); cursor:text; outline:none;
  box-shadow:inset 0 -1px 0 0 rgba(255,138,0,.16); }
.edit:hover{ background:rgba(255,138,0,.06); box-shadow:inset 0 -1px 0 0 rgba(255,138,0,.45); }
.edit:focus{ background:#FFF6E9; box-shadow:0 0 0 2px rgba(255,138,0,.45); }

/* Hover-revealed block + its menu button */
.block{ position:relative; border-radius:9px; padding:5px 9px; margin:0 -9px; transition:background-color .15s var(--ease); }
/* Anchor navigation (the outline pills' #sec- links) and every scrollIntoView (the lens landing on
   the first change, a new section's reveal) stop BELOW the sticky stack instead of under it.
   `--sticky-stack` is the measured bottom of header + toolbar (EditorShell publishes it); the
   fallback is the bare header, for a document with no toolbar. */
section[id^="sec-"], .block{ scroll-margin-top:calc(var(--sticky-stack, 60px) + 12px); }
.block:hover{ background:rgba(38,32,26,.035); }
.block:hover .block__menu, .block:focus-within .block__menu{ opacity:1; } /* keyboard reveal */
@media (hover:none){ .block__menu{ opacity:1; } } /* touch has no hover — menu always visible */
.block__menu{ position:absolute; top:5px; right:5px; opacity:0; transition:opacity .15s var(--ease); width:28px; height:28px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:#fff; border:1px solid var(--line); }
.block__menu:hover{ color:var(--ink); }
/* AI-change moment — the one place orange tints a block. (Dated note 2026-07-29, Option C ruling:
   the tint now marks a block the pass CHANGED while the "See what changed" lens is open — the
   pending-keep/undo review it used to mark is retired. The .was strikethrough recipes stay for the
   historical v2 mockup only; the app no longer renders struck originals.) */
.block.is-changed{ background:#FFEAD0; box-shadow:inset 3px 0 0 0 var(--orange); }
/* Selecting text inside a tinted block must stay VISIBLE: the app's warm ::selection (#FFE0B8)
   is near-identical to the #FFEAD0 wash, so a selection there disappeared entirely (founder
   2026-08-04). Ink-on-cream is unmistakable on any warm background. */
.block.is-changed ::selection, .block.is-changed::selection,
.block.is-swept ::selection, .block.is-swept::selection{ background:var(--ink); color:var(--darktext); }
.was{ color:var(--muted); text-decoration:line-through; }
/* Option C (2026-07-29): the 2s arrival tint sweep over blocks a pass changed — the eye sees where
   work landed, then the document is just the document. Reduced motion: no sweep (the result bar
   already announces the pass). */
.block.is-swept{ animation:passsweep 2s ease-out 1; }
@keyframes passsweep{
  0%,60%{ background:#FFEAD0; box-shadow:inset 3px 0 0 0 var(--orange); }
  100%{ background:transparent; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce){ .block.is-swept{ animation:none } }
/* The lens's "Show original" panel: the block's pre-run text, WHOLE (never line-interleaved — v1.2
   reorder/trim made interleaved pairing misattribute originals). */
.lens-original{ background:var(--beige); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:.9em; color:var(--muted); }
/* The words the pass actually removed or replaced, inside the whole original (founder 2026-07-31).
   Struck and darkened rather than tinted: the original panel is already a muted block, so a tint
   alone didn't separate from it, and "this text is gone" is exactly what a strikethrough says. */
.lens-original .wasmark{ color:var(--ink); text-decoration:line-through; text-decoration-color:rgba(180,60,20,.55);
  text-decoration-thickness:1.5px; background:rgba(255,138,0,.10); border-radius:3px; padding:0 1px; }

/* Outline (left rail) links */
.outline-link{ display:block; padding:5px 10px; border-radius:8px; font-size:.875rem; color:var(--muted); text-decoration:none; transition:color .15s, background-color .15s; }
.outline-link:hover{ color:var(--ink); background:rgba(0,0,0,.035); }
.outline-link.is-active{ color:#41684E; background:#EDF4EC; font-weight:600; }

/* The resume sheet (paper on cream) */
.docpage{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05); }

/* ---- Resume document (extends the shared .doc__* base above) ----------- */
.doc{ color:#26201A; padding:clamp(1.5rem,3.5vw,2.75rem); font-size:.92rem; line-height:1.55; }
.doc .doc__contact{ font-family:"Spline Sans Mono"; font-size:.78em; color:var(--muted); margin-top:.5em; }
.doc .doc__item-head{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.doc .doc__item-title{ font-weight:700; }
.doc .doc__item-meta{ font-family:"Spline Sans Mono"; color:var(--muted); font-size:.82em; white-space:nowrap; }
.doc .doc__bullets{ margin:.35em 0 0; padding-left:1.15em; list-style:disc; }
.doc .doc__bullets li{ margin-bottom:.25em; }
.doc .doc__bullets li::marker{ color:var(--sagedeep); }
.doc .doc__body section + section .doc__sec{ margin-top:1.3em; }
.doc .doc__sec{ margin:1.2em 0 .55em; }

/* ---- The honest editor canvas (.edoc — v4.1 S2, surfaces §7.2 #7) ----------------------------
   The `.doc--<skin>` template skins are DELETED (they impersonated 5 of 20 templates; the real
   look lives only in Preview & Download's server render). The canvas is unapologetically an
   editor: app type on the cream ground (no paper), quietly-underlined editables, mono section
   labels with a hairline, date values as bordered mono chips. Structural `.doc__*` classes keep
   their names (the components and specs are untouched); .edoc restyles them. */
/* The canvas is a bounded WORK SURFACE, not a sheet of paper (founder 2026-07-30 asked for an
   edge, especially on mobile, where the content ran into the chrome). Beige + hairline + radius:
   it says "this region is your document" without impersonating a template — the printed look
   still lives only in Preview & Download. */
.edoc{ color:#26201A; font-size:.92rem; line-height:1.55;
  background:var(--beige); border:1px solid var(--line); border-radius:14px; padding:1rem .9rem; }
@media (min-width:640px){ .edoc{ border-radius:18px; padding:1.9rem 2rem; } }
/* Editable fields read as gently "fillable": a faint resting fill + hairline box (founder
   2026-07-21 — make editability obvious without a heavy form look). box-decoration-break:clone
   keeps the box clean when an inline field wraps across lines. The date chip (.doc__item-meta)
   carries its own box, so it is excluded from the generic one. */
.edoc .edit:not(.doc__item-meta){ border-radius:5px; background:rgba(120,110,95,.035);
             box-shadow:inset 0 0 0 1px rgba(120,110,95,.08); padding:.02em .22em; margin:0 -.06em;
             -webkit-box-decoration-break:clone; box-decoration-break:clone;
             transition:background-color .15s var(--ease), box-shadow .15s var(--ease); }
/* Name + role hug their text (a full-width box on a short heading reads as a form field). */
.edoc .doc__name.edit, .edoc .doc__role.edit{ display:inline-block; max-width:100%; }
.edoc .edit:not(.doc__item-meta):hover{ background:rgba(255,138,0,.07); box-shadow:inset 0 0 0 1px rgba(255,138,0,.32); }
.edoc .doc__item-meta.edit:hover{ background:#FFF6E9; box-shadow:0 0 0 1px rgba(255,138,0,.32); }
.edoc .edit:focus{ background:#FFF6E9; box-shadow:0 0 0 2px rgba(255,138,0,.45); outline:none; }
.edoc .doc__name{ font-size:1.7rem; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
/* THE SPECIFICITY TRAP (hit three times, DELIBERATE-DECISIONS "Editor canvas"): a bare
   `.edoc .doc__role{margin-top}` is (0,2,0) and LOSES to `.edoc .edit:not(.doc__item-meta)`'s
   `margin:0 -.06em` at (0,3,0), so the headline sat flush against the name and no Tailwind mt-*
   could fix it either. Every spacing rule on an editable field below carries enough classes to
   win, and each one was MEASURED with getComputedStyle in the browser. */
.edoc .doc__role.edit:not(.doc__item-meta){ font-size:15px; font-weight:500; color:var(--muted); margin-top:.85rem; }
.edoc .doc__contact{ font-family:"Spline Sans Mono"; font-size:12.5px; color:var(--muted);
                     margin-top:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
/* One contact field per LINE, its renameable label in a fixed column (v5, 2026-07-31): run
   together on one wrapping line they read as prose, with a dangling separator after the last. */
.edoc .contactgrid{ display:grid; grid-template-columns:1fr; gap:.42rem; }
.edoc .contactgrid > .doc__contact-item{ display:grid; grid-template-columns:auto auto 1fr;
                                         align-items:baseline; gap:.35rem; }
.edoc .doc__clabel{ font-weight:600; color:#5A5148; min-width:64px; justify-self:start; }
.edoc .doc__ccolon{ color:#5A5148; }
.edoc .doc__rule{ display:none; }
.edoc .doc__sec{ font-family:"Spline Sans Mono"; font-size:.68rem; font-weight:500;
                 letter-spacing:.14em; text-transform:uppercase; color:#41684E; margin:0; }
.edoc .doc__sec::after, .edoc .doc__sec::before{ display:none; }
.edoc .esec{ display:flex; align-items:center; gap:10px; margin:26px 0 8px; }
.edoc .esec__rule{ flex:1; height:1px; background:var(--line); }
/* Adding is a PRIMARY action and is NEVER hover-revealed (v5 ruling): the old rule faded the whole
   section header, so a desktop user could not see that a section could be added to at all, and a
   blank resume became a dead end. Only the DESTRUCTIVE control still fades in. */
.edoc .esec .iconbtn{ opacity:0; transition:opacity .15s var(--ease); }
.edoc .esec:hover .iconbtn, .edoc .esec:focus-within .iconbtn{ opacity:1; }
/* On touch there is no hover, so it is always visible — and it deletes a section, so give it a real
   tap target rather than the 22px icon box (invisible to Backstop, which emulates no pointer). */
@media (pointer:coarse){
  .edoc .esec .iconbtn{ opacity:1; min-width:44px; min-height:44px; }
  .newentry .iconbtn{ min-width:44px; min-height:44px; }
}

/* Every editable field on its OWN line, in form order (v5): joining "Title · Company" and floating
   the date right made the canvas imitate ONE of the 20 rendered templates. The editor shows
   FIELDS; the preview shows the DOCUMENT. */
.edoc .frow{ display:block; margin-top:.8rem; }
.edoc .frow:first-child{ margin-top:0; }
.edoc .frow > .edit{ display:inline-block; max-width:100%; }
.edoc .doc__item-title{ font-weight:600; font-size:15px; }
.edoc .doc__item-sub{ font-size:14px; color:var(--muted); }
.edoc .doc__item-meta{ font-family:"Spline Sans Mono"; font-size:.72rem; color:var(--muted);
                       background:#fff; border:1px solid var(--line); border-radius:7px;
                       padding:.14rem .45rem; white-space:nowrap; }
/* The body needs a clearer break than the gap BETWEEN the stacked head fields, or Date and Details
   read as one run. (0,4,0) beats the `.edit:not()` margin reset — see the trap note above.) */
.edoc .block > .edit.doc__body{ margin-top:1.15rem; }
.edoc .doc__bullets{ margin:.35em 0 0; padding-left:1.15em; list-style:disc; }
.edoc .doc__bullets li{ margin-bottom:.25em; }
.edoc .doc__bullets li::marker{ color:var(--sagedeep); }
/* Tailwind's preflight zeroes list-style on EVERY list, so an editable region needs its own recipe
   or the user's bullets and numbers simply vanish in the editor (the RENDER side keeps the browser
   default — Bootstrap does not reset it — so the PDF was always right). This styles the elements
   directly rather than a seeded `.doc__bullets` class: since 2026-08-01 the seed adds no classes,
   because whatever the seed adds the next keystroke would store in the user's data. */
/* Legacy content the editor PRESERVES but offers no control for still has to look sane in the
   canvas. Neither of these is authorable here; both arrive from pre-Froala rows and pasted Word.
   IMAGES: cap at the field width — an untouched 1280px photo rendered at full container width and
   swallowed the canvas. Kept as the floor even though the canvas now chips every image it is
   handed (`.legacyimg`, below): the chip depends on JS, this rule does not. The render side caps
   rich-text images too now (founder 2026-08-01) — `wkhtmltopdf.scss`, which spares the template
   photo by ruling.
   BLOCKQUOTE: the render stylesheet gives it padding + a left rule; Tailwind's preflight flattens it
   to a plain paragraph, so the editor was showing something the PDF does not. Mirror the render. */
.edoc .doc__rich img, .doc .doc__rich img{ max-width:100%; height:auto; }
.edoc .doc__rich blockquote, .doc .doc__rich blockquote{ padding:.4em .9em; margin:0 0 .6em;
  border-left:4px solid var(--line); }
/* TABLES. A legacy table rendered BORDERLESS in the canvas — 21,074 production resumes carry one,
   and their owners could not see where the cells were. This reads as a table without imitating any
   one of the 20 templates: hairlines, a tinted header row, comfortable cells. These looks are
   editor CHROME ONLY (founder 2026-08-04: print keeps legacy's borderless look — "We can't break
   21000 resumes in production"); the ONLY rules shared with the print recipe in wkhtmltopdf.scss
   are the :has() fixed-layout scoping and vertical-align: top — keep THOSE two in sync, never
   re-sync print toward this look. */
.edoc .doc__rich table, .doc .doc__rich table{ border-collapse:collapse; width:100%; margin:.4em 0 .6em;
  font-size:.95em; }
/* FIXED layout for tables that carry column widths (every table the editor inserts writes equal
   percentages, and Froala's resize wrote them too), scoped by :has so a width-less legacy table
   keeps the natural sizing it was authored against. Under auto layout the columns re-flowed on
   every keystroke — the founder's "as I type in a cell, the column keeps expanding". Editor
   chrome only: nothing here is stored, and the PDF reads the widths from the markup itself. */
/* The three spellings a COLUMN width appears in inline styles (leading, after "; ", after ";").
   A bare substring match ("*=width") also caught border-width/min-width/max-width, flipping
   width-LESS legacy tables to fixed layout — the very tables this scoping exists to protect. */
.edoc .doc__rich table:has(td[style^="width"], th[style^="width"], td[style*=" width"], th[style*=" width"], td[style*=";width"], th[style*=";width"]),
.doc .doc__rich table:has(td[style^="width"], th[style^="width"], td[style*=" width"], th[style*=" width"], td[style*=";width"], th[style*=";width"]){ table-layout:fixed; }
.edoc .doc__rich th, .edoc .doc__rich td, .doc .doc__rich th, .doc .doc__rich td{
  border:1px solid var(--line); padding:.3em .5em; vertical-align:top; }
.edoc .doc__rich th, .doc .doc__rich th{ background:var(--beige); font-weight:700; text-align:left; }
/* NOTE: there is deliberately no "highlight the caret's cell" rule. `:focus-within` can never match
   a cell inside a contenteditable (the FIELD holds focus, cells are not focusable), and marking the
   cell with an attribute instead would write that attribute into the user's saved markup. */
/* A wide table scrolls INSIDE its own field. The alternative is the page scrolling sideways at
   390px, which breaks every other surface on the screen. No wrapper element: this markup is the
   user's, and a wrapper would be stored in their data on the next keystroke. */
.edoc .doc__rich:has(table){ overflow-x:auto; }
.edoc .doc__rich ul, .doc .doc__rich ul{ margin:.35em 0 0; padding-left:1.15em; list-style:disc; }
.edoc .doc__rich ol, .doc .doc__rich ol{ margin:.35em 0 0; padding-left:1.35em; list-style:decimal; }
.edoc .doc__rich li, .doc .doc__rich li{ margin-bottom:.25em; }
.edoc .doc__rich li::marker, .doc .doc__rich li::marker{ color:var(--sagedeep); }
/* A legacy inline image, shown as an inert chip rather than fetched. It is not an error and not a
   warning — the image is still in the resume and still prints — so it reads as a quiet object,
   sized like text, never like a broken tile. Its markup rides in `data-legacy-img` and goes back
   into the field on the next keystroke. */
.edoc .legacyimg, .doc .legacyimg{ display:inline-flex; align-items:center; gap:.3em;
  padding:.15em .5em; border-radius:7px; font-size:.78em; line-height:1.5; white-space:nowrap;
  color:var(--muted); background:var(--beige); border:1px dashed var(--line);
  user-select:all; -webkit-user-select:all; cursor:default; vertical-align:baseline; }
/* The glyph is CSS so the stored markup never has to carry it. */
.edoc .legacyimg::before, .doc .legacyimg::before{ content:"▧"; color:var(--sagedeep); font-size:.9em; }

.edoc .doc__meta{ font-family:"Spline Sans Mono"; font-size:.78em; color:var(--muted); }

/* The always-visible add row, at the END of a section where "one more" belongs (the section header
   is where you RENAME, not where you add). A dashed rail so it reads as an empty slot waiting to be
   filled, never as content. When the section is EMPTY this row IS the empty state, so it carries
   more presence: the invitation and the action are the same object. */
.addentry{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%;
           margin-top:10px; padding:.6rem .8rem; min-height:44px; font-size:.85rem; font-weight:600;
           color:var(--sageink); background:transparent; border:1px dashed rgba(107,142,104,.45);
           border-radius:10px; cursor:pointer;
           transition:background .15s var(--ease), border-color .15s var(--ease); }
.addentry:hover{ background:#EDF4EC; border-color:var(--sagedeep); }
.addentry:focus-visible{ outline:2px solid rgba(255,138,0,.5); outline-offset:2px; }
.addentry--empty{ padding:1.15rem .8rem; font-size:.9rem; }

/* A NEW entry opens as a real form, at form scale — not as document-scale placeholder chips, which
   were too small to see, let alone aim at. It keeps this treatment until it has content. */
.newentry{ position:relative; margin-top:10px; padding:14px 16px 12px; border-radius:12px;
           background:#FFFDF8; border:1px solid rgba(255,138,0,.35);
           box-shadow:0 1px 2px rgba(0,0,0,.04), 0 0 0 3px rgba(255,138,0,.08); }
.newentry__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.newentry__title{ font-family:"Spline Sans Mono"; font-size:.66rem; font-weight:500;
                  letter-spacing:.14em; text-transform:uppercase; color:#9A6A28; }
.fieldrow{ display:grid; grid-template-columns:152px 1fr; align-items:start; gap:12px; margin-top:12px; }
.fieldrow:first-child{ margin-top:0; }
.fieldrow > label{ font-size:.8rem; font-weight:600; color:var(--muted); padding-top:.55rem; }
.fieldrow .input{ font-size:.9rem; min-height:40px; padding:.5rem .7rem; }
.fieldrow .rich{ min-height:84px; padding:.55rem .7rem; border-radius:9px; background:#fff;
                 border:1px solid var(--line); font-size:.9rem; color:var(--ink); }
.fieldrow .rich:focus{ outline:none; border-color:rgba(255,138,0,.5); box-shadow:0 0 0 2px rgba(255,138,0,.25); }
@media (max-width:640px){ .fieldrow{ grid-template-columns:1fr; gap:4px; } .fieldrow > label{ padding-top:0; } }
/* The ONE formatting control is the selection bubble, which is invisible until text is selected —
   so an empty rich field says where it lives, once, quietly. */
.fmthint{ display:inline-flex; align-items:center; gap:.35rem; margin-top:6px; font-size:.72rem; color:var(--muted); }

/* The cover letter's body sits one level deeper than the row's control wrapper, so a child
   combinator never matches it; without this the "Details" label floated ~23px above the letter's
   first line instead of level with it. */
.fieldrow #cl-body.block{ padding:.5rem 0 0 0; background:transparent; margin:0; }
.fieldrow #cl-body.block > .edit:first-child{ margin-top:0; }


/* Font preset chips */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; font-size:.82rem; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.chip.is-selected{ background:#EDF4EC; color:#41684E; border-color:rgba(107,142,104,.3); }

/* Small badge (e.g. "base") */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; line-height:1.2; padding:.15rem .5rem; border-radius:999px; background:#F1EADD; color:var(--muted); border:1px solid var(--line); }

/* Tailored-version tree rail (dashboard). A hairline elbow from the base card down to each
   version row — indentation alone read as an accident (founder 2026-07-30). The rail bridges the
   gap above each row and stops at the elbow on the last one, so the branch visibly ends. */
.vbranch{ position:relative; margin-top:.625rem; padding-left:1.75rem; }
.vbranch::before{ content:""; position:absolute; left:.6rem; top:-.625rem; bottom:0; width:1px;
  background:rgba(0,0,0,.19); }
.vbranch.is-last::before{ bottom:auto; height:2.075rem; }
.vbranch::after{ content:""; position:absolute; left:.6rem; top:1.45rem; width:.95rem; height:1px;
  background:rgba(0,0,0,.19); }
@media (max-width:480px){ .vbranch{ padding-left:1.15rem; } .vbranch::after{ width:.4rem; } }

/* Quota meter */
.meter{ height:6px; border-radius:999px; background:#E7E1D5; overflow:hidden; }
.meter__fill{ height:100%; background:var(--sagedeep); border-radius:999px; }
/* An INDETERMINATE meter, for work whose fraction nobody can measure (the prepare shell). A bar that
   animates to 78% is a claim; this one only says "still working". */
.meter__fill--sweep{ width:40%; animation:metersweep 1.6s ease-in-out infinite; }
@keyframes metersweep{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
@media (prefers-reduced-motion: reduce){ .meter__fill--sweep{ animation:none; width:100%; opacity:.45; } }

/* Paywall banner — calm copilot tint, states what a tier unlocks */
.paywall{ background:#FFF8EE; border:1px solid rgba(255,138,0,.28); border-radius:14px; padding:1.1rem 1.15rem; color:#7A4A12; }

/* Modal dialog for the SERVER-RENDERED pages (today: /account's delete confirmation). It is the
   native <dialog>, opened with showModal(), so the browser gives the top layer, the focus trap and
   Escape — none of which a hand-built overlay gets right for free. The card treatment and the wash
   match the React ConfirmDialog exactly (black/30, .card, 480px), so the two read as one system
   rather than as two dialogs that happen to live in the same app.

   `translate` + `opacity` on the open state is the entrance; a <dialog> is display:none until it is
   open, so the transition needs `@starting-style` to have somewhere to come FROM. Browsers without
   it simply show the card, which is the correct fallback. */
dialog.dlg{ width:calc(100vw - 2rem); max-width:480px; max-height:calc(100dvh - 2rem); overflow:auto; }
dialog.dlg::backdrop{ background:rgba(0,0,0,.30); }
dialog.dlg[open]{ opacity:1; transform:translateY(0); transition:opacity .18s var(--ease), transform .18s var(--ease); }
@starting-style{ dialog.dlg[open]{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ dialog.dlg[open]{ transition:none; } }
/* A browser that does not know <dialog> treats it as an ordinary block, and Tailwind's preflight
   ships only `dialog{padding:0}`, so the confirmation would sit open on the page from first paint. */
dialog:not([open]){ display:none; }

/* ── THE CUTOVER WELCOME OVERLAY (`shared/_terms_gate`) ──────────────────────────────────────────
   REWORKED 2026-09-09 (founder): it is a WELCOME first and a consent gate second. A returning
   member meets the four things this rebuild added before they meet a legal paragraph, and the card
   has to read in a glance. A staging user's verdict on the version before this one was "I would
   simplify this a lot. Too much to read."

   DELIBERATELY NOT the native <dialog> that `.dlg` above uses, and the reason is the whole point of
   the surface: a <dialog> is display:none until showModal() runs, so a slow or broken bundle would
   hand a member the entire signed-in app for as long as it took to arrive. This one is
   server-rendered and on screen at first paint with no script at all, and the page behind it carries
   the plain `inert` attribute so nothing back there can be clicked or tabbed to either. Script only
   adds the focus trap and, on the second (non-blocking) showing, the dismissals.

   ORANGE BUDGET (DESIGN.md): the hero's warm wash is the ONE orange tint and the accept button is
   the ONE orange fill. The rule across the top is a 3px hairline, not a fill; the feature icons and
   the plan block are sage. Nothing else in the card is warm.

   Mirrors the copy in the other theme.css of this pair. Keep the two in step. */
/* `hidden` must win over this rule's own display:flex, which it does NOT by default: the UA
   stylesheet's [hidden]{display:none} loses to a class selector. The second showing ships hidden
   and is revealed by script, so without this line it would flash on every page. */
.tgate[hidden]{ display:none; }
/* THE SCRIM IS GLASS (founder 2026-09-09: "the overlay can have a translucent kind of background as
   well, a bit glitzy that looks super cool"). The app behind stays legible as a soft warm blur
   instead of disappearing under a flat black wash, and a sunlit halo falls behind the card.

   THE HALO IS `--copilot` AT 26%, and every warm value in this whole block is that one token at an
   alpha. It was mixed by eye first (an amber `#FFECCC`), which is off-palette: DESIGN.md fixes the
   token table and reserves orange, and a warm wash across a whole viewport is exactly the
   decorative sprinkle that rule forbids. Translucency rather than a token is the sanctioned move
   here for the same reason `.offering--new` uses translucent sage (DESIGN.md, third case, 2026-09-08):
   this surface sits over ARBITRARY app content, so no fixed tint is right for every ground.

   LAYERED, so the base rule alone is still a correct scrim. `backdrop-filter` is unsupported or
   switched off in more places than it looks (older Firefox, some privacy builds, and any GPU-blocked
   session), and there the halo on its own would dim nothing at all — which on the BLOCKING stage
   would leave a dialog floating over a fully readable app. So the flat wash is the base declaration
   and the glass only replaces it inside @supports. */
.tgate{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; padding:.5rem; background:rgba(30,26,23,.55); }
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .tgate{
    background:radial-gradient(58% 46% at 50% 32%, rgba(255,248,238,.26) 0%, rgba(255,248,238,0) 70%), rgba(30,26,23,.42);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
    backdrop-filter:blur(10px) saturate(1.15);
  }
}
/* 680px (2026-09-09), up from 620 and originally 560. Each widening had the same cause and the
   same measurement: the feature grid is two columns from the breakpoint below, and a narrow card
   makes each column narrow enough to wrap. 560 wrapped every feature NAME onto a second line; 620
   left each description at four lines, and the card then scrolled on a 1366x738 desktop, which the
   founder reported. At 680 each column is ~318px, the descriptions are three lines, and the whole
   card fits 738 with the tallest plan block in it. Anything that widens or narrows this has to move
   the breakpoint below with it. */
/* Lit from behind: DESIGN.md's own panel shadow (`0 30px 70px rgba(0,0,0,.16)`, unchanged), a 1px
   light catch so the edge picks up the halo, and a bloom of the same `--copilot` alpha the scrim
   uses. The 1px ring is a SHADOW, not a border: DESIGN.md's "borders 1px var(--line)" still governs
   borders, and a hairline of --line would vanish against a dark scrim, which is the problem this
   solves. */
.tgate__card{ width:100%; max-width:680px; max-height:calc(100dvh - 1rem); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.16), 0 0 0 1px rgba(255,248,238,.5), 0 0 70px rgba(255,248,238,.22); }
/* ONE scroll container over the hero AND the body, with only the action row pinned. The hero is the
   card's most decorative surface, but on a 390x650 handset a pinned hero plus a pinned action row
   left the middle third of the viewport to do all the reading. It scrolls away; the accept button
   never does, because that one has to stay reachable without a scroll nobody expects. */
.tgate__scroll{ overflow:auto; overscroll-behavior:contain; }

/* THE FIRST IMPRESSION. A sunlit wash from `--copilot` to white, with the light falling from the
   top left, the same direction the marketing hero's does. It carries no control, so it can be the
   loudest surface here without competing with anything.

   IT USED TO CARRY A 3px ORANGE GRADIENT RULE ACROSS THE TOP, and that was a straight DESIGN.md
   violation: "Orange is reserved. Use it only for: primary CTA buttons, the recommended pricing
   card, exactly one highlighted word in the hero, and the editor's AI-change moment ... Never
   sprinkle it decoratively." A decorative rule is none of those four, and "it is a hairline, not a
   fill" is not an exemption the document grants. Do not add it back. What is left is exactly the
   budget: this wash is the ONE orange tint, and "Accept and continue" is the ONE orange fill. */
.tgate__hero{ padding:1.15rem 1.5rem .95rem; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 150% at 8% -25%, var(--copilot) 0%, var(--surface) 78%); }

.tgate__body{ padding:1rem 1.5rem 1rem; }

/* The four capabilities: two columns from the breakpoint below, one below it, each an icon
   beside two lines. */
.tgate__feats{ display:grid; gap:.75rem .35rem; }
/* 712px, NOT the 560 this first shipped with and not the 660 that followed the 620 card. The card
   is `min(680px, 100vw - 1rem)` (the scrim's own .5rem padding, twice), so it only reaches its 680
   at a viewport of about 696 — and a viewport query set below that turns two columns on while the
   card is still narrower, giving each
   column ~233-249px, which is exactly the width the `.tgate__card` comment above records as the one
   that wrapped every feature name. The bug was invisible to the gates because Backstop shoots 1440
   and 390 and the broken band is the few dozen pixels under the card's own maximum. Any change to
   `.tgate__card`'s max-width has to move this number with it. */
@media (min-width:712px){ .tgate__feats{ grid-template-columns:1fr 1fr; column-gap:1.25rem; } }
.tgate__feat{ display:flex; gap:.65rem; align-items:flex-start; }
/* A 32px sage square, not `.icon-sage`'s 52px circle: four of those would shout over the copy that
   is the actual point. INLINE SVG, never a `data-lucide` placeholder — this overlay is on screen
   before the deferred bundle runs, and a glyph that arrived late would pop the grid a second after
   it had been read. (That is the same reason no control in here is icon-only.) */
.tgate__ic{ width:32px; height:32px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--sagetint); color:var(--sageink); }

/* The legal section: complete, and deliberately quiet. Counsel's words are unchanged (2026-09-08);
   only their weight on the card is (founder 2026-09-09, "a small section about new legal
   documents"). */
.tgate__legal{ margin-top:.95rem; border-top:1px solid var(--line); padding-top:.75rem; font-size:.82rem; color:var(--muted); line-height:1.55; }

.tgate__actions{ flex:none; border-top:1px solid var(--line); background:#fff; padding:.7rem 1.5rem .85rem; }
/* Only the blocking stage sets this server-side; the second showing adds and removes it itself. */
html.is-gated, html.is-gated body{ overflow:hidden; }
/* THE BACKDROP STOPS MOVING WHILE THE BLOCKING STAGE IS UP, and this is a real cost, not tidiness.
   `backdrop-filter` has to re-snapshot and re-filter the whole viewport every time anything behind
   it repaints. The page a blocked member lands on is the dashboard, whose boot frame ships ELEVEN
   `.skeleton` nodes on `animation:pulse 1.6s infinite`, and whose React skeleton then ships eleven
   more until the list arrives. So a full-viewport blur+saturate was being recomputed every
   frame, on a handset, for movement nobody can resolve through 10px of blur, in the one state a
   member cannot navigate out of. The second rule drops the app header's own `backdrop-blur-md`,
   which is a filtered region computed inside the backdrop of another filtered region and then
   thrown away by it.

   Scoped to `#app-behind-terms-gate`, which the layout renders ONLY on the blocking stage: the
   second showing is one click from gone, so it does not earn a rule that reaches into the app. */
html.is-gated #app-behind-terms-gate *{ animation-play-state:paused !important; }
html.is-gated #app-behind-terms-gate [class*="backdrop-blur"]{ -webkit-backdrop-filter:none; backdrop-filter:none; }
/* The card arrives, once, and it is the only motion in here. */
.js .tgate__card{ animation:tgate-in .28s var(--ease) both; }
@keyframes tgate-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .js .tgate__card{ animation:none; } }
@media (max-width:480px){
  .tgate{ padding:.5rem; }
  .tgate__card{ max-height:calc(100dvh - 1rem); }
  .tgate__hero{ padding:1.2rem 1.05rem 1.05rem; }
  .tgate__body{ padding:1.05rem 1.05rem .95rem; }
  .tgate__actions{ padding:.85rem 1.05rem .95rem; }
}

/* Toasts / inline notices */
.notice{ display:flex; align-items:flex-start; gap:.6rem; border-radius:12px; padding:.75rem .9rem; border:1px solid transparent; font-size:.9rem; }
.notice--info{ background:#FFF8EE; border-color:rgba(255,138,0,.22); color:#7A4A12; }
.notice--sage{ background:#EDF4EC; border-color:rgba(107,142,104,.25); color:#3a5a40; }

/* The "Soon" tag on a deferred seam (the Jobs nav item, the billing portal button). One recipe
   because the string is needed in BOTH JSX and ERB, which cannot share a partial — the same reason
   .toast lives here. A seam must SAY it is coming: a `title` tooltip is unreachable by touch and by
   keyboard (the 2026-07-06 ruling on mockup-only affordances). */
.tag-soon{ margin-left:.375rem; font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.025em;
           color:var(--muted); border:1px solid var(--line); border-radius:9999px; padding:.125rem .375rem; }

/* The app toast (components/Toast.tsx). Top-centre and two-tone since 2026-08-14 — see that file for
   why. Only colour + motion live here; Tailwind owns the box, so the cascade trap (theme.css wins
   over an unmodified utility) can't bite a layout class. The motion DOES set `transform`, which is
   the one Tailwind utility on that element (`-translate-x-1/2`) — every keyframe and end state below
   restates the -50%, so the centring survives. Red #B42318 is the app's one danger colour, already
   carried by .iconbtn--danger. */
.toast{ background:var(--dark); color:var(--darktext); animation:toastin .22s var(--ease) 1; transition:opacity .22s var(--ease), transform .22s var(--ease); }
.toast--error{ background:#B42318; color:#FFF5F4; }
/* The fade-out. The component unmounts at the end of it, so LEAVE_MS there must match .22s here. */
.toast--leaving{ opacity:0; transform:translate(-50%,-6px); }
@keyframes toastin{ from{ opacity:0; transform:translate(-50%,-10px) } to{ opacity:1; transform:translate(-50%,0) } }
@media (prefers-reduced-motion:reduce){ .toast{ animation:none; transition:none } .toast--leaving{ opacity:0; transform:translate(-50%,0) } }

/* Skeleton lines */
.skeleton{ background:#E7E1D5; border-radius:6px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* Gentle "AI working" dot */
.workdot{ width:8px; height:8px; border-radius:999px; background:var(--orange); flex:none; box-shadow:0 0 0 0 rgba(255,138,0,.5); animation:workpulse 1.8s ease-in-out infinite; }
/* Ctrl+S with nothing pending: the permanent "Saved" answers with a small pop instead of a state
   change (the state IS the answer). */
.savepulse svg{ animation:savepop .5s var(--ease) 1; }
@keyframes savepop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.35) } 100%{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){ .savepulse svg{ animation:none } }
@keyframes workpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,138,0,.45) } 50%{ box-shadow:0 0 0 5px rgba(255,138,0,0) } }
@media (prefers-reduced-motion:reduce){ .workdot,.skeleton{ animation:none } }

.divider{ height:1px; background:var(--line); border:0; }

/* Next-best-action card (resume → jobs bridge) — sage tint, orange CTA */
.nba{ background:#EDF4EC; border:1px solid rgba(107,142,104,.25); border-radius:16px; }

/* Slide-over / bottom-sheet panel shell */
.panel{ background:#fff; box-shadow:0 30px 70px rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.10); }

/* ---- Forms (job intake, account, auth) -------------------------------- */
.label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.input{ width:100%; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:.7rem .9rem; font-size:.95rem; color:var(--ink); min-height:44px; }
.input::placeholder{ color:#A89D92; }
.input:focus{ outline:2px solid #C95F00; outline-offset:2px; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6258' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.2rem; }

/* Toggle (always-on switch, notification prefs) — sage when on */
.toggle{ position:relative; display:inline-flex; width:44px; height:26px; flex:none; cursor:pointer; }
.toggle input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.toggle i{ position:absolute; inset:0; border-radius:999px; background:#D9D2C5; transition:background .2s; }
.toggle i::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease); }
.toggle input:checked + i{ background:#6B8E68; }
.toggle input:checked + i::after{ transform:translateX(18px); }
.toggle input:focus-visible + i{ outline:2px solid #C95F00; outline-offset:2px; }
/* The SMALL switch (the jobs rail's always-on row). A modifier rather than width/height utilities
   on `.toggle`, because the knob's size, inset and travel are all hard numbers tuned to the 44x26
   track: overriding only the track left a 20px knob in a 20px-tall box, hanging 3px below it and
   5px past its right edge when on. Founder-reported as broken toggle styling, 2026-09-05.
   Travel = 36 - 2 - 16 - 2. */
.toggle--sm{ width:36px; height:20px; }
.toggle--sm i::after{ top:2px; left:2px; width:16px; height:16px; }
.toggle--sm input:checked + i::after{ transform:translateX(16px); }

/* Match badges (job loop) — one sage family; orange stays reserved for CTAs.
   Strong = filled deep sage (the stronger signal); Good = light sage tint. */
.badge-good{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:999px; background:#EDF4EC; color:#41684E; border:1px solid rgba(107,142,104,.25); }

/* ---- Editor v2 additions ------------------------------------------------ */
/* Mobile section pills — the outline's small-screen counterpart (scroll-spy). */
.secpills{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 0; }
.secpills::-webkit-scrollbar{ display:none; }
.secpill{ flex:none; padding:.32rem .9rem; border-radius:999px; font-size:.8rem; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--line); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.secpill.is-active{ color:#41684E; background:#EDF4EC; border-color:rgba(107,142,104,.3); }

/* Tap-selected block (touch-first alternative to hover) */
.block.is-selected{ background:rgba(38,32,26,.035); box-shadow:0 0 0 2px rgba(107,142,104,.35); }

/* The original line shown under a pending AI change — uses .was color rules */
.was-line{ display:block; margin-top:.35em; padding-top:.35em; border-top:1px dashed rgba(0,0,0,.12); font-size:.92em; }


/* ============================================================================
   3) EDITOR + JOB-LOOP CHROME
   In-place editor recipes (per-block action bar + drag handle, resume/cover-letter
   tabs, template carousel, selection format bubble, photo slot, RTL document
   support) and the job-loop chrome (searches rail, match-reason list, chat
   affordance). One warm family; orange stays reserved for CTAs.
   ============================================================================ */

/* ---- Editor: make "click anything to edit" obvious -------------------- */
/* A persistent, low-key hint that the document itself is editable. */
.edithint{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted); font-family:"Spline Sans Mono"; }
/* Hover now shows a faint dotted outline too (not just a wash) so empty/short
   fields still read as editable; focus keeps the solid orange ring. */
.edit:hover{ background:rgba(255,138,0,.06); box-shadow:0 0 0 1px rgba(255,138,0,.28); }
.edit:focus{ background:#FFF6E9; box-shadow:0 0 0 2px rgba(255,138,0,.45); }
/* Empty editable fields advertise themselves with their placeholder text. */
.edit:empty::before{ content:attr(data-placeholder); color:#A89D92; }

/* ---- Editor: visible per-block action bar (replaces the ellipsis menu) -- */
/* A small cluster of individually-labelled icon buttons + a drag handle.
   Hidden until hover/focus on desktop; always visible on touch. Each button
   carries a title for a tooltip — the actions are no longer buried in a menu. */
/* Floats ABOVE the block's top-right so it never covers body text; revealed on
   hover / keyboard focus / tap-select. */
.block__bar{ position:absolute; bottom:calc(100% - 12px); right:2px; z-index:5; display:flex; align-items:center; gap:2px; padding:2px; border-radius:10px;
  background:#fff; border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .15s var(--ease), transform .15s var(--ease); }
.block:hover .block__bar, .block:focus-within .block__bar, .block.is-selected .block__bar{ opacity:1; pointer-events:auto; transform:none; }
.block__btn{ width:30px; height:30px; min-width:30px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; cursor:pointer; }
.block__btn:hover{ background:rgba(0,0,0,.05); color:var(--ink); }
.block__btn--ai:hover{ background:#FFEAD0; color:var(--orangetext); }
.block__btn--del:hover{ background:#FEECEC; color:#B42318; }
.block__btn[disabled]{ opacity:.35; cursor:default; }
.block__btn:hover{ box-shadow:none; }
/* Drag handle (sections and entries) — crosshair, grab cursor; parity with the
   Classic editor's reorder affordance. Lives at the block's leading edge. */
/* Permanently visible but faint, so the user always knows a block is draggable;
   it brightens on hover. Lives in the left gutter, off the resume text. */
.block__handle{ position:absolute; top:5px; left:-22px; width:20px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:grab; background:transparent;
  opacity:.3; transition:opacity .15s, background-color .15s, color .15s; }
.block:hover .block__handle, .block:focus-within .block__handle, .block.is-selected .block__handle{ opacity:1; }
.block__handle:hover{ background:rgba(0,0,0,.05); color:var(--ink); opacity:1; }
.block__handle:active{ cursor:grabbing; }
.block.is-dragging{ opacity:.5; }
.block.drop-before{ box-shadow:inset 0 3px 0 0 var(--sagedeep); }
.block.drop-after{ box-shadow:inset 0 -3px 0 0 var(--sagedeep); }
/* On touch / narrow widths there's no hover and no left gutter: drag is awkward,
   so hide the handle and rely on the Move up/down buttons in the action bar. */
@media (max-width:1024px){ .block__handle{ display:none !important; } }

/* ---- Editor: "add bullet" + "add item" inline ghost controls ---------- */
.addline{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; color:var(--muted); background:transparent; border:0; cursor:pointer; padding:.25rem .35rem; border-radius:7px; min-height:36px; }
.addline:hover{ color:var(--sageink); background:#EDF4EC; }

/* ---- Editor: outline rows with a reorder grip (left rail) ------------- */
.outline-row{ display:flex; align-items:center; gap:1px; border-radius:8px; }
.outline-row:hover{ background:rgba(0,0,0,.025); }
.outline-row.is-dragging{ opacity:.5; }
.outline-row.drop-before{ box-shadow:inset 0 3px 0 0 var(--sagedeep); }
.outline-row.drop-after{ box-shadow:inset 0 -3px 0 0 var(--sagedeep); }
.outline-grip{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:30px; color:var(--muted); cursor:grab; opacity:.3; transition:opacity .15s; flex:none; }
.outline-row:hover .outline-grip, .outline-grip:focus{ opacity:1; }
.outline-grip:active{ cursor:grabbing; }
@media (hover:none){ .outline-grip{ opacity:.4; } }

/* ---- Editor: compact "how to use" hint pill (top, persistent, dismissible) -- */
.hintpill{ display:inline-flex; align-items:center; gap:.55rem; max-width:calc(100vw - 2rem);
  padding:.42rem .55rem .42rem .85rem; border-radius:999px; background:#26201A; color:#FBF3E6;
  font-size:.8rem; box-shadow:0 6px 18px rgba(0,0,0,.16); }
/* An icon button now, not a text one (2026-08-18) — so it is square, and big enough to hit. */
.hintpill__x{ display:inline-flex; align-items:center; justify-content:center; color:#C9BCA8;
  padding:.3rem; border-radius:999px; flex:none; }
.hintpill__x:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* The dashboard search field draws its OWN clear button (DashboardApp `SearchField`), because
   Chrome is the only engine that draws one for type=search. Suppress the native one so Chrome does
   not show two, sitting on top of each other. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }

/* ---- Editor: photo slot for Photo-CV templates (upload / remove) ---------- */
/* 180×180 because that is the STORED thumb (PhotoUploader resize_to_limit) — templates render it
   120–150px, so 180 is the ceiling, not a per-template constant (v5, 2026-07-31). */
/* 150px is what the DOCUMENT gives the photo, so the canvas shows the size the reader will get.
   Measured 2026-08-31 on the default template: 151px of a 692px content column (21.8%), against
   a 674px canvas head row — 150px lands at 22.3%. It is also the `min-width` clear/avant/vivid use,
   with vibrant at 120 and elemental at 180, so it sits mid-band for the whole photo family. It was
   180px (the STORED thumb size), which read a third larger than any template renders and made the
   editor promise a photo the PDF then shrank (founder 2026-08-31). The upload guidance still says
   180x180: that is the file to send, not the box. */
/* The slot's COLUMN (2026-09-10): the box, plus the line under it on a template that prints no
   photo. The width is the box's, so the note wraps under the picture rather than widening the
   header band and squeezing the contact values beside it. */
.docphoto-col{ flex:none; width:150px; }
.docphoto{ width:150px; height:150px; border-radius:12px; overflow:hidden; position:relative; cursor:pointer; }
.docphoto--empty{ border:2px dashed rgba(0,0,0,.18); background:#FAF6EE; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; color:var(--muted); }
.docphoto--empty:hover{ border-color:var(--sagedeep); color:var(--sageink); background:#F2F7F0; }
.docphoto__label{ font-size:.72rem; font-weight:600; }
.docphoto__size{ font-size:.6rem; color:var(--muted); }
/* "Elegant doesn't show a photo. Pick a photo template" — the sentence the 14 non-photo templates
   need, and the one legacy never showed (it took the upload on every template and let the photo
   disappear from the PDF unannounced). Quiet by design: it is a fact about the design, not a
   warning about a mistake. */
.docphoto__note{ margin-top:.5rem; font-size:.66rem; line-height:1.45; color:var(--muted); }
/* sageink, never sagedeep: DESIGN.md's contrast lock reserves sagedeep for fills and text at 18px
   and up, and this line is .66rem. The hover darkens to ink for the same reason. */
.docphoto__pick{ color:var(--sageink); font-weight:600; text-decoration:underline;
  text-underline-offset:2px; }
.docphoto__pick:hover{ color:var(--ink); }
/* Under 640 the header STACKS and the slot drops below the contact block at 120px: a 180px slot
   beside the name left the contact values ~115px at 390, which starved every one of them. The
   caption still states the real 180×180 requirement, so nothing about what to upload changes. */
@media (max-width:640px){
  .dochead-row{ flex-direction:column; align-items:stretch; gap:1rem; }
  .docphoto{ width:120px; height:120px; }
  .docphoto__label{ font-size:.66rem; }
  /* Stacked, the column no longer competes with the contact block, so the note gets a readable
     measure instead of the 120px the box drops to. */
  .docphoto-col{ width:auto; align-self:flex-start; }
  .docphoto__note{ max-width:300px; }
}
.docphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.docphoto__fill{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#C7D3C0,#9DB39A); color:#3a5a40; }
.docphoto__remove{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.docphoto:hover .docphoto__remove, .docphoto:focus-within .docphoto__remove{ opacity:1; }

/* ---- Editor: compact download options (match the Design panel's density) ---- */
.dlopt{ display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem; border-radius:12px; border:1px solid var(--line);
  background:#fff; cursor:pointer; text-align:left; transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s; min-height:52px; }
.dlopt:hover{ border-color:rgba(0,0,0,.18); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.dlopt__fmt{ font-weight:700; font-size:.9rem; line-height:1; }
.dlopt__sub{ font-size:.68rem; color:var(--muted); margin-top:.15rem; }
.dlopt--primary{ border-color:rgba(107,142,104,.4); background:#F2F7F0; }
.dlopt.is-locked{ opacity:.85; }
.dlopt__pro{ margin-left:auto; font-family:"Spline Sans Mono"; font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* ---- Editor: the format bar ------------------------------------------- */
/* THE editor's one formatting control (founder 2026-08-01): a bar attached to whichever rich field
   has FOCUS. It replaced the selection bubble, which could not host controls like alignment (they
   act on the block the caret is in and need no selection at all).
   It is an OVERLAY, never in the flow: a bar that pushed the canvas down on focus would reflow the
   page between mousedown and mouseup, the exact shape of a bug this editor already shipped once.
   It WRAPS rather than scrolling or hiding controls, so at 390 it becomes two rows and every
   control stays reachable; `max-width` keeps it inside the narrowest viewport we support.
   LIGHT chrome (founder 2026-08-03): the dark box read as overbearing against the warm canvas —
   the reference is legacy's Froala bar, light chrome on white. Same treatment as the app's other
   floating chrome (popovers, menus): paper background, hairline border, soft shadow. */
.fmtbar{ position:fixed; z-index:450; display:none; align-items:center; flex-wrap:wrap; gap:1px;
  max-width:min(calc(100vw - 16px), 600px); padding:3px; border-radius:11px;
  background:#FFFDF8; border:1px solid var(--line); box-shadow:0 8px 24px rgba(31,26,20,.14); }
.fmtbar.is-open{ display:flex; }
.fmtbar__btn{ min-width:32px; height:32px; padding:0 .45rem; border-radius:7px; color:#4A4237; background:transparent; cursor:pointer; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.fmtbar__btn:hover{ background:#F1EADD; color:var(--ink); }
.fmtbar__btn:disabled{ opacity:.35; cursor:default; }
.fmtbar__btn:disabled:hover{ background:transparent; color:#4A4237; }
/* What is switched ON where the caret is. A persistent bar can report state; a bubble could not. */
.fmtbar__btn[aria-pressed="true"]{ background:#EBE2D2; color:var(--ink); }
.fmtbar__btn:focus-visible{ outline:2px solid rgba(255,138,0,.7); outline-offset:-2px; }
.fmtbar__caret{ margin-left:1px; opacity:.55; }
/* Dropdown groups — legacy's Froala kept its density with these (align, font size, paragraph
   format all dropped down), and the table controls compress the old four-row tray into three. */
.fmtbar__menuwrap{ position:relative; display:inline-flex; }
.fmtbar__menu{ position:absolute; top:calc(100% + 4px); left:0; z-index:460; min-width:11rem;
  padding:4px; border-radius:10px; background:#FFFDF8; border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(31,26,20,.18); }
/* When the bar sits ABOVE the field (bottom-pinned — the common case), its menus open UPWARD:
   dropping down would cover the very table/text the menu is about to act on, undoing the
   grow-away-from-the-field rule the placement itself follows. */
.fmtbar--above .fmtbar__menu{ top:auto; bottom:calc(100% + 4px); }
.fmtbar__menuitem{ display:flex; width:100%; align-items:center; gap:.5rem; padding:.35rem .55rem;
  border-radius:7px; font-size:.78rem; font-weight:600; color:#4A4237; background:transparent;
  cursor:pointer; text-align:left; white-space:nowrap; }
.fmtbar__menuitem:hover, .fmtbar__menuitem:focus-visible{ background:#F1EADD; color:var(--ink); }
.fmtbar__menuitem[aria-pressed="true"]{ background:#EBE2D2; color:var(--ink); }
/* The table grid picker: legacy's drag-to-size insert, faithfully. Cells are buttons so touch and
   keyboard both work; the caption tracks the hovered size. */
.fmtbar__grid{ min-width:0; }
.fmtbar__gridcaption{ margin:0 0 4px; text-align:center; font-size:.72rem; font-weight:600; color:var(--muted); }
.fmtbar__gridrow{ display:flex; gap:2px; margin-top:2px; }
.fmtbar__gridcell{ width:16px; height:16px; border-radius:3px; border:1px solid var(--line); background:#fff; cursor:pointer; padding:0; }
.fmtbar__gridcell.is-lit{ background:#DCE9E2; border-color:#6B8E68; }
/* A link has to LOOK like one while editing. The canvas renders resume content faithfully, and most
   templates print links in their own color, so an anchor was indistinguishable from body text —
   there was no way to tell which words carried a link, let alone find one to change (founder
   2026-08-02). Editor chrome only: this class is on the editable field, never on the PDF/public
   render, so it changes nothing in the output. */
[data-rich] a{ color:#1F6F5C; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; cursor:text; }
.fmtbar__sep{ width:1px; height:18px; background:var(--line); margin:0 2px; }
/* A table cell the AI pass rewrote, named in the changes lens. Cell edits hide inside a grid, and
   nothing server-side judges whether one was a good idea (contract v1.6), so each is listed as
   was -> now where it can be read and undone. */
.lens-cells{ margin:.4rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.25rem; }
.lens-cells li{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:.72rem; line-height:1.45; color:var(--ink); }
.lens-cells__was{ color:var(--muted); text-decoration:line-through; }

.fmtbar__btn--wide{ gap:.25rem; font-size:.72rem; font-weight:600; letter-spacing:.02em; }
/* The FLOATING table bar (founder 2026-08-04 — legacy Froala's separate popup over the table,
   restored as its own small bar that follows the active cell). Same light chrome as .fmtbar; it
   never wraps — seven compact controls fit inside 390px. */
.tblbar{ flex-wrap:nowrap; max-width:calc(100vw - 16px); }
/* The column-resize handle: an overlay OUTSIDE the contenteditable (never stored, never focusable).
   A quiet line names the border on hover; the drag paints it solid — legacy's resizer applied
   widths on release, and so does this. */
.tblresize{ cursor:col-resize; touch-action:none; }
.tblresize::after{ content:""; position:absolute; left:4px; top:0; bottom:0; width:1px;
  background:rgba(0,0,0,.28); }
.tblresize.is-active::after{ width:2px; left:3.5px; background:var(--orangetext); }
/* The LEGACY tray: a second row inside the same bar, so the editor still has ONE formatting object
   rather than a bar plus a floating panel. Shown only to resumes that already carry this
   formatting, collapsed until asked for, and named to discourage new use. */
.fmtbar__tray{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  margin-top:3px; padding:.45rem .35rem .3rem; border-top:1px solid var(--line); }
.fmtbar__trayrow{ display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.72rem; }
.fmtbar__select{ height:26px; padding:0 .35rem; border-radius:6px; font-size:.72rem;
  color:var(--ink); background:#fff; border:1px solid var(--line); }
.fmtbar__select option{ color:#26201A; background:#fff; }
/* Said once, in the tray, rather than discovered after downloading a Word file. */
.fmtbar__note{ flex-basis:100%; margin:.1rem 0 0; font-size:.68rem; line-height:1.4; color:var(--muted); max-width:16rem; white-space:normal; }

/* ---- Editor: segmented control (Resume | Cover letter) ----------------- */
.seg{ display:inline-flex; padding:3px; border-radius:12px; background:#F1EADD; border:1px solid var(--line); }
.seg__btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:9px; font-size:.85rem; font-weight:600; color:var(--muted); background:transparent; cursor:pointer; min-height:36px; white-space:nowrap; }
.seg__btn:hover{ color:var(--ink); }
.seg__btn.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.10); }
/* Equal-width segments (founder 2026-07-31): sized to content, "Edit" was visibly narrower than
   "Preview & Download" and "Resume" than "Cover letter", so the control read as lopsided rather
   than as one switch.
   GRID, not flex: the buttons are `white-space:nowrap`, so under flex their default `min-width:auto`
   floors each one at its own text width and `flex:1` only ever splits the leftover slack (measured:
   Edit stayed 70px beside a 172px "Preview & Download"). Equal `1fr` grid tracks size to the WIDEST
   item's min-content instead, which is the intent. */
.seg--equal{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.seg--equal .seg__btn{ justify-content:center; }

/* ---- Editor: template carousel (Design panel & preview) --------------- */
/* A horizontal scroll-snap rail of thumbnails — conserves vertical space and
   scales as templates are added (replaces the full grid dump). */
.railbtn{ width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08); cursor:pointer; flex:none; }
.railbtn:hover{ border-color:rgba(0,0,0,.18); }
.railbtn[disabled]{ opacity:.4; cursor:default; }
/* The compact variant used inside the design panel (still grows to the touch floor on coarse). */
.railbtn--sm{ width:28px; height:28px; box-shadow:0 1px 3px rgba(0,0,0,.07); }

/* ---- Editor: compact color swatch row (visible at a glance) ----------- */
.swatch{ width:30px; height:30px; min-width:30px; border-radius:999px; border:1px solid rgba(0,0,0,.12); cursor:pointer; }
/* One selected-ring value for every colour chip (presets + the "template default" cleared one). */
.swatch[aria-checked="true"], .cnone[aria-checked="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--sagedeep); }

/* ---- RTL document support --------------------------------------------- */
/* The resume can be written right-to-left. The document mirrors: text aligns
   right, bullets sit on the right, item meta moves to the leading edge. The
   chrome stays LTR (English at launch) — only the .doc canvas flips. */
.doc[dir="rtl"]{ text-align:right; }
.doc[dir="rtl"] .doc__bullets{ padding-left:0; padding-right:1.15em; list-style-position:inside; }
.doc[dir="rtl"] .doc__item-head{ flex-direction:row-reverse; }
.doc[dir="rtl"] .doc__contact{ direction:rtl; }
.doc[dir="rtl"] .block.is-changed{ box-shadow:inset -3px 0 0 0 var(--orange); }
.doc[dir="rtl"] .block__bar{ right:auto; left:4px; }
.doc[dir="rtl"] .block__handle{ left:auto; right:-26px; }
/* A small inline control to flip a resume's direction (lives in the toolbar). */
.dirbtn{ display:inline-flex; align-items:center; gap:.35rem; font-family:"Spline Sans Mono"; font-size:.72rem; font-weight:600; color:var(--muted); border:1px solid var(--line); background:#fff; border-radius:8px; padding:.3rem .55rem; cursor:pointer; min-height:34px; }
.dirbtn:hover{ color:var(--ink); border-color:rgba(0,0,0,.18); }
.dirbtn.is-on{ color:#41684E; background:#EDF4EC; border-color:rgba(107,142,104,.3); }

/* ============================================================================
   Job loop — Mabon-aligned chrome (rendered in the v10 Sunlit system).
   The assistant is unnamed in the UI (honesty rule): "Refine", not a brand.
   ============================================================================ */

/* Left "Searches" rail — each saved/always-on search is a clean card you can
   switch to, with its always-on state and status laid out with room to breathe. */
.searchcard{ display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem 1rem; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
.searchcard:hover{ border-color:rgba(0,0,0,.16); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.searchcard.is-active{ background:#F2F7F0; border-color:rgba(107,142,104,.4); box-shadow:0 6px 16px rgba(107,142,104,.10); }
.searchcard__title{ font-weight:700; font-size:.95rem; letter-spacing:-.01em; }
.searchcard.is-active .searchcard__title{ color:#2f4a37; }
.searchcard__meta{ font-family:"Spline Sans Mono"; font-size:.7rem; color:var(--muted); margin-top:.2rem; }
.searchcard__foot{ margin-top:.7rem; padding-top:.6rem; border-top:1px solid rgba(0,0,0,.07); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.searchcard.is-active .searchcard__foot{ border-top-color:rgba(107,142,104,.2); }
/* the always-on state, read at a glance */
.aon{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:600; color:var(--muted); }
.aon.is-on{ color:#41684E; }
.aon__label{ font-family:"Spline Sans Mono"; letter-spacing:.04em; text-transform:uppercase; font-size:.62rem; }

/* Agent debrief — the one-line "I scanned N jobs…" status above results. */
.debrief{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; color:var(--ink); }
.debrief__dot{ margin-top:.15rem; }

/* Match-reason list (job card "Why this matches" — ✓ fits, – gap). */
.whylist{ margin-top:.5rem; display:flex; flex-direction:column; gap:.3rem; }
.why{ display:flex; align-items:flex-start; gap:.5rem; font-size:.9rem; line-height:1.45; color:var(--ink); }
.why__i{ margin-top:.12rem; flex:none; }
.why--yes .why__i{ color:#6B8E68; }
.why--no{ color:var(--muted); }
/* A reason the engine did not classify. Neutral on purpose: defaulting it to a fit would turn an
   unlabelled note into a positive claim (2026-08-19). */
.why--note{ color:var(--ink); }
.why--note .why__i{ color:#8A7E6E; }
.why--no .why__i{ color:#8A7E6E; } /* ~3.4:1 on white — meaningful-graphic minimum (was #B9AE9E ≈2.2:1) */

/* Chat-to-refine affordance (unnamed). Floating trigger + panel shell. */
.chatfab{ position:fixed; right:18px; bottom:18px; z-index:120; display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; font-weight:600; font-size:.9rem;
  background:#fff; color:var(--ink); border:1px solid rgba(107,142,104,.3); box-shadow:0 10px 26px rgba(0,0,0,.14); cursor:pointer; }
.chatfab:hover{ border-color:var(--sagedeep); transform:translateY(-2px); transition:transform .25s var(--ease); }
.chatbubble{ background:#EDF4EC; color:#2f4a37; border-radius:14px 14px 14px 4px; padding:.6rem .8rem; }
.chatbubble--me{ background:#FFF8EE; color:#7A4A12; border-radius:14px 14px 4px 14px; }

/* Search narration — the stepped timeline (the searching / refining states). Reuses the /start beat
   language: sage dots for done beats, the shared .workdot for the live one, the shared meter.
   Ported from the mockup's theme.css 2026-08-19 with J1; without it the narration renders as a
   plain text stack with no dots and no connector. */
.nfeed{ display:flex; flex-direction:column; }
/* The job-search feed rides a FIXED pane (founder 2026-08-24: the box resized as lines arrived and
   wrapped, which was jarring; gompa's NarrationFeed is the named reference). Bottom-anchored so a
   new line pushes the oldest up and out of the top, overflow hidden, and a fade mask so the exiting
   line dims instead of being cut mid-glyph. */
.nfeed--pane{ height:15rem; overflow:hidden; }
/* Fills from the TOP (founder 2026-09-06): the first line used to sit at the bottom of the empty
   pane with 12rem of blank card above it. Once the lines outgrow the pane the LIST slides up
   (a transform, timed by the clock, so it lands even while the tab is in the background; a smooth
   scroll is frame-driven and stayed at 0 there) to keep the newest in view, and only THEN the fade
   mask, so the oldest visible line dims out instead of being cut mid-glyph and the first line is
   never faded while it is alone. */
.nfeed--pane .nfeed{ transition:transform .4s var(--ease); will-change:transform; }
.nfeed--pane.is-overflowing{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40px);
  mask-image:linear-gradient(to bottom, transparent, #000 40px); }
/* Each new line arrives rather than pops (gompa's NarrationFeed entry: fade + a 4px slide). */
.nbeat.is-live{ animation:nbeat-in .4s var(--ease) both; }
@keyframes nbeat-in{ from{ opacity:0; transform:translateX(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .nfeed--pane .nfeed{ transition:none; }
  .nbeat.is-live{ animation:none; }
}
.nbeat{ position:relative; display:flex; gap:.9rem; padding:0 0 1.35rem 0; }
.nbeat::before{ content:""; position:absolute; left:5px; top:18px; bottom:2px; width:2px; border-radius:2px; background:#E7E1D5; }
.nbeat:last-child::before{ display:none; }
.nbeat__dot{ position:relative; z-index:1; width:12px; height:12px; border-radius:999px; flex:none; margin-top:5px; }
.nbeat__dot:not(.workdot){ background:var(--sagedeep); }
.nbeat__dot.workdot{ width:12px; height:12px; } /* the live dot IS the shared .workdot recipe, sized up */
.nbeat.is-past{ opacity:.45; }
.nbeat__txt{ font-size:.95rem; line-height:1.5; padding-top:0; min-width:0; }

/* A job posting's body (JobDescription in jobs/markdown.tsx): the posting's own headings, lists
   (the PUBLIC board renders the same kind of content through `.prose-job` in application.tailwind.css,
   over sanitized feed HTML rather than markdown; keep the two recipes' shared numbers in step),
   and paragraphs at the detail page's reading size. Bullets sit inside the text column. */
.jobdesc{ font-size:.95rem; line-height:1.6; color:rgba(38,32,26,.9); } /* text-ink/90 */
.jobdesc > * + *{ margin-top:.75rem; }
.jobdesc h3, .jobdesc h4{ font-weight:700; margin-top:1.1rem; }
.jobdesc h3{ font-size:1rem; }
.jobdesc h4{ font-size:.95rem; }
.jobdesc ul{ list-style:disc; padding-left:1.25rem; }
.jobdesc ol{ list-style:decimal; padding-left:1.25rem; }
.jobdesc li + li{ margin-top:.3rem; }

/* Country/region multi-select chip (search form) */
.selchip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:8px; font-size:.8rem; font-weight:600; background:#EDF4EC; color:#41684E; }
.selchip button{ color:#41684E; opacity:.7; }
.selchip button:hover{ opacity:1; }

/* Work-preference / segmented pills used in the search form (Remote/On-site/…) */
.optpill{ flex:1; text-align:center; padding:.6rem .5rem; border-radius:11px; font-weight:600; font-size:.92rem; color:var(--muted); background:#fff; border:1px solid var(--line); cursor:pointer; min-height:44px; }
.optpill:hover{ background:rgba(0,0,0,.03); color:var(--ink); }
.optpill.is-active{ background:#EDF4EC; color:#41684E; border-color:rgba(107,142,104,.4); } /* selection = sage; orange stays reserved for CTAs */

/* Lightweight dropdown menu shell (dashboard Preview/Download menus) */
.dropmenu{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.16); padding:5px; }
.dropmenu a, .dropmenu button{ display:flex; align-items:center; gap:.55rem; width:100%; text-align:left; padding:.5rem .65rem; border-radius:8px; font-size:.9rem; color:var(--ink); min-height:40px; }
.dropmenu a:hover, .dropmenu button:hover{ background:rgba(0,0,0,.04); }
/* .dropmenu's display:flex loads after Tailwind and would otherwise beat
   .hidden{display:none} at equal specificity — making plan gating a no-op.
   This keeps Tailwind's hidden authoritative inside menus (paywall integrity). */
.dropmenu a.hidden, .dropmenu button.hidden{ display:none !important; }

/* ---- Preview & Download mode (v4.1 ruling 2026-07-20, surfaces §7.2 #7) ----
   The design bar sits on the artifact it changes; the Download popover anchors on the
   artifact ≥sm and becomes a bottom sheet <sm — one element, CSS owns both layouts, so
   crossing the breakpoint while open just re-lays out. */
.pdbar{ background:#F1EADD; border-bottom:1px solid var(--line); }

/* The panel itself (founder review 2026-07-21 #2 — legacy's design card as the reference): one
   white card on the cream band holding both columns, so the controls read as a deliberate tool
   shelf instead of loose chrome. Each column opens with a mono kicker on a shared baseline. */
.pdcard{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
/* The panel's micro-label — column headings AND the settings rows. Deliberately NOT `.kick`: that
   one is the marketing/section kicker (sageink green, .22em at .72rem); this is a quiet control
   label that must recede behind the control it names. */
.dkick{ font-family:"Spline Sans Mono"; font-size:10px; font-weight:600; letter-spacing:.06em;
        text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* Template chooser: large, clearly-readable screenshots. The tile matches the artwork's own
   500×550 ratio, so `cover` never crops it (a 3/4 tile shaved the margins off every template and
   was the "blurry vs legacy" complaint); the name rides a slim solid bar, never a gradient wash
   over the art. Arrow paging, never a raw scrollbar. */
/* The photo-CV filter on the strip's label row — legacy's "Show only Photo CV templates" checkbox.
   A native checkbox (the affordance people know) tinted with the sage accent. */
.dcheck{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.dcheck input{ width:13px; height:13px; margin:0; accent-color:var(--sagedeep); cursor:pointer; }

.tchoose{ display:flex; align-items:center; gap:6px; }
/* The strip's height is PINNED by the TILE, which is where the v5 mockup has always had it
   (`.tchoose__rail .tile{ width:132px; aspect-ratio:10/11 }`). The app had drifted: the ratio sat on
   the <img>, so the row's height was a function of the ARTWORK — a screenshot still arriving, or one
   that never arrives — rather than of the layout, and the row changed height while paging and
   re-centred its thumbnails inside itself (founder, staging walk 2026-09-05). `align-items:flex-start`
   is the other half of the pin: under the default stretch a tile takes its height FROM the row, which
   puts the ratio back at the mercy of whatever else is in it. */
.tchoose__rail{ display:flex; align-items:flex-start; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
                scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:3px; flex:1; min-width:0; }
.tchoose__rail::-webkit-scrollbar{ display:none; }
.ttile{ position:relative; flex:0 0 132px; width:132px; aspect-ratio:10/11; border-radius:8px; border:1px solid var(--line);
        overflow:hidden; cursor:pointer; scroll-snap-align:start; background:#fff; line-height:0;
        transition:box-shadow .2s var(--ease), border-color .2s var(--ease); }
.ttile:hover{ box-shadow:0 6px 16px rgba(0,0,0,.10); }
.ttile[aria-pressed="true"], .ttile.is-pending{ border-color:var(--sagedeep); box-shadow:0 0 0 2px rgba(107,142,104,.55); }
/* Fills the tile the ratio now defines, instead of defining it. `cover` still never crops: the art
   is 500x550, the same 10:11. */
.ttile__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.ttile__cap{ position:absolute; left:0; right:0; bottom:0; padding:2px 5px 3px; font-size:10px;
             line-height:1.2; font-weight:600; color:#fff; text-align:center;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(0,0,0,.55); }
.ttile__lock{ position:absolute; top:5px; right:5px; color:var(--ink); background:rgba(255,255,255,.92);
              border-radius:6px; padding:2px; line-height:0; }
/* The picked-but-not-yet-rendered tile (founder 2026-08-12) — it works visibly over its own artwork
   while the server renders the switch. It shares the selected ring above, because a tile is only
   ever pending while it is also the active one. Rationale: DesignBar.tsx / DELIBERATE-DECISIONS. */
.ttile.is-pending .ttile__img{ opacity:.35; }
.ttile__busy{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.3rem;
              font-family:"Spline Sans Mono"; font-size:9.5px; line-height:1; color:var(--sageink);
              background:rgba(255,255,255,.72); }

/* THE RESULT-BAR FOLD (founder, 2026-09-07: "a user might not realize it's tucked in there").
   The bar is the ONE time the app explains what an AI pass did, and it used to be cleared between
   two frames on the member's first scroll — so the explanation did not move anywhere, it simply
   stopped existing. It now collapses INTO the quiet "Last AI edit" chip, and the chip lights up as
   it lands, so the eye is handed from one control to the other.

   HEIGHT, without knowing the height: `1fr -> 0fr` on a one-row grid. The bar is one sentence, or a
   sentence plus a structure note plus a table note, so there is no constant to collapse to; the
   `overflow:hidden` that makes it work is scoped to the folding state, because this wrapper also
   carries the OTHER bars ImproveBars can return in its place (the working strip, the two plan
   bars), and none of them may be clipped while resting.
   Two durations are mirrored in EditorShell.tsx and must move together with these: `.32s` here is
   FOLD_MS, and the 1.8s of `lastpass-arrive` below is CHIP_ARRIVAL_MS. */
.barfold{ display:grid; grid-template-rows:1fr; }
.barfold.is-folding{ grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.barfold.is-folding > *{ min-height:0; overflow:hidden; }
/* TRAVEL: up and to the left, which is where the chip is (it sits beside the save status at the
   start of the toolbar row above). Scale rather than a fixed distance, so the gesture reads the
   same at 1440 and at 360, where the two are far closer together. */
#result-bar{ transform-origin:left top; }
#result-bar.is-folding{ opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
                        transition:opacity .22s var(--ease), transform .28s var(--ease); }
/* The chip catching it: a brief ring in the same sage the selected template tile wears, so the
   arrival reads as "this now holds it" rather than as a warning. */
/* Matches `.btn-sm`'s own radius, so the arrival ring hugs the control instead of cutting its
   corners: the ring is drawn on this wrapper, which sits directly on the button. */
.lastpass{ border-radius:13px; }
.lastpass.is-arriving{ animation:lastpass-arrive 1.8s var(--ease) both; }
@keyframes lastpass-arrive{
  0%   { box-shadow:0 0 0 0 rgba(107,142,104,0); }
  12%  { box-shadow:0 0 0 3px rgba(107,142,104,.45); }
  70%  { box-shadow:0 0 0 3px rgba(107,142,104,.45); }
  100% { box-shadow:0 0 0 0 rgba(107,142,104,0); }
}
/* Reduced motion keeps both STATES and drops the travel between them. The bar still leaves and the
   chip is still marked as the place it went; nothing slides, scales or pulses. The JS timing is
   untouched, so the pass clears at the same moment either way. */
@media (prefers-reduced-motion: reduce){
  .barfold.is-folding{ transition:none; }
  #result-bar.is-folding{ transition:none; transform:none; }
  .lastpass.is-arriving{ animation:none; box-shadow:0 0 0 2px rgba(107,142,104,.45); }
}

/* Settings — legacy's PDF-settings box, in Sunlit: label left (`.dkick`), control right, every
   control the same width so the column reads as one aligned stack (Font / Color / Spacing / Page). */
.dset{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:7px 10px; align-items:center; }
.dset .input{ width:100%; }
.dset .seg{ width:100%; }
.dset .seg__btn{ flex:1 1 0; justify-content:center; }
/* The collapsible page-settings disclosure (legacy's "Page Settings" link). */
.dset__more{ display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:600;
             color:var(--ink); cursor:pointer; }
.dset__more:hover{ opacity:.7; }

/* Accent colour: one row of circles — template default (a cleared swatch), the deep presets, then
   a native picker for anything else. Sized so all eight fit the settings column without wrapping. */
.crow{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; row-gap:5px; }
.crow .swatch{ width:22px; height:22px; min-width:22px; }
.cpick{ position:relative; width:22px; height:22px; border-radius:999px; overflow:hidden; cursor:pointer;
        border:1px dashed rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center;
        color:var(--muted); flex:none; }
.cpick.is-set{ border-style:solid; border-color:var(--sagedeep); box-shadow:0 0 0 2px rgba(107,142,104,.4); }
.cpick input[type="color"]{ position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
        border:0; padding:0; margin:0; cursor:pointer; opacity:0; }
.cnone{ position:relative; width:22px; height:22px; min-width:22px; border-radius:999px; flex:none;
        border:1px solid rgba(0,0,0,.14); background:#fff; cursor:pointer; }
.cnone::after{ content:""; position:absolute; inset:1px; border-radius:999px;
               background:linear-gradient(to top right, transparent calc(50% - .8px),
                          rgba(0,0,0,.32) 50%, transparent calc(50% + .8px)); }

.dlwrap{ position:relative; }
.dlpop, .dlscrim{ display:none; }
.dlwrap.is-open .dlpop{ display:block; }
.dlpop{ background:#fff; border:1px solid var(--line); border-radius:16px;
        box-shadow:0 24px 60px rgba(0,0,0,.18); width:min(360px, calc(100vw - 2rem)); }
/* The sheet form runs to `md`, the same band as the editor's phone bottom bar (2026-09-12): the
   bar's Download button toggles THIS popover, and between 640 and 767 the anchored form opened
   under a header the member had scrolled off screen, so a tap did nothing visible. */
@media (min-width:768px){
  .dlpop{ position:absolute; right:0; top:calc(100% + 8px); z-index:50; }
}
@media (max-width:767.98px){
  .dlpop{ position:fixed; left:0; right:0; bottom:0; width:auto; z-index:410;
          border-radius:18px 18px 0 0; max-height:82vh; overflow-y:auto; }
  .dlwrap.is-open .dlscrim{ display:block; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.3); }
}

/* Popover→bottom-sheet swap under the sm breakpoint (the editor add-section menu;
   ported from resume-editor-v2.html's screen-local rule). The popover's inline
   top/left only get set at >=640px, so the mobile pin needs the !importants. */
@media (max-width:639px){
  .sheet-on-mobile{ left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
                    width:auto !important; max-width:none !important; border-radius:18px 18px 0 0; }
}

/* Quiet inline icon buttons (heading-row section delete, the toolbar rename pencil): muted at rest,
   intent color on hover, and a real hit area on touch via the coarse-pointer floor below. */
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:4px; color:var(--muted); }
.iconbtn:hover{ color:var(--ink); }
.iconbtn--danger:hover{ color:#B42318; } /* the one danger hover — same as .block__btn--del */

/* ---- Touch-target floor (>=44px on coarse pointers) — WCAG / CLAUDE.md ---- */
@media (pointer:coarse){
  .btn-sm{ min-height:44px; }
  .iconbtn{ width:40px; height:40px; min-width:40px; }
  .block__btn{ width:40px; height:40px; min-width:40px; }
  .block__bar{ gap:4px; padding:3px; }
  .swatch{ width:40px; height:40px; min-width:40px; }
  /* The design-settings circles grow to the same 40px the rest of the app's swatches use on touch
     (they wrap to a second line in the mobile sheet rather than shrinking below the floor). The
     `.crow .swatch` desktop rule outranks the plain `.swatch` bump above, so restate it here. */
  .crow .swatch, .cnone, .cpick{ width:40px; height:40px; min-width:40px; }
  .dcheck{ min-height:40px; }
  .dcheck input{ width:18px; height:18px; }
  .dset .seg__btn{ min-height:40px; }
  .dset .input{ min-height:40px; }
  .dset__more{ min-height:40px; }
  .dirbtn{ min-height:44px; }
  .railbtn{ width:42px; height:42px; }
  .railbtn--sm{ width:40px; height:40px; }
  .selchip button{ padding:10px; margin:-10px -6px -10px 2px; }   /* small × glyph, big hit area */
  .addline{ min-height:44px; }
  .taplink{ min-height:44px; padding-top:.4rem; padding-bottom:.4rem; }
  /* Added 2026-08-18 with the dashboard search + the two close buttons. DESIGN.md's ">=44px touch
     targets" is the rule; this block is where the app keeps it. The search field's own height is
     the one that matters most on a phone, and both × glyphs are 14px, so they need the hit area
     rather than the ink. */
  .dashsearch input{ min-height:44px; }
  .dashsearch button{ width:40px; height:40px; }
  .hintpill__x{ width:40px; height:40px; }
  .coachclose{ width:40px; height:40px; }
}
/* An inline text-action link that still meets the touch floor (privacy/cover-letter
   row actions, "Edit search", "Refine search"). Visual size unchanged on desktop. */
.taplink{ display:inline-flex; align-items:center; }

/* Improve-with-AI working treatment (2026-07-06 UX ruling): the run must be unmistakable, honestly —
   a soft sweep over the blocks being improved; staged copy lives in the toolbar strip. No fabricated
   progress. `.doc--improving` marks a whole-doc run; `.block.is-improving` a single block run. */
.block.is-improving, .doc--improving .block{ position:relative; }
.block.is-improving::after, .doc--improving .block::after{
  content:""; position:absolute; inset:-2px -6px; border-radius:10px; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,138,0,.13) 50%, transparent 70%);
  background-size:220% 100%; animation:improvesweep 1.8s linear infinite; }
@keyframes improvesweep{ from{ background-position:130% 0 } to{ background-position:-130% 0 } }
@media (prefers-reduced-motion:reduce){
  .block.is-improving::after, .doc--improving .block::after{ animation:none; background:rgba(255,138,0,.08); }
}

/* The editor's APPLICATION PANEL (the right column on a job version) and its collapsed edge tab.
   Ported from the mockup's own stylesheet 2026-08-19 — the classes are the mockup's, unchanged. */
/* ONE scrollbar, the page's (founder, 2026-08-22). An inner scroller was added earlier the same day
   to reach the sections a tall panel pushed below the fold; dropping the talking-points list made
   the panel short enough that the cap only bought a second scrollbar. */
.appanel{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.appanel__hd{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
              padding:.8rem 1rem; border-bottom:1px solid var(--line); background:#FBF8F2; }
.appanel__sec{ padding:.9rem 1rem; }
.appanel__sec + .appanel__sec{ border-top:1px solid var(--line); }
.appanel__kick{ font-family:"Spline Sans Mono",monospace; font-size:.6rem; font-weight:500;
                letter-spacing:.14em; text-transform:uppercase; color:#41684E; margin-bottom:.5rem; }
/* collapsed: a slim edge tab keeps the panel one click away without stealing canvas width */
.apedge{ position:sticky; top:184px; display:flex; }
.apedge button{ writing-mode:vertical-rl; display:inline-flex; align-items:center; gap:.45rem;
                padding:.85rem .45rem; border-radius:10px; background:#fff; border:1px solid var(--line);
                font-size:.74rem; font-weight:700; color:var(--sageink); box-shadow:0 4px 12px rgba(0,0,0,.06); }
.apedge button:hover{ border-color:var(--sagedeep); background:#F2F7F0; }

/* The rail's "N new" count (added 2026-08-19 with always-on delivery). A `.badge` in the sage the
   rest of the New machinery uses, so the dot on a card and the count on its search read as one
   thing rather than two unrelated marks. */
.badge--new{ background:#EDF4EC; border-color:rgba(107,142,104,.32); color:#41684E; font-weight:600; }

/* THE TWO NEW OFFERINGS on a plan card (founder ask 2026-09-08, revised the same day). The first
   pass drew a hairline rail down their left edge and the founder read it as not carrying: "We are
   trying to highlight Jobs and Find Warm Intros using a line next to them in the pricing table. I
   don't think that's helping. May be a small box around them, or perhaps a slightly different
   background color shade?" So it is both, a box and a shade.

   THE FILL IS TRANSLUCENT, and that is the whole trick. These same two groups render on two
   different grounds: white (`.card`, the Free and Professional columns) and the warm `--copilot`
   #FFF8EE of the Executive column. A FIXED cool tint like `--sagetint` is mixed for white surfaces
   and goes muddy over the warm one, which is the same problem `--sagetint-warm` exists for on the
   cream ground (DESIGN.md). At 7% the sage deepens whatever is behind it and keeps that ground's
   own warmth, so one rule is correct on all three columns.

   Kept to a 14px radius against the card's own 20px: a panel nested inside a rounded box reads as
   nested when its corners are tighter, and as a misaligned duplicate when they match. */
.offering--new{ background:rgba(107,142,104,.07); border:1px solid rgba(107,142,104,.28);
                border-radius:14px; padding:.7rem .8rem .75rem; }

/* Warm-intro CAREER / EDUCATION timelines (added 2026-08-19 with the intros flow). `.tl__shared`
   tints the row the member and the person actually share, which is the whole reason the timeline is
   on the card: it shows WHY this is a warm path, rather than asserting that it is one. Ported from
   the mockup's own stylesheet, classes unchanged. */
.tl{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.25rem .9rem; font-size:.86rem; }
@media (min-width:640px){ .tl{ grid-template-columns:6.5rem minmax(0,1fr); } }
.tl__yr{ color:var(--muted); font-family:"Spline Sans Mono"; font-size:.78rem; white-space:nowrap; }
.tl__row{ display:contents; }
.tl__shared > *{ background:#EDF4EC; }
.tl__shared .tl__yr{ color:#41684E; }