/* Page-specific styles for gratis.html.
   Do not replace the live site styles.css. This file is additive. */

.magnet-hero{
  position:relative;
  overflow:hidden;
  padding:44px 0 56px;
  background:
    radial-gradient(ellipse at 85% 10%,var(--blush) 0,transparent 55%),
    radial-gradient(ellipse at 0% 100%,var(--sage-soft) 0,transparent 50%),
    var(--cream);
}
.magnet-hero h1{font-size:clamp(34px,8vw,58px);margin:14px 0 18px}
.magnet-hero h1 em{color:var(--rose);font-style:italic;font-weight:400}
.magnet-grid{display:grid;gap:36px;align-items:center}
.sheet{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:10px;
  max-width:340px;
  margin:0 auto;
  transform:rotate(-1.5deg);
}
.sheet img{width:100%;height:auto;border-radius:3px}
.sheet-cap{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:14px}
.inside{background:var(--paper)}
.inside-grid{display:grid;gap:18px}
.inside-item{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  border-top:5px solid var(--blush-deep);
}
.inside-item:nth-child(2){border-top-color:var(--sage)}
.inside-item:nth-child(3){border-top-color:var(--rose)}
.inside-item h3{font-size:22px;margin:8px 0 10px}
.inside-item p{color:var(--ink-soft);font-size:15px}
.verse{
  margin:22px auto 0;
  padding:16px 0;
  border-top:1px solid var(--blush-deep);
  border-bottom:1px solid var(--blush-deep);
  max-width:46ch;
  text-align:center;
}
.verse p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);line-height:1.5}
.verse cite{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-variant:small-caps;
  letter-spacing:.06em;
  color:var(--rose);
  font-size:15px;
}
.signup-sec{padding:40px 0 72px}
.notice{font-size:13px;color:var(--ink-soft);max-width:52ch;margin:18px auto 0;text-align:center}
.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  font-size:13px;
  color:var(--ink-soft);
  max-width:460px;
  margin:0 auto;
}
.consent input{margin-top:4px;accent-color:var(--rose);flex:0 0 auto}
.consent a{color:var(--rose);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.consent a:hover,.consent a:focus-visible{color:var(--ink)}
form.signup .consent,form.signup .fineprint{grid-column:1/-1}
@media (min-width:640px){
  .inside-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:960px){
  .magnet-hero{padding:72px 0 84px}
  .magnet-grid{grid-template-columns:1.1fr .9fr}
  .sheet{max-width:380px}
}