/* The Reframe page in the v4 look (Wave 1). The page loads /assets/site.css first and this file second,
   so a rule here wins a tie with a shared rule at every width, phones included.

   This file is never named reframe.css: the partner pages still load the old /reframe/reframe.css.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them.

   What the live script writes, and where each piece is styled below:
     form#reframe-form            gets .is-working while the answer is being made      -> "the form while it works"
     button#reframe-submit        gets the disabled attribute at the same time          -> "the form while it works"
     #ts-box                      gets .is-open when Cloudflare wants a tick            -> "the person check"
     p#reframe-status             gets its words, and .is-error for a problem           -> "the line under the button"
     section#answer, div#ask      lose their hidden attribute                           -> "the answer", "after the answer"
     div#ask                      gets .fade-in                                         -> "after the answer"
     p#said-text                  gets his sentence                                     -> "the answer"
     div#answer-parts             gets one block per part:
        div.answer-part.strike (plus .is-move on the last one, then .is-struck when it is shown)
          span.part-num           "01" to "04"
          div.part-body
            h2                    the part's title
            p (one or more)       the part's words                                     -> "the four parts" */

[hidden]{display:none!important}

/* ---------- hero ---------- */
.rf-hero{position:relative;overflow:hidden;padding-block:44px 104px}
.rf-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:0 72px;align-items:start}
/* --h1 is the headline size and --gap the space between its two sentences. The doodles are placed with them. */
.rf-head{--h1:clamp(40px, 4.25vw, 62px);--gap:14px;position:relative;margin-top:22px}
.rf-h1{font-size:var(--h1);position:relative;z-index:2}
.rf-s{display:block}
.rf-s + .rf-s{margin-top:var(--gap)}
.rf-l{display:block;white-space:nowrap}

/* "a reason." struck through with one Peach Red stroke */
.rf-h1 s{position:relative;display:inline-block;text-decoration:none;white-space:nowrap}
.rf-h1 s::after{content:"";position:absolute;left:-.07em;right:-.09em;top:55%;height:.12em;background:var(--red);border-radius:999px;rotate:-1.6deg}

/* doodles in the open space beside the short headline lines */
.rf-cloud,.rf-bird{position:absolute;z-index:1;pointer-events:none}
.rf-cloud--a{width:128px;right:0;top:calc(var(--h1)*1.62 - 31px)}
.rf-cloud--b{width:84px;right:27%;top:calc(var(--h1)*3.3 + var(--gap))}
.rf-bird--a{width:40px;right:10%;top:calc(var(--h1)*3.18 + var(--gap))}
.rf-bird--b{width:30px;right:1%;top:calc(var(--h1)*3.62 + var(--gap))}

.rf-lede{margin-top:22px;font-size:19px;line-height:1.6;max-width:600px;text-wrap:pretty}

/* the four parts he gets back, listed before he types */
.rf-index{list-style:none;margin:30px 0 0;padding:0;max-width:600px;border-top:2px solid var(--ink)}
.rf-index li{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:2px solid rgba(37,49,34,.2);font-size:19px;font-weight:600;line-height:1.35}
.rf-index li > span:last-child{text-wrap:balance}
.rf-index .badge{width:46px;height:46px}

/* ---------- the form ---------- */
.rf-formwrap{position:relative;z-index:2;scroll-margin-top:calc(var(--nav-h) + 20px)}
.rf-form{position:relative;margin-top:0;padding:26px 28px 24px}
.rf-form textarea.rf-sentence{height:118px;min-height:88px;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;font-size:22px;line-height:1.3;letter-spacing:0}
.rf-form .field::placeholder{color:rgba(37,49,34,.72);opacity:1}
.rf-form .rf-label2{margin-top:16px}
.rf-form .rf-submit{width:100%;margin-top:18px;padding-inline:20px}
/* the line under the button: its last line never ends on one short word ("anyone." by itself). A browser that
   doesn't know text-wrap:pretty draws the line as before. */
.rf-form .fud{text-wrap:pretty}

/* the person check: Cloudflare shows its tick box here only when it wants one. Its box is never narrower than 300px,
   so on small phones it is given the card's padding too, and below 344px wide it is drawn a little smaller. */
.ts-box{max-width:100%}
.ts-box.is-open{margin-top:16px}

/* the form while it works: a Peach Red bar runs across the track and the button is switched off */
.rf-bar{display:none;position:relative;height:16px;margin-top:18px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:rgba(37,49,34,.08)}
.rf-form.is-working .rf-bar{display:block}
.rf-bar span{position:absolute;top:-2px;bottom:-2px;left:0;width:38%;background:var(--red);border:2px solid var(--ink);border-radius:999px;transform:translateX(-105%)}
.rf-form.is-working .rf-bar span{animation:rf-run 1.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes rf-run{from{transform:translateX(-105%)}to{transform:translateX(270%)}}
.rf-form .rf-submit:disabled{background:var(--gray);box-shadow:0 0 0 var(--ink);transform:translate(4px,4px);cursor:progress}

/* the line under the button: "Reading your words." while it works, or what went wrong */
.rf-status{margin-top:14px;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;font-size:21px;line-height:1.3}
.rf-status:empty{display:none}
/* text-wrap:balance evens out the lines of an error note, so it never ends on one word ("minute.", "first.").
   A browser that doesn't know it draws the note as before. */
.rf-status.is-error{font-family:var(--sans);font-style:normal;font-weight:700;font-variation-settings:normal;font-size:17px;line-height:1.45;padding:11px 14px 11px 22px;border:2px solid var(--ink);border-radius:12px;background:var(--paper-deep), var(--paper);box-shadow:inset 8px 0 0 var(--red);text-wrap:balance}

.rf-proof{max-width:none}

/* ---------- the answer (olive band) ---------- */
/* the script scrolls the answer to the top of the screen. The sticky header is --nav-h tall plus its 2px bottom line,
   so the band stops just under that line and none of it sits behind the header. */
.rf-answer{scroll-margin-top:calc(var(--nav-h) + 2px)}
.rf-answer__band{padding-block:92px 108px}
.rf-answer__in{width:min(880px, 100% - 2*var(--gut))}
.said{padding-bottom:44px;margin-bottom:44px;border-bottom:2px solid var(--line-dark)}
.said-text{margin-top:22px;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 72;font-size:clamp(28px, 3.3vw, 46px);line-height:1.2;letter-spacing:-.005em;color:var(--paper);overflow-wrap:anywhere;text-wrap:balance}
.said-text::before{content:"\201C"}
.said-text::after{content:"\201D"}

/* the four parts */
.rf-parts{display:flex;flex-direction:column;gap:20px}
.answer-part{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px 22px;align-items:center;padding:30px 36px 34px 30px;background:rgba(251,230,160,.04);border:1.5px solid var(--line-dark);border-radius:18px}
.part-body{display:contents}
.part-num{grid-column:1;grid-row:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--red);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow-dark);font:800 19px/1 var(--sans);letter-spacing:.02em}
.answer-part h2{grid-column:2;grid-row:1;font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 72;font-size:29px;line-height:1.12;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.answer-part p{grid-column:2;font-size:20px;line-height:1.62;color:var(--paper);overflow-wrap:anywhere;text-wrap:pretty}
.answer-part p + p{margin-top:2px}

/* part four is the one he came for: a Peach Red card */
.answer-part.is-move{margin-top:12px;padding:34px 38px 40px 32px;background:var(--red);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--shadow-dark)}
.answer-part.is-move .part-num{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 rgba(37,49,34,.32)}
.answer-part.is-move h2{font-weight:900;font-size:38px;line-height:1.04;letter-spacing:-.015em;color:var(--ink)}
.answer-part.is-move p{font-size:25px;line-height:1.42;font-weight:600;color:var(--ink)}
.answer-part.is-move p + p{margin-top:6px}

/* the parts arrive with the site's fade-up. The script adds .strike when it writes a part and .is-struck when it shows it. */
.answer-part.strike{opacity:0;transform:translateY(22px)}
.answer-part.is-struck{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}

/* ---------- after the answer (paper) ---------- */
.rf-ask{padding-block:104px 96px}
.rf-ask.fade-in{animation:rf-rise .8s ease both}
@keyframes rf-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rf-ask__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:center}
.rf-ask__lead{font-size:22px;font-weight:700;line-height:1.35}
.rf-ask__big{margin-top:14px;font-size:clamp(40px, 4.7vw, 68px)}
.rf-ask__btn{margin-top:34px}
.rf-ask__note{margin-top:18px}
.rf-ask__scene{margin-top:0}

/* ===================== responsive ===================== */
@media (max-height:820px) and (min-width:900px){
  .rf-hero{padding-top:28px}
  .rf-head{--h1:clamp(40px, min(4.25vw, 7.2vh), 62px)}
  .rf-lede{margin-top:16px;font-size:18px}
  .rf-index{margin-top:22px}
  .rf-form{padding:20px 26px 18px}
  .rf-form textarea.rf-sentence{height:92px;min-height:92px}
  .rf-form .rf-label2{margin-top:12px}
  .rf-form .rf-submit{margin-top:14px}
}
@media (max-width:1100px){
  .rf-hero__grid{gap:0 48px}
  .rf-cloud--a{width:104px;top:calc(var(--h1)*1.62 - 25px)}
}
@media (max-width:899px){
  .rf-hero{padding-block:30px 80px}
  .rf-hero__grid{display:flex;flex-direction:column;align-items:stretch}
  .rf-hero__copy,.rf-hero__side{display:contents}
  .rf-chip{order:1}
  .rf-head{order:2}
  .rf-lede{order:3;max-width:none}
  .rf-formwrap{order:4;margin-top:26px}
  .rf-index{order:5;margin-top:40px;max-width:none}
  .rf-proof{order:6;margin-top:30px}
  .rf-head{--h1:min(60px, calc((100vw - 2*var(--gut)) / 13.4));--gap:6px}
  .rf-l{display:inline}
  .rf-cloud--a{width:104px;right:0;top:-66px}
  .rf-cloud--b,.rf-bird--a,.rf-bird--b{display:none}
  .rf-answer__band{padding-block:72px 84px}
  .rf-ask{padding-block:80px 72px}
  .rf-ask__grid{grid-template-columns:1fr;gap:28px}
}
@media (min-width:600px) and (max-width:899px){
  .rf-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:0}
  .rf-index li{border-top:2px solid rgba(37,49,34,.2);border-bottom:0}
  .rf-index li:nth-child(-n+2){border-top-color:var(--ink)}
  .rf-index li:nth-child(n+3){border-bottom:2px solid rgba(37,49,34,.2)}
}
@media (max-width:599px){
  .rf-hero{padding-block:20px 64px}
  .rf-head{--h1:clamp(30px, calc((100vw - 2*var(--gut)) / 8.5), 54px);--gap:8px;margin-top:14px}
  .rf-l{display:block}
  .rf-cloud--a{width:84px;right:2px;top:calc(var(--h1)*1.64 - 20px)}
  .rf-bird--a{display:block;width:34px;right:46px;top:calc(var(--h1)*3.22 + var(--gap))}
  .rf-bird--b{display:block;width:26px;right:6px;top:calc(var(--h1)*3.62 + var(--gap))}
  .rf-lede{margin-top:14px;font-size:16px;line-height:1.5}
  .rf-formwrap{margin-top:18px}
  .rf-form{padding:16px 16px 18px}
  .rf-form textarea.rf-sentence{height:76px;min-height:76px;font-size:19px}
  .rf-form .rf-label2{margin-top:12px}
  .rf-form .rf-submit{margin-top:14px;padding:13px 16px 12px}
  .rf-bar{margin-top:14px;height:14px}
  .rf-status{font-size:19px;margin-top:12px}
  .rf-status.is-error{font-size:16px;padding:10px 12px 10px 20px}
  .rf-index{margin-top:34px}
  .rf-index li{font-size:17px;gap:14px;padding:10px 0}
  .rf-index .badge{width:44px;height:44px}
  .rf-proof{margin-top:26px}

  .rf-answer__band{padding-block:56px 68px}
  .said{padding-bottom:30px;margin-bottom:30px}
  .said-text{margin-top:18px;font-size:clamp(26px, 7.6vw, 32px)}
  .rf-parts{gap:16px}
  .answer-part{grid-template-columns:46px minmax(0,1fr);gap:14px 14px;padding:20px 18px 24px}
  .part-num{width:46px;height:46px}
  .answer-part h2{font-size:22px;line-height:1.15}
  .answer-part p{grid-column:1 / -1;font-size:17px;line-height:1.62}
  .answer-part.is-move{margin-top:8px;padding:22px 20px 28px;box-shadow:6px 6px 0 var(--shadow-dark)}
  .answer-part.is-move h2{font-size:28px}
  .answer-part.is-move p{font-size:22px;line-height:1.4;font-weight:700}

  .rf-ask{padding-block:64px 56px}
  .rf-ask__lead{font-size:18px}
  .rf-ask__big{margin-top:10px;font-size:clamp(34px, 9.6vw, 44px)}
  .rf-ask__btn{margin-top:26px;width:100%}
  .rf-ask__note{margin-top:14px}
}
@media (max-width:420px){
  .ts-box.is-open{margin-inline:-16px;max-width:none}
}
@media (max-width:374px){
  .rf-hero{padding-top:14px}
  .rf-lede{font-size:15px;line-height:1.45}
  .rf-formwrap{margin-top:14px}
  .rf-form{padding:13px 14px 16px}
  .rf-form textarea.rf-sentence{height:68px;min-height:68px;font-size:18px}
  .ts-box.is-open{margin-inline:-14px}
  .answer-part{padding:18px 16px 22px}
  .answer-part.is-move{padding:20px 16px 26px}
}
@media (max-width:343px){
  .ts-box.is-open{width:300px;transform:scale(.92);transform-origin:left top;margin-bottom:-5px}
}
@media (prefers-reduced-motion:reduce){
  .rf-form.is-working .rf-bar span{animation:none;width:100%;transform:none;border:0;top:0;bottom:0;border-radius:0}
  .answer-part.strike{transform:none}
  .answer-part.is-struck{transition:none}
  .rf-ask.fade-in{animation:none}
}