/* Matches The Fiverr UGC Blueprint course: paper, Lora + Inter + typewriter labels, taped sticky notes */
:root{
  --paper:#f1eadf; --card:#faf7f1; --ink:#3f342d; --muted:#7a6f66; --line:#ded3c6;
  --maroon:#7a3b47; --olive:#6f7a55; --rose:#c99a9e;
  --sage:#e6e7d6; --butter:#f3ead3; --pink:#eddcd9; --tape:#dddeca; --shadow:#ddd4c8;
  --serif:"Lora",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif; --mono:"Cousine","Liberation Mono","Courier New",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";display:block;height:34px;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 22px;
  background:
    repeating-linear-gradient(90deg,rgba(201,154,158,.35) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(201,154,158,.35) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(111,122,85,.16) 0 9px,transparent 9px 22px),
    repeating-linear-gradient(0deg,rgba(111,122,85,.16) 0 9px,transparent 9px 22px),
    #e6e7d6}
.wrap{max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.wrap.wide{max-width:680px}
.brand{display:flex;justify-content:space-between;align-items:center;font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand b{font-weight:400;color:var(--maroon)}
.brand a{color:inherit;text-decoration:none}

.screen{position:relative;background:var(--card);padding:34px 24px 28px;box-shadow:2px 3px 0 var(--shadow);display:flex;flex-direction:column;gap:18px}
.screen::before{content:"";position:absolute;top:-11px;left:50%;width:92px;height:22px;margin-left:-46px;background:var(--tape);opacity:.9;transform:rotate(-2deg)}

h1,h2{font-family:var(--serif);font-weight:500;color:var(--maroon);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,8.5vw,44px)} h2{font-size:clamp(25px,6.5vw,32px)}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--olive)}
h3{font:600 16px var(--sans);color:var(--maroon);margin:8px 0 0}
p{margin:0}
strong{color:var(--maroon);font-weight:600}
.lede{font:italic 17px/1.55 var(--serif);color:var(--ink)}
.note,.step,.tag,.box h3{display:inline-block;align-self:flex-start;font:12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--rose)}
.tag{color:var(--olive);border-color:var(--olive)}

.btn{appearance:none;display:block;border:0;border-radius:3px;background:var(--maroon);color:var(--card);font:600 16px var(--sans);letter-spacing:.01em;padding:16px 20px;cursor:pointer;width:100%;text-align:center;text-decoration:none;box-shadow:2px 3px 0 var(--shadow)}
.btn:hover{background:#6a3240}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--maroon);border:1.5px solid var(--maroon);box-shadow:none}
.btn:focus-visible,.opt:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--rose);outline-offset:2px}

.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.meta span::before{content:"○ ";color:var(--maroon)}
.progress{height:4px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--maroon);transition:width .35s}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{appearance:none;display:flex;gap:12px;align-items:center;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:15px 16px;font:500 15.5px var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.opt::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--muted);border-radius:50%}
.opt:hover{background:var(--sage);border-color:var(--sage)}
.opt.on{background:var(--sage);border-color:var(--olive)}
.opt.on::before{border-color:var(--olive);background:radial-gradient(circle,var(--olive) 0 4px,transparent 5px)}
.back{background:none;border:0;color:var(--muted);font:13px var(--mono);letter-spacing:.06em;cursor:pointer;padding:4px 0;align-self:flex-start}

label{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
input{width:100%;font:16px var(--sans);padding:14px 15px;border-radius:2px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.fields{display:flex;flex-direction:column;gap:14px}
.fine{font-size:13px;color:var(--muted)}
.fine a,.foot a,.legal a{color:inherit}
.err{color:var(--maroon);font-size:14px;min-height:1em}

/* sticky notes */
.tease,.gift,.offer.top{position:relative;padding:18px 18px 16px;box-shadow:2px 3px 0 var(--shadow)}
.tease{background:var(--pink)}
.gift{background:var(--sage);font-size:15px}
.tease::before,.gift::before,.offer.top::before{content:"";position:absolute;top:-9px;left:24px;width:70px;height:18px;background:var(--pink);opacity:.85;transform:rotate(2deg)}
.tease::before{background:var(--tape)}

.box{border-top:1px dashed var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
ol.steps{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:16px}
ol.steps li::marker{font:13px var(--mono);color:var(--maroon)}
ol.steps li strong{display:block;font:600 16.5px var(--sans);color:var(--maroon);margin-bottom:3px}
ol.steps li p{color:var(--ink);font-size:15px}

.offer{border:1px solid var(--line);background:var(--card);padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.offer.top{background:var(--butter);border:0;padding:24px 18px 20px}
.offer .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.offer h4{font:500 21px/1.2 var(--serif);color:var(--maroon);margin:0}
.price{font:italic 24px var(--serif);color:var(--olive)}
.story{font:italic 16px/1.6 var(--serif);color:var(--olive)}
.foot{font:11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--muted)}
.legal{gap:12px}
.legal li{font-size:15.5px}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}