/* =====================================================================
   ReadyHarbor homepage — clean redo (RJ iteration #4, 2026-08-17).
   Fresh, simpler look. Arial. Lots of white. One trust-blue accent + Amazon
   gold reserved for the buy CTA. Styles the shell AND every class rh-home.js
   injects (.pcard .rrow .bucket .card .rescard .nomatch).
   ===================================================================== */
:root{
  --blue:#0B3D4C; --blue-deep:#072B36; --blue-wash:#EDF3F5;
  --amz:#FFA41C; --amz-deep:#EE9412; --amz-ink:#131A22;
  --orange:#D97A34; --orange-deep:#B85F22;
  --bullet-green:#2F9E7A;   /* hero-bullet accent — easy to change */
  --ink:#1E2430; --ink-2:#454C5A; --ink-3:#6B7282; --dim:#9AA1B0;
  --line:#E7E9EF; --line-2:#F1F3F7; --paper:#F8FAFC; --white:#FFFFFF;
  --r:14px; --r-sm:10px; --r-lg:20px; --maxw:1060px;
  --sh:0 12px 30px -20px rgba(20,24,35,.30);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink-2);
  font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:Arial, Helvetica, sans-serif;font-weight:700;color:var(--ink);margin:0;line-height:1.15}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--dim);font-weight:400}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-weight:700;font-size:15.5px;padding:14px 22px;border-radius:12px;white-space:nowrap;
  transition:transform .15s var(--ease),background .16s,box-shadow .16s,border-color .16s}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-deep);background:var(--blue-wash)}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{background:var(--orange-deep)}
.btn--amz{background:var(--amz);color:var(--amz-ink);border:1px solid var(--amz-deep);
  box-shadow:0 12px 24px -16px rgba(255,164,28,.9)}
.btn--amz:hover{background:var(--amz-deep);transform:translateY(-1px)}
.btn--amz svg{width:19px;height:19px}

/* ============================ HEADER ============================ */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;height:62px}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:30px;height:30px;display:block}
.brand__mark svg{width:30px;height:30px;display:block}
.brand__wm{font-size:20px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.brand__wm b{font-weight:800}
.hdr__nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr__nav a{font-size:14.5px;font-weight:600;color:var(--ink-3);padding:9px 12px;border-radius:9px}
.hdr__nav a:hover{color:var(--ink);background:var(--line-2)}
.hdr__start{color:var(--blue) !important;font-weight:700 !important}
.hdr__start:hover{background:var(--blue-wash) !important;color:var(--blue-deep) !important}
@media(max-width:560px){.hdr__nav a:not(.hdr__start){display:none}}

/* ============================ HERO ============================ */
.hero{padding:56px 0 40px;background:
  radial-gradient(120% 90% at 85% -10%,var(--blue-wash),transparent 60%)}
.hero__in{max-width:760px}
.hero__eyebrow{margin:0 0 14px;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue)}
.hero__h1{font-size:clamp(32px,6.4vw,52px);letter-spacing:-.02em;line-height:1.08}
.hero__h1 em{font-style:normal;color:var(--orange-deep);font-size:1.16em;font-weight:800}
.hero__rot{display:block;min-height:1.12em;margin:4px 0;color:var(--blue);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hero__rot.is-out{opacity:0;transform:translateY(8px)}
.hero__promise{display:block;color:var(--ink)}
.hero__cta{display:flex;align-items:center;gap:6px;margin:26px 0 22px}
.hero__arrow{flex:none;width:66px;height:50px;display:block}
.hero__arrow svg{width:66px;height:50px;display:block}
@media(max-width:520px){.hero__arrow{width:48px;height:38px}.hero__arrow svg{width:48px;height:38px}}
.btn--big{font-size:17px;padding:16px 26px}
.hero__lede{list-style:none;padding:0;margin:0 0 8px;max-width:54ch;
  display:flex;flex-direction:column;gap:11px;font-size:18.5px;color:var(--ink-2)}
.hero__lede li{position:relative;padding-left:30px}
.hero__lede li::before{content:"";position:absolute;left:4px;top:8px;width:11px;height:11px;
  border-radius:3px;background:var(--bullet-green)}

/* ============================ SECTIONS ============================ */
.sec{padding:46px 0}
.sec--tint{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 24px}
.sec__kick{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.sec__h2{font-size:clamp(23px,3.8vw,31px);letter-spacing:-.02em}
.sec__link{flex:none;font-size:14.5px;font-weight:700;color:var(--blue)}
.sec__link:hover{color:var(--blue-deep)}

/* POPULAR rail — a real grid on desktop (cards fill the row intentionally),
   a horizontal snap-scroll strip on phones. */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.rail{grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:82%;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}}
.pcard{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;min-height:224px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;transition:transform .15s var(--ease),box-shadow .16s,border-color .16s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--blue)}
.pcard__top{display:flex;align-items:center;justify-content:space-between}
.pcard__ic{font-size:26px;line-height:1}
.pcard__tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-wash);padding:4px 9px;border-radius:999px}
.pcard__t{font-size:19px;font-weight:700;color:var(--ink);line-height:1.18;letter-spacing:-.01em}
.pcard__items{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.pcard__items li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__items li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:2px;background:var(--blue)}
.pcard__more{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pcard__go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--blue)}
.pcard__go svg{width:15px;height:15px}

/* ============================ THREE DOORS ============================ */
/* Each door is a FEATHERED icon-image (soft radial glow fading to transparent -
   no box, no card frame on the imagery) over a label. Three of them side by side. */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px;margin:0 auto}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;
  cursor:pointer;padding:8px 6px 10px;border-radius:16px;transition:background .15s}
.tab:hover{background:var(--warm)}
/* real FEATHERED door photos (png with transparent, faded edges) — no box/glow */
.tab__art{width:100%;height:104px;display:grid;place-items:center}
.tab__art img{max-height:100%;max-width:100%;object-fit:contain;opacity:.86;
  transition:opacity .15s,transform .15s var(--ease)}
.tab:hover .tab__art img{opacity:1}
.tab.is-active .tab__art img{opacity:1;transform:scale(1.04)}
.tab__t{font-size:14.5px;font-weight:700;color:var(--ink-3);transition:color .15s}
.tab:hover .tab__t{color:var(--ink)}
.tab.is-active .tab__t{color:var(--blue-deep)}
.panelwrap{margin-top:18px;max-width:880px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh)}
@media(max-width:560px){.panelwrap{padding:18px}}
.panel[hidden]{display:none}
.panel__head{margin:0 0 16px}
.panel__head h3{font-size:20px;letter-spacing:-.01em}
.panel__head p{margin:6px 0 0;color:var(--ink-3);font-size:15px}

/* door 1 */
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--r);padding:26px 18px;background:var(--paper);
  transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--blue);background:var(--blue-wash)}
.drop__big{font-size:19px;font-weight:700;color:var(--ink)}
.drop__sm{font-size:13.5px;color:var(--ink-3)}
.listtray{margin-top:14px}
.listtray[hidden]{display:none}
.paste{width:100%;min-height:118px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);resize:vertical}
.paste:focus{outline:none;border-color:var(--blue)}
.listtray__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:600;
  color:var(--ink-2);border:1.5px solid var(--line);border-radius:10px;padding:11px 15px}
.filebtn:hover{border-color:var(--blue);color:var(--blue-deep)}
.filebtn--soon{cursor:not-allowed;color:var(--dim);background:var(--warm);border-style:dashed}
.filebtn--soon:hover{border-color:var(--line);color:var(--dim)}
.filehint{margin:10px 0 0;font-size:13.5px;color:var(--ink-3)}
.filehint[hidden]{display:none}
.listresult{margin-top:14px}
.listresult[hidden]{display:none}
.rescard{background:var(--blue-wash);border:1px solid #D6E7F1;border-radius:var(--r);padding:18px}
.rescard h4{font-size:17px;margin-bottom:10px}
.rescard p{margin:6px 0 14px;font-size:14.5px;color:var(--ink-2)}
.rescard .rrow{background:#fff}
.rescard .rrow+.rrow{margin-top:8px}

/* door 2 */
.ask{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;
  padding:6px 6px 6px 14px;transition:border-color .15s}
.ask:focus-within{border-color:var(--blue)}
.ask__ic{color:var(--dim);display:grid;place-items:center}
.ask__ic svg{width:20px;height:20px}
.ask input{flex:1;border:0;outline:none;font-family:inherit;font-size:16px;color:var(--ink);padding:10px 0;background:transparent}
.ask__mic{flex:none;width:42px;height:42px;border:0;border-radius:10px;background:var(--blue-wash);color:var(--blue);cursor:pointer;display:grid;place-items:center}
.ask__mic:hover{background:var(--blue);color:#fff}
.ask__mic svg{width:18px;height:18px}
.askhint{margin:12px 0 0;font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.seed{border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 12px;border-radius:999px}
.seed:hover{border-color:var(--blue);color:var(--blue-deep);background:var(--blue-wash)}
.results{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.nomatch{font-size:14.5px;color:var(--ink-3)}
.nomatch a{color:var(--blue);font-weight:700}

/* door 3 */
.dial{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.dial{grid-template-columns:1fr}}
.dial__col[hidden]{display:none}
.dial__lbl{margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dial__buckets{display:flex;flex-direction:column;gap:8px}
.bucket{display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:13px 15px;font-size:15px;font-weight:700;color:var(--ink)}
.bucket:hover{border-color:var(--blue);background:var(--blue-wash)}
.bucket.is-active{border-color:var(--blue);background:var(--blue);color:#fff}
.bucket__ic{font-size:20px;line-height:1}
.bucket__n{margin-left:auto;font-size:13px;font-weight:700;color:var(--dim)}
.bucket.is-active .bucket__n{color:rgba(255,255,255,.8)}
.dial__list{display:flex;flex-direction:column;gap:8px}

/* shared row (concierge results + dial results) */
.rrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;background:#fff;transition:border-color .15s,box-shadow .16s,transform .15s var(--ease)}
.rrow:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-1px)}
.rrow__ic{font-size:23px;line-height:1;flex:none}
.rrow__b{flex:1;min-width:0}
.rrow__t{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.2}
.rrow__s{display:block;font-size:12.5px;color:var(--ink-3)}
.rrow__go{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue)}
.rrow__go svg{width:15px;height:15px}
@media(max-width:480px){.rrow__go span,.rrow__go{font-size:0}.rrow__go svg{width:18px;height:18px;font-size:16px}}

/* ============================ BROWSE MOSAIC ============================ */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  min-height:150px;border-radius:var(--r);padding:16px;color:#fff;overflow:hidden;
  background:var(--g,linear-gradient(150deg,#2E8BC9,#155E86));
  transition:transform .15s var(--ease),box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.card--xl{grid-column:span 2;grid-row:span 2;min-height:200px}
.card--w{grid-column:span 2}
@media(max-width:460px){.card--xl,.card--w{grid-column:span 1;grid-row:auto}}
/* uniform photo cards: cover-crop + a dark bottom scrim so the title stays legible */
.card--img{background-size:cover;background-position:center}
.card--img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,22,33,.82) 0%,rgba(15,22,33,.28) 45%,rgba(15,22,33,.05) 100%)}
.card__glyph{position:absolute;right:-6px;bottom:-14px;font-size:82px;line-height:1;
  opacity:.20;filter:saturate(.45);pointer-events:none;user-select:none}
.card__ic{position:absolute;top:14px;left:14px;opacity:.9;z-index:1}
.card__ic svg{width:22px;height:22px}
.card__t{position:relative;z-index:1;font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.card__n{position:relative;z-index:1;font-size:12.5px;opacity:.92}

/* ============================ REASSURANCE ============================ */
.reassure{padding:8px 0 40px}
.reassure__in{display:flex;align-items:center;gap:14px;background:#FFF6EC;border:1px solid #F6D9BB;
  border-radius:var(--r);padding:16px 20px}
.reassure__ic{flex:none;color:var(--orange-deep)}
.reassure__ic svg{width:24px;height:24px}
.reassure p{margin:0;font-size:14.5px;color:var(--ink-2)}
.reassure b{color:var(--ink)}

/* ============================ FOOTER ============================ */
.foot{background:var(--white);border-top:1px solid var(--line);padding:34px 0 46px}
.foot__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.foot__nav{display:flex;flex-wrap:wrap;gap:16px}
.foot__nav a{font-size:14px;font-weight:600;color:var(--ink-3)}
.foot__nav a:hover{color:var(--blue)}
.disc{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:0;max-width:78ch}
.disc b{color:var(--ink-2)}
.disc--tm{margin-top:10px;font-size:11.5px;color:var(--dim)}