/* Get Daily Quote - shared styles */

:root{
  --ink:#151C26;
  --ink-raised:#1D2632;
  --bone:#F2EDE4;
  --bone-dim:#D9D2C6;
  --slate:#8C9DB0;
  --rule:#2C3A49;
  --serif:"Crimson Text",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone-dim);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.page{max-width:38rem;margin:0 auto;padding:3rem 1.5rem 4rem}
.page--doc{max-width:42rem}

a{color:var(--bone);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* masthead */
.wordmark{
  font-size:.9rem;font-weight:500;letter-spacing:.01em;
  color:var(--slate);margin:0 0 3.5rem;
}
.wordmark a{color:var(--slate);text-decoration:none}
.wordmark a:hover{color:var(--bone-dim);text-decoration:underline}

/* hero message bubble */
.thread{margin:0 0 3rem}
.stamp{font-size:.8rem;color:var(--slate);margin:0 0 .75rem}
.bubble{
  background:var(--bone);color:#1A1F27;
  border-radius:1.15rem 1.15rem 1.15rem .3rem;
  padding:1.35rem 1.5rem 1.2rem;max-width:29rem;
}
.bubble q{quotes:none}
.bubble q:before,.bubble q:after{content:""}
.quote{font-family:var(--serif);font-size:1.5rem;line-height:1.4;margin:0 0 1rem;display:block}
.cite{font-size:.85rem;line-height:1.5;color:#4A535F;margin:0}
.domain{font-size:.85rem;color:#6B7684;margin:.55rem 0 0}

/* copy */
.lede{font-family:var(--serif);font-size:1.6rem;line-height:1.35;color:var(--bone);margin:0 0 1.75rem}
p{margin:0 0 1.25rem;max-width:36rem}
.rule{border:0;border-top:1px solid var(--rule);margin:2.75rem 0 1.5rem}
.foot{font-size:.85rem;color:var(--slate);line-height:1.7}
.foot strong{color:var(--bone-dim);font-weight:500}
.foot a{color:var(--slate)}

/* long-form documents */
.doc h1{
  font-family:var(--serif);font-size:2.1rem;font-weight:400;
  line-height:1.2;color:var(--bone);margin:0 0 .5rem;
}
.doc .updated{font-size:.85rem;color:var(--slate);margin:0 0 2.5rem}
.doc h2{
  font-family:var(--sans);font-size:1.05rem;font-weight:500;
  color:var(--bone);margin:2.5rem 0 .85rem;line-height:1.4;
}
.doc h3{
  font-family:var(--sans);font-size:.95rem;font-weight:500;
  color:var(--bone-dim);margin:1.75rem 0 .6rem;
}
.doc ul{margin:0 0 1.25rem;padding-left:1.15rem;max-width:36rem}
.doc li{margin:0 0 .5rem}
.doc .callout{
  background:var(--ink-raised);
  border-left:3px solid var(--slate);
  padding:1rem 1.25rem;margin:0 0 1.5rem;border-radius:0 .35rem .35rem 0;
}
.doc .callout p:last-child{margin-bottom:0}
.placeholder{
  background:#3A2A1E;color:#F0D9A8;
  padding:.1em .45em;border-radius:.2em;
  font-size:.9em;font-weight:500;
}

/* FAQ */
.qa{margin:0 0 2rem;max-width:36rem}
.qa h2{margin-top:2.25rem}
.qa p{margin-bottom:.9rem}

@media (max-width:30rem){
  .quote{font-size:1.3rem}
  .lede{font-size:1.35rem}
  .doc h1{font-size:1.75rem}
  .page{padding-top:2.25rem}
}

/* ==========================================================
   LANDING PAGE
   ========================================================== */
:root{
  --grad:linear-gradient(120deg,#E8A96E 0%,#B0709A 45%,#5A6FC0 100%);
  --glass:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.10);
  --display:"Gabarito",system-ui,sans-serif;
}
body.lp{font-family:var(--display);color:#C9D3E2;overflow-x:hidden;position:relative}
body.lp .sky{
  position:absolute;inset:0;z-index:-2;min-height:100%;
  transition:background .45s linear;
}

/* nav */
.nav{max-width:72rem;margin:0 auto;padding:1.6rem 1.6rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.mark{width:34px;height:34px;border-radius:10px;display:block}
.brandname{font-weight:700;font-size:1.14rem;color:#F5F0E7;letter-spacing:-.015em}
.navlinks{display:flex;gap:1.5rem}
.navlinks a{color:#B5C2D6;text-decoration:none;font-size:.93rem;font-weight:500}
.navlinks a:hover{color:#F5F0E7}

/* hero */
.hero{max-width:72rem;margin:0 auto;padding:4rem 1.6rem 1rem;text-align:center}
.hero h1{font-weight:800;font-size:clamp(2.35rem,6.4vw,4.3rem);line-height:1.02;
  letter-spacing:-.038em;color:#F9F5EF;margin:0 0 1.1rem}
.hero .sub{font-size:1.12rem;line-height:1.58;color:#C2CEDF;max-width:33rem;margin:0 auto 3.2rem}

/* demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:3.5rem;
  align-items:center;max-width:58rem;margin:0 auto;text-align:left}
.controls{display:flex;flex-direction:column;gap:2.3rem}
.clabel{display:block;font-size:.78rem;font-weight:600;color:#98ABC5;margin:0 0 .85rem}
.timeval{color:#F5F0E7;font-weight:700;margin-left:.35rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--display);font-size:.88rem;font-weight:500;
  padding:.52rem 1rem;border-radius:999px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);color:#CBD6E6;
  transition:background .18s,color .18s}
.chip:hover:not(:disabled){background:rgba(255,255,255,.12);color:#F5F0E7}
.chip.on{background:var(--grad);border-color:transparent;color:#1A1206;font-weight:700}
.chip:disabled{opacity:.28;cursor:not-allowed}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.09));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:23px;height:23px;border-radius:50%;
  background:var(--grad);border:2px solid #F5F0E7;cursor:pointer}
input[type=range]::-moz-range-thumb{width:21px;height:21px;border-radius:50%;
  background:#B0709A;border:2px solid #F5F0E7;cursor:pointer}

/* phone */
.phone{background:rgba(9,13,21,.6);border:1px solid rgba(255,255,255,.13);
  border-radius:2.3rem;padding:.7rem .7rem 1.6rem;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 34px 80px rgba(0,0,0,.5)}
.phonetop{display:flex;align-items:center;justify-content:center;position:relative;height:2.1rem}
.notch{width:46px;height:5px;border-radius:99px;background:rgba(255,255,255,.2)}
.clock{position:absolute;right:1.1rem;font-size:.73rem;color:#8DA0BA;font-weight:500}
.msgs{padding:.6rem .8rem 0}
.lp .stamp{font-size:.75rem;color:#8DA0BA;margin:0 0 .8rem;text-align:center}
.lp .bubble{background:#F4EFE6;color:#171C25;border-radius:1.25rem 1.25rem 1.25rem .35rem;
  padding:1.25rem 1.35rem 1.1rem;max-width:none}
.lp .quote{font-family:var(--serif);font-size:1.28rem;line-height:1.4;margin:0 0 .9rem;display:block}
.lp .cite{font-size:.8rem;color:#4C5663;margin:0;line-height:1.45}
.lp .domain{font-size:.76rem;color:#6E7987;margin:.5rem 0 0}
.verified{font-size:.73rem;color:#93C4A3;margin:.95rem 0 0;text-align:center}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.bubble.pop{animation:pop .32s cubic-bezier(.2,.7,.3,1)}}

/* bands */
.band{max-width:66rem;margin:0 auto;padding:6.5rem 1.6rem 0}
.band h2{font-weight:700;font-size:clamp(1.65rem,3.5vw,2.4rem);
  letter-spacing:-.028em;color:#F9F5EF;margin:0 0 .75rem}
.bandsub{color:#AAB8CD;font-size:1.03rem;line-height:1.6;max-width:37rem;margin:0 0 2.6rem}

/* compare: the loudest element on the page after the hero */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.card{border-radius:1.5rem;padding:1.9rem 1.9rem 1.7rem;border:1px solid var(--glass-line)}
.card--bad{background:linear-gradient(160deg,rgba(190,84,84,.15),rgba(190,84,84,.04));
  border-color:rgba(226,130,130,.28)}
.card--good{background:linear-gradient(160deg,rgba(88,160,118,.16),rgba(88,160,118,.04));
  border-color:rgba(130,208,160,.3)}
.tag{font-size:.72rem;font-weight:700;margin:0 0 1.1rem;letter-spacing:.05em}
.card--bad .tag{color:#F0A0A0}
.card--good .tag{color:#95D8AC}
.cq{font-family:var(--serif);font-size:1.38rem;line-height:1.36;color:#F7F3EC;margin:0 0 1rem}
.cmeta{font-size:.86rem;color:#BECBDC;margin:0 0 1.05rem;font-weight:500}
.cnote{font-size:.89rem;line-height:1.6;color:#98A8BE;margin:0}

/* steps: a real sequence, so numbered, but no card chrome */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.steps li{position:relative;padding-top:1.4rem}
.steps li:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:2px;background:var(--grad);opacity:.55}
.steps .stepn{font-weight:800;font-size:2.7rem;line-height:1;margin:0 0 .55rem;letter-spacing:-.045em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{font-weight:600;font-size:1.08rem;color:#F5F0E7;margin:0 0 .5rem}
.steps p{font-size:.93rem;line-height:1.6;color:#A2B1C6;margin:0}

/* styles: quiet list, not nine identical cards */
.stylelist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.stylelist li{display:flex;align-items:baseline;gap:.9rem;
  padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.075)}
.stylelist b{font-weight:600;color:#F5F0E7;font-size:1rem;min-width:6.2rem}
.stylelist span{font-size:.87rem;color:#93A6C0}

/* pricing */
.price{max-width:32rem;margin:0 auto;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);border-radius:2rem;padding:2.9rem 2rem 2.3rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.amount{font-weight:800;font-size:3.5rem;letter-spacing:-.045em;margin:0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.amount span{font-size:1.05rem;font-weight:500;-webkit-text-fill-color:#93A6C0;color:#93A6C0;letter-spacing:0}
.trial{color:#C9D5E4;margin:.35rem 0 2rem;font-size:1rem}
.plist{list-style:none;margin:0 0 2rem;padding:0;text-align:left;display:inline-block}
.plist li{position:relative;padding-left:1.55rem;margin:0 0 .75rem;font-size:.95rem;color:#BECBDC}
.plist li:before{content:"";position:absolute;left:0;top:.45rem;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--grad)}
.soon{display:inline-block;font-weight:700;font-size:1rem;padding:.9rem 2.4rem;
  border-radius:999px;background:var(--grad);color:#1A1206;margin:0 0 1.4rem;
  box-shadow:0 10px 30px rgba(176,112,154,.3)}
.pnote{font-size:.83rem;color:#8DA0BA;line-height:1.6;margin:0}

/* footer */
.foot2{max-width:66rem;margin:0 auto;padding:5rem 1.6rem 4rem;font-size:.87rem;color:#8DA0BA}
.foot2 p{margin:0 0 .7rem}
.foot2 strong{color:#C9D5E4;font-weight:600}
.flinks a{color:#8DA0BA;text-decoration:none;margin-right:1.4rem}
.flinks a:hover{color:#F5F0E7;text-decoration:underline}

@media (max-width:58rem){
  .demo{grid-template-columns:1fr;gap:2.4rem;max-width:27rem}
  .compare{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  .stylelist{grid-template-columns:1fr;gap:0}
  .band{padding-top:5rem}
}
@media (max-width:30rem){
  .navlinks{gap:1rem;font-size:.85rem}
  .hero{padding-top:3rem}
  .stylelist b{min-width:5.6rem}
}

/* ==========================================================
   DEPTH: marble layers, grain, elevation
   ========================================================== */
.marble{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sc{
  position:absolute;display:block;
  mix-blend-mode:screen;
  filter:blur(.4px) contrast(1.05);
  user-select:none;
}
.sc-a{top:-3rem;right:-6rem;width:40rem;opacity:.15}
.sc-b{top:78rem;left:-11rem;width:36rem;opacity:.115}
.sc-c{top:132rem;right:-9rem;width:35rem;opacity:.10}
.sc-d{top:190rem;left:-8rem;width:32rem;opacity:.085}

/* film grain so gradients never band */
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* raise the foreground above the marble */
.nav,.hero,.band,.foot2{position:relative;z-index:1}

/* more dimension on the surfaces */
.card{
  box-shadow:0 22px 50px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.phone{box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.11)}
.price{box-shadow:0 34px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12)}
.chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.chip.on{box-shadow:0 6px 18px rgba(176,112,154,.32)}

.credit{font-size:.78rem;color:#71829B;max-width:34rem}

@media (max-width:58rem){
  .sc-a{width:26rem;right:-9rem;opacity:.12}
  .sc-b{top:96rem;width:24rem;left:-10rem}
  .sc-c{top:150rem;width:23rem;right:-9rem}
  .sc-d{display:none}
  .grain{opacity:.24}
}