body {
  background-image: url("../images/gradient.webp");
  background-repeat: repeat-x;
  background-size: 50% 100%;
}
html {
  scroll-behavior: smooth;
} /* smooth jump to #anniversary */

h1,
h2 {
  text-align: center;
  color: darkgreen;
  font-weight: 600 !important;
}

#mainContent:not(#mainContent:has(.swiper)) {
  background-color: #f8fef2;
}

#banner-container {
  border: 8px solid #e5be95;
}

/* Apply wood frame to all divs inside content/layout areas */
section
  div:not(
    .no-frame,
    [class*="swiper"],
    #gallery div,
    .tokuChou,
    div:has(#proofreading_rates),
    #signature,
    .jp-friendly div,
    .jp-friendly
  ),
aside div:not(.no-frame, [class*="swiper"]),
section#social_media div:not(.no-frame, [class*="swiper"], #insta_wrapper, iframe div),
#mainContent:not(#mainContent:has(.swiper), .tokuChou) {
  border: 3px solid #e5be95;
  border-radius: 2em;
}

section#mainContent:not(#mainContent:has(.policy)),
.policy {
  background-image:
    url("../images/leaves_top_left.webp"), url("../images/leaves_bottom_right.webp");
  background-size:
    200px 200px,
    200px 200px;
  background-position:
    -10px -10px,
    bottom -10px right -10px;
  background-repeat: no-repeat, no-repeat;
}

#fb_posts iframe {
  width: 90%;
  margin: 2em auto;
  border: 1px solid green;
  display: block;
  border-radius: 3em;
}

#social_media iframe {
  width: 97% !important;
  margin: 0.5em auto !important;
  display: block;
}
#social_media .post {
  border-radius: 1em;
  overflow: hidden;
}
#social_media h2 {
  font-size: 1.5em;
  padding: 0.2em;
  background-color: #0271fb;
  color: #fff;
  margin: 0.7em;
  border-radius: 0.3em;
}

/* Policy */
.tokuChou {
  margin: auto;
  width: 70%;
}
.tokuChou h3 {
  text-align: center;
}
.policy .ww {
  display: inline-block;
  white-space: nowrap;
}

/* Demo */

#demo_form label {
  display: block;
  text-align: left;
  margin: 1em;
  position: relative;
  padding: 1em;
  border: 1px solid green;
  border-radius: 3em;
}

#demo_form label {
  min-width: 13em;
}

#demo_form select,
#demo_form input {
  display: inline-block;
  width: 10em;
  margin: 0.5em;
}

#demo_form fieldset {
  margin: 1em;
  border-radius: 2em;
}
#submit_demo_form {
  display: block;
  width: 4em;
  margin: auto;
}
.tryAgain {
  border: 2px solid red;
  border-radius: 1em;
  padding: 0.2em;
  text-align: center;
}
.tryAgainReason {
  display: block;
  margin: 0.4em auto;
}
#demo_form label.highlighted {
  border: 2px solid red;
}
#genderOptions {
  margin: 0.5em;
  width: 7em;
}
#demo_form #genderOptions input {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  right: auto;
}
#contact_method {
  margin: 1em;
}
#contact label {
  display: inline-block;
  margin: 0.1em;
  min-width: 2em;
  padding: 0.3em;
  width: 1em;
  position: static;
}
select#subject {
  bottom: 1em;
}
#experience textarea,
#other_info textarea {
  margin: auto;
  width: 80%;
  display: block;
}
#demo_form p#submit input {
  position: relative;
  top: auto;
  right: auto;
  width: 6em;
  display: block;
  margin: auto;
}
.demo-thanks {
  text-align: center;
  font-size: large;
  margin: 1em auto;
  padding: 1em;
  border-radius: 2em;
  background-color: #9afa98;
  color: #000;
}
#demo select,
#demo input[type="text"],
#demo input[type="submit"],
#demo textarea {
  border: 1px solid lightgray;
}

#demo .ww {
  display: inline-block;
  white-space: nowrap;
}

#demo #teacher_pref input[type="radio"],
#demo #lesson_style input[type="radio"] {
  width: auto;
}

/* ── radio “pills” ──────────────────────────────────────────── */
#demo .radio-pill {
  /* two columns:  ⬤ | text… */
  display: grid;
  grid-template-columns: auto 1fr; /* dot = auto width, text takes the rest */
  column-gap: 0.65rem; /* space between dot & text              */
  align-items: start; /* top-align the text block              */
  width: 100%;
}

#demo .radio-pill span {
  line-height: 1.45; /* comfortable multi-line leading        */
  white-space: normal; /* allow wrapping                        */
}

#demo .radio-pill input[type="radio"] {
  margin-top: 0.25em; /* little vertical nudge (optional)      */
}

/* ── radio-pill final polish ──────────────────────────────────── */
#demo .radio-pill {
  /* stop the border from stretching edge-to-edge */
  width: auto; /* (overrides the earlier width:100%)           */
  max-width: 100%; /* still prevents overflow on very long lines   */
}

#demo .radio-pill span {
  /* make sure the whole caption sits in column 2 */
  display: block; /* keeps the 2nd line perfectly aligned         */
}

#demo_form label {
  display: flex;
}
#demo_form label span {
  flex: 1; /* take up all available space */
}

#demo_form .contact {
  display: block;
}
#demo_form .contact label {
  display: inline-block;
  width: auto;
  min-width: fit-content;
}
#demo_form .contact label input {
  width: auto;
}

@media (max-width: 700px) {
  #demo.apage {
    padding: 0.75rem;
  }

  #demo_form,
  #demo_form *,
  #demo_form fieldset {
    box-sizing: border-box;
  }

  #demo_form,
  #demo_form fieldset {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  #demo_form fieldset {
    margin: 0.25rem 0;
    padding: 0.5rem;
  }

  #demo_form > fieldset > label,
  #demo_form .desired_date_time label,
  #demo_form #extra_fields > label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0.75rem 0;
    padding: 0.75rem;
  }

  #demo_form > fieldset > p,
  #demo_form .desired_date_time {
    margin-left: 0;
    margin-right: 0;
  }

  #genderOptions {
    width: auto;
    margin: 0.5rem 0 0;
  }

  #demo_form input[type="text"],
  #demo_form select,
  #demo_form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0 0;
  }

  #demo_form .desired_date_time {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #demo_form .contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #demo_form .contact label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
  }

  #demo_form .contact label input {
    margin: 0;
  }
}

/* lessons */
#lessons ul,
#lessons ol {
  font-size: large;
}

#lessons ol,
#lessons h2 {
  text-align: left;
}
#lessons #lesson_list li:nth-of-type(1) h2 {
  border-bottom: 5px solid green;
}
#lessons #lesson_list li:nth-of-type(2) h2 {
  border-bottom: 5px solid orange;
}
#lessons #lesson_list li:nth-of-type(3) h2 {
  border-bottom: 5px solid #afeeee;
}
#lessons #lesson_list li:nth-of-type(4) h2 {
  border-bottom: 5px solid #b19cd9;
}
#lessons #lesson_list li:nth-of-type(5) h2 {
  border-bottom: 5px solid gold;
}

#lessons #lesson_patterns li h2 {
  border-bottom: 5px solid #afeeee;
}

#lessons p.uoh {
  font-weight: bold;
  margin: 1em 2em;
}
#lesson_list ul,
#lesson_list li {
  margin-left: 0.2em;
  padding-left: 0.2em;
  margin-top: 0;
}
#lessons h1 {
  margin-left: 0.5em;
}

/* online, visiting */
.apage p,
.apage h1 {
  line-height: 1.5em;
}
.apage p {
  font-size: large;
  margin: 1em;
}
.apage h1 {
  font-size: x-large;
  margin: 1em 2em;
}
#proofreading #three_points p,
#proofreading #three_points h3 {
  line-height: 1.5em;
  font-size: normal;
}
#proofreading_comments div {
  padding: 1em;
}

div.atmosphere h2 {
  margin-top: 1em;
}

/* message */
#achievements {
  margin-left: 2em;
  margin-right: 3em;
  list-style: disc;
  padding-left: 1em;
}
#message {
  text-align: left;
  width: calc(100%-3em);
}

#message #signature {
  width: 15em;
  float: right;
  margin-bottom: 2em;
}

#message #signature span {
  display: block;
  margin-bottom: 1em;
}

#message h2 {
  clear: both;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

#message h1,
#message p {
  margin-left: 2em;
  margin-right: 3em;
}

#message p,
#message ul,
#news {
  line-height: 1.5em;
}

/* prices */
#prices_tables table,
.apage table {
  margin: 2em auto;
  display: inline-block;

  border-collapse: collapse;
}

#prices_tables table {
  font-size: larger;
}

#prices_tables thead {
  text-align: center;
  font-size: small;
}

#prices_tables caption,
.apage caption {
  font-weight: bold;
  margin: 1em auto;
}

.apage table td {
  white-space: nowrap;
}

#prices_tables table {
  display: block;
  margin: 2em auto 1em;
}

#prices_tables .monthly {
  float: right;
  font-weight: bold;
  font-size: smaller;
}

#prices_tables h2 {
  margin: 2em auto 0;
  border-bottom: 5px solid green;
  width: 50%;
}

#prices_tables p.uoh {
  margin-top: 1em;
}

#prices_tables caption {
  padding: 0.2em;
}

#prices_tables ul {
  text-align: left;
}

/* ───── price tables ───────────────────────────────────────────── */
.price-table {
  table-layout: fixed; /* honour the <col> widths            */
  width: max-content; /* shrink-wrap around its grid         */
  border-collapse: collapse;
  font-variant-numeric: tabular-nums; /* monospaced digits = perfect alignment */
  margin-block: 1.5rem; /* space above/below each table        */
}

/* generic cell look */
.price-table th,
.price-table td {
  border: 1px solid #ccc;
  padding: 0.25rem 0.75rem;
}

/* right-align the two price columns */
.price-table td:nth-child(2),
.price-table td:nth-child(3) {
  text-align: right;
}

/* caption styles */
.price-table caption {
  text-align: center;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.price-table .title-chip {
  display: inline-block;
  background: #a5f0a5; /* soft green */
  border-radius: 9999px;
  padding: 0.25rem 1.5rem;
  font-weight: 600;
}

.prices_notes {
  margin: 1em auto;
  width: 80%;
  text-align: center;
}
.prices_notes li {
  text-align: left;
  margin: 0.5em auto;
  font-size: 0.9em;
  list-style: disc;
}
#prices_tables h3 {
  margin: 0.5em 2em;
  font-size: large;
  font-weight: 400;
}

.ojo {
  color: red;
}

/* family plan */
#family_plan p {
  clear: both;
  text-align: center;
}
#family_plan p:first-of-type {
  margin-top: 2em;
}
#family_plan1,
#family_plan2 {
  width: 40em;
}
#family_plan1.smaller,
#family_plan2.smaller {
  width: 20em;
}
#family_plan2.smaller {
  width: 20em;
}
#family_plan2 {
  float: right;
}
#bubbleText2.smallerr {
  width: 17em;
  top: 3.5em;
}
#family_plan p {
  line-height: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 0.9em;
}
imgbox {
  display: block;
  position: relative;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.bubbleText {
  display: block;

  position: absolute;
  line-height: 1.5em;
  text-align: center;
}
#bubbleText1 {
  top: 3em;
  left: 3em;
  width: 14.5em;
}
#bubbleText2 {
  clear: both;
  right: 2.5em;
  top: 5em;
  width: 16em;
}
.standout {
  font-weight: bold;
  color: red;
  border-bottom: 2px solid green;
}
example {
  display: block;
  padding: 1em;
  width: 85%;
  margin: 1em auto 1em;
  border: 3px solid green;
  border-radius: 2em;
  background-image: url("../images/family_plan_arrow.webp");
  background-repeat: no-repeat;
  background-position: right 7em;
  background-color: white;
}
.right {
  float: right;
}
#example2 {
  background-position: right 8em;
}
example .red {
  color: red;
}
example h3 {
  margin-left: 0.5em;
}
example h3 {
  position: relative;
}
#example1 h3::before {
  content: "①";
  position: absolute;
  left: -1em;
  top: 1em;
}
#example2 h3::before {
  content: "②";
  position: absolute;
  left: -1em;
  top: 0.5em;
}

.ww {
  display: inline-block;
  white-space: nowrap;
}

koremade,
plan_details,
price_details,
with_plan,
savings,
footnote,
#family_plan .ww {
  display: block;
  margin: 0.5em auto;
  font-size: 1em;
}
koremade,
with_plan {
  font-weight: bold;
}
#family_plan .ww {
  display: inline-block;
}
footnote {
  color: red;
  font-size: 0.9em;
}
koremade {
  clear: both;
}
.downArrow {
  display: none;
}
savings {
  width: 80%;
  margin: 2em auto;
  padding: 4em 1em;
  background-image: url("../images/family_plan_dec3.webp");
  background-repeat: no-repeat;
  background-position: center center;
  line-height: 2em;
  text-align: center;
  background-size: 100% 100%;
  font-size: 1.2em;
  font-weight: bold;
}
price_details {
  border-image-source: linear-gradient(blue, white) 27 / 3px;
  border-image-slice: 5;
  border-image-width: 3px;
  border-bottom-width: 2px;
  display: inline-block;
}
with_plan {
  margin-top: 1.5em;
}

@media (max-width: 700px) {
  #family_plan {
    overflow-x: hidden;
  }

  #family_plan imgbox {
    display: block;
    width: min(100%, 24rem);
    margin: 1rem auto;
  }

  #family_plan1,
  #family_plan2,
  #family_plan1.smaller,
  #family_plan2.smaller {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  #family_plan .bubbleText {
    font-size: clamp(0.72rem, 2.9vw, 0.95rem);
    line-height: 1.35;
  }

  #bubbleText1 {
    top: 8%;
    left: 8%;
    width: 40%;
  }

  #bubbleText2,
  #bubbleText2.smallerr {
    top: 18%;
    right: 6%;
    width: 46%;
  }

  #family_plan1.smaller + #bubbleText1 {
    top: 23%;
    left: 14%;
    width: 72%;
    font-size: clamp(0.96rem, 4.1vw, 1.15rem);
    line-height: 1.45;
  }

  #family_plan2.smaller + #bubbleText2,
  #family_plan2.smaller + #bubbleText2.smallerr {
    top: 28%;
    left: 4%;
    right: auto;
    width: 82%;
    font-size: clamp(0.96rem, 4.1vw, 1.15rem);
    line-height: 1.45;
  }

  #family_plan p {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  #family_plan .ww {
    display: inline;
    white-space: normal;
  }

  example {
    box-sizing: border-box;
    width: 100%;
    padding: 1rem 0.75rem;
    background-image: none;
  }

  example h3 {
    margin-left: 0;
    padding-left: 1.25rem;
  }

  #example1 h3::before,
  #example2 h3::before {
    left: 0;
    top: 0;
  }

  savings {
    box-sizing: border-box;
    width: 100%;
    padding: 2.5rem 0.75rem;
    background-size: cover;
    font-size: 1rem;
    line-height: 1.6;
  }

  price_details {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

#openingHours {
  position: relative;
}

.b {
  font-weight: bold;
}

/* link boxes */
.link-box .ww {
  display: inline-block;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
.link-box {
  padding-left: 2em;
  padding-right: 2em;
}

/* turn every link‑box into a vertical flex container */
.link-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centring */
  align-items: center; /* keep things truly centred */
  gap: 0.25rem; /* small space between h2 and p */
}

/* kill the default margins that throw the centring off */
.link-box h2,
.link-box p {
  margin-block: 0;
}

/* Message link */
div[data-load="message"] span {
  display: block;
  text-align: center;
  margin: 0.5em auto;
}
div[data-load="message"] img {
  width: 50%;
  max-width: 8em;
  display: block;
  margin: 1em auto 0;
  height: 50%;
}

div[data-load] img {
  border-radius: 2em;
  background-color: #f8fef2;
  border-color: #caa472;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.75);
}

/* gallery */
.ug-thumb-wrapper.ug-tile.ug-tile-clickable {
  border-radius: 1em;
}
/* Hide the raw <img> elements inside the Unite Gallery container.
   The plugin clones data and builds its own markup, so these are never needed. */
#uGallery > img {
  display: none;
}

/* nav */
nav button {
  margin: 0 0.5em;
  font-size: 0.9em;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 0.5em;
  border-radius: 0.5em;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.3s,
    color 0.3s;
  display: inline-block;
  border: #000 solid 0.1em;
  cursor: pointer;
}
nav button {
  font-size: 0.8em;
  margin: 0.1em;
}
nav button:hover {
  background-color: #f8fef2;
  color: #000;
}
nav button:active {
  background-color: #f8fef2;
  color: #000;
}

/* Contact */
/* Contact card ---------------------------------------------------- */
.contactDetails {
  padding: 1em;
  text-align: center;
  position: relative; /* anchor for absolutely-positioned icons */
  font-size: larger;
}

/* social icons top-right ----------------------------------------- */
.socialMediaLinks {
  position: absolute;
  top: 4em;
  right: 2em;
  width: 3em; /* keep the narrow column */
  display: flex; /* stack vertically */
  flex-direction: column;
  gap: 0.5em;
}

.socialMediaLinks img {
  width: 3em;
  height: 3em;
}

/* Special */
#special {
  text-align: center;
}
#special .ww {
  display: inline-block;
  white-space: nowrap;
}

/* otona campaign */
#otonaCampaign {
  background-image: url(../images/green_stripes.webp);
  background-position: left top;
  background-repeat: repeat-y;
  background-size: 100%;
  background-color: #f2feff;
  border-radius: 1em;
  border: 3px solid #e5be95;
  line-height: 1.7em;
  box-shadow: 0 0 10px #000;
  transition: all 0.5s ease-in-out;
  max-width: 52em;
}

#campaignDiv {
  line-height: 2em;
  border: none;
  text-align: center;
}

#campaignDate {
  color: rgb(36, 172, 18);
  text-align: center;
  background-image: url(../images/daisy.png);
  background-repeat: repeat-x;
  background-size: 70px;
  background-position: left;
  height: 70px;
  line-height: 70px;
  border-top: dotted;
  border-bottom: dotted;
  border-right: none;
  border-left: none;
  border-color: brown;
}
#campaignDate span {
  font-weight: bold;
  font-size: xx-large;
  color: rgb(36, 172, 18);
  text-align: center;
  padding: 0.2em 1em;
  background-color: #ffffff;
  border-radius: 0.5em;
}

#campaignDate span {
  background: url(../images/green_stripes.webp) repeat-x;
}

#campaignDetails {
  border: none;
  text-align: center;
}

#campaignDetails p {
  margin: 0.1em;
  font-size: 1.1em;
  line-height: 1.2em;
}

#otonaCampaign p {
  margin: 0.1em 0;
  line-height: normal;
  text-align: center;
}

#pearls {
  /*
  background-image: url(../images/pearls.webp);
  background-repeat: repeat-x;
  */
  padding: 1.5em 1em;
  width: 37em;
  margin: auto;
  margin-bottom: 1em;
  text-align: center;
  background: #fff;
  border: 3px solid #e5be95;
  border-radius: 1em;
}

#moreCampaignInfo {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 1em;
}

.moreCampaignInfo {
  background-color: #98bb96;
  color: #fff;
}

.moreCampaignInfo h3 {
  background-color: #fff;
  color: brown;
  padding: 0.5em 0.2em;
  font-weight: bold;
  font-size: xx-large;
}

.moreCampaignInfo .smallP {
  font-size: 1em;
  line-height: 1.1em;
  margin: 0.5em 0.1em;
}

.moreCampaignInfo .bigP {
  font-size: 1.5em;
  line-height: 1.2em;
  margin: 0.5em 0.1em;
}

.moreCampaignInfo .v.bigP {
  font-size: 2.5em;
  line-height: 2.6em;
}

.moreCampaignInfo .v.smallP {
  font-size: 0.95em;
  line-height: 1em;
}

green {
  background-color: #98bb96;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid green;
  display: none;
  position: absolute;
  left: 0%;
  top: 0%;
}

#otonaCampaign x {
  position: absolute;
  font-family: "Roboto", sans-serif;
  top: 0.5em;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 2em;
  color: darkgreen;
  cursor: pointer;
  width: 5em;
  text-align: center;
  background-color: #fff;
  border: #98bb96 2px solid;
}

#otonaCampaign.minimised *:not(#otonaCampaign green, #otonaCampaign h2, #campaignDiv) {
  display: none;
}

#otonaCampaign.minimised green {
  display: block;
}
#otonaCampaign h2 {
  margin: 0.5em auto;
}
.gold {
  text-shadow: 0 0 5px black;
}

/* Add to your styles.css or in a <style> block */
@media (max-width: 790px) {
  #moreCampaignInfo {
    display: grid !important;

    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  #pearls {
    width: 90%;
    margin: auto;
  }
}

/* On small screens: revert to normal flow, side by side */
@media (max-width: 850px) {
  .socialMediaLinks {
    position: static;
    width: auto;
    flex-direction: row;
    justify-content: center;
    gap: 1.5em;
  }
}

.jp-friendly {
  word-break: break-all;
  line-break: strict;
}
@media (min-width: 640px) {
  .jp-friendly {
    word-break: normal;
    line-break: loose;
  }
}

.apage.content-width-responsive {
  container-type: inline-size;
}

/* Hide all custom line breaks by default */
@media (min-width: 768px) and (max-width: 1023px) {
  .br-md-lg {
    display: none !important;
  }
}

/* Soft watercolor + confetti background for the campaign card */
.bg-anniv {
  background-image:
    radial-gradient(60% 40% at 0% 0%, rgba(255, 192, 203, 0.28) 0%, rgba(255, 192, 203, 0) 60%),
    radial-gradient(55% 35% at 100% 0%, rgba(180, 238, 255, 0.3) 0%, rgba(180, 238, 255, 0) 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(186, 230, 253, 0.28) 0%, rgba(186, 230, 253, 0) 60%),
    radial-gradient(55% 35% at 100% 100%, rgba(255, 214, 170, 0.3) 0%, rgba(255, 214, 170, 0) 60%),
    radial-gradient(12px 12px at 20% 10%, rgba(247, 220, 111, 0.45) 20%, transparent 21%),
    radial-gradient(10px 10px at 75% 18%, rgba(247, 220, 111, 0.45) 20%, transparent 21%),
    radial-gradient(8px 8px at 12% 78%, rgba(247, 220, 111, 0.45) 20%, transparent 21%),
    radial-gradient(7px 7px at 88% 72%, rgba(247, 220, 111, 0.45) 20%, transparent 21%),
    radial-gradient(6px 6px at 35% 50%, rgba(247, 220, 111, 0.45) 20%, transparent 21%),
    linear-gradient(#fff, #fff);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    100% 100%;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  opacity: 0.9;
}

/* Floral frame/background that scales on any screen */
.campaign-frame {
  position: relative;
  border-radius: 24px;
  padding: clamp(14px, 3.2vw, 36px); /* space between florals & inner card */
  border: none !important; /* ignore global brown border */
}

.campaign-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("../images/campaign_frame.webp") center/cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.campaign-frame > * {
  position: relative;
  z-index: 1;
}

/* ===== Ornate gold box (with curl corners + dotted divider) ===== */
.ornate-box {
  position: relative;
  border: 2px solid #d1b075; /* warm gold/brown */
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

/* corner curls (inline SVG so no extra files) */
.ornate-box {
  --ornate-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'><path d='M6 66c8-12 22-22 44-32' stroke='%23d1b075' stroke-width='2' stroke-linecap='round'/><path d='M46 34c10-5 16-12 16-28' stroke='%23d1b075' stroke-width='2' stroke-linecap='round'/><circle cx='46' cy='34' r='2' fill='%23d1b075'/></svg>");
}
.ornate-corner {
  position: absolute;
  width: 72px;
  height: 72px;
  background: var(--ornate-url) center/contain no-repeat;
  pointer-events: none;
}
.ornate-corner--tl {
  top: -18px;
  left: -18px;
}
.ornate-corner--tr {
  top: -18px;
  right: -18px;
  transform: scaleX(-1);
}
.ornate-corner--bl {
  bottom: -18px;
  left: -18px;
  transform: scaleY(-1);
}
.ornate-corner--br {
  bottom: -18px;
  right: -18px;
  transform: scale(-1);
}

.ornate-divider {
  height: 1px;
  background: repeating-linear-gradient(90deg, #d1b075 0 8px, transparent 8px 16px);
  opacity: 0.75;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* ===== Soft “referral” pink box ===== */
.soft-box {
  border: 2px solid;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.soft-box--pink {
  border-color: #f3b2c0;
  background-color: rgba(255, 240, 244, 0.7);
}

/* Make sure your global wood-frame rule does not hit these */
.no-wood-frames .ornate-box,
.no-wood-frames .soft-box {
  border-width: 2px !important;
}

/* Add a dotted inner rectangle like the poster */
.ornate-box--poster {
  position: relative;
}
.ornate-box--poster::after {
  content: "";
  position: absolute;
  inset: 18px; /* distance from edges; tweak if needed */
  border-radius: 14px;
  border: 2px dotted #9a6f2e; /* warm gold/brown */
  opacity: 0.9;
  pointer-events: none;
}

/* Corner curls (reuse from earlier answer; keep if already added) */
.ornate-box {
  position: relative;
  border: 2px solid #d1b075;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.ornate-box {
  --ornate-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'><path d='M6 66c8-12 22-22 44-32' stroke='%23d1b075' stroke-width='2' stroke-linecap='round'/><path d='M46 34c10-5 16-12 16-28' stroke='%23d1b075' stroke-width='2' stroke-linecap='round'/><circle cx='46' cy='34' r='2' fill='%23d1b075'/></svg>");
}
.ornate-corner {
  position: absolute;
  width: 72px;
  height: 72px;
  background: var(--ornate-url) center/contain no-repeat;
  pointer-events: none;
}
.ornate-corner--tl {
  top: -18px;
  left: -18px;
}
.ornate-corner--tr {
  top: -18px;
  right: -18px;
  transform: scaleX(-1);
}
.ornate-corner--bl {
  bottom: -18px;
  left: -18px;
  transform: scaleY(-1);
}
.ornate-corner--br {
  bottom: -18px;
  right: -18px;
  transform: scale(-1);
}

/* Referral soft box (keep if already added) */
.soft-box {
  border: 2px solid;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.soft-box--pink {
  border-color: #f3b2c0;
  background-color: rgba(255, 240, 244, 0.7);
}