/* ===== Coloby website styles ===== */
:root{
  --ink:#1E2B27; --accent:#8C6A3F; --accent-dark:#74572F; --gold:#D4B98A; --gold-ink:#7A5C34;
  --bg:#FAF8F3; --sand:#EFEBE3; --line:#E3DDD2; --field:#CFC7B8;
  --body:#4F5A55; --muted:#5F6863; --on-dark:#E4E2DA; --on-dark-muted:#AEB5AE;
  --bubble:#2B3B36; --card-dark:#24332E; --divider:#3A4A44; --step-dark:#283732;
  --blush:#EFE6D6; --blush-ink:#6B5230; --gold-pill:#F3EBDC; --green:#A9C9B4;
  --display:'Cormorant Garamond',Georgia,serif; --text:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}
.logo{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.5px;text-decoration:none;color:var(--ink)}
.tabs{display:flex;gap:4px;background:var(--sand);padding:4px;border-radius:999px}
.tabs a{text-decoration:none;font-size:15px;font-weight:700;padding:12px 20px;border-radius:999px;color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--ink);color:#fff}
.header-cta{text-decoration:none;font-size:15px;font-weight:700;padding:12px 20px;border-radius:999px;border:2px solid var(--ink)}

/* buttons */
.btn{display:inline-block;text-decoration:none;font:inherit;font-weight:700;font-size:17px;padding:18px 28px;border-radius:999px;border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,43,39,.18)}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{color:#fff;background:var(--accent-dark)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{color:#fff}
.btn-gold{background:var(--gold);color:var(--ink)}.btn-gold:hover{color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:16px 26px}
.btn-block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.6;cursor:wait;transform:none;box-shadow:none}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:56px;padding-bottom:104px}
.hero-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero-visual{flex:1 1 420px;min-width:0}
.eyebrow{font-size:15px;font-weight:700;color:var(--accent)}
.eyebrow.gold{color:var(--gold-ink)}
.hero h1{font-weight:800;font-size:clamp(42px,6vw,64px);line-height:1.03;letter-spacing:-.035em}
.lead{font-size:21px;line-height:1.5;color:var(--body);max-width:520px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;background:#fff}
.chip svg{flex:none}

/* home */
.home-hero{max-width:960px;margin:0 auto;padding:112px 24px 136px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.home-hero h1{font-weight:800;font-size:clamp(44px,7.5vw,76px);line-height:1.02;letter-spacing:-.04em}
.home-hero .lead{font-size:22px;max-width:620px}
.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%;margin-top:24px}
.choice{flex:0 1 340px;text-decoration:none;text-align:left;border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.choice:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,43,39,.14)}
.choice-hotel{border:2px solid var(--line);background:#fff;color:var(--ink)}.choice-hotel:hover{color:var(--ink)}
.choice-creator{background:var(--ink);color:#fff}.choice-creator:hover{color:#fff}
.choice strong{font-family:var(--display);font-weight:800;font-size:30px}
.choice span.sub{font-size:16px;line-height:1.5}
.choice-hotel span.sub{color:var(--body)}.choice-creator span.sub{color:var(--on-dark)}
.pill{align-self:flex-start;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px}
.pill-blush{background:var(--blush);color:var(--blush-ink)}
.pill-gold{background:var(--gold);color:var(--ink)}

/* chat */
.chat{background:var(--ink);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;color:#fff;box-shadow:0 30px 60px -24px rgba(30,43,39,.5)}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--divider)}
.avatar{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
.avatar.accent{background:var(--accent);color:#fff}.avatar.gold{background:var(--gold);color:var(--ink)}
.chat-head b{display:block;font-size:15px}.chat-head small{display:block;font-size:13px;color:var(--on-dark-muted)}
.msg{position:relative;overflow:hidden;max-width:88%;padding:12px 16px;font-size:15px;line-height:1.45}
.msg.them{align-self:flex-start;background:var(--bubble);border-radius:18px 18px 18px 4px}
.msg.me{align-self:flex-end;background:var(--blush);color:var(--ink);border-radius:18px 18px 4px 18px;font-weight:700}
.msg.stack{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.card-dark{background:var(--card-dark);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.card-dark .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-dark small{font-size:13px;color:var(--on-dark-muted)}
.badge{flex:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--ink)}
.status{background:var(--card-dark);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.status-row{display:flex;align-items:center;gap:12px;font-size:15px}
.tick{flex:none;width:26px;height:26px;border-radius:999px;background:var(--green);display:flex;align-items:center;justify-content:center}
.ring{flex:none;width:26px;height:26px;border-radius:999px;border:2px solid var(--gold);background:#33382C}
.status-row.next{font-weight:700;color:var(--gold)}
.draft{display:flex;gap:12px;align-items:center}
.thumb{flex:none;width:72px;height:112px;border-radius:12px;background:linear-gradient(160deg,var(--gold),#B9A07A 55%,var(--accent));display:flex;align-items:center;justify-content:center}
.date-chips{display:flex;flex-wrap:wrap;gap:8px}
.date-chips span{font-size:14px;font-weight:700;padding:8px 12px;border-radius:999px;border:1.5px solid var(--gold);color:var(--gold)}
.date-chips span.on{background:var(--gold);color:var(--ink)}
.dots{position:absolute;inset:0;background:inherit;border-radius:inherit;display:flex;align-items:center;gap:5px;padding:0 16px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--on-dark-muted);display:inline-block;animation:bounce 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* how it works */
.how{padding:96px 0}
.how.light{background:var(--sand)}
.how.dark{background:var(--ink);color:#fff}
.how-head{display:flex;flex-direction:column;gap:12px;max-width:640px;margin-bottom:48px}
.how h2{font-weight:800;font-size:clamp(34px,4.5vw,46px);line-height:1.08;letter-spacing:-.03em}
.drawline{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--gold));transform-origin:left;margin-bottom:20px}
.steps{display:flex;flex-wrap:wrap;gap:20px}
.step{flex:1 1 240px;min-width:0;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px}
.how.light .step{background:#fff}.how.dark .step{background:var(--step-dark)}
.num{width:44px;height:44px;border-radius:999px;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.how.light .num{background:var(--accent);color:#fff}.how.dark .num{background:var(--gold);color:var(--ink)}
.step h3{font-family:var(--text);font-size:21px;font-weight:700;letter-spacing:0}
.step p{font-size:17px;line-height:1.55}
.how.light .step p{color:var(--body)}.how.dark .step p{color:var(--on-dark)}

/* forms */
.apply{padding:96px 24px 80px;display:flex;flex-direction:column;align-items:center}
.form{width:100%;max-width:640px;border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:18px}
.form.light{background:#fff;border:2px solid var(--line)}
.form.dark{background:var(--ink);color:#fff}
.form h2{font-weight:800;font-size:32px;letter-spacing:-.02em}
.form .intro{font-size:17px;line-height:1.55}
.form.light .intro{color:var(--body)}.form.dark .intro{color:var(--on-dark)}
.form .strong{font-size:15px;font-weight:700}
.form.dark .strong{color:var(--gold)}
.form .note{font-size:15px;line-height:1.5}
.form.dark .note{color:var(--on-dark)}
.form .fine{font-size:13px;line-height:1.5}
.form.light .fine{color:var(--muted)}.form.dark .fine{color:var(--on-dark)}
.form.dark .fine a{color:#fff}
.fields{display:flex;flex-wrap:wrap;gap:14px}
.fields > .fld{flex:1 1 200px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.fld input,.fld select{font:inherit;font-weight:400;font-size:16px;height:48px;padding:0 14px;border:1.5px solid var(--field);border-radius:12px;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(140,106,63,.25)}
.fld .help{font-size:13px;font-weight:400;line-height:1.5}
.form.dark .fld .help{color:var(--on-dark)}
fieldset{border:none;margin:0;padding:0}
legend{font-size:14px;font-weight:500;padding:0;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:flex;align-items:center;gap:8px;border:1.5px solid var(--field);border-radius:12px;padding:0 14px;min-height:46px;font-size:15px;background:#fff;color:var(--ink);cursor:pointer}
.opt:has(input:checked){border-color:var(--ink);background:var(--blush)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--accent)}
.check.small{font-size:13px}
.form.light .check.small{color:var(--muted)}.form.dark .check.small{color:var(--on-dark)}
.form-error{display:none;font-size:15px;font-weight:700;color:#B42318;background:#FDECEA;border-radius:12px;padding:12px 14px}
.form-error.show{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.section-label{font-size:13px;font-weight:700;color:var(--accent);margin-top:12px}

/* welcome + thanks */
.page-narrow{max-width:720px;margin:0 auto;padding:40px 24px 96px;display:flex;flex-direction:column;gap:18px}
.page-narrow h1{font-weight:800;font-size:clamp(38px,6vw,52px);line-height:1.05;letter-spacing:-.03em}
.ok-pill{align-self:flex-start;display:flex;align-items:center;gap:8px;background:#DDF3E5;color:#1D5A35;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px}
.success{display:none;background:#fff;border-radius:28px;padding:40px;flex-direction:column;gap:12px;border:2px solid var(--line)}
.success.show{display:flex}
.success h2{font-weight:800;font-size:30px}
.thanks-card{background:var(--ink);color:#fff;border-radius:28px;padding:48px;display:flex;flex-direction:column;gap:22px}
.thanks-card h1{color:#fff}
.thanks-card p{font-size:19px;color:var(--on-dark)}
.refer{background:var(--bubble);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}
.refer b{font-size:17px}.refer span{font-size:16px;color:var(--on-dark)}
.refer-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.refer-link{flex:1 1 220px;background:var(--ink);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--on-dark);word-break:break-all}

/* footer + legal */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:32px;padding-bottom:48px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}
.legal{max-width:760px;margin:0 auto;padding:40px 24px 96px}
.legal h1{font-size:44px;font-weight:800;margin-bottom:8px}
.legal h2{font-size:22px;margin:32px 0 8px}
.legal p,.legal li{color:var(--body);font-size:17px;line-height:1.6}

/* motion */
@keyframes intro{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.in1{animation:intro .7s ease both .05s}.in2{animation:intro .7s ease both .2s}.in3{animation:intro .7s ease both .35s}.in4{animation:intro .9s ease both .5s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: view()){
  .st1,.st2,.st3,.st4{animation:rise linear both;animation-timeline:view()}
  .st1{animation-range:entry 0% cover 22%}.st2{animation-range:entry 8% cover 30%}.st3{animation-range:entry 16% cover 38%}.st4{animation-range:entry 24% cover 46%}
  .drawline{animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
}
@keyframes sh1{0%,2%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh1{animation:sh1 16s ease infinite}
@keyframes sh2{0%,8%{opacity:0;transform:translateY(10px)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh2{animation:sh2 16s ease infinite}
@keyframes sh3{0%,13%{opacity:0;transform:translateY(10px)}17%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh3{animation:sh3 16s ease infinite}
@keyframes sh4{0%,18%{opacity:0;transform:translateY(10px)}22%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh4{animation:sh4 16s ease infinite}
@keyframes sh5{0%,23%{opacity:0;transform:translateY(10px)}27%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh5{animation:sh5 16s ease infinite}
@keyframes sh6{0%,28%{opacity:0;transform:translateY(10px)}32%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh6{animation:sh6 16s ease infinite}
@keyframes sh7{0%,33%{opacity:0;transform:translateY(10px)}37%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh7{animation:sh7 16s ease infinite}
@keyframes sh8{0%,46%{opacity:0;transform:translateY(10px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh8{animation:sh8 16s ease infinite}
@keyframes sh9{0%,52%{opacity:0;transform:translateY(10px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
.sh9{animation:sh9 16s ease infinite}
@keyframes th7{0%,39%{opacity:1}41%,100%{opacity:0}}
.th7{animation:th7 16s ease infinite}
@keyframes th9{0%,58%{opacity:1}60%,100%{opacity:0}}
.th9{animation:th9 16s ease infinite}
@keyframes sc1{0%,1%{opacity:0;transform:translateY(10px)}5%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc1{animation:sc1 16s ease infinite}
@keyframes sc2{0%,14%{opacity:0;transform:translateY(10px)}18%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc2{animation:sc2 16s ease infinite}
@keyframes sc3{0%,19%{opacity:0;transform:translateY(10px)}23%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc3{animation:sc3 16s ease infinite}
@keyframes sc4{0%,32%{opacity:0;transform:translateY(10px)}36%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc4{animation:sc4 16s ease infinite}
@keyframes sc5{0%,37%{opacity:0;transform:translateY(10px)}41%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc5{animation:sc5 16s ease infinite}
@keyframes sc6{0%,50%{opacity:0;transform:translateY(10px)}54%,92%{opacity:1;transform:none}100%{opacity:0}}
.sc6{animation:sc6 16s ease infinite}
@keyframes tc1{0%,7%{opacity:1}9%,100%{opacity:0}}
.tc1{animation:tc1 16s ease infinite}
@keyframes tc3{0%,25%{opacity:1}27%,100%{opacity:0}}
.tc3{animation:tc3 16s ease infinite}
@keyframes tc5{0%,43%{opacity:1}45%,100%{opacity:0}}
.tc5{animation:tc5 16s ease infinite}
@keyframes tc6{0%,56%{opacity:1}58%,100%{opacity:0}}
.tc6{animation:tc6 16s ease infinite}

.msg.me.long{font-weight:500;max-width:80%}
.plan{background:var(--card-dark);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.plan .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}
.bullet{flex:none;width:8px;height:8px;border-radius:999px;background:var(--gold);margin-top:6px}
@keyframes sp1{0%,2%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}100%{opacity:0}}
.sp1{animation:sp1 14s ease infinite}@keyframes sp2{0%,12%{opacity:0;transform:translateY(10px)}16%,92%{opacity:1;transform:none}100%{opacity:0}}
.sp2{animation:sp2 14s ease infinite}@keyframes sp3{0%,40%{opacity:0;transform:translateY(10px)}44%,92%{opacity:1;transform:none}100%{opacity:0}}
.sp3{animation:sp3 14s ease infinite}@keyframes sp4{0%,50%{opacity:0;transform:translateY(10px)}54%,92%{opacity:1;transform:none}100%{opacity:0}}
.sp4{animation:sp4 14s ease infinite}
@keyframes tp2{0%,20%{opacity:1}22%,100%{opacity:0}}
.tp2{animation:tp2 14s ease infinite}@keyframes tp4{0%,57%{opacity:1}59%,100%{opacity:0}}
.tp4{animation:tp4 14s ease infinite}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .anim{opacity:1!important;transform:none!important}
  .dots{display:none}
}
@media (max-width:640px){
  .site-header{justify-content:center}
  .header-cta{display:none}
  .form,.thanks-card,.success{padding:28px 22px}
  .hero{padding-top:32px;gap:40px}
  .home-hero{padding:72px 20px 96px}
}

/* luxury type */
h1,h2,.logo,.choice strong,.form h2,.success h2,.legal h1{font-weight:600!important;letter-spacing:-.01em!important}
.hero h1,.home-hero h1{font-size:clamp(46px,6.6vw,80px)!important;line-height:1}