/* No Effort Rentals — Smart Stay page.
   Builds on site.css: same field, paper, ink, stamps and postcard. Only what
   this page adds lives here: the host's morning card, the struck-through
   chores, the stay told as four postmarks. */

/* ---------- hero: the host's morning ---------- */
.ss-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.ss-hero .h1{font-size:clamp(38px,4.1vw,54px)}
@media (max-width:900px){.ss-hero{grid-template-columns:1fr}}
.memo{aspect-ratio:5/4}
/* the two faces share one grid cell: the card takes the height of the taller
   face, whatever the width and the font, so nothing gets cut at the bottom */
.memo .pc-inner{position:relative;inset:auto;display:grid;min-height:100%}
.memo .pc-face{grid-area:1/1;position:relative;inset:auto;height:auto}
.memo .pc-front.memo-front{display:flex;flex-direction:column;padding:clamp(18px,4.2cqw,30px) clamp(18px,4.6cqw,34px) clamp(16px,3.6cqw,26px);gap:0}
.memo-head{padding-bottom:clamp(12px,2.8cqw,18px);border-bottom:1px solid var(--line)}
.memo-title{font:400 clamp(22px,5.1cqw,34px)/1.1 var(--display);color:var(--ink);letter-spacing:-.005em}
.memo-sub{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:clamp(13px,2.4cqw,15px);color:var(--ink-2)}
.memo-tag{font:500 11.5px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;padding:5px 8px 4px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.memo-list{flex:1;display:grid;align-content:space-evenly}
.memo-row{display:grid;grid-template-columns:clamp(46px,11cqw,68px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,3cqw,20px);padding:clamp(10px,2.4cqw,16px) 0;border-bottom:1px solid var(--line)}
.memo-row:last-child{border-bottom:0}
.memo-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;filter:saturate(.72) sepia(.1) contrast(.94) brightness(1.04);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}
.memo-place{display:grid;gap:2px;min-width:0}
.memo-place b{font-weight:600;font-size:clamp(14.5px,2.9cqw,17px);line-height:1.3}
.memo-place span{font-size:clamp(12.5px,2.4cqw,14.5px);color:var(--ink-2);line-height:1.35}
.memo-state{display:grid;gap:2px;justify-items:end;text-align:right}
.memo-state span{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:clamp(12.5px,2.5cqw,15px);line-height:1.3;white-space:nowrap}
.memo-state small{font-size:clamp(11.5px,2.2cqw,13.5px);color:var(--ink-2);line-height:1.35}
.memo-state svg{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.memo-state .ok{color:var(--sage-deep)}
.memo-state .warn{color:var(--coral-ink)}
.memo-state .done{color:var(--ink-2);font-weight:500}
.memo-foot{padding-top:clamp(10px,2.4cqw,16px);font:400 clamp(16px,3.2cqw,21px)/1.2 var(--display);color:var(--ink-2)}

/* back: the guest's side (its own layout: the 3:2 back of site.css
   would hide these lines on small cards) */
.memo .back.memo-back{display:flex;flex-direction:column;gap:0;padding:clamp(18px,4.6cqw,34px) clamp(20px,5cqw,38px);position:relative}
.memo .back.memo-back::before{display:none}
.memo-back .back-head{margin-bottom:clamp(14px,3.4cqw,26px)}
.memo-back .stamp{position:absolute;top:clamp(46px,10cqw,72px);right:clamp(20px,5cqw,38px);width:clamp(64px,15cqw,96px)}
.memo-back .mini-stamp{background:var(--sage-deep);font-size:clamp(22px,5cqw,32px)}
.memo-back .mini-stamp small{font-size:clamp(11px,1.9cqw,12px)}
.mb-msg{display:grid;gap:clamp(6px,1.4cqw,10px);padding-right:clamp(80px,19cqw,120px)}
.mb-hello{font:400 clamp(26px,6.2cqw,42px)/1.05 var(--display);color:var(--ink)}
.mb-intro{font-size:clamp(14px,2.8cqw,17px);color:var(--ink-2);margin-top:clamp(6px,1.6cqw,12px)}
.door-code{font:400 clamp(40px,11cqw,76px)/1 var(--display);letter-spacing:.06em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.mb-times{display:grid;gap:4px;margin:clamp(6px,1.6cqw,12px) 0 0;font-size:clamp(14px,2.8cqw,17px)}
.mb-times div{display:flex;gap:12px}
.mb-times dt{color:var(--ink-2);min-width:6.2em}
.mb-times dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.mb-addr{margin-top:auto;margin-left:auto;width:min(100%,58%);display:grid}
.mb-addr .line{border-bottom:1px solid var(--line);padding:clamp(8px,2cqw,14px) 0 4px;font:500 clamp(13px,2.6cqw,16px)/1.25 var(--text)}
@media (max-width:560px){
  .mb-msg{padding-right:0}
  .mb-hello{padding-right:calc(clamp(64px,15cqw,96px) + 8px)}
  .mb-addr{width:100%}
}

/* ---------- what you stop doing ---------- */
.chores-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.chores-grid .section-head{margin-bottom:0;position:sticky;top:32px}
.chores{display:grid;gap:0}
.chores li{padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--line)}
.chores li:last-child{border-bottom:1px solid var(--line)}
.chore{font:400 clamp(22px,2.4vw,28px)/1.4 var(--display);color:var(--ink);text-wrap:pretty}
/* the line is drawn by hand, once, when the list comes into view; clone
   makes every wrapped line carry its own stroke */
.chore .strike{color:var(--ink-2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7 C 40 3 80 10 120 6 S 180 4 199 7' fill='none' stroke='%23a14a31' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 58%/100% .42em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s cubic-bezier(.65,0,.35,1) var(--d,0ms),color .9s ease calc(var(--d,0ms) + .3s)}
.js-strike .chores li:not(.struck) .strike{background-size:0% .42em;color:var(--ink)}
.instead{margin-top:10px;display:flex;gap:10px;align-items:baseline;color:var(--ink-2);font-size:17px}
/* "Before" / "Now": the strike is decoration, the words carry the meaning */
.chore .when,.instead .when{display:inline-block;min-width:4.2em;font:600 11.5px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;vertical-align:.35em}
.chore .when{color:var(--coral-ink);margin-right:10px}
.instead .when{color:var(--sage-deep);min-width:auto}
@media (max-width:900px){
  .chores-grid{grid-template-columns:1fr}
  .chores-grid .section-head{position:static}
}

/* ---------- one stay: four postmarks on a route ---------- */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);position:relative;counter-reset:none}
.route::before{content:"";position:absolute;left:44px;right:calc(25% - 44px);top:44px;border-top:1.5px dashed #b9c7c1}
.stop{position:relative;display:grid;gap:10px;align-content:start}
.stop .pm{width:88px;height:88px;color:var(--ink-2);opacity:.55;background:var(--mist);border-radius:50%}
.stop .pm circle{fill:none;stroke:currentColor;stroke-width:2}
.stop .pm circle+circle{stroke-width:1;stroke-dasharray:3 4}
.pm-date{position:absolute;left:0;top:0;width:88px;height:88px;display:grid;place-content:center;text-align:center;font:400 30px/1 var(--display);color:var(--ink)}
.pm-date span{display:block;font:500 11.5px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.stop .h3{margin-top:12px}
.stop p:not(.pm-date){color:var(--ink-2);font-size:16px}
.stop:nth-child(3) .pm{color:var(--sage-deep);opacity:.9}
.stop:nth-child(4) .pm{color:var(--coral-ink);opacity:.6}
@media (max-width:900px){
  .route{grid-template-columns:1fr;gap:28px;max-width:560px}
  .route::before{left:44px;right:auto;top:44px;bottom:44px;border-top:0;border-left:1.5px dashed #b9c7c1}
  .stop{grid-template-columns:88px minmax(0,1fr);column-gap:22px}
  .stop .pm{grid-row:1/4}
  .stop .h3{margin-top:18px}
}

/* ---------- early access postcard ---------- */
.ss-stamp{font-size:26px!important;padding:12px 0}
.ss-stamp small{font-size:11px!important;margin-top:5px;letter-spacing:.14em}
#email-hint{color:var(--ink-2);font-size:14px}

/* ---------- small cards (phones) ---------- */
@media (max-width:560px){
  .memo{aspect-ratio:4/5}
  .memo-row{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .memo-state{grid-column:2;justify-items:start;text-align:left}
}

/* ---------- motion ---------- */
.memo-row{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
.memo-row:nth-child(1){animation-delay:.55s}
.memo-row:nth-child(2){animation-delay:.7s}
.memo-row:nth-child(3){animation-delay:.85s}
.memo-foot{animation:printed .8s ease-out both 1.2s}
@media (prefers-reduced-motion:reduce){
  .memo-row,.memo-foot{animation:printed .4s ease-out both}
    .chore .strike{transition:none}
}


/* ---------- the demo panel: a paper key tag with the sign-in ----------
   The page promises "no keys"; the only key left is the one to the demo. */
.try{margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,5vw,60px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,6vw,80px);align-items:center}
.try-title{font:400 clamp(28px,3vw,38px)/1.15 var(--display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.try-copy{display:grid;gap:16px;justify-items:start;max-width:34rem}
.try-copy p{color:var(--ink-2);line-height:1.6}
.try-copy .btn{margin-top:8px}
/* The shadow sits on the wrapper: a filter on the clipped card would be cut away. */
.keytag{--hole:22px;position:relative;justify-self:center;width:min(100%,400px);filter:drop-shadow(0 18px 24px rgba(31,45,58,.16)) drop-shadow(0 1px 2px rgba(31,45,58,.12));transform:rotate(-2.5deg)}
.kt-card{position:relative;padding:30px 30px 26px calc(var(--hole) + 58px);background:var(--paper);color:var(--ink);clip-path:polygon(15% 0,100% 0,100% 100%,15% 100%,0 72%,0 28%)}
.kt-card::before{content:"";position:absolute;left:26px;top:50%;width:var(--hole);height:var(--hole);margin-top:calc(var(--hole) / -2);border-radius:50%;background:var(--mist);box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--line)}
.kt-string{position:absolute;z-index:1;left:-84px;top:calc(50% - 38px);width:120px;height:60px;fill:none;stroke:var(--coral);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.kt-head{margin-bottom:14px;color:var(--coral-ink)}
.kt-lines{display:grid;gap:12px;border-left:1px dashed var(--line);padding-left:18px}
.kt-lines div{display:grid;gap:3px}
.kt-lines dt{font-size:12.5px;color:var(--ink-2)}
.kt-lines dd{margin:0;font:500 15px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;user-select:all;overflow-wrap:anywhere}
.kt-foot{margin-top:16px;font-size:12.5px;color:var(--ink-2)}
@media (max-width:760px){
  .try{grid-template-columns:1fr}
  .keytag{justify-self:start;width:calc(100% - 14px);transform:rotate(-1.5deg)}
  .kt-card{padding:26px 18px 22px calc(var(--hole) + 42px)}
  .kt-card::before{left:18px}
  .kt-lines{padding-left:14px}
  .kt-lines dd{font-size:13.5px}
  .kt-string{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .keytag{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .keytag:hover{transform:rotate(-1deg)}
}