/* Diction landing page. Paper, serif and verdigris from the app; the phone
   carries the only motion on the page. */
:root{
  --page:#F7F2EA; --card:#FBF8F2; --ink:#1D1B19; --ink2:#544A3C; --ink3:#8B7D69;
  --gold:#AF874A; --verd:#3C7669; --line:#E2D9C8; --night:#0F0E0D;
  --serif:"Newsreader","New York","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.01em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);max-width:1240px;margin:0 auto}
.mark{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:.36em;padding-left:.36em;color:var(--ink);text-decoration:none}
.store img{width:165px;height:auto;transition:transform .2s ease}
.store:hover img{transform:translateY(-1px)}
.store-sm img{width:120px}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:clamp(8px,3vw,40px) var(--gutter) 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center;min-height:min(84vh,820px)}
.hero h1{font-size:clamp(46px,7vw,84px);line-height:1;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--verd)}
.lede{font-family:var(--serif);font-size:clamp(16px,1.5vw,18px);line-height:1.5;color:var(--ink2);max-width:40ch;margin:0 0 30px}
.fine{font-size:13px;color:var(--ink3);margin:16px 0 0}

/* the phone: a keyed Higgsfield front render, the real welcome recording
   sitting in its screen, a CSS shadow beneath */
.device-wrap{position:relative;display:flex;justify-content:center;padding:0}
.render{position:relative;width:min(380px,100%,calc(76vh * 1050 / 2247));aspect-ratio:1050/2247;height:auto;flex:none}
.render-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.render-screen{position:absolute;left:4.762%;top:1.914%;width:90.571%;height:96.173%;
  border-radius:12% / 5.5%;overflow:hidden;background:#F7F2EA;z-index:1}
.render-screen video{width:100%;height:100%;object-fit:cover;display:block}
.render-shadow{position:absolute;left:6%;right:6%;bottom:-2%;height:12%;border-radius:50%;
  background:rgba(35,26,18,.38);filter:blur(28px);z-index:0}

/* pillars */
.pillars{max-width:1240px;margin:clamp(72px,10vw,140px) auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.icon{width:34px;height:34px;fill:none;stroke:var(--verd);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.pillars h2{font-size:24px;margin-bottom:10px}
.pillars p{margin:0;color:var(--ink2);font-size:16px;max-width:36ch}

/* closing */
.close{text-align:center;margin:clamp(90px,12vw,170px) auto 0;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:30px}
.close h2{font-size:clamp(34px,5vw,58px);line-height:1.08}

/* footer */
.foot{max-width:1240px;margin:clamp(80px,10vw,140px) auto 0;padding:28px var(--gutter) 40px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:var(--ink3)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--ink3);text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;text-align:center;padding-top:16px}
  .top{flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center}
  .mark{padding-left:.36em}
  .hero-copy{display:flex;flex-direction:column;align-items:center;order:1}
  .lede{margin-inline:auto}
  .device-wrap{order:2;margin-top:40px}
  .render{width:min(300px,82vw)}
  .pillars{grid-template-columns:1fr}
  .store-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}