:root{
  --carbon:#101418;
  --bone:#F7F2EA;
  --signal-teal:#0F766E;
  --pulse-lime:#C9F27B;
  --clay:#C88E62;
  --white:#ffffff;
  --ink:#131A1F;
  --ink-soft:#5B666E;
  --border:rgba(16,20,24,.08);
  --border-strong:rgba(16,20,24,.14);
  --shadow-xl:0 24px 70px rgba(16,20,24,.18);
  --shadow-md:0 12px 28px rgba(16,20,24,.12);
  --radius-xxl:24px;
  --radius-xl:18px;
  --radius-lg:16px;
  --radius-md:14px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Arimo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(15,118,110,.24), transparent 26%),
    radial-gradient(circle at 88% 90%, rgba(200,142,98,.14), transparent 22%),
    linear-gradient(180deg, #151b20 0%, #101418 58%, #0C1114 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
button,a{font:inherit}

a[x-apple-data-detectors],
a[href^="tel"],
a[href^="sms"]{
  color:inherit !important;
  text-decoration:none !important;
}

.page-shell{
  position:relative;
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(10px, 2.8vw, 24px);
  overflow:hidden;
}

.page-shell__glow{
  position:absolute;
  border-radius:999px;
  filter:blur(80px);
  opacity:.2;
  pointer-events:none;
}

.page-shell__glow--teal{
  width:260px;
  height:260px;
  background:var(--signal-teal);
  top:-90px;
  left:-34px;
}

.page-shell__glow--clay{
  width:220px;
  height:220px;
  background:var(--clay);
  right:-64px;
  bottom:-76px;
}

.payment-card{
  position:relative;
  width:min(640px, 100%);
  background:linear-gradient(180deg, rgba(247,242,234,.985) 0%, rgba(247,242,234,.955) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xxl);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}

.hero{
  position:relative;
  padding:16px 16px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,242,123,.16), transparent 24%),
    linear-gradient(180deg, #11181D 0%, #0F1519 100%);
  color:var(--bone);
}

.hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.brand-lockup__mark{
  width:72px;
  height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(247,242,234,.06);
  border:1px solid rgba(247,242,234,.10);
  flex:0 0 auto;
  backdrop-filter:blur(8px);
}

.brand-lockup__mark img{
  width:100%;
  height:auto;
}

.brand-lockup__name{
  min-width:0;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.hero__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(201,242,123,.14);
  color:var(--pulse-lime);
  border:1px solid rgba(201,242,123,.22);
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
  flex:0 0 auto;
}

.hero__body{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.hero__title{
  margin:0;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(1.95rem, 8vw, 3rem);
  line-height:.94;
  font-weight:800;
  letter-spacing:-.04em;
  max-width:6.2ch;
  text-wrap:balance;
}

.hero__route{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:4px;
  flex:0 0 auto;
}

.hero__route span{
  display:block;
  height:8px;
  border-radius:999px;
  background:rgba(247,242,234,.16);
}

.hero__route span:nth-child(1){width:34px}
.hero__route span:nth-child(2){width:10px;background:var(--signal-teal)}
.hero__route span:nth-child(3){width:22px;background:var(--pulse-lime)}

.details{
  padding:12px;
  display:grid;
  gap:10px;
}

.hint{display:none}

.field{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 13px 13px 15px;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
}

.field__accent{
  position:absolute;
  top:15px;
  left:10px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--signal-teal);
}

.field__meta{
  min-width:0;
  flex:1 1 auto;
}

.label{
  margin:0 0 5px;
  padding-left:12px;
  color:var(--ink-soft);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:.72rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.value{
  display:block;
  max-width:100%;
  padding-left:12px;
  color:var(--ink);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(1.05rem, 4.4vw, 1.22rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
  user-select:text;
  outline:none;
  cursor:pointer;
}

.value--mono{
  font-family:"Arimo", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:clamp(.92rem, 3.8vw, 1.06rem);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.value:focus-visible{
  box-shadow:0 0 0 3px rgba(15,118,110,.18);
  border-radius:10px;
}

.copy-btn{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:108px;
  min-height:42px;
  padding:0 13px;
  border-radius:14px;
  background:var(--carbon);
  color:var(--bone);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:transform .16s ease, background-color .2s ease, box-shadow .2s ease;
}

.copy-btn svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.copy-btn:hover,
.copy-btn:focus-visible{
  background:#182126;
  transform:translateY(-1px);
}

.copy-btn:focus-visible,
.whatsapp-btn:focus-visible{
  outline:3px solid rgba(201,242,123,.45);
  outline-offset:3px;
}

.copy-btn:active,
.whatsapp-btn:active{
  transform:translateY(1px);
}

.card-cta{
  padding:0 12px 12px;
}

.whatsapp-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, #D6F791 0%, var(--pulse-lime) 100%);
  color:var(--carbon);
  text-decoration:none;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(.98rem, 4vw, 1.08rem);
  font-weight:800;
  letter-spacing:-.01em;
  border:1px solid rgba(16,20,24,.12);
  box-shadow:0 14px 32px rgba(16,20,24,.10), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .16s ease, filter .2s ease, box-shadow .2s ease;
}

.whatsapp-btn:hover{
  filter:brightness(1.02);
  box-shadow:0 18px 36px rgba(16,20,24,.12), inset 0 1px 0 rgba(255,255,255,.48);
}

.whatsapp-btn__icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(16,20,24,.08);
  flex:0 0 auto;
}

.whatsapp-btn__icon svg{
  width:18px;
  height:18px;
}

@media (min-width: 740px){
  .payment-card{width:min(700px, 100%)}
  .hero{padding:18px 18px 16px}
  .details{padding:14px}
  .field{padding:14px 14px 14px 16px}
  .copy-btn{min-width:104px}
}

@media (max-width: 420px){
  .page-shell{padding:8px}

  .payment-card{
    border-radius:20px;
  }

  .hero{
    padding:14px 14px 12px;
  }

  .brand-lockup{
    gap:10px;
  }

  .brand-lockup__mark{
    width:64px;
    height:40px;
    padding:0 10px;
    border-radius:14px;
  }

  .brand-lockup__name{
    font-size:1.12rem;
  }

  .hero__chip{
    min-height:32px;
    padding:7px 11px;
    font-size:.79rem;
  }

  .hero__body{
    margin-top:12px;
    gap:12px;
  }

  .hero__title{
    font-size:clamp(1.78rem, 8.4vw, 2.16rem);
  }

  .hero__route span{
    height:7px;
  }

  .hero__route span:nth-child(1){width:30px}
  .hero__route span:nth-child(2){width:9px}
  .hero__route span:nth-child(3){width:20px}

  .details{
    padding:10px;
    gap:9px;
  }

  .field{
    padding:12px 12px 12px 14px;
    gap:8px 10px;
    border-radius:16px;
  }

  .field__accent{
    top:14px;
    left:9px;
    width:5px;
    height:5px;
  }

  .label{
    padding-left:10px;
    font-size:.68rem;
    margin-bottom:4px;
  }

  .value{
    padding-left:10px;
    font-size:clamp(1rem, 4.4vw, 1.1rem);
  }

  .value--mono{
    font-size:clamp(.86rem, 3.7vw, .98rem);
  }

  .copy-btn{
    min-width:100px;
    min-height:40px;
    padding:0 12px;
    font-size:.84rem;
    border-radius:13px;
  }

  .copy-btn svg{
    width:17px;
    height:17px;
    flex-basis:17px;
  }

  .card-cta{
    padding:0 10px 10px;
  }

  .whatsapp-btn{
    min-height:54px;
    padding:14px 15px;
    border-radius:16px;
  }

  .whatsapp-btn__icon{
    width:28px;
    height:28px;
  }

  .whatsapp-btn__icon svg{
    width:17px;
    height:17px;
  }
}

@media (max-width: 340px){
  .brand-lockup__name{font-size:1.04rem}
  .hero__chip{font-size:.74rem;padding:6px 10px}
  .copy-btn span{display:none}
  .copy-btn{min-width:44px;padding:0 12px}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

.hero{
  padding:14px 16px 12px;
}

.hero__top{
  justify-content:flex-start;
}

.brand-lockup{
  gap:10px;
}

.brand-lockup__mark{
  width:58px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
}

.brand-lockup__name{
  font-size:1.08rem;
}

.hero__body{
  margin-top:10px;
  display:block;
}

.hero__title{
  max-width:none;
  font-size:clamp(1.6rem, 6.8vw, 2.35rem);
  line-height:1;
  text-wrap:pretty;
}

.hero__instruction{
  margin:10px 0 0;
  max-width:34ch;
  color:rgba(247,242,234,.78);
  font-size:.92rem;
  line-height:1.35;
}

.hero__steps{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.hero__step{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 9px;
  border-radius:14px;
  background:rgba(247,242,234,.05);
  border:1px solid rgba(247,242,234,.1);
}

.hero__step-number{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(201,242,123,.18);
  color:var(--pulse-lime);
  font-size:.72rem;
  font-weight:800;
  flex:0 0 auto;
}

.hero__step-text{
  min-width:0;
  color:rgba(247,242,234,.88);
  font-size:.74rem;
  font-weight:700;
  line-height:1.25;
}

.details{
  gap:12px;
}

.section-card,
.details-collapsible{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.64);
  border:1px solid var(--border);
}

.section-card{
  display:grid;
  gap:10px;
}

.section-card__head{
  display:grid;
  gap:4px;
}

.section-title{
  margin:0;
  color:var(--ink);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.section-note{
  margin:0;
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.35;
}

.field{
  background:rgba(255,255,255,.86);
}

.field--primary{
  padding:14px 14px 14px 18px;
  border-color:rgba(15,118,110,.18);
  box-shadow:0 14px 30px rgba(16,20,24,.08);
}

.field--primary .field__accent{
  top:12px;
  left:12px;
  bottom:12px;
  width:4px;
  height:auto;
  border-radius:999px;
}

.field__helper{
  margin:0 0 6px;
  padding-left:12px;
  color:var(--signal-teal);
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
}

.label{
  color:#46525A;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
}

.field--primary .label{
  color:var(--signal-teal);
}

.field--primary .value{
  font-size:clamp(1.16rem, 5vw, 1.42rem);
  letter-spacing:.01em;
}

.field--primary .value--mono{
  white-space:normal;
  overflow-wrap:anywhere;
}

.field--secondary{
  padding:12px 13px 12px 15px;
}

.details-collapsible__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:.95rem;
  font-weight:700;
}

.details-collapsible__summary::-webkit-details-marker{
  display:none;
}

.details-collapsible__summary::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(19,26,31,.72);
  border-bottom:2px solid rgba(19,26,31,.72);
  transform:rotate(45deg);
  transition:transform .16s ease;
  margin-top:-4px;
}

.details-collapsible[open] .details-collapsible__summary::after{
  transform:rotate(225deg);
  margin-top:4px;
}

.details-collapsible__body{
  padding-top:10px;
  display:grid;
  gap:10px;
}

.copy-btn{
  appearance:none;
  border:1px solid var(--border-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:86px;
  min-height:40px;
  padding:0 12px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  color:var(--ink);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:none;
}

.copy-btn:hover,
.copy-btn:focus-visible{
  background:#ffffff;
  border-color:rgba(16,20,24,.18);
  transform:translateY(-1px);
}

.field--primary .copy-btn{
  min-width:110px;
  background:var(--carbon);
  color:var(--bone);
  border-color:transparent;
  box-shadow:var(--shadow-md);
}

.field--primary .copy-btn:hover,
.field--primary .copy-btn:focus-visible{
  background:#182126;
  border-color:transparent;
}

.copy-btn.is-copied{
  background:rgba(15,118,110,.08);
  color:var(--signal-teal);
  border-color:rgba(15,118,110,.24);
  box-shadow:none;
}

.field--primary .copy-btn.is-copied{
  background:var(--signal-teal);
  color:var(--white);
  border-color:transparent;
}

@media (min-width: 740px){
  .hero{
    padding:15px 18px 13px;
  }

  .hero__title{
    font-size:2.4rem;
  }
}

@media (max-width: 420px){
  .hero{
    padding:12px 14px 10px;
  }

  .brand-lockup__mark{
    width:54px;
    height:34px;
    padding:0 9px;
  }

  .brand-lockup__name{
    font-size:1.02rem;
  }

  .hero__title{
    font-size:clamp(1.48rem, 7.4vw, 1.92rem);
  }

  .hero__instruction{
    font-size:.86rem;
    max-width:none;
  }

  .hero__steps{
    gap:6px;
  }

  .hero__step{
    gap:6px;
    padding:7px 8px;
  }

  .hero__step-number{
    width:18px;
    height:18px;
    font-size:.68rem;
  }

  .hero__step-text{
    font-size:.68rem;
  }

  .section-card,
  .details-collapsible{
    padding:10px;
  }

  .field--primary{
    padding:13px 13px 13px 16px;
  }

  .field--primary .field__accent{
    left:10px;
  }

  .field__helper,
  .label,
  .value{
    padding-left:10px;
  }
}

@media (max-width: 340px){
  .hero__steps{
    gap:5px;
  }

  .hero__step{
    padding:7px;
  }

  .hero__step-text{
    font-size:.66rem;
  }

  .copy-btn{
    min-width:78px;
    padding:0 10px;
    font-size:.78rem;
  }

  .copy-btn span{
    display:inline;
  }

  .copy-btn svg{
    width:16px;
    height:16px;
    flex-basis:16px;
  }
}
:root{
  --carbon:#1E2F42;
  --bone:#F7F3EE;
  --signal-teal:#1E2F42;
  --pulse-lime:#A56150;
  --clay:#A56150;
  --white:#ffffff;
  --ink:#2B2623;
  --ink-soft:#6C5A4A;
  --border:rgba(83,60,44,.10);
  --border-strong:rgba(83,60,44,.18);
  --shadow-xl:0 24px 60px rgba(30,47,66,.18);
  --shadow-md:0 12px 24px rgba(30,47,66,.12);
}

body{
  background:var(--carbon) !important;
  color:var(--ink);
}

.page-shell__glow{
  display:none;
}

.payment-card{
  background:var(--bone) !important;
  border:1px solid rgba(247,243,238,.14);
  box-shadow:var(--shadow-xl);
}

.hero{
  background:var(--carbon) !important;
  color:var(--bone);
  border-bottom:1px solid rgba(247,243,238,.12);
}

.brand-lockup{
  gap:0;
}

.brand-lockup__mark{
  width:170px;
  height:50px;
  padding:0 14px;
  background:var(--bone);
  border:1px solid rgba(83,60,44,.12);
  box-shadow:none;
}

.brand-lockup__name{
  display:none;
}

.hero__step{
  background:rgba(247,243,238,.06);
  border-color:rgba(247,243,238,.12);
}

.hero__step-number{
  background:var(--clay);
  color:var(--bone);
}

.section-card,
.details-collapsible{
  background:rgba(215,193,167,.34);
  border-color:rgba(83,60,44,.10);
}

.section-title,
.details-collapsible__summary{
  color:var(--ink);
}

.section-note,
.label{
  color:var(--ink-soft);
}

.field{
  background:rgba(255,255,255,.92);
  border-color:rgba(83,60,44,.08);
}

.field__accent{
  background:var(--carbon);
}

.field--primary{
  border-color:rgba(165,97,80,.28);
  box-shadow:0 14px 30px rgba(30,47,66,.08);
}

.field--primary .field__accent{
  background:var(--clay);
}

.field--primary .label{
  color:var(--clay);
}

.copy-btn{
  background:rgba(247,243,238,.88);
  color:var(--carbon);
  border-color:rgba(30,47,66,.16);
  box-shadow:none;
}

.copy-btn:hover,
.copy-btn:focus-visible{
  background:var(--white);
  border-color:rgba(30,47,66,.26);
}

.field--primary .copy-btn{
  background:var(--carbon);
  color:var(--bone);
  border-color:transparent;
  box-shadow:var(--shadow-md);
}

.field--primary .copy-btn:hover,
.field--primary .copy-btn:focus-visible{
  background:#25384C;
}

.copy-btn.is-copied{
  background:rgba(165,97,80,.10);
  color:var(--clay);
  border-color:rgba(165,97,80,.26);
}

.field--primary .copy-btn.is-copied{
  background:var(--clay);
  color:var(--bone);
  border-color:transparent;
}

.copy-btn:focus-visible,
.whatsapp-btn:focus-visible{
  outline:3px solid rgba(165,97,80,.28);
  outline-offset:3px;
}

.details-collapsible__summary::after{
  border-right-color:rgba(83,60,44,.72);
  border-bottom-color:rgba(83,60,44,.72);
}

.whatsapp-btn{
  background:var(--clay) !important;
  color:var(--bone);
  border-color:rgba(83,60,44,.10);
  box-shadow:0 14px 30px rgba(30,47,66,.14);
}

.whatsapp-btn:hover{
  background:#8F5949;
  filter:none;
  box-shadow:0 18px 34px rgba(30,47,66,.16);
}

.whatsapp-btn__icon{
  background:rgba(247,243,238,.12);
}

@media (max-width: 420px){
  .brand-lockup__mark{
    width:150px;
    height:46px;
    padding:0 12px;
  }
}
:root{
  --juliette-bone:#F7F3EE;
  --juliette-card:#FFFFFF;
  --juliette-sand:#EFE7DD;
  --juliette-cafe:#533C2C;
  --juliette-ink:#2B2623;
  --juliette-ink-soft:#6F6257;
  --juliette-navy:#1E2F42;
  --juliette-clay:#A56150;
  --juliette-border:rgba(83,60,44,.10);
  --juliette-border-strong:rgba(83,60,44,.16);
  --juliette-shadow:0 22px 50px rgba(30,47,66,.10);
}

body{
  background:var(--juliette-bone) !important;
  color:var(--juliette-ink);
}

.page-shell{
  padding:clamp(12px, 3vw, 28px);
}

.payment-card{
  width:min(720px, 100%);
  background:var(--juliette-card) !important;
  border:1px solid var(--juliette-border);
  border-radius:28px;
  box-shadow:var(--juliette-shadow);
}

.hero{
  position:relative;
  background:var(--juliette-bone) !important;
  color:var(--juliette-cafe);
  padding:18px 22px 12px !important;
  border-bottom:1px solid var(--juliette-border);
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:var(--juliette-navy);
}

.hero__top{
  justify-content:flex-start;
}

.brand-lockup{
  gap:0;
}

.brand-lockup__mark{
  width:136px;
  height:36px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}

.hero__body{
  margin-top:12px !important;
  display:block !important;
}

.hero__title{
  max-width:none;
  color:var(--juliette-cafe);
  font-size:clamp(1.35rem, 4.8vw, 1.9rem) !important;
  line-height:1.08;
  letter-spacing:-.02em;
}

.hero__subtitle{
  margin:6px 0 0;
  color:var(--juliette-ink-soft);
  font-size:.92rem;
  line-height:1.38;
}

.hero__steps{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}

.hero__step{
  min-width:0;
  padding:0;
  gap:8px;
  border:none;
  background:transparent;
  border-radius:0;
  align-items:center;
}

.hero__step:not(:last-child)::after{
  content:"";
  width:16px;
  height:1px;
  background:rgba(30,47,66,.18);
  margin-left:2px;
}

.hero__step-number{
  width:20px;
  height:20px;
  background:rgba(30,47,66,.08);
  color:var(--juliette-navy);
  font-size:.7rem;
}

.hero__step-text{
  color:var(--juliette-ink);
  font-size:.77rem;
  font-weight:700;
  line-height:1.2;
}

.details{
  padding:14px 16px 18px !important;
  gap:12px !important;
}

.field{
  gap:16px;
  background:var(--juliette-card) !important;
  border:1px solid var(--juliette-border);
  border-radius:20px;
  box-shadow:none;
}

.field__accent,
.field--primary .field__accent{
  display:none !important;
}

.label,
.value,
.field__helper{
  padding-left:0 !important;
}

.label{
  color:var(--juliette-ink-soft) !important;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
}

.value{
  color:var(--juliette-ink);
  font-size:1.16rem;
  line-height:1.18;
}

.value--mono{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.value[data-copyable="false"]{
  cursor:default;
}

.value[data-copyable="false"]:focus-visible{
  box-shadow:none;
}

.field--primary{
  display:block;
  padding:24px !important;
  border-color:var(--juliette-border-strong);
  border-radius:24px;
}

.field--primary .field__meta{
  display:grid;
  gap:8px;
}

.field--primary .label{
  color:var(--juliette-ink-soft) !important;
}

.field--primary .value{
  color:var(--juliette-cafe);
  font-size:clamp(1.48rem, 5.2vw, 2.06rem) !important;
  line-height:1.04;
}

.field--primary .copy-btn{
  min-width:152px;
  min-height:46px;
  padding:0 16px;
  font-size:.94rem;
  width:auto;
  margin-top:16px;
  background:var(--juliette-clay) !important;
  color:var(--white);
  border:1px solid rgba(83,60,44,.10);
  border-radius:14px;
  box-shadow:none;
}

.field--primary .copy-btn:hover,
.field--primary .copy-btn:focus-visible{
  background:#905A49 !important;
}

.field--primary .copy-btn.is-copied{
  background:var(--juliette-navy) !important;
  color:var(--white);
}

.section-card{
  background:var(--juliette-card) !important;
  border:1px solid var(--juliette-border);
  border-radius:24px;
  padding:18px 18px 8px !important;
  gap:0;
}

.section-card__head{
  gap:6px;
  margin-bottom:8px;
}

.section-title{
  color:var(--juliette-cafe);
  font-size:1rem;
}

.section-note{
  color:var(--juliette-ink-soft);
  font-size:.9rem;
  line-height:1.45;
  max-width:38ch;
}

.section-card .field--secondary,
.details-collapsible .field--secondary{
  background:transparent !important;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:14px 0 !important;
}

.section-card .field--secondary + .field--secondary,
.details-collapsible .field--secondary + .field--secondary{
  border-top:1px solid var(--juliette-border);
}

.section-card .field--secondary .value,
.details-collapsible .field--secondary .value{
  font-size:1.22rem;
}

.section-card .copy-btn,
.details-collapsible .copy-btn{
  min-width:88px;
  min-height:36px;
  padding:0 12px;
  font-size:.82rem;
  background:rgba(165,97,80,.08) !important;
  color:var(--juliette-clay);
  border:1px solid rgba(165,97,80,.18);
  border-radius:12px;
  box-shadow:none;
}

.section-card .copy-btn:hover,
.section-card .copy-btn:focus-visible,
.details-collapsible .copy-btn:hover,
.details-collapsible .copy-btn:focus-visible{
  background:rgba(165,97,80,.12) !important;
  border-color:rgba(165,97,80,.24);
}

.section-card .copy-btn.is-copied,
.details-collapsible .copy-btn.is-copied{
  background:var(--juliette-navy) !important;
  color:var(--white);
  border-color:transparent;
}

.details-collapsible{
  background:var(--juliette-card) !important;
  border:1px solid var(--juliette-border);
  border-radius:20px;
  padding:0 !important;
  overflow:hidden;
}

.details-collapsible__summary{
  color:var(--juliette-cafe);
  padding:16px 18px;
  font-size:.96rem;
  font-weight:700;
}

.details-collapsible__body{
  padding:0 18px 6px;
  gap:0;
}

.card-cta{
  padding:2px 16px 18px !important;
}

.whatsapp-btn{
  min-height:58px;
  padding:16px 18px;
  background:var(--juliette-clay) !important;
  color:var(--white);
  border:none;
  border-radius:18px;
  box-shadow:none;
}

.whatsapp-btn:hover,
.whatsapp-btn:focus-visible{
  background:#905A49 !important;
  box-shadow:none;
}

.whatsapp-btn__icon{
  background:rgba(255,255,255,.16);
}

.copy-btn:focus-visible,
.whatsapp-btn:focus-visible{
  outline:2px solid rgba(30,47,66,.14);
  outline-offset:3px;
}

@media (max-width: 640px){
  .hero{
    padding:16px 18px 10px !important;
  }

  .brand-lockup__mark{
    width:124px;
    height:33px;
  }

  .field--primary{
    grid-template-columns:1fr;
    gap:14px;
  }

  .field--primary .copy-btn{
    width:100%;
  }
}

@media (max-width: 420px){
  .page-shell{
    padding:8px;
  }

  .payment-card{
    border-radius:24px;
  }

  .hero{
    padding:14px 16px 10px !important;
  }

  .brand-lockup__mark{
    width:116px;
    height:31px;
  }

  .hero__title{
    font-size:1.3rem !important;
  }

  .hero__subtitle{
    font-size:.87rem;
  }

  .hero__steps{
    gap:6px 8px;
  }

  .hero__step:not(:last-child)::after{
    width:12px;
  }

  .details{
    padding:12px 12px 16px !important;
  }

  .field--primary,
  .section-card,
  .details-collapsible{
    border-radius:18px;
  }

  .field--primary{
    padding:18px 16px !important;
  }

  .field--primary .value{
    font-size:clamp(1.08rem, 5.6vw, 1.42rem) !important;
  }

  .section-card,
  .details-collapsible__summary,
  .details-collapsible__body{
    padding-left:16px;
    padding-right:16px;
  }

  .section-card .field,
  .details-collapsible .field{
    gap:12px;
  }

  .section-card .copy-btn,
  .details-collapsible .copy-btn{
    min-width:88px;
    padding:0 12px;
  }

  .card-cta{
    padding:2px 12px 16px !important;
  }
}

@media (max-width: 360px){
  .hero__steps{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero__step:not(:last-child)::after{
    display:none;
  }

  .field--primary .value{
    font-size:1rem !important;
  }

  .copy-btn span{
    display:inline;
  }
}

@media (max-width: 480px){
  .hero__steps{
    flex-wrap:nowrap;
    gap:4px;
  }

  .hero__step{
    gap:4px;
  }

  .hero__step-number{
    width:16px;
    height:16px;
    font-size:.56rem;
    flex:0 0 16px;
  }

  .hero__step-text{
    white-space:nowrap;
    font-size:clamp(.54rem, 2.7vw, .66rem);
    letter-spacing:-.01em;
  }

  .hero__step:not(:last-child)::after{
    width:8px;
    margin-left:0;
  }
}

@media (max-width: 360px){
  .hero__steps{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:3px;
    align-items:center;
  }

  .hero__step{
    gap:3px;
  }

  .hero__step-number{
    width:15px;
    height:15px;
    font-size:.52rem;
    flex-basis:15px;
  }

  .hero__step-text{
    font-size:.53rem;
  }

  .hero__step:not(:last-child)::after{
    display:block;
    width:6px;
  }
}