/* Google Sheets + Excel singles (patterns/product-bundle-sheet.php).
 *
 * Built to cofounder's approved mock
 * Templacity-cofounder/.audit/budget-planner-landing-2026-09-19.html.
 * Paper and ink: the workbook is drawn as fanned paper sheets, and green appears
 * only inside the drawings, where money earns it. Every class is sl- prefixed.
 * The drawings are light paper in both themes, like a photo of a page; everything
 * around them is theme tokens, so dark mode follows.
 * Rhythm: the mock's 96px / 64px section gap is the theme token times 4/3.
 */

.sl {
  --sl-sheet: #FDFCFA;
  --sl-gap: calc(var(--section-gap) * 4 / 3);
  --sl-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sl-h2: clamp(28px, 3vw, 42px);
  padding-bottom: 120px;
}
.sl svg { display: block; max-width: 100%; }
.sl h1, .sl h2, .sl h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.sl-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.sl-head h2 { font-size: var(--sl-h2); letter-spacing: -0.015em; line-height: 1.1; margin: 10px 0 0; }
.sl-head p { margin: 14px auto 0; font-size: 15px; color: var(--ink-muted); max-width: 52ch; }
.sl-head .sl-label + h2 { margin-top: 0; }
.sl-label { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-faint); margin: 0 0 8px; }
.sl-caption { text-align: center; margin: 20px auto 0; font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-faint); }

/* ---- 1. hero ---- */
.sl-hero { padding-top: var(--page-top); }
.sl-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; min-height: 560px; }
.sl-hero-copy h1 { font-size: clamp(38px, 4.2vw, 62px); letter-spacing: -0.02em; line-height: 1.04; margin: 16px 0 0; }
.sl-sub { margin: 22px 0 0; color: var(--ink-muted); font-size: 16.5px; max-width: 46ch; }
.sl-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.sl-pills li { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 15px; font-family: var(--sl-ui); font-size: 13px; color: var(--ink-muted); }
.sl-swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.sl-pills .is-sheets .sl-swatch { background: var(--ship); }
.sl-buy { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* WooCommerce's own add-to-cart form, dressed as the mock's buy button. */
.sl-buy .bundle-buy { margin: 0; padding: 0; border: 0; background: none; }
.sl-buy .bundle-buy .refund-note { display: none; }
.sl-buy form.cart { margin: 0; display: flex; align-items: center; gap: 8px; }
.sl-buy .quantity { display: none; }
.sl-buy .single_add_to_cart_button { border-radius: var(--radius); padding: 16px 34px; font-size: 15px; }
.sl-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 22px; font-family: var(--sl-ui); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sl-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.sl-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* the paper fan: this line's device fan */
.sl-hero-art { position: relative; min-width: 0; }
.sl-fan { position: relative; width: 100%; max-width: 620px; margin: 0 auto; }
.sl-leaf { position: absolute; inset: 0; background: var(--sl-sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(39, 38, 34, 0.09); }
.sl-back-2 { transform: rotate(-5deg) translate(-26px, 14px); opacity: .8; }
.sl-back-1 { transform: rotate(3.2deg) translate(22px, 8px); opacity: .9; }
.sl-front { position: relative; transform: rotate(-0.6deg); overflow: hidden; }
.sl-front svg, .sl-front img, .sl-card svg, .sl-card img { width: 100%; height: auto; display: block; }
.sl-hero-art .sl-caption { position: relative; z-index: 1; margin-top: 40px; }

/* the tab-ear strip that says "this is one tab of the workbook" */

/* ---- 1b. before / after slider ---- */
.sl-compare { padding-top: var(--sl-gap); }
.sl-compare .sl-head { margin-bottom: 32px; }
.sl-ba {
  position: relative; max-width: 900px; margin: 0 auto;
  border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 14px 36px rgba(39, 38, 34, 0.08); background: var(--sl-sheet);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.sl-ba svg, .sl-ba img { display: block; width: 100%; height: auto; }
.sl-ba-under { position: relative; }
.sl-ba-over { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.sl-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1.5px; background: #272622; transform: translateX(-50%); pointer-events: none; }
.sl-ba-knob {
  position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #272622; color: #F7F6F2;
  display: grid; place-items: center; pointer-events: none; box-shadow: 0 6px 16px rgba(39, 38, 34, 0.25);
}
.sl-ba-knob svg { width: 18px; height: 18px; }
.sl-ba-tag { position: absolute; top: 14px; z-index: 2; pointer-events: none; font-family: var(--sl-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.sl-ba-tag.is-before { left: 14px; background: #F0EEEB; color: #66655C; border: 1px solid rgba(188, 185, 175, 0.45); }
.sl-ba-tag.is-after { right: 14px; background: #272622; color: #F7F6F2; }
@media (max-width: 560px) {
  /* At phone width the two full-size tags met in the middle and hid the sheet. */
  .sl-ba-tag { top: 8px; font-size: 9px; letter-spacing: 0.08em; padding: 4px 8px; }
  .sl-ba-tag.is-before { left: 8px; }
  .sl-ba-tag.is-after { right: 8px; }
}
.sl-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.sl-ba:has(.sl-ba-range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- 2. tab stories ---- */
.sl-stories { padding-top: var(--sl-gap); }
.sl-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding: 56px 0; }
.sl-story + .sl-story { border-top: 1px solid var(--rule-soft); }
.sl-story.is-flip .sl-story-copy { order: 2; }
.sl-story-copy h2 { font-size: var(--sl-h2); letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.sl-story-copy p:not(.sl-label) { margin: 16px 0 0; font-size: 15px; color: var(--ink-muted); line-height: 1.65; max-width: 46ch; }
.sl-card { background: var(--sl-sheet); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 14px 36px rgba(39, 38, 34, 0.08); min-width: 0; }

.sl-quiet { padding-top: 56px; }
.sl-quiet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.sl-quiet-card { text-align: center; }
.sl-quiet-card .sl-card { box-shadow: 0 10px 26px rgba(39, 38, 34, 0.07); }
.sl-quiet-card h3 { font-size: 21px; margin: 18px 0 6px; letter-spacing: -0.005em; }
.sl-quiet-card p { margin: 0 auto; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; max-width: 32ch; }

/* ---- 3. you type / it works out ---- */
.sl-split { padding-top: var(--sl-gap); }
.sl-split-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sl-split-col { padding: 28px 36px 32px; }
.sl-split-col + .sl-split-col { border-left: 1px solid var(--rule-soft); }
.sl-col-label { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-faint); margin: 0 0 18px; }
.sl-split-col ul { list-style: none; margin: 0; padding: 0; }
.sl-split-col li { font-size: 14.5px; padding: 11px 0; line-height: 1.5; border-top: 1px solid var(--rule-soft); color: var(--ink); }
.sl-split-col li:first-of-type { border-top: 0; }
.sl-split-col.is-works li { color: var(--ink-muted); }
.sl-split-col.is-works li strong { color: var(--ink); font-weight: 500; }

/* ---- 4. sheets or excel ---- */
.sl-formats { padding-top: var(--sl-gap); }
.sl-formats-panel { max-width: 1100px; margin: 0 auto; background: var(--paper-soft); border-radius: var(--radius-lg); padding: 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sl-formats-panel h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.01em; line-height: 1.12; margin: 10px 0 12px; }
.sl-formats-panel p { margin: 0; font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; max-width: 44ch; }
.sl-fmt-cards { display: grid; gap: 12px; }
.sl-fmt-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.sl-fmt-card svg { width: 26px; height: 26px; color: var(--ink); }
.sl-fmt-t { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.sl-fmt-d { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

/* ---- 5. how it lands ---- */
.sl-how { padding-top: var(--sl-gap); }
.sl-how-grid { max-width: 1024px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sl-how-step { border-top: 1px solid var(--rule); padding-top: 18px; }
.sl-n { font-family: var(--serif); font-size: 15px; color: var(--ink-faint); font-style: italic; }
.sl-how-step h3 { font-size: 21px; margin: 8px 0; letter-spacing: -0.005em; }
.sl-how-step p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.6; }

/* ---- 6. faq ---- */
.sl-faq { padding-top: var(--sl-gap); }
.sl-faq-col { max-width: 760px; margin: 0 auto; }
.sl-faq-col h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.01em; margin: 10px 0 14px; }
.sl-faq-item { border-top: 1px solid var(--rule-soft); padding: 20px 0; }
.sl-faq-item:last-child { border-bottom: 1px solid var(--rule-soft); }
.sl-faq-item h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -0.005em; line-height: 1.3; }
.sl-faq-item p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.65; max-width: 64ch; }

/* ---- 7. last word: an inverse card, so it inverts again in dark mode ---- */
.sl-last { padding-top: var(--sl-gap); }
.sl-last-card { max-width: 760px; margin: 0 auto; text-align: center; background: var(--ink); color: var(--paper-soft); border-radius: var(--radius-lg); padding: 56px 48px; }
.sl-last-card .eyebrow { color: var(--paper-soft); opacity: .55; }
.sl-last-card h2 { color: var(--paper-soft); font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.01em; line-height: 1.15; margin: 12px 0 10px; }
.sl-last-card p { margin: 0 auto; font-size: 14.5px; line-height: 1.6; max-width: 46ch; opacity: .75; }
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px;
  background: var(--paper-soft); color: var(--ink); border-radius: var(--radius);
  padding: 16px 34px; font-family: var(--sl-ui); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}
.sl-btn:hover { background: var(--paper); transform: translateY(-2px); }
.sl-last-card .sl-also { margin-top: 18px; font-size: 13px; opacity: .6; }
.sl-also a { color: var(--paper-soft); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .sl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; }
  .sl-hero-art { order: -1; }
  .sl-fan { max-width: 480px; }
  .sl-back-2 { transform: rotate(-4deg) translate(-14px, 10px); }
  .sl-back-1 { transform: rotate(2.6deg) translate(12px, 6px); }
  .sl-sub { max-width: none; }
  .sl-buy .bundle-buy, .sl-buy form.cart, .sl-buy .single_add_to_cart_button { flex: 1; width: 100%; }
  .sl-story { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 0; }
  .sl-story.is-flip .sl-story-copy { order: 0; }
  .sl-story-copy p:not(.sl-label) { max-width: none; }
}
@media (max-width: 860px) {
  .sl-quiet-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  .sl-formats-panel { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; gap: 28px; border-radius: var(--radius); }
  .sl-how-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 720px) {
  .sl-split-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-split-col + .sl-split-col { border-left: 0; border-top: 1px solid var(--rule); }
  .sl-split-col { padding: 24px 4px 28px; }
  .sl-last-card { padding: 36px 24px; border-radius: var(--radius); }
}