/* ============================================================
   PORTAL · planning-suite page + portal login
   Builds on css/styles.css tokens. Warm editorial.
   ============================================================ */

/* ---------- shared scrapbook seal (matches site) ---------- */
.seal{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.12em;
  width:96px; height:96px; border-radius:50%; border:1px dashed rgba(166,96,60,.55);
  background:radial-gradient(circle at 50% 38%, rgba(202,140,80,.16), transparent 70%);
  color:var(--clay); text-align:center; }
.seal i{ font-family:var(--serif); font-style:normal; font-size:1.35rem; letter-spacing:.06em; line-height:1; }
.seal b{ font-family:var(--mono); font-weight:400; font-size:.48rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }

/* ============================================================
   PS · HERO  (editorial split, light)
   ============================================================ */
.ps-hero{ position:relative; overflow:hidden; padding-top:clamp(8.5rem,15vh,12rem); padding-bottom:clamp(4rem,8vw,7rem); }
.ps-hero__wm{ position:absolute; top:clamp(6rem,12vh,9rem); right:-3vw; z-index:0; pointer-events:none;
  font-family:var(--serif); font-size:clamp(7rem,20vw,18rem); line-height:.8; color:var(--espresso-dk); opacity:.045; text-transform:lowercase; }
.ps-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.ps-hero__sig{ display:block; font-size:clamp(1.5rem,2.5vw,2.1rem); color:var(--clay); transform:rotate(-4deg); transform-origin:left; margin:.4rem 0 .1rem; width:max-content; }
.ps-hero .display{ font-size:clamp(2.7rem,6vw,5.2rem); }
.ps-hero__cta{ margin-top:2.1rem; display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.ps-hero__free{ display:inline-flex; align-items:center; gap:.6em; margin-top:1.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); }
.ps-hero__free b{ color:var(--clay); font-weight:400; }
.ps-hero__art{ position:relative; }

/* ============================================================
   MOCK WINDOW  (faux app chrome)
   ============================================================ */
.mockwin{ position:relative; background:#fbf8f1; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 4px rgba(20,17,15,.12), 0 26px 60px rgba(20,17,15,.26); transition:transform .7s var(--ease); }
.mockwin__bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; background:linear-gradient(180deg,#efe7d8,#e7ddca); border-bottom:1px solid rgba(20,17,15,.08); }
.mockwin__bar i{ width:10px; height:10px; border-radius:50%; background:rgba(20,17,15,.16); flex:none; }
.mockwin__bar i:nth-child(1){ background:#d98b6a; } .mockwin__bar i:nth-child(2){ background:#d9bd6a; } .mockwin__bar i:nth-child(3){ background:#9bbf8f; }
.mockwin__bar em{ font-family:var(--mono); font-style:normal; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-left:.5rem; }
.mockwin__body{ padding:1.4rem 1.4rem 1.6rem; }

/* tilt + tape lockup for hero art */
.ps-hero__art .mockwin{ transform:rotate(2.4deg); }
.ps-hero__art .mockwin:hover{ transform:rotate(.6deg) translateY(-3px); }
.ps-tape{ position:absolute; z-index:9; width:120px; height:34px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%), oklch(0.86 0.04 70 / .72);
  box-shadow:0 2px 8px rgba(20,17,15,.12);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ps-tape--tl{ top:-14px; left:6%; transform:rotate(-19deg); }
.ps-tape--tr{ top:-14px; right:6%; transform:rotate(16deg); }

/* ---------- builder mock ---------- */
.mb{ display:grid; grid-template-columns:1fr .92fr; gap:1.2rem; }
.mb__h{ font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); margin-bottom:.85rem; }
.mb__items{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.mb__items li{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-size:.86rem; color:var(--espresso);
  padding:.5rem .7rem; border:1px solid var(--sand); border-radius:7px; background:#fff; }
.mb__items li b{ font-weight:500; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); }
.mb__items li.on{ border-color:var(--clay); background:oklch(0.95 0.03 50); }
.mb__items li.on b{ color:var(--clay); }
.mb__items li.add b{ color:var(--clay); border:1px solid currentColor; border-radius:20px; padding:.1em .7em; }
.mb__price{ background:var(--espresso-dk); border-radius:8px; padding:1.1rem 1.1rem 1.2rem; color:var(--parch); align-self:start; }
.mb__price .mb__h{ color:rgba(244,239,230,.5); }
.mb__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; padding:.32rem 0; color:rgba(244,239,230,.82); }
.mb__row--save{ color:#a9c79b; }
.mb__total{ border-top:1px solid rgba(244,239,230,.16); margin-top:.4rem; padding-top:.6rem; font-family:var(--serif); font-size:1.5rem; color:var(--parch); }
.mb__total span:last-child{ color:var(--parch); }
.mb__muted{ font-size:.7rem; color:rgba(244,239,230,.55); }
.mb__track{ height:6px; border-radius:5px; background:rgba(244,239,230,.16); margin:.9rem 0 .5rem; overflow:hidden; }
.mb__track i{ display:block; height:100%; background:linear-gradient(90deg,var(--clay),#d99a6a); border-radius:5px; }
.mb__fit{ font-family:var(--hand); font-size:1.15rem; color:#a9c79b; }

/* ---------- Ashley chat mock ---------- */
.chat{ display:flex; flex-direction:column; gap:.8rem; }
.chat__msg{ max-width:84%; padding:.85rem 1.1rem; border-radius:16px; font-size:.92rem; line-height:1.5; }
.chat__msg--you{ align-self:flex-end; background:var(--espresso-dk); color:var(--parch); border-bottom-right-radius:5px; }
.chat__msg--ai{ align-self:flex-start; background:#fff; color:var(--espresso); border:1px solid var(--sand); border-bottom-left-radius:5px; box-shadow:0 6px 18px rgba(20,17,15,.06); }
.chat__who{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); margin-bottom:.3rem; }
.chat__typing{ align-self:flex-start; display:inline-flex; gap:.3rem; padding:.85rem 1.1rem; background:#fff; border:1px solid var(--sand); border-radius:16px; border-bottom-left-radius:5px; }
.chat__typing i{ width:7px; height:7px; border-radius:50%; background:var(--taupe); opacity:.5; animation:chatdot 1.2s infinite; }
.chat__typing i:nth-child(2){ animation-delay:.18s; } .chat__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes chatdot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.9; } }

/* ---------- portal preview mock ---------- */
.mp{ padding:0; }
.mp__site{ position:relative; aspect-ratio:16/10; background:var(--sand); overflow:hidden; }
.mp__site img{ width:100%; height:100%; object-fit:cover; }
.mp__site::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,15,.1),rgba(20,17,15,.45)); }
.mp__sitetxt{ position:absolute; left:1.4rem; bottom:1.2rem; z-index:2; color:var(--parch); }
.mp__sitetxt b{ display:block; font-family:var(--serif); font-size:1.5rem; line-height:1; }
.mp__sitetxt span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.mp__pin{ position:absolute; top:34%; left:58%; z-index:5; }
.mp__pin i{ display:block; width:26px; height:26px; border-radius:50% 50% 50% 2px; transform:rotate(-2deg);
  background:var(--clay); box-shadow:0 6px 16px rgba(166,96,60,.5); position:relative; }
.mp__pin i::after{ content:"3"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--parch); font-family:var(--sans); font-weight:600; font-size:.72rem; }
.mp__note{ position:absolute; top:-6px; left:34px; width:180px; background:#fff; border-radius:10px; padding:.7rem .85rem; box-shadow:0 12px 30px rgba(20,17,15,.22); }
.mp__note p{ font-size:.78rem; color:var(--espresso); line-height:1.4; }
.mp__note span{ display:block; font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); margin-top:.45rem; }
.mp__pulse{ position:absolute; top:34%; left:58%; width:26px; height:26px; border-radius:50%; z-index:4; background:var(--clay); opacity:.5; animation:pinpulse 2.4s var(--ease) infinite; }
@keyframes pinpulse{ 0%{ transform:scale(1); opacity:.5; } 70%,100%{ transform:scale(2.6); opacity:0; } }

/* ============================================================
   PROMISE band
   ============================================================ */
.ps-promise{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(5rem,11vw,9rem); text-align:center; }
.ps-promise__q{ font-family:var(--serif); color:var(--parch); font-size:clamp(1.9rem,4.6vw,3.8rem); line-height:1.12; max-width:18ch; margin-inline:auto; }
.ps-promise__q em{ font-style:italic; }
.ps-promise p{ color:rgba(244,239,230,.7); max-width:48ch; margin:1.6rem auto 0; }
.ps-promise__hand{ display:inline-block; margin-top:1.8rem; font-size:1.6rem; color:var(--clay); transform:rotate(-3deg); }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.tool-head{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.tool-head .flourish .script{ font-size:clamp(2.1rem,3.8vw,3rem); }
.tool-head__lead{ max-width:50ch; margin-top:.8rem; }

.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(2.2rem,5vw,4rem); }
.frow--flip .frow__art{ order:2; }
.frow__art{ position:relative; }
.frow__body{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.frow__no{ font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem,4vw,3.6rem); line-height:.8; color:var(--clay); }
.frow__body h3{ max-width:18ch; }
.frow__body .body{ max-width:42ch; }
.frow__hand{ font-size:1.4rem; color:var(--clay); transform:rotate(-2deg); margin-top:.2rem; }

/* simple benefit cards (no mock) */
.bcards{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.6rem; }
.bcard{ background:#fff; border:1px solid var(--sand); border-radius:12px; padding:1.5rem 1.5rem 1.6rem; }
.bcard__ic{ width:38px; height:38px; color:var(--clay); margin-bottom:1rem; }
.bcard h4{ font-family:var(--serif); font-size:1.2rem; color:var(--espresso-dk); margin-bottom:.5rem; }
.bcard p{ font-size:.92rem; color:var(--taupe); line-height:1.55; }

@media (max-width:860px){
  .ps-hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .mb{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; gap:2rem; }
  .frow--flip .frow__art{ order:0; }
  .bcards{ grid-template-columns:1fr; }
}

/* ============================================================
   STEPS  (how it works)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); counter-reset:s; }
.step{ position:relative; }
.step__no{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem); color:var(--clay); line-height:1; }
.step h3{ margin:.7rem 0 .6rem; }
.step p{ color:var(--taupe); max-width:34ch; }
.step::after{ content:"→"; position:absolute; top:.4rem; right:-1.1rem; color:var(--sand); font-size:1.4rem; }
.step:last-child::after{ display:none; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:2.2rem; } .step::after{ display:none; } }

/* ============================================================
   REASSURANCE strip
   ============================================================ */
.trust{ display:flex; flex-wrap:wrap; gap:1rem 2.4rem; justify-content:center; }
.trust span{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); }
.trust span::before{ content:"✓"; color:var(--clay); font-size:.9em; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.ps-cta{ position:relative; text-align:center; }
.ps-cta__sig{ display:inline-block; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--clay); transform:rotate(-3deg); margin-bottom:.5rem; }

/* ============================================================
   LOGIN SCREEN  (form left · photo right)
   ============================================================ */
.login{ min-height:100vh; display:grid; grid-template-columns:1.04fr .96fr; background:var(--parch); }
.login__form{ display:flex; align-items:center; justify-content:center; padding:clamp(2rem,5vw,4rem); position:relative; }
.login__back{ position:absolute; top:clamp(1.6rem,4vw,2.6rem); left:clamp(1.6rem,4vw,2.6rem); font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); display:inline-flex; gap:.5em; transition:color .4s var(--ease); }
.login__back:hover{ color:var(--clay); }
.login__inner{ width:100%; max-width:380px; }
.login__mark{ width:52px; height:auto; aspect-ratio:668/359; color:var(--espresso-dk); margin-bottom:1.8rem; }
.login__inner h1{ font-size:clamp(2.2rem,4vw,3rem); margin:.5rem 0 .6rem; }
.login__sub{ color:var(--taupe); margin-bottom:2rem; }
.login__field{ display:block; margin-bottom:1.1rem; }
.login__field span{ display:block; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); margin-bottom:.5rem; }
.login__inwrap{ position:relative; }
.login__field input{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--espresso-dk); background:#fff;
  border:1px solid var(--sand); border-radius:9px; padding:.95em 1em; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.login__field input:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px oklch(0.54 0.074 44 / .14); }
.login__field input::placeholder{ color:oklch(0.7 0.01 60); }
.login__reveal{ position:absolute; right:.8rem; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); padding:.3em .5em; transition:color .3s; }
.login__reveal:hover{ color:var(--clay); }
.login__row{ display:flex; justify-content:space-between; align-items:center; margin:.2rem 0 1.8rem; gap:1rem; }
.login__check{ display:inline-flex; align-items:center; gap:.55em; font-size:.82rem; color:var(--espresso); cursor:pointer; user-select:none; }
.login__check input{ position:absolute; opacity:0; width:0; height:0; }
.login__box{ width:18px; height:18px; border:1px solid var(--taupe); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; transition:background .3s var(--ease), border-color .3s var(--ease); }
.login__box::after{ content:"✓"; color:var(--parch); font-size:.7rem; opacity:0; transform:scale(.4); transition:opacity .25s, transform .25s var(--ease); }
.login__check input:checked + .login__box{ background:var(--clay); border-color:var(--clay); }
.login__check input:checked + .login__box::after{ opacity:1; transform:scale(1); }
.login__check input:focus-visible + .login__box{ box-shadow:0 0 0 3px oklch(0.54 0.074 44 / .2); }
.login__forgot{ font-size:.8rem; color:var(--clay); position:relative; }
.login__forgot::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:currentColor; transition:width .4s var(--ease); }
.login__forgot:hover::after{ width:100%; }
.login__btn{ width:100%; justify-content:center; }
.login__msg{ font-size:.82rem; color:var(--clay); margin-top:1rem; min-height:1.2em; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; }
.login__msg.show{ opacity:1; transform:none; }
.login__foot{ margin-top:2rem; font-size:.85rem; color:var(--taupe); }
.login__foot a{ color:var(--clay); }

.login__photo{ position:relative; overflow:hidden; background:var(--espresso-dk); }
.login__photo img{ width:100%; height:100%; object-fit:cover; }
.login__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(20,17,15,.4),rgba(20,17,15,.12) 45%,rgba(20,17,15,.5)); }
.login__photoslot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,var(--parch-deep) 0 16px,var(--sand) 16px 32px); }
.login__photoslot span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); background:var(--parch); padding:.6em 1.1em; border-radius:30px; }
.login__quote{ position:absolute; left:clamp(2rem,4vw,3.5rem); bottom:clamp(2.4rem,5vw,4rem); z-index:3; max-width:24ch; }
.login__quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2vw,1.8rem); color:var(--parch); line-height:1.2; }
.login__quote cite{ display:block; font-family:var(--mono); font-style:normal; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.7); margin-top:1rem; }
.login__seal{ position:absolute; top:clamp(1.6rem,4vw,2.6rem); right:clamp(1.6rem,4vw,2.6rem); z-index:3; border-color:rgba(244,239,230,.5); color:var(--parch); }
.login__seal b{ color:rgba(244,239,230,.65); }

@media (max-width:820px){
  .login{ grid-template-columns:1fr; }
  .login__photo{ display:none; }
  .login__form{ min-height:100vh; }
}

/* ===== Inside-your-portal feature groups ===== */
.pgrid-group{ margin-top:clamp(2.4rem,5vw,3.6rem); }
.pgrid-group:first-of-type{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.pgrid-group__title{ display:flex; align-items:center; gap:1rem; color:var(--espresso-dk); margin-bottom:.4rem; }
.pgrid-group__title::after{ content:""; flex:1; height:1px; background:var(--sand); }