/* /files: the page on the Site's tokens (each with a fallback), and the hero's swap scene. */

.par-files {
  --fl-bg: var(--bg, #f7f0e1);
  --fl-surface: var(--surface, #fffdf8);
  --fl-text: var(--text, #211a10);
  --fl-soft: #4d4434;
  --fl-muted: var(--text-muted, #6e6350);
  --fl-border: var(--border, #e9dec7);
  --fl-border-strong: var(--border-strong, #d8cbaa);
  --fl-ink: var(--accent, #2b231b);
  --fl-wine: #8c3f3a;
  --fl-display: var(--font-display, "Newsreader", Georgia, serif);
  --fl-body: var(--font-body, "Geist", -apple-system, sans-serif);
  --fl-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --fl-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --fl-gutter: var(--gutter, clamp(16px, 5vw, 64px));
  --fl-wrap: var(--wrap, 1240px);
  --fl-shadow: 0 30px 60px -30px rgba(43, 35, 27, .45);
  color: var(--fl-text);
}
.par-files img { display: block; max-width: 100%; height: auto; }
.par-files a { color: inherit; }

.fl-hero, .fl-sec { max-width: var(--fl-wrap); margin: 0 auto; padding-left: var(--fl-gutter); padding-right: var(--fl-gutter); }
.fl-sec { padding-top: 120px; padding-bottom: 10px; }

.fl-kicker { font: 13px var(--fl-mono); color: var(--fl-muted); display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.fl-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-ink); }
.fl-h1 { font: 400 66px/1.0 var(--fl-display); letter-spacing: -.01em; margin: 0; }
.fl-h2 { font: 400 56px/1.04 var(--fl-display); letter-spacing: -.01em; margin: 0 0 16px; max-width: 1000px; }
.fl-h1 em, .fl-h2 em { font-style: italic; }
.fl-h3 { font: 400 24px/1.15 var(--fl-display); margin: 0 0 4px; }
.fl-answer { font-size: 18px; line-height: 1.55; color: var(--fl-soft); max-width: 520px; margin: 0 0 22px; }
.fl-lead { font-size: 19px; line-height: 1.5; color: var(--fl-soft); max-width: 720px; margin: 0 0 40px; }
.fl-note { font-size: 13.5px; line-height: 1.5; color: var(--fl-muted); margin: 22px 0 0; }
.fl-cap { font-size: 13.5px; line-height: 1.5; color: var(--fl-muted); margin: 16px 0 0; max-width: 760px; }
.fl-old { font-family: var(--fl-mono); font-size: .92em; text-decoration-color: var(--fl-wine); text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }


.fl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; }
.par-files .fl-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--fl-ink); color: #fffdf8; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.par-files .fl-btn-light { background: var(--fl-bg); color: var(--fl-ink); }
.fl-link { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }

/* Devices: the computer, and the phone standing in front of its corner */
.fl-devices { position: relative; padding-bottom: 9%; }
.fl-desk, .fl-shot { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--fl-surface); box-shadow: var(--fl-shadow), 0 0 0 1px rgba(43, 35, 27, .08); }
.fl-devices .fl-desk { width: 79%; }
.fl-phone { border-radius: 34px; border: 8px solid #1d1812; overflow: hidden; background: #1d1812; box-shadow: var(--fl-shadow); }
.fl-devices .fl-phone { position: absolute; right: 0; bottom: 0; width: 23.5%; }
.fl-stack { display: grid; }
.fl-stack > img { grid-area: 1 / 1; }

.fl-bubble { margin: 0; background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: 18px; padding: 14px 18px; font-size: 16px; line-height: 1.42; max-width: 420px; }
.fl-bubble b { display: block; font: 400 11.5px var(--fl-mono); letter-spacing: .04em; color: var(--fl-muted); margin-bottom: 4px; }
.fl-par { background: var(--fl-ink); border-color: var(--fl-ink); color: var(--fl-bg); }
.fl-par b { color: #cbbd9f; }
.fl-talk { display: grid; gap: 12px; align-content: center; }

/* 00 hero */
.fl-hero { padding-top: 24px; padding-bottom: 20px; }
.fl-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-bottom: 56px; }
.fl-intro .fl-h1 { margin-bottom: 22px; }
/* The crayon drawings sit on the kit's pale blue panel; the first one in a block needs no top gap. */
.fl-art { margin-top: 0; }
.fl-art-wide { max-width: 940px; margin: 0 auto 48px; }
.fl-hero-fig { margin: 0; }

/* 01 find: the computer on the left, the phone on the right, the old name under each */
.fl-finds { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 48px; align-items: end; }
.fl-query { font: 400 30px/1.2 var(--fl-display); margin: 0 0 16px; }
.fl-query span { display: block; font: 400 11.5px var(--fl-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fl-muted); margin-bottom: 4px; }
.fl-was { font-size: 13.5px; color: var(--fl-muted); margin: 14px 0 0; }

/* 02 ask: the drawing of Par bringing the file back, then the question and answer beside the file itself */
.fl-ask { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; max-width: 1000px; }
.fl-doc { border-radius: 6px; overflow: hidden; box-shadow: var(--fl-shadow), 0 0 0 1px rgba(43, 35, 27, .06); }

/* So what: one line in large type between asking and the record's files */
.fl-bridge-wrap { max-width: var(--fl-wrap); margin: 0 auto; padding: 120px var(--fl-gutter) 0; }
.fl-bridge { font: italic 400 44px/1.15 var(--fl-display); color: var(--fl-text); max-width: 900px; margin: 0; }

/* 03 belongs */
.fl-fig { margin: 0; max-width: 1080px; }

/* 04 share: the drawing of the page going from Mei to Juno, then the request and Mei's computer passing to Juno's phone */
.fl-share { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 48px; align-items: center; }
.fl-pass { display: grid; grid-template-columns: minmax(0, 1fr) 36px 220px; gap: 16px; align-items: center; }
.fl-arrow { font: 26px var(--fl-mono); color: var(--fl-muted); text-align: center; }

/* 05 your way: one row per owner */
.fl-way { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 88px; }
.fl-said { font: italic 400 20px/1.35 var(--fl-display); color: var(--fl-soft); margin: 8px 0 0; }
.fl-any { margin-top: 72px; padding: 34px 36px; border: 1px solid var(--fl-border-strong); border-radius: 22px; background: var(--fl-surface); }
.fl-any .fl-h3 { font-size: 32px; }
.fl-any-lead { font-size: 17px; line-height: 1.5; color: var(--fl-soft); margin: 6px 0 22px; max-width: 640px; }
.fl-ideas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fl-ideas li { font: italic 400 18px/1.3 var(--fl-display); background: var(--fl-bg); border: 1px solid var(--fl-border); border-radius: 999px; padding: 9px 18px; }

/* 06 today and later */
.fl-ledger { max-width: 760px; }
.fl-col { background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: 20px; padding: 28px 30px; }
.fl-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fl-col li { font-size: 17px; line-height: 1.4; color: var(--fl-soft); padding-left: 22px; position: relative; }
.fl-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #6b9a5a; }

/* 07 next, questions, join */
.fl-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 90px; }
.fl-next a { display: block; background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: 16px; padding: 22px; text-decoration: none; }
.fl-next b { display: block; font: 400 24px var(--fl-display); margin-bottom: 6px; }
.fl-next span { color: var(--fl-muted); font-size: 14.5px; }
.fl-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; }
.fl-faq .fl-h3 { font-size: 22px; margin-bottom: 6px; }
.fl-faq p { margin: 0; color: var(--fl-soft); font-size: 15.5px; line-height: 1.5; }
.fl-join { margin: 80px 0 110px; background: var(--fl-ink); color: var(--fl-bg); border-radius: 22px; padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.fl-join p { margin: 0; }
.fl-join > div { flex: 1 1 320px; }
.fl-join-icon { width: 96px; height: auto; flex: none; }
.fl-join-title { font: 400 32px var(--fl-display); }
.fl-join .fl-now { font-size: 17px; line-height: 1.5; color: #e6dcc8; margin-top: 8px; max-width: 560px; }

/* The hero's swap: the empty search, then the result. Only images move; no text animates.
   No data-stage (no script, reduced motion, the play is over): the final state. */
[data-par-scene="swap"] [data-show],
[data-par-scene="swap"] [data-hide] { transition: opacity .6s var(--fl-ease); }
[data-par-scene="swap"]:not([data-stage]) [data-hide] { opacity: 0; }
[data-stage="0"] [data-show="1"] { opacity: 0; }
[data-stage="1"] [data-hide="1"] { opacity: 0; }
/* The first write to beat 0 lands without a fade, so the page never plays backwards. */
[data-par-scene="swap"][data-instant] [data-show], [data-par-scene="swap"][data-instant] [data-hide] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  [data-par-scene="swap"] [data-show], [data-par-scene="swap"] [data-hide] { transition: none; }
}

/* Tablet width: one column per block */
@media (max-width: 1000px) {
  .fl-intro { grid-template-columns: 1fr; gap: 24px; }
  .fl-finds { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .fl-ask, .fl-share, .fl-way { grid-template-columns: 1fr; gap: 28px; }
  .fl-ask .fl-doc { max-width: 340px; }
  .fl-way { margin-bottom: 72px; }
}

/* Phone width: one column; the phone prints keep a readable size */
@media (max-width: 760px) {
  .fl-h1 { font-size: 44px; }
  .fl-h2 { font-size: 36px; }
  .fl-h3 { font-size: 22px; }
  .fl-lead { font-size: 17px; margin-bottom: 26px; }
  .fl-sec { padding-top: 76px; }
  .fl-hero { padding-top: 8px; }
  .fl-intro { margin-bottom: 30px; }
  .fl-devices .fl-desk { width: 88%; border-radius: 10px; }
  .fl-devices .fl-phone { width: 38%; border-width: 5px; border-radius: 20px; }
  .fl-finds { grid-template-columns: 1fr; gap: 40px; }
  .fl-find-phone .fl-phone { width: 62%; }
  .fl-query { font-size: 26px; }
  .fl-pass { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .fl-pass .fl-arrow { transform: rotate(90deg); }
  .fl-pass .fl-phone { width: 62%; border-width: 5px; border-radius: 22px; }
  .fl-next, .fl-faq { grid-template-columns: 1fr; }
  .fl-join-icon { width: 72px; }
  .fl-next { margin-bottom: 60px; }
  .fl-any { padding: 26px 22px; }
  .fl-any .fl-h3 { font-size: 26px; }
  .fl-ideas li { font-size: 16px; border-radius: 16px; }
  .fl-join { margin-bottom: 72px; padding: 28px; }
  .fl-join-title { font-size: 26px; }
  .fl-bridge-wrap { padding-top: 76px; }
  .fl-bridge { font-size: 30px; }
}

#find{--green:#1c4b30;--soft-green:#e7eddf;font:400 15px/1.45 var(--fl-body)}
#find p,#find h2,#find h3,#find h4,#find figure{margin:0}
#find p,#find h2,#find h3,#find h4,#find figure{margin:0}
#find .intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
#find .eyebrow{font-size:10px;font-weight:500;letter-spacing:.13em;color:var(--green);text-transform:uppercase;margin-bottom:8px}
#find h2{font:400 47px/1.02 Newsreader,Georgia,serif;letter-spacing:-.03em}
#find h2 em{font-weight:400}
#find .editorial{font-size:11px;color:var(--fl-muted);padding-bottom:5px;white-space:nowrap}
#find .query{display:flex;align-items:center;gap:22px;margin-top:17px;padding:15px 20px;border:1px solid #aebfa7;border-radius:8px;background:var(--fl-surface)}
#find .query span{flex:none;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--green)}
#find .query textarea{border:0;background:transparent;outline:none;min-width:0;width:100%;height:28px;padding:0;resize:none;overflow:hidden;display:block;color:var(--fl-text);font:400 23px/1.2 Newsreader,Georgia,serif}
#find .query textarea:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:2px}
#find .results{display:grid;grid-template-columns:420px minmax(0,1fr);gap:22px;margin-top:20px;align-items:stretch}
#find .result{background:var(--fl-surface);border:1px solid var(--fl-border-strong);border-radius:10px;padding:18px}
#find .kind{font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--fl-muted);margin-bottom:9px}
#find h3{font:400 29px/1.08 Newsreader,Georgia,serif;letter-spacing:-.02em}
#find .image-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
#find .image-heading p{font:italic 400 18px/1.2 Newsreader,Georgia,serif;color:var(--fl-muted)}
#find .file-image{display:block;width:100%;height:auto;margin-top:14px;border-radius:5px}
#find .why{margin-top:14px;padding-top:12px;border-top:1px solid var(--fl-border-strong)}
#find .why h4{font:500 12px/1.3 Geist,sans-serif;color:var(--green);margin-bottom:4px}
#find .why p{font-size:12px;line-height:1.45;color:var(--fl-muted)}
#find .context-link{font-size:11px;line-height:1.4;color:var(--fl-muted);margin-top:9px}
#find .quote-layout{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:22px;align-items:start;margin-top:20px}
#find .quote-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#find .quote{min-width:0;padding:0 0 16px}
#find .quote+.quote{border-left:1px solid var(--fl-border-strong);padding-left:18px}
#find .quote time{display:block;font-size:11px;letter-spacing:.045em;color:var(--fl-muted);margin-bottom:10px}
#find .per-copy{font:400 36px/1 Newsreader,Georgia,serif;letter-spacing:-.025em}
#find .quote small{display:block;font-size:11px;color:var(--fl-muted);margin-top:5px}
#find .total{margin-top:14px;font-size:13px}
#find .total b{font-weight:500}
#find .source-names{border-top:1px solid var(--fl-border-strong);padding-top:10px;font-size:10px;line-height:1.6;color:var(--fl-muted);overflow-wrap:anywhere}
#find .source-names span{display:block}
#find .document img{width:100%;height:auto;display:block;border:1px solid #e3ded2;box-shadow:0 4px 12px #211a1012}
#find .document figcaption{font-size:10px;line-height:1.3;color:var(--fl-muted);text-align:center;margin-top:6px}
#find .calculation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding:14px 16px;background:var(--soft-green);border-radius:6px;color:var(--green)}
#find .formula{font:400 21px/1.2 Newsreader,Georgia,serif;white-space:nowrap}
#find .calculation p:last-child{font-size:11px;white-space:nowrap}
#find .pdf-result .why{margin-top:15px;padding-top:12px}
#find .review-note{font-size:11px;line-height:1.5;color:var(--fl-muted);margin-top:13px}
@media(max-width:1000px) and (min-width:761px){#find .results{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px}
#find .quote-layout{grid-template-columns:1fr;gap:14px}
#find .document{display:none}
#find .calculation{flex-wrap:wrap}
#find .formula{font-size:20px}
#find .image-heading p{font-size:16px}
}
@media(max-width:760px){#find .intro{display:block}
#find .eyebrow{margin-bottom:9px}
#find h2{font-size:43px;line-height:1.02}
#find .editorial{margin-top:12px;padding:0;font-size:10px}
#find .query{display:block;margin-top:20px;padding:13px 15px}
#find .query span{display:block;font-size:9px;margin-bottom:7px}
#find .query textarea{font-size:18px;line-height:1.3;height:48px}
#find .results{grid-template-columns:1fr;gap:18px;margin-top:18px}
#find .result{padding:16px}
#find .kind{font-size:9px}
#find h3{font-size:28px}
#find .image-heading{gap:5px 9px}
#find .image-heading p{font-size:17px}
#find .file-image{margin-top:13px}
#find .why h4{font-size:12px}
#find .why p{font-size:12px}
#find .quote-layout{grid-template-columns:1fr;gap:14px;margin-top:22px}
#find .quote-pair{gap:16px}
#find .quote+.quote{padding-left:16px}
#find .per-copy{font-size:37px}
#find .quote time{font-size:10px}
#find .quote small{font-size:11px}
#find .total{font-size:13px}
#find .source-names{font-size:10px}
#find .document{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center}
#find .document figcaption{text-align:left;margin:0;font-size:11px}
#find .calculation{display:block;padding:14px;margin-top:17px}
#find .formula{font-size:21px;white-space:normal}
#find .calculation p:last-child{margin-top:5px;font-size:11px}
#find .review-note{font-size:10px;margin-top:14px}
}