/* A warm, bookish site inspired by paper, marker ink, and playful labels.
   The converter and its stateful controls keep their existing markup and IDs. */
body.site-refresh {
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ink-900: #2b1e18;
  --ink-800: #3d2a20;
  --ink-700: #544239;
  --ink-600: #66534a;
  --ink-500: #76665b;
  --ink-400: #9a897b;
  --ink-300: #b7aa9e;
  --ink-200: #d7c9bc;
  --ink-100: #ebe1d5;
  --paper-0: #ffffff;
  --paper-50: #ffffff;
  --paper-100: #ffffff;
  --paper-200: #f1e4d6;
  --paper-300: #e9d9c8;
  --spine-700: #b54816;
  --spine-600: #c9501b;
  --spine-500: #e8662b;
  --spine-400: #f48653;
  --spine-200: #f8c8ad;
  --spine-100: #fbe2d0;
  --spine-50: #fff0e5;
  --tint-sage: #f5eadc;
  --tint-sage-deep: #af612e;
  --tint-sky: #e9eff0;
  --tint-sky-deep: #376d77;
  --tint-amber: #f9ead0;
  --tint-amber-deep: #a66218;
  --tint-lilac: #eee6ee;
  --tint-lilac-deep: #785e83;
  --tint-blush: #f7e4df;
  --tint-blush-deep: #b35642;
  --section-y-tight: 88px;
  --container-max: 1200px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --shadow-s: 0 2px 8px rgb(69 36 17 / 5%);
  --shadow-m: 0 14px 36px rgb(69 36 17 / 7%);
  --shadow-l: 0 18px 46px rgb(69 36 17 / 10%);
  --shadow-page: 0 20px 48px rgb(69 36 17 / 14%);
  --veil-bg: #ffffff;
  --action-primary-bg: #2b1e18;
  --action-primary-bg-hover: #4c3023;
  --action-primary-fg: #fffdfa;
  --action-accent-bg: #d7571f;
  --action-accent-bg-hover: #b94818;
  --action-accent-fg: #fffdfa;
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-inverse: var(--paper-50);
  --text-link: var(--spine-600);
  --text-link-hover: var(--spine-700);
  --surface-page: var(--paper-50);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-100);
  --surface-raised: var(--paper-0);
  --surface-inverse: var(--ink-900);
  --surface-accent: var(--spine-50);
  --border-hairline: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--spine-500);
  --focus-ring: 0 0 0 3px rgb(232 102 43 / 28%);
  --footer-ink: #3b2419;
  background: var(--paper-50);
}

body.site-refresh h1,
body.site-refresh h2,
body.site-refresh h3,
body.site-refresh h4 {
  font-family: var(--font-display);
}
body.site-refresh h1,
body.site-refresh h2 {
  font-weight: 600;
  letter-spacing: -.05em;
}
body.site-refresh .c2e-eyebrow {
  color: var(--spine-700);
  font-size: 12px;
  letter-spacing: .14em;
}
body.site-refresh .site-head {
  border-color: #eeeeec;
  background: var(--veil-bg);
}
body.site-refresh .site-head-row {
  height: 76px;
}
body.site-refresh .wordmark {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -.055em;
}
body.site-refresh .wordmark em {
  color: var(--spine-500);
}
body.site-refresh .site-nav a {
  font-size: 17px;
  font-weight: 500;
}
body.site-refresh .c2e-btn-secondary,
body.site-refresh .c2e-btn-accent,
body.site-refresh .c2e-btn-primary {
  border-radius: 15px;
}
body.site-refresh .desktop-nav-btn {
  height: 38px;
  padding-inline: 16px;
  font-size: 14px;
  border: 1.5px solid var(--ink-800);
  box-shadow: 2px 3px 0 var(--ink-800);
  background: var(--paper-0);
}

body.site-refresh .hero {
  overflow: hidden;
  padding: 72px 0 96px;
  background: #ffffff;
}
body.site-refresh .hero-inner {
  display: block;
  text-align: left;
}
.hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 5%;
  min-height: 560px;
  margin-bottom: 46px;
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding-block: 25px;
}
body.site-refresh .hero-copy .c2e-eyebrow {
  padding: 9px 15px;
  border: 1px solid var(--spine-200);
  border-radius: 999px;
  background: var(--spine-50);
}
body.site-refresh .hero-title {
  max-width: 690px;
  margin: 22px 0 18px;
  color: var(--ink-900);
  font-size: clamp(56px, 6.6vw, 91px);
  line-height: .99;
}
body.site-refresh .hero-title span {
  color: var(--spine-500);
  text-decoration: underline;
  text-decoration-thickness: .055em;
  text-decoration-color: #f3a178;
  text-underline-offset: .11em;
}
body.site-refresh .hero-lede {
  max-width: 480px;
  color: var(--ink-600);
  font-size: 19px;
  line-height: 1.55;
}
.hero-jump {
  display: inline-flex;
  align-items: center;
  min-height: 53px;
  margin-top: 29px;
  padding: 0 22px;
  border: 1.5px solid var(--ink-900);
  border-radius: 17px;
  background: var(--ink-900);
  box-shadow: 4px 5px 0 #e9b08e;
  color: var(--paper-0);
  font-weight: 700;
  text-decoration: none;
}
.hero-jump:hover {
  color: var(--paper-0);
  background: var(--ink-800);
  transform: translateY(-2px);
}
.hero-note {
  display: block;
  margin-top: 17px;
  color: var(--spine-700);
  font-family: "Newsreader", Georgia, serif;
  font-size: 19px;
  font-style: italic;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.hero-art {
  position: relative;
  height: 545px;
  min-width: 0;
  isolation: isolate;
}
.hero-art::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 45px 10px 35px 20px;
  border-radius: 48% 52% 46% 54%;
  background: #f6e5d2;
  transform: rotate(-9deg);
}
.hero-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 16%;
  right: 7%;
  bottom: 27px;
  height: 35px;
  border-radius: 50%;
  background: rgb(65 30 15 / 12%);
  filter: blur(17px);
}
.hero-reader {
  position: absolute;
  top: 43px;
  left: 22%;
  width: 330px;
  height: 438px;
  border: 2px solid #171715;
  border-radius: 24px;
  background: #30312e;
  box-shadow: 6px 8px 0 #ead8c4, 8px 10px 0 #171715, 18px 27px 36px rgb(65 30 15 / 15%);
  transform: rotate(5deg);
}
.hero-reader-camera {
  position: absolute;
  top: 10px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #92928d;
}
.hero-reader-screen {
  position: absolute;
  inset: 24px 18px 43px;
  display: flex;
  flex-direction: column;
  padding: 31px 25px 15px;
  border-radius: 8px;
  background: #e9e8df;
  color: #32322e;
}
.hero-reader-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}
.hero-reader-title {
  margin-top: 18px;
  font-family: "Newsreader", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.hero-reader-rule { height: 1px; margin: 18px 0; background: #c9c8bf; }
.hero-reader-copy {
  display: block;
  height: 48px;
  margin-bottom: 8px;
  background: repeating-linear-gradient(to bottom, transparent 0 10px, rgb(65 65 59 / 25%) 10px 11px);
}
.hero-reader-copy-one { width: 100%; }
.hero-reader-copy-two { width: 93%; }
.hero-reader-copy-three { width: 74%; }
.hero-reader-page {
  margin-top: auto;
  color: #5c5c55;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.hero-reader-page span { margin-inline: 3px; font-weight: 400; }
.hero-reader-chin {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 37px;
  display: grid;
  place-items: center;
}
.hero-reader-chin span {
  width: 24px;
  height: 4px;
  border-radius: 4px;
  background: #777872;
}
.hero-art-caption {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 0;
  color: var(--spine-600);
  font-family: "Newsreader", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  transform: rotate(7deg);
}
.hero-art-spark {
  position: absolute;
  z-index: 3;
  color: var(--spine-500);
  line-height: 1;
}
.hero-art-spark-one { top: 16px; left: 18%; font-size: 57px; transform: rotate(-18deg); }
.hero-art-spark-two { right: 6%; bottom: 64px; font-size: 43px; transform: rotate(17deg); }
.hero-art-tag {
  position: absolute;
  z-index: 3;
  bottom: 57px;
  left: 5%;
  display: flex;
  gap: 18px;
  padding: 12px 15px;
  border: 1px solid var(--ink-900);
  border-radius: 6px;
  background: var(--paper-0);
  box-shadow: 3px 4px 0 var(--ink-900);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  transform: rotate(-7deg);
}
.hero-art-tag span { color: var(--spine-500); font-size: 16px; line-height: 10px; }

body.site-refresh .tool-card {
  position: relative;
  max-width: none;
  margin-top: 0;
  padding: 40px;
  border: 1.5px solid var(--ink-200);
  border-radius: 25px;
  box-shadow: 7px 9px 0 #eadac8;
  background: var(--paper-0);
}
body.site-refresh .tool-card::before {
  content: "MAKE YOUR BOOK";
  position: absolute;
  top: -17px;
  left: 30px;
  padding: 8px 15px;
  border: 1px solid var(--ink-800);
  border-radius: 6px;
  background: #f4b476;
  color: #3d2a20;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  transform: rotate(-3deg);
}
body.site-refresh .dropzone {
  min-height: 214px;
  border: 1.5px dashed #c98d6b;
  border-radius: 18px;
  background: #fff7ef;
}
body.site-refresh .dropzone:hover,
body.site-refresh .dropzone:focus-visible,
body.site-refresh .dropzone.dragover {
  background: #ffefe1;
}
body.site-refresh .dz-icon { color: var(--spine-500); width: 36px; height: 36px; }
body.site-refresh .dz-title { font-family: var(--font-display); font-weight: 750; }
body.site-refresh .model-options { border-radius: 16px; }
body.site-refresh .model-option { border-radius: 12px; }
body.site-refresh .convert-btn { box-shadow: 3px 4px 0 #d9b79f; font-weight: 750; }
body.site-refresh .convert-btn:disabled { box-shadow: none; }

body.site-refresh .band,
body.site-refresh .explainer,
body.site-refresh .desktop-offer-section {
  padding-block: 88px;
}
body.site-refresh .band-head { margin-bottom: 38px; }
body.site-refresh .band-title {
  max-width: 760px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
}
body.site-refresh .band-sunken,
body.site-refresh .explainer,
body.site-refresh .desktop-offer-section { background: #ffffff; }
body.site-refresh .c2e-card {
  border: 1px solid var(--ink-200);
  border-radius: 19px;
  box-shadow: 3px 4px 0 rgb(91 54 35 / 9%);
}
body.site-refresh .c2e-card-tint {
  min-height: 245px;
  align-content: start;
  padding: 33px;
}
body.site-refresh .c2e-card-tint h3 { font-size: 21px; letter-spacing: -.025em; }
body.site-refresh .c2e-card-tint p { font-size: 15px; }
body.site-refresh .benefit-icon { width: 32px; height: 32px; margin-bottom: 11px; }
body.site-refresh .persona-icon { width: 72px; height: 72px; border: 1px solid var(--ink-200); }
body.site-refresh .comparison-tabs { border-radius: 17px; }
body.site-refresh .comparison-tab { border-radius: 12px; }
body.site-refresh .reader-panel,
body.site-refresh .desktop-offer-card { border-radius: 22px; }
body.site-refresh .pricing-card { padding: 30px; }
body.site-refresh .pricing-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 9px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.06em;
}
body.site-refresh .pricing-figure-unit {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  white-space: nowrap;
}
body.site-refresh .pricing-card-desktop { background: #ffffff; }
body.site-refresh .desktop-offer-copy .band-title {
  max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: -.05em;
}
body.site-refresh .desktop-offer-card { border: 1.5px solid var(--ink-200); box-shadow: 5px 6px 0 #e7d8c7; }
body.site-refresh .faq { max-width: 820px; }
body.site-refresh .faq-item { border-color: var(--ink-200); }
body.site-refresh .faq-item summary { font-size: 18px; }
body.site-refresh .extension-teaser { background: #ffffff; }
body.site-refresh .site-foot {
  overflow: hidden;
  border-radius: 45px 45px 0 0;
  background: #ffffff;
  border-top: 1px solid #eeeeec;
  color: var(--footer-ink);
}
body.site-refresh .site-foot .wordmark,
body.site-refresh .site-foot .wordmark em,
body.site-refresh .site-foot-col a,
body.site-refresh .site-foot-col .c2e-eyebrow,
body.site-refresh .site-foot-brand p,
body.site-refresh .site-foot-bottom,
body.site-refresh .site-foot-icons { color: var(--footer-ink); }
body.site-refresh .site-foot-launch { border-color: rgb(59 36 25 / 24%); background: rgb(255 255 255 / 13%); }
body.site-refresh .site-foot-launch-badge { border-color: rgb(59 36 25 / 35%); background: #fff8ee; }
body.site-refresh .site-foot-bottom { border-color: rgb(59 36 25 / 24%); }
body.site-refresh #wallBand { padding-block: 96px; }
body.site-refresh #wallBand .quote { width: 320px; padding: var(--space-6); }

@media (max-width: 900px) {
  body.site-refresh .site-head-row { height: auto; }
  .hero-intro { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  body.site-refresh .hero-copy { max-width: 700px; }
  .hero-art { width: min(100%, 570px); margin-inline: auto; }
  body.site-refresh .tool-card { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 620px) {
  body.site-refresh .hero { padding: 38px 0 70px; }
  body.site-refresh .hero-title { font-size: clamp(43px, 11vw, 65px); }
  body.site-refresh .hero-lede { font-size: 17px; }
  .hero-art { height: 425px; margin-top: 10px; }
  .hero-art::before { inset: 25px 10px 28px; }
  .hero-reader { top: 42px; left: 50%; width: min(248px, calc(100% - 28px)); height: 348px; border-radius: 21px; transform: translateX(-50%) rotate(5deg); }
  .hero-reader-screen { inset: 21px 15px 36px; padding: 25px 19px 12px; }
  .hero-reader-title { margin-top: 14px; font-size: 27px; }
  .hero-reader-rule { margin: 14px 0; }
  .hero-reader-copy { height: 38px; margin-bottom: 6px; }
  .hero-reader-chin { height: 31px; }
  .hero-art-caption { right: 0; font-size: 17px; }
  .hero-art-tag { bottom: 18px; }
  .hero-art-spark-one { font-size: 42px; }
  .hero-art-spark-two { bottom: 35px; font-size: 32px; }
  body.site-refresh .tool-card { padding: 32px 21px 24px; }
  body.site-refresh .tool-card::before { left: 20px; }
  body.site-refresh .band,
  body.site-refresh .explainer,
  body.site-refresh .desktop-offer-section { padding-block: 64px; }
  body.site-refresh .band-title { font-size: 34px; }
  body.site-refresh .site-foot { border-radius: 30px 30px 0 0; }
}

@media (max-width: 380px) {
  .hero-art-caption { top: 0; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.site-refresh {
    --ink-900: #f5e9db;
    --ink-800: #e3d1bf;
    --ink-700: #d1bba9;
    --ink-600: #baa28f;
    --ink-500: #a58f7d;
    --ink-400: #95806e;
    --ink-300: #725d4d;
    --ink-200: #584536;
    --ink-100: #403227;
    --paper-0: #2d241d;
    --paper-50: #201a15;
    --paper-100: #281f19;
    --paper-200: #35281f;
    --paper-300: #463227;
    --spine-700: #ffa875;
    --spine-600: #f58a50;
    --spine-500: #e87539;
    --spine-400: #df713b;
    --spine-200: #68402c;
    --spine-100: #412b20;
    --spine-50: #34241c;
    --veil-bg: rgb(32 26 21 / 94%);
    --action-primary-bg: #e87539;
    --action-primary-bg-hover: #f58a50;
    --action-primary-fg: #201a15;
    --action-accent-bg: #d96831;
    --action-accent-bg-hover: #ee8146;
    --tint-sage: #352920;
    --tint-sky: #243236;
    --tint-amber: #3b2c1c;
    --tint-lilac: #322a34;
    --tint-blush: #392721;
    --shadow-s: 0 2px 8px rgb(0 0 0 / 16%);
    --shadow-m: 0 14px 36px rgb(0 0 0 / 23%);
    --shadow-l: 0 18px 46px rgb(0 0 0 / 28%);
    --shadow-page: 0 20px 48px rgb(0 0 0 / 34%);
    --footer-ink: #fff4e8;
  }
}
:root[data-theme="dark"] body.site-refresh {
  --ink-900: #f5e9db;
  --ink-800: #e3d1bf;
  --ink-700: #d1bba9;
  --ink-600: #baa28f;
  --ink-500: #a58f7d;
  --ink-400: #95806e;
  --ink-300: #725d4d;
  --ink-200: #584536;
  --ink-100: #403227;
  --paper-0: #2d241d;
  --paper-50: #201a15;
  --paper-100: #281f19;
  --paper-200: #35281f;
  --paper-300: #463227;
  --spine-700: #ffa875;
  --spine-600: #f58a50;
  --spine-500: #e87539;
  --spine-400: #df713b;
  --spine-200: #68402c;
  --spine-100: #412b20;
  --spine-50: #34241c;
  --veil-bg: rgb(32 26 21 / 94%);
  --action-primary-bg: #e87539;
  --action-primary-bg-hover: #f58a50;
  --action-primary-fg: #201a15;
  --action-accent-bg: #d96831;
  --action-accent-bg-hover: #ee8146;
  --tint-sage: #352920;
  --tint-sky: #243236;
  --tint-amber: #3b2c1c;
  --tint-lilac: #322a34;
  --tint-blush: #392721;
  --shadow-s: 0 2px 8px rgb(0 0 0 / 16%);
  --shadow-m: 0 14px 36px rgb(0 0 0 / 23%);
  --shadow-l: 0 18px 46px rgb(0 0 0 / 28%);
  --shadow-page: 0 20px 48px rgb(0 0 0 / 34%);
  --footer-ink: #fff4e8;
}
:root[data-theme="dark"] body.site-refresh .hero {
  background: var(--paper-50);
}
:root[data-theme="dark"] body.site-refresh .hero-art::before,
:root[data-theme="dark"] body.site-refresh .band-sunken,
:root[data-theme="dark"] body.site-refresh .explainer,
:root[data-theme="dark"] body.site-refresh .desktop-offer-section { background: #281f19; }
:root[data-theme="dark"] body.site-refresh .dropzone { background: #34261d; }
:root[data-theme="dark"] body.site-refresh .dropzone:hover,
:root[data-theme="dark"] body.site-refresh .dropzone:focus-visible { background: #412b20; }
:root[data-theme="dark"] body.site-refresh .tool-card { box-shadow: 7px 9px 0 #38291e; }
:root[data-theme="dark"] body.site-refresh .hero-jump { background: #e87539; color: #201a15; box-shadow: 4px 5px 0 #633b27; }
:root[data-theme="dark"] body.site-refresh .hero-title span { text-decoration-color: #a54f2d; }
:root[data-theme="dark"] body.site-refresh .extension-teaser { background: #3b291f; }
:root[data-theme="dark"] body.site-refresh .pricing-card-desktop { background: #34241c; }
:root[data-theme="dark"] body.site-refresh .site-foot { background: #a64823; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.site-refresh .hero { background: var(--paper-50); }
  :root:not([data-theme="light"]) body.site-refresh .hero-art::before,
  :root:not([data-theme="light"]) body.site-refresh .band-sunken,
  :root:not([data-theme="light"]) body.site-refresh .explainer,
  :root:not([data-theme="light"]) body.site-refresh .desktop-offer-section { background: #281f19; }
  :root:not([data-theme="light"]) body.site-refresh .dropzone { background: #34261d; }
  :root:not([data-theme="light"]) body.site-refresh .dropzone:hover,
  :root:not([data-theme="light"]) body.site-refresh .dropzone:focus-visible { background: #412b20; }
  :root:not([data-theme="light"]) body.site-refresh .tool-card { box-shadow: 7px 9px 0 #38291e; }
  :root:not([data-theme="light"]) body.site-refresh .hero-jump { background: #e87539; color: #201a15; box-shadow: 4px 5px 0 #633b27; }
  :root:not([data-theme="light"]) body.site-refresh .hero-title span { text-decoration-color: #a54f2d; }
  :root:not([data-theme="light"]) body.site-refresh .extension-teaser { background: #3b291f; }
  :root:not([data-theme="light"]) body.site-refresh .pricing-card-desktop { background: #34241c; }
  :root:not([data-theme="light"]) body.site-refresh .site-foot { background: #a64823; }
}