/* Human Industries — shared styles
   Design: kitchen-note nostalgia. Butter-yellow ground, warm ink,
   tomato accent, vintage teal, with three colors pulled from the
   bouquet in the logo. Fraunces display over Nunito Sans. */

:root{
  --paper:#FBEFCB;
  --paper-deep:#F6E4AE;
  --ink:#2B2620;
  --ink-soft:#7A6F5B;
  --tomato:#D9442E;
  --tomato-deep:#B8351F;
  --teal:#2F6E78;
  --card:#FFFBEF;
  --line:#E7D6A2;
  --shadow:rgba(70,54,20,.14);
  --radius:18px;

  /* from the bouquet */
  --lavender:#7B6BA8;
  --bloom:#E0A72E;
  --leaf:#5E7A47;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .4em;
}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(251,239,203,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px;}
.brand{
  font-family:"Fraunces",serif;font-weight:600;font-size:21px;
  color:var(--ink);letter-spacing:-.01em;
}
.brand span{color:var(--tomato);}
.brand-mark{display:flex;align-items:center;flex-shrink:0;}
.brand-mark img{height:44px;width:auto;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:15px;}
.nav-links a:hover{color:var(--ink);text-decoration:none;}
.btn-store{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;
  border:1px solid var(--ink);transition:transform .15s ease,background .15s ease;
}
.btn-store:hover{background:var(--tomato);border-color:var(--tomato);color:#fff;text-decoration:none;transform:translateY(-1px);}
.btn-store .apple{width:16px;height:16px;display:block;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper);text-decoration:none;transform:translateY(-1px);}
.btn-ghost.lg,.btn-store.lg{padding:15px 26px;font-size:17px;}

/* ---- studio hero (home) ---- */
.hero-studio{padding:44px 0 30px;text-align:center;}
.hero-studio .logo-mark{max-width:820px;margin:0 auto 14px;}
.hero-studio h1{font-size:clamp(32px,4.6vw,52px);max-width:16ch;margin:0 auto .3em;}
.hero-studio h1 em{font-style:italic;color:var(--tomato);}
.hero-studio p.lead{
  font-size:20px;color:var(--ink-soft);max-width:52ch;margin:0 auto 30px;
}
.hero-studio .cta-row{justify-content:center;}
.stamp{
  display:inline-block;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px;
}
.stamp b{color:var(--ink);}

/* ---- hero (app page) ---- */
.hero{padding:76px 0 40px;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.eyebrow{
  display:inline-block;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tomato);margin-bottom:18px;
}
.hero h1{font-size:clamp(44px,7vw,78px);}
.hero h1 em{font-style:italic;color:var(--tomato);}
.hero p.lead{font-size:20px;color:var(--ink-soft);max-width:30ch;margin:.6em 0 1.6em;}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.reassure{margin-top:20px;font-size:14px;color:var(--ink-soft);font-weight:600;}
.reassure b{color:var(--ink);}

/* ---- phone / reminder signature ---- */
.stage{display:flex;justify-content:center;position:relative;}
.phone{
  width:290px;height:590px;background:#12100c;border-radius:44px;
  padding:12px;box-shadow:0 30px 60px -18px var(--shadow),0 0 0 2px #241f16;
  position:relative;
}
.screen{
  width:100%;height:100%;border-radius:33px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#3a6f78 0%,#6a8f6a 55%,#c98a3f 100%);
}
.screen .clock{
  text-align:center;color:#fff;padding-top:52px;font-family:"Nunito Sans",sans-serif;
}
.screen .clock .time{font-size:62px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.screen .clock .date{font-size:15px;font-weight:700;opacity:.9;margin-top:2px;}
.notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:118px;height:26px;background:#12100c;border-radius:14px;}
.notif{
  position:absolute;left:14px;right:14px;bottom:120px;
  background:rgba(255,251,239,.94);backdrop-filter:blur(6px);
  border-radius:20px;padding:15px 16px;box-shadow:0 12px 26px rgba(0,0,0,.22);
  transform:rotate(-1.4deg);
}
.notif .row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.notif .badge{width:30px;height:30px;border-radius:8px;background:var(--tomato);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif .badge svg{width:18px;height:18px;}
.notif .app{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;}
.notif .when{margin-left:auto;font-size:12px;color:var(--ink-soft);font-weight:700;}
.notif .title{font-weight:800;font-size:16px;color:var(--ink);margin-bottom:2px;}
.notif .body{font-size:14px;color:#544b3a;line-height:1.4;}
.streak{
  position:absolute;left:14px;right:14px;bottom:44px;
  background:rgba(255,251,239,.94);border-radius:20px;padding:12px 16px;
  box-shadow:0 12px 26px rgba(0,0,0,.22);transform:rotate(1deg);
  display:flex;align-items:center;gap:10px;
}
.streak .hearts{letter-spacing:2px;font-size:15px;}
.streak .lbl{font-size:13px;font-weight:800;color:var(--ink);}

/* ---- sections ---- */
.section{padding:64px 0;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head .eyebrow{color:var(--teal);}
.section-head h2{font-size:clamp(30px,4.4vw,44px);}
.section-head p{color:var(--ink-soft);font-size:19px;margin:.3em 0 0;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;}
.step .num{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--tomato);letter-spacing:.06em;}
.step h3{font-size:22px;margin:12px 0 8px;}
.step p{margin:0;color:var(--ink-soft);font-size:16px;}

.pledge{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:44px 40px;}
.pledge .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:24px;}
.pledge .item h3{font-size:19px;display:flex;align-items:center;gap:8px;}
.pledge .item p{margin:.3em 0 0;color:var(--ink-soft);font-size:15px;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--tomato);display:inline-block;flex-shrink:0;}
.dot.bloom{background:var(--bloom);}
.dot.lavender{background:var(--lavender);}
.dot.leaf{background:var(--leaf);}

/* ---- what we make (home) ---- */
.shelf{display:grid;gap:26px;}
.app-card{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:38px 40px;display:grid;grid-template-columns:1.1fr .9fr;
  gap:40px;align-items:center;
}
.app-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.app-icon{
  width:52px;height:52px;border-radius:14px;background:var(--tomato);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 6px 14px rgba(217,68,46,.28);
}
.app-icon svg{width:30px;height:30px;}
.app-head h3{font-size:27px;margin:0;}
.app-head .kicker{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
.app-card p{color:var(--ink-soft);font-size:17px;margin:0 0 22px;}
.app-visual{display:flex;justify-content:center;}
.nudge{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:16px 18px;max-width:310px;width:100%;
  box-shadow:0 16px 30px -12px var(--shadow);transform:rotate(-1.6deg);
}
.nudge .row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.nudge .badge{width:28px;height:28px;border-radius:8px;background:var(--tomato);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nudge .badge svg{width:17px;height:17px;}
.nudge .app{font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;}
.nudge .when{margin-left:auto;font-size:12px;color:var(--ink-soft);font-weight:700;}
.nudge .title{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:2px;}
.nudge .body{font-size:14px;color:#544b3a;line-height:1.4;}

.bench{
  border:1px dashed var(--line);border-radius:24px;padding:30px 34px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.bench h3{font-size:20px;margin:0;}
.bench p{margin:.2em 0 0;color:var(--ink-soft);font-size:16px;max-width:60ch;}

/* ---- contact ---- */
.contact{padding:20px 0 80px;}
.contact .box{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:40px;text-align:center;
}
.contact h2{font-size:clamp(28px,4vw,40px);margin-bottom:.2em;}
.contact p{color:var(--ink-soft);margin:0 auto 20px;max-width:46ch;}
.mailto{font-family:"Fraunces",serif;font-size:clamp(20px,3vw,28px);font-weight:600;color:var(--tomato);}

/* ---- closing cta ---- */
.closing{text-align:center;padding:80px 0;}
.closing h2{font-size:clamp(32px,5vw,52px);}
.closing h2 em{font-style:italic;color:var(--tomato);}
.closing p{color:var(--ink-soft);font-size:19px;margin:.4em auto 1.6em;max-width:44ch;}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--ink-soft);}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;}
.foot a{color:var(--ink-soft);font-weight:600;margin-right:20px;}
.foot a:hover{color:var(--ink);}
.foot .made{font-family:"Fraunces",serif;}

/* ---- legal pages ---- */
.legal{padding:56px 0 80px;}
.legal h1{font-size:clamp(34px,5vw,52px);margin-bottom:6px;}
.legal .updated{color:var(--ink-soft);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:36px;}
.legal h2{font-size:24px;margin:34px 0 10px;}
.legal h3{font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:17px;margin:20px 0 4px;}
.legal p,.legal li{color:#463f31;font-size:17px;}
.legal ul{padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal .intro{font-size:19px;color:var(--ink);}
.legal .contact-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:14px;}
.back{display:inline-block;margin-bottom:28px;font-weight:700;color:var(--teal);}

/* ---- faq (support) ---- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.faq summary{font-family:"Fraunces",serif;font-weight:600;font-size:20px;cursor:pointer;list-style:none;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--tomato);font-weight:400;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--ink-soft);margin:12px 0 2px;}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;text-align:center;}
  .hero p.lead{margin-left:auto;margin-right:auto;}
  .cta-row{justify-content:center;}
  .steps{grid-template-columns:1fr;}
  .pledge{padding:34px 26px;}
  .pledge .grid{grid-template-columns:1fr;}
  .app-card{grid-template-columns:1fr;padding:30px 26px;gap:30px;text-align:center;}
  .app-head{justify-content:center;text-align:left;}
  .app-card .cta-row{justify-content:center;}
  .bench{justify-content:center;text-align:center;}
  .hero-studio{padding:30px 0 22px;}
  .contact .box{padding:30px 24px;}
  .nav-links a:not(.btn-store):not(.btn-ghost){display:none;}
  .brand-mark img{height:26px;}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important;}}