/* A · House Blend: the website's hero, poured into a phone. */
@font-face{font-family:"Broadacre";src:url("assets/brand/Broadacre-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Arial Rounded MT Bold";src:local("Arial Rounded MT Bold"),local("ArialRoundedMTBold"),url("assets/brand/ArialRoundedMTBold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --cream:#efe9d6; --cream-light:#f6f1e1; --line:#d6caac;
  --espresso:#35261d; --brown:#583b1f; --olive:#7e7c46; --olive-deep:#5f5d2c;
  --butter:#ffe48f; --terracotta:#d38e59; --mocha:#6a5644;
  --display:"Broadacre",Georgia,serif;
  --label:"Arial Rounded MT Bold",Nunito,sans-serif;
  --body:"Aktiv Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --hand:Caveat,"Bradley Hand","Comic Sans MS",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--espresso);font:17px/1.5 var(--body);caret-color:var(--terracotta)}
::selection{background:var(--butter);color:var(--espresso)}
img{max-width:100%;display:block}
a{color:inherit;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}

.page{max-width:440px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}

/* Laptop: the same phone-shaped column, a touch roomier, sitting in the middle of the screen */
@media (min-width:720px){
  .page{max-width:480px;min-height:100vh;min-height:100dvh;justify-content:center;padding-top:48px;padding-bottom:48px}
}

.top{display:flex;justify-content:center;padding-bottom:14px;border-bottom:2px solid var(--line)}
.logo{width:92px;height:auto}

.hello{display:grid;grid-template-columns:108px 1fr;gap:20px;align-items:center;margin-top:20px}
.arch{position:relative;aspect-ratio:4/5;border:3px solid var(--espresso);border-radius:999px 999px 22px 22px;
  background:var(--terracotta);box-shadow:6px 6px 0 var(--espresso);overflow:hidden;
  color:var(--espresso);font-size:12px;text-align:center}
/* Lean in on her face so it reads at avatar size */
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.42);transform-origin:50% 34%}
.hello-words{display:flex;flex-direction:column;gap:6px;min-width:0}
h1{margin:0;font:300 clamp(24px,6.8vw,30px)/1.08 var(--display);text-transform:uppercase;color:var(--brown);text-wrap:balance}
.hand{margin:0;font:700 clamp(22px,7.2vw,27px)/1 var(--hand);color:var(--olive);transform:rotate(-3deg);transform-origin:left center}

.intro{margin:18px 0 0;font-size:16px;line-height:1.5;text-wrap:pretty}

.links{display:flex;flex-direction:column;gap:16px;margin-top:22px}

.quiz{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--brown);
  background:var(--butter);border:3px solid var(--espresso);border-radius:28px;box-shadow:6px 6px 0 var(--espresso);
  padding:20px 22px 18px;transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1)}
/* The quiz question is the biggest words on the page: it's the thing we want tapped */
.quiz-title{font:300 26px/1.08 var(--display);text-transform:uppercase;text-wrap:balance}
.quiz-sub{font-size:16px;color:var(--espresso)}
.quiz-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:700 15px/1 var(--label);
  text-transform:uppercase;letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.sticker{position:absolute;top:-13px;right:16px;transform:rotate(5deg);background:var(--terracotta);color:var(--espresso);
  border:3px solid var(--espresso);border-radius:999px;padding:6px 12px;font:700 12px/1 var(--label);
  text-transform:uppercase;letter-spacing:.1em}

.chat{display:flex;align-items:center;justify-content:center;min-height:56px;padding:14px 22px;border-radius:999px;
  background:var(--espresso);color:var(--butter);text-decoration:none;font:700 16px/1.2 var(--label);
  text-transform:uppercase;letter-spacing:.08em;border:3px solid var(--espresso);
  transition:transform .14s cubic-bezier(.2,.8,.2,1),background-color .14s}

/* The website's tactile press: the card sinks onto its shadow. */
.quiz:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--espresso)}
.chat:active{transform:translateY(2px);background:var(--brown)}
@media (hover:hover){
  .quiz:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--espresso)}
  .chat:hover{background:var(--brown)}
}

/* The Morning Blend: a tear-off coupon under the two main links, quieter than both */
.blend{margin-top:28px;padding:20px 20px 22px;border:2px dashed var(--olive);border-radius:24px;background:var(--cream-light);
  display:flex;flex-direction:column;gap:6px}
.blend-name{margin:0;font:300 14px/1.2 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--olive-deep)}
.blend h2{margin:0;font:700 19px/1.2 var(--label);text-transform:uppercase;letter-spacing:.02em;color:var(--brown);text-wrap:balance}
.blend-btn{margin-top:10px;display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;
  border-radius:999px;border:3px solid var(--espresso);background:transparent;color:var(--brown);text-decoration:none;
  font:700 15px/1.2 var(--label);text-transform:uppercase;letter-spacing:.08em;
  transition:transform .14s cubic-bezier(.2,.8,.2,1),background-color .14s}
.blend-btn:active{transform:translateY(2px);background:var(--butter)}
@media (hover:hover){ .blend-btn:hover{background:var(--butter)} }
.blend-btn[hidden],.blend-form[hidden]{display:none}
.blend-form{margin-top:8px;min-height:0}
/* Your Flodesk form, sitting inside the coupon: the coupon already names it, so its own heading steps aside */
.blend-form [class*="__title"],.blend-form [class*="__subtitle"]{display:none!important}
.blend-form [data-ff-el="root"],.blend-form [data-ff-el="form"],.blend-form [data-ff-el="content"],
.blend-form [data-ff-el="fields"],.blend-form [class*="__container"]{background:none!important;padding:0!important;max-width:none!important}
/* Fields and button in your page's look: 16px text so iPhones don't zoom, dark text you can read */
.blend-form .fd-form-control{background:var(--cream)!important;color:var(--espresso)!important;border:2px solid var(--espresso)!important;
  border-radius:999px!important;font-size:16px!important}
.blend-form .fd-form-label{color:var(--mocha)!important;font-size:16px!important}
.blend-form .fd-btn{background:var(--espresso)!important;color:var(--butter)!important;border:3px solid var(--espresso)!important;
  border-radius:999px!important;min-height:52px!important;font:700 15px/1.2 var(--label)!important;
  text-transform:uppercase!important;letter-spacing:.08em!important;cursor:pointer}
.blend-form .fd-btn:hover{background:var(--brown)!important}
.blend-form:focus{outline:none}
.blend-form.is-loading{min-height:120px;display:grid;place-items:center}
.blend-form.is-loading::before{content:"Pouring your signup…";font:700 14px/1.2 var(--label);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mocha)}
.blend-form.is-loading>*{position:absolute;opacity:0}

.foot{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mocha);font-size:13px}
.foot p{margin:0}
.mascot{width:96px;height:auto;transform:rotate(-6deg)}

@media (prefers-reduced-motion:reduce){
  .quiz,.chat,.blend-btn{transition:none}
  .blend-btn:active{transform:none}
  .quiz:hover{transform:none;box-shadow:6px 6px 0 var(--espresso)}
  .quiz:active{transform:none;box-shadow:3px 3px 0 var(--espresso)}
  .chat:active{transform:none}
}