/* =========================================================
   twodreamsleep.com — Sciatica Pillow advertorial
   Native-ad editorial layout: article column + sticky offer
   rail. Same skeleton as the reference, with its own type
   pairing, ribboned offer panels and left-barred testimonials.
   Type: Bitter (slab headings) / Source Sans 3 (text)
   ========================================================= */

:root{
  --ink:#1B1B1B;
  --body-text:#333A40;
  --muted:#6B7178;
  --link:#1A4680;
  --red:#C81E1E;
  --navy:#12335A;
  --cream:#FDF7E4;
  --quote:#E9EEF6;
  --quote-bar:#12335A;
  --star:#D9B85E;
  --yellow:#EFDE8A;
  --yellow-dk:#BFA652;
  --rule:#DCDFE3;
  --page:#EFEEEA;

  --sheet:1000px;
  --pad:clamp(16px,3.5vw,38px);

  --display:"Bitter",Georgia,serif;
  --text:"Source Sans 3",Arial,Helvetica,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--body-text);
  font-family:var(--text);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.25;margin:0;font-weight:700}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* ---------- masthead ---------- */
.masthead{
  background:#EFEFEF;
  border-top:3px solid var(--navy);
  border-bottom:1px solid var(--rule);
  box-shadow:inset 0 -3px 0 #fff, inset 0 -4px 0 var(--rule);
  text-align:center;padding:.6rem 1rem .75rem;
  font-family:var(--display);font-size:.7rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:#4A4A4A;
}

/* ---------- sheet + two-column layout ---------- */
.brandbar{
  background:#fff;border-bottom:1px solid var(--rule);
  display:flex;justify-content:center;padding:.95rem 1rem;
}
.brandbar img{height:46px;width:auto}
@media (max-width:520px){.brandbar img{height:38px}}
.sheet{
  max-width:var(--sheet);margin:0 auto;background:#fff;
  border-inline:1px solid var(--rule);
  box-shadow:0 2px 30px -14px rgba(20,25,30,.22);
}
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 270px;
  gap:clamp(20px,3vw,34px);
  padding:clamp(20px,3.5vw,34px) var(--pad) clamp(28px,4vw,44px);
  align-items:start;
}

/* ---------- article ---------- */
.adlabel{
  display:inline-block;background:var(--ink);color:#fff;
  border-left:4px solid var(--red);
  font-family:var(--display);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.26rem .6rem;margin-bottom:.95rem;
}
.post h1{
  font-size:clamp(1.6rem,3.4vw,2.25rem);letter-spacing:-.02em;line-height:1.2;
  margin:0 0 .6rem;
}
.dateline{
  position:relative;
  font-style:italic;font-size:.86rem;color:var(--muted);
  margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule);
}
.dateline::after{
  content:"";position:absolute;left:0;bottom:-1px;width:58px;height:3px;background:var(--red);
}
.post h2{
  font-size:clamp(1.22rem,2.5vw,1.6rem);letter-spacing:-.012em;
  margin:2.1rem 0 .95rem;
  padding-left:.75rem;border-left:5px solid var(--quote-bar);
}
.post p{margin:0 0 1.05em}
.post strong{color:var(--ink)}

/* every image is a click-through, as on the source page */
.figlink{
  display:block;margin:0 0 1.2rem;border:0;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,25,30,.10), 0 14px 28px -20px rgba(20,25,30,.55);
}
.figlink img{width:100%}

/* benefit bullets — ticked discs */
.benefits{margin:0 0 1.15em}
.benefits li{
  position:relative;padding-left:1.75rem;margin-bottom:.62rem;
  font-size:.98rem;line-height:1.58;
}
.benefits li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:17px;height:17px;border-radius:50%;background:var(--quote-bar);
}
.benefits li::after{
  content:"";position:absolute;left:5.5px;top:.63em;
  width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* testimonials — left bar instead of centred cards */
.testi{
  position:relative;
  margin:0 0 .85rem;background:var(--quote);
  border-left:5px solid var(--quote-bar);
  border-radius:0 5px 5px 0;
  padding:.95rem 1.1rem .95rem 2.6rem;
}
.testi::before{
  content:"\201C";position:absolute;left:.7rem;top:.1rem;
  font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1;
  color:var(--quote-bar);opacity:.42;
}
.testi:nth-of-type(even){background:#fff;border-left-color:var(--navy);box-shadow:inset 0 0 0 1px var(--rule)}
.testi:nth-of-type(even)::before{color:var(--navy)}
.testi p{margin:0 0 .6rem;font-style:italic;font-size:.96rem;line-height:1.6;color:#2A3138}
.testi footer{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.testi cite{font-style:normal;font-weight:700;font-size:.9rem;color:var(--ink)}
.stars{color:var(--star);font-size:.9rem;letter-spacing:.1em}

/* ---------- in-article offer panel ---------- */
.offer{
  position:relative;
  margin:2rem 0 0;border:2px solid var(--red);background:var(--cream);
  box-shadow:0 14px 34px -24px rgba(200,30,30,.7);
}
/* coupon-style dashed inner rule */
.offer::after{
  content:"";position:absolute;inset:6px;z-index:2;pointer-events:none;
  border:1px dashed rgba(200,30,30,.42);
}
.offer-ribbon{
  position:relative;z-index:3;
  background:var(--red);padding:.8rem 1rem;text-align:center;
}
.offer-ribbon h2{
  margin:0;padding:0;border:0;color:#fff;
  font-size:clamp(1.25rem,2.9vw,1.8rem);letter-spacing:-.01em;
}
.offer-body{padding:clamp(1.3rem,3vw,2rem);text-align:center}
.offer-price{
  margin:0 0 .6rem;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,2.1vw,1.2rem);color:var(--red);
}
.offer-guarantee{margin:0 0 .9rem;font-size:.94rem}
.offer-link{margin:0 0 .8rem}
.offer-link a{font-weight:700;font-size:1rem}
.offer-terms{margin:0 0 1.1rem;font-size:.86rem;font-style:italic;color:var(--muted)}
.offer .figlink{margin:0 0 1.1rem;box-shadow:inset 0 0 0 1px #E8DFC4}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  background:var(--yellow);color:var(--ink);
  border:2px solid var(--yellow-dk);border-radius:5px;
  font-family:var(--display);font-weight:700;text-align:center;
  box-shadow:0 3px 0 var(--yellow-dk);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{background:#EFDE8A;transform:translateY(-1px);box-shadow:0 4px 0 var(--yellow-dk)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--yellow-dk)}
.btn-check{
  padding:.85rem 1.5rem;font-size:clamp(.85rem,1.9vw,1rem);
  letter-spacing:.03em;text-transform:uppercase;
}
.btn-claim{display:block;width:100%;padding:.62rem .8rem;font-size:.88rem}

/* ---------- sticky offer rail ---------- */
.rail{position:sticky;top:18px}
.railbox{
  border:2px solid var(--navy);background:#fff;
  border-radius:7px;overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(18,51,90,.75);
}
.railbox h3{
  background:linear-gradient(180deg,#17406E 0%,var(--navy) 100%);
  color:#fff;margin:0;
  padding:.65rem .75rem;font-size:.95rem;line-height:1.3;text-align:center;
}
.railbox .figlink{margin:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--rule)}
.rail-copy{
  margin:0;padding:.75rem .8rem;text-align:center;
  font-size:.86rem;line-height:1.5;font-weight:600;color:var(--ink);
}
.rail-foot{padding:0 .8rem .8rem}

/* ---------- footer ---------- */
.site-footer{background:#EDEDED;border-top:3px solid var(--navy);margin-top:0}
.footer-inner{max-width:var(--sheet);margin:0 auto;padding:clamp(22px,3.5vw,34px) var(--pad);text-align:center}
.footer-flag{
  margin:0 0 1rem;font-family:var(--display);font-weight:700;
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.footer-legal{margin:0 0 1rem;font-size:.66rem;line-height:1.6;color:#6E747A;text-align:justify}
.footer-copy{margin:0 0 1rem;font-size:.74rem;font-weight:700;color:#4A4F55}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem}
.footer-nav a{font-size:.76rem;color:#4A4F55;text-decoration:none}
.footer-nav a:hover{text-decoration:underline;text-underline-offset:2px}
.footer-nav span{color:#A8ADB2;font-size:.76rem}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:820px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;margin-top:.5rem}
  .railbox{max-width:420px;margin-inline:auto}
}
@media (max-width:480px){
  body{font-size:15.5px}
  .masthead{letter-spacing:.22em;font-size:.64rem}
  .footer-legal{text-align:left}
  .btn-check{padding:.8rem 1rem;font-size:.82rem;width:100%}
}