/*footer
afamenit*/
/*--- RESET/NORMALIZE ----------------------------------------------------------------*/
body, h1, h2, h3, h4, h5, h6, figure, dl, dd, pre, blockquote, input[type="radio"], input[type="checkbox"] {margin:0}
legend {padding:0}
fieldset, ul, ol {padding:0;margin:0}
body {line-height:1}
main, figure, figcaption, img {display:block} /* <main> for IE 11 */
img {max-width:100%;height:auto;text-align:center;margin:0 auto;}
fieldset {border:0}
input, textarea, select, button {display:block;max-width:100%;font-family:inherit;font-size:inherit;}
label {display:table}
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {-webkit-appearance:none} /* for Safari (common input types; add others as needed)*/
button {line-height:inherit}
button::-moz-focus-inner {border:0} /* for Firefox */
html {-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;/*font-size:20px*/;font-size:1.25em;scroll-behavior:smooth;}


/*--- BASE/COMMON STYLING --------------------------------------------------------*/
body {min-width:300px;max-width:1080px;padding:0 1em;background-color:#3e1f2c;font-family:'Aleo', serif;color:#f4ede4;position:relative;margin:0 auto}

@media (max-width:399px) {
body {padding-left:.5em;padding-right:.5em}
}

@media (min-width:1080px) {
body {overflow-x:hidden}
}

/*--- lazy loading images ---*/
img[data-src] {background:rgba(0,0,0,.2)}

/*--- main content area -------------------------------*/
main {padding:1em 0}

/*--- bare content images ---*/
main > img, .m_wysiwyg > img {margin:0 auto .75em}

/*--- links -------------------------------*/
a {text-decoration:underline;color:#ffe099;font-weight:bold;}

/*--- headings -------------------------*/
h1, h2, h3, h4, h5, h6 {color:#ffe099;font-weight:normal;line-height:1.2;margin:0 6% .5em}
h1 {font-size:1.8em;text-align:center;text-transform:uppercase;}
h2 {font-size:1.7em;text-align:center}
h3 {font-size:1em}
h4 {font-size:1em}
summary {font-size:1.7em;text-align:center;}

h2.sub {margin:0 auto .2em;}

@media (max-width: 750px){
h1 {font-size:1.6em}
h2 {font-size:1.7em}
summary {font-size:1.6em}
}

summary span {
margin:16px 0 30px;
display:inline-block;
font-size:.9em;
}

/*--- paragraph text -----------------*/
p {line-height:1.3;margin:0 0 .8em}
p a {font-weight:bold}


/*--- sub/superscript -----------------*/
sup, sub {font-size:.6em}

/*--- horizontal rule -----------------*/
hr {border:none;border-top:2px solid #ffe099;margin:0 0 1em}


/*--- MAGIC ORACLE FOOTER --------------------------------------------------------------------------------*/

.magic-oracle-footer {padding:.3em 0 .3em;border:2px solid #893141;border-width:2px 0;font-size:.6em;text-align:center;margin:1em 0}

    /*--- link list ---------------------*/

.magic-oracle-footer ul {}
.magic-oracle-footer li {}
.magic-oracle-footer a {display:inline-block;padding:.3em;color:#f4ede4}
.magic-oracle-footer a span {display:inline-block}
.magic-oracle-footer a[href]:hover, .magic-oracle-footer > a[href]:focus {color:#0085c0}

@media (min-width:700px) {
.magic-oracle-footer ul {width:100%;display:flex;flex-direction:row;}
}


/*--- MAIN PAGE HEADING -----------------------------------------------------*/

h1 span {display:inline-block}


/*--- HISTORY CALLOUT ---------------------------------------------------------------------------*/
.history-callout {
padding:2em 3em;
background-color:#ffffff;
border:3px solid #ffe099;
border-radius:.5em;
color:#3C150D;
margin:0 8% 2em
}

.history-callout p {
font-size:15pt;
text-align:left;
display:block;
color:#3C150D;
font-family:'Times', serif;
margin-left:15px;
margin-right:10px;
}

.history-callout p.subhead {
font-size:1.1em;
text-align:center;
color:#b58e57;
font-weight:bold;
line-height:1.2;
margin:0 0 .5em;
font-family:'Aleo", serif;
}

.history-callout a {
color:#3C150D;
text-decoration:underline;
}

.history-callout li {color:#3C150D}
.history-callout ol {list-style-type:decimal;list-style-position:inside}
.history-callout li {font-size:1.2rem;line-height:1.3;margin:0 0 1.1em} /*--- to match <p> text ---*/
.history-callout li img {margin-top:1em}
.protip {max-width:810px;padding:1.2em 1.4em;border:3px solid #921d4e;border-radius:.5em;margin-top:1.3em}
.protiphead {color:#921d4e;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:1.2em}

.history-callout p.cutline-dark {
font-size:.8em;
text-align:center;
margin:18px auto 0;
font-style:italic;
color:#000;
font-family:'Times', serif;
}

.history-callout p.textdark {
font-size:1em;
font-family:'Times', serif;
}

.history-callout h2 {color:#b58e57;font-size:1.7em;}

.history-callout h2.sub {color:#b58e57;font-size:1.7em;margin:0 auto .2em;}

@media (max-width:750px) {
.history-callout {padding:1.1em;margin:0 2% 2em;}
.history-callout p {font-size:1em;margin:0 7px .8em;}
.history-callout li {font-size:1em;}
.history-callout h2 {font-size:1.5em;}
}

.history-callout p.quote2 {
font-family:'Times', serif;
margin:0 12%;
font-size:1.1em;
font-weight:normal;
line-height:1.3em;
color:#b58e57;
text-align:center;
}

.history-callout .text3 {
margin-left:11%;
font-size:1.4em;
font-family:'Times', serif;
}

@media (max-width: 750px){
.history-callout .text3 {
margin-left:20px;
margin-right:10px;
font-size:1.2em;
}
}

.segment {
border:1px solid #5f5353;
margin:0 8% 0;
padding: 50px 0 20px;
background-color: rgba(61, 60, 60, 0.5);
box-shadow: 0 0 10px 2px #675a28;
}

@media (max-width: 750px){
.segment {
margin:0 2% 0;
padding: 20px 2% 20px;
}
}

.segment h2.sub {
margin:0 auto .2em;
}




/*---WEB SAVVY HOME PAGE --------------------------------------------------------------------------------------------*/

.graph2 {
max-width:620px;
padding:2em 2em;
background-color:#ffffff;
border-radius:.5em;
margin:0 auto 2em}

.graph2 h2 {color:#b58e57;font-weight:bold;font-size:1.7em;}

@media (max-width:599px) {
.graph2 {
padding:10px 30px;
}
.graph2 h2 {font-size:1.6em;}
}

.cutline {
font-size:1em;
text-align:center;
margin:18px auto 0;
font-style:italic;
font-family:'Times', serif;
}

@media (max-width: 750px){
.cutline {
font-size:.9em;
text-align:center;
margin:18px 8px 0;
}
}


img.chat {
display:block;
width:12.5rem;
margin:30px auto 0;
}

details {
margin:0 0 14px;
scroll-margin-top:70px;
}

.quote2 {
font-family:'Times', serif;
margin:0 12%;
font-size:1.3em;
font-weight:normal;
line-height:1.3em;
color:#ffe099;
text-align:center;
}

@media (max-width: 750px){
.quote2 {
margin:0 8%;
font-size:1.2em;
}
}

.links {
font-family:'Times', serif;
margin:8px 0 0 23%;
font-size:1.3em;
font-weight:normal;
line-height:1.5em;
color:#ffe099;
text-indent:-15px;
padding-left:15px;
}


@media (max-width: 750px){
.links {
margin:0 8%;
font-size:1em;
}
}

.linkcentered {
font-family:'Times', serif;
margin:0 auto;
text-align:center;
font-size:1.3em;
font-weight:normal;
line-height:1.5em;
color:#ffe099;
}

.text {
margin-left:80px;
margin-right:68px;
font-size:1em;
font-family:'Times', serif;
}

@media (max-width: 750px){
.text {
margin-left:15px;
margin-right:10px;
}
}

.text2 {
margin-left:12%;
margin-right:12%;
font-size:1em;
font-family:'Times', serif;
}

@media (max-width: 750px){
.text2 {
margin-left:20px;
margin-right:10px;
}
}

.text3 {
margin-left:11%;
line-height:1.4em;
font-size:1.4em;
font-family:'Times', serif;
}

@media (max-width: 750px){
.text3 {
margin-left:20px;
margin-right:10px;
font-size:1.2em;
}
}

.text4 {
margin-left:80px;
margin-right:68px;
font-size:1.3em;
font-family:'Times', serif;
}

@media (max-width: 750px){
.text4 {
margin-left:15px;
margin-right:10px;
font-size:1em;
}
}

.textcentered {
margin:0 8%;
font-size:1em;
font-family:'Times', serif;
text-align:center;
}

.aleo {
font-family:'Aleo';
font-weight:normal;
font-size:2.5em;
text-align:center;
color:#ffe099;
line-height:1.2;
margin:0 0 .5em
}

@media (max-width: 750px){
.aleo {
font-family:'Aleo';
font-weight:normal;
font-size:1.8em;
text-align:center;
color:#ffe099;
line-height:1.2;
margin:0 0 .5em
}
}

.footnote {
font-size:.7em;
opacity:.8;
margin:20px 0 -10px;
text-align:center;
}

.event-oracle-header img {max-width:100%;height:auto;text-align:center;margin:0 auto;}


@media (max-width: 550px){
.event-oracle-header img {max-width:90%;}
}

.border {
box-sizing:border-box;
width:100%;
max-width:24rem;
padding:1rem clamp(.5rem, 5vw, 1rem);
background-color: rgba(61, 60, 60, 0.5);
background-image:url(https://www.websavvyoracle.com/media/swirl-corner-top-left.svg), url(https://www.websavvyoracle.com/media/swirl-corner-top-right.svg), url(https://www.websavvyoracle.com/media/swirl-corner-bottom-right.svg), url(https://www.websavvyoracle.com/media/swirl-corner-bottom-left.svg);
background-repeat:no-repeat;
background-position:top left, top right, bottom right, bottom left;
background-size:3rem auto;background-origin:border-box;
border:3px solid #9d5563;
border-radius:.5rem;box-shadow:0 0 .05rem .05rem rgba(0,0,0,.2);
margin:0 auto 1rem;
}

/*---HAMBURGER MENU  ----------------------------------------------------*/

.extra-menu {
  position:absolute;
  z-index:1;
  top:4.4em;
  left:calc(((100vw - 1800px) / 9) + 8em);
}

@media (max-width:1000px) {
  .extra-menu {
    left:4em;
  }
}
@media (max-width:900px) {
  .extra-menu {
    top:6vw;
    left:1.5em;
  }
}
@media (max-width:600px) {
  .extra-menu {
    top:5vw;
    left:.8em;
  }
}

.extra-menu button {
  display:block;
  height:.8em;
  width:1em;
  background-color:#4f3838;
  border:1px solid #b7b7b7;
  border-radius:.05em;
  font-size:2em;
  position:relative;
  overflow:hidden;
  transition:background-color .2s;
}
@media (max-width:600px) {
.extra-menu button {
  height:.75em;
  width:.75em;
}
}
.extra-menu button::before {
  display:block;
  height:200%;
  content:"";
}
.extra-menu button::after {
  display:block;
  height:1em;
  width:1.2em;
  background-image:linear-gradient(#888, #888 20%, transparent 20%, transparent 40%, #888 40%, #888 60%, transparent 60%, transparent 80%, #888 80%, #888 100%);
  font-size:.5em;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  content:"";
}
.extra-menu button:is(:hover,
:focus) {
  background-color:#eee;
}
.extra-menu ul {
  display:none;
  max-width:10em;
  background-color:#fff;
  border:2px solid #a05663;
  border-radius:.5em;
  margin:.5em 0 0;
  overflow:hidden;
}
.extra-menu ul li {
}
.extra-menu ul a {
  display:block;
  padding:.3em .5em;
  color:#3C150D;
}
.extra-menu ul li:not(:last-child) a {
  border-bottom:1px solid #e3e3e3;
}
.extra-menu ul.open {
  display:block;
  visibility:visible;
  opacity:1;
}


/*--- PROJECTION CALCULATOR -----------------------------------------------*/
#projection {margin:1rem 8%}

/*--- heading ---*/
#projection h2 {}
#projection h2 span {display:inline-block}

/*--- text ---*/
#projection p {
font-size:1em;
font-family:'Times', serif;
}




    /*--- calculator ------------------*/
    #projection fieldset {box-sizing:border-box;width:100%;max-width:18rem;padding:1rem clamp(.5rem, 5vw, 1rem);background-color:rgba(0,0,0,.1);background-image:url(https://www.websavvyoracle.com/media/swirl-corner-top-left.svg), url(https://www.websavvyoracle.com/media/swirl-corner-top-right.svg), url(https://www.websavvyoracle.com/media/swirl-corner-bottom-right.svg), url(https://www.websavvyoracle.com/media/swirl-corner-bottom-left.svg);background-repeat:no-repeat;background-position:top left, top right, bottom right, bottom left;background-size:3rem auto;background-origin:border-box;border:3px solid #9d5563;border-radius:.5rem;box-shadow:0 0 .05rem .05rem rgba(0,0,0,.2);margin:0 auto 1rem}
#projection fieldset legend {float:left;width:100%}
#projection fieldset h3 {font-size:1.2rem;text-align:center;margin-bottom:1rem}
#projection fieldset p {font-size:.8rem}

        /*--- inputs ---*/
#projection fieldset label {display:block;width:fit-content;font-size:.8rem;/*text-align:right;margin:0 0 .5em auto*/;margin:0 0 .5em}
            #projection fieldset label small {font-size:.7rem}
        #projection fieldset input {box-sizing:border-box;display:block;max-width:8ch;padding:.25em .4em;font-size:1.2rem;/*text-align:right;margin:0 0 1.25rem auto*/;margin:0 0 1.25rem}
#projection fieldset input:placeholder {color:#757575}
#projection fieldset > input:nth-of-type(2) {max-width:4ch;margin-bottom:.5rem}
#projection fieldset input:has(+ small) {margin-bottom:.25rem}
#projection fieldset input + small {display:block;font-size:.7rem;/*text-align:right*/;margin-bottom:1.5rem}
/*#projection fieldset input + small span {display:inline-block}*/


/*--- advanced ---*/
#projection details {margin:0 0 1rem}
#projection details::after {display:block;width:50%;border-bottom:2px solid #9d5563;margin:0 auto;content:""}
/*#projection summary {font-size:.9rem;margin:0 0 1rem}*/
/*#projection*/ summary::marker {color:#00c851}

/*--- button style ---*/
#projection summary {list-style:none;display:flex;align-items:center;gap:.5em;width:fit-content;padding:.5em .75em;border:.075em solid #ffe099;border-radius:.4rem;font-size:.8rem;margin:0 0 1rem;cursor:default}
#projection summary::after {width:1em;height:1em;border:0 solid #ffe099;border-width:.1875em .1875em 0 0;font-size:.4em;rotate:135deg;margin:-.5em 0 0;content:""}
#projection summary:is(:hover, :focus), #projection summary:is(:hover, :focus)::after {border-color:#ffd77c}
#projection details[open] summary::after {rotate:-45deg;margin-top:.3em}


#projection details p {}
#projection details input {max-width:5ch}
#projection details input:nth-of-type(2) {max-width:6ch}
#projection details input:nth-of-type(3) {max-width:4ch}

        /*--- outputs ---*/
#projection fieldset > div {display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;font-size:.8rem;line-height:1.2;margin2:0 0 .25rem}
#projection fieldset output {font-size:1.2rem;color:#2acf5f}

/*--- calc note ---*/
#projection fieldset > p:last-child {font-size:.8rem;margin:1rem 0 0}


        /*--- cta ---*/
#projection .action-button {width:auto;font-size:1rem;margin:1rem auto .5rem}
#projection .action-button span {display:inline-block}
#projection .action-button + p {font-size:.7rem;text-align:center;margin:0 0 2rem}


@media (min-width:50rem) {
#projection {display:grid;grid-template-columns:1fr 17rem;align-items:start;gap:0 2rem}

            /*--- calculator ------------------*/
#projection fieldset {grid-column:2;grid-row:1/span 10}
    }



/*--- HISTORY CALLOUT EXPANDERS -------------------------*/
.history-callout {}

    /*--- heading/toggle ---*/
.history-callout summary {width:fit-content;margin:0 auto}
.history-callout summary::marker {font-size:1.2rem}
.history-callout summary h3 {display:inline;font-size:1.1rem;font-weight:bold;color:#000}

.history-callout ::marker {font-size:1.2rem}
.history-callout h3 {font-size:1.1rem;font-weight:bold;color:#3C150D}



  /* Remove number input spinners across browsers */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; appearance: textfield; }

  /* Keep label, input, and helper aligned for the conversion field if needed later */
  label[for="calc-current-ecr"] { display:inline-block; margin-right:8px; vertical-align:middle; }
  #calc-current-ecr { display:inline-block; vertical-align:middle; }
  #calc-current-ecr + span { display:inline-block; margin-left:8px; vertical-align:middle; white-space:nowrap; }

  /* Emphasize the LIFT figures */
  .lift-figure {
    display: inline-block;
    font-size: 1.35em;
    font-weight: 800;
    line-height: 1.1;
  }

<!-- Minimal inline accordion with SVG arrows (square sizing) -->
  /* Desktop default: square buttons */
  .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;          /* fixed square */
    height: 20px;         /* fixed square */
    border-radius: 6px;
    background: #00c851;
    transition: transform .2s;
    transform: rotate(0deg);
    line-height: 0;
    flex: 0 0 auto;
    vertical-align: middle;
  }
  .arrow svg { width: 70%; height: 70%; display: block; }

  /* Mobile: keep square shape, slightly smaller to match strategy buttons */
  @media (max-width: 767px) {
    .arrow {
      width: 18px;
      height: 18px;
    }
  }