/* Look 4, Colin's final direction (26 Sep ~15:20): look 2's layouts ("studio lights") in easydone.work's greens.
   Loaded after look2.css. The body is "sd-page opt2 opt4": page rules written for look 2 still apply, and this layer
   recolours them. Dark surfaces use easydone.work's tokens and hero light (--green #103d36, --green-deep #0b2e29, the
   #1e7a69 / #2a8f7a / gold glows and the faint white dots). The header stays light, as on easydone.work. */

.opt4{
  --sd-night:#103d36; --sd-night-2:#134a41; --sd-night-deep:#0b2e29;
  --sd-night-line:rgba(255,255,255,.14);
  --sd-on-night:#ffffff; --sd-on-night-soft:#d4e4de; --sd-on-night-faint:#b9d0c8;
  --sd-spot:rgba(234,197,27,.2);
  --sd-night-print:4px 6px 0 rgba(0,0,0,.3);
}

/* Dark bands: easydone.work's hero light */
.opt2.opt4 .sd-night:not(.sd-card):not(.site-foot):not(.cta-card){background-color:var(--sd-night);background-image:
  radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  radial-gradient(46vw circle at 6% 36%,rgba(30,122,105,.85) 0%,transparent 64%),
  radial-gradient(40vw circle at 98% -4%,rgba(42,143,122,.7) 0%,transparent 62%),
  radial-gradient(30vw circle at 44% 112%,rgba(234,197,27,.3) 0%,transparent 62%);
  background-size:26px 26px,auto,auto,auto}
/* Dark cards on paper */
.opt2.opt4 .sd-card.sd-night{background-color:var(--sd-night);background-image:
  radial-gradient(circle at 0% 0%,rgba(30,122,105,.75) 0%,transparent 55%),
  radial-gradient(circle at 100% 100%,rgba(234,197,27,.16) 0%,transparent 50%);
  background-size:auto;border-color:rgba(255,255,255,.16)}
/* The closing card */
.opt2.opt4 .cta-card{background-color:var(--sd-night);background-image:
  radial-gradient(circle at 0% 20%,rgba(30,122,105,.9) 0%,transparent 55%),
  radial-gradient(circle at 100% 0%,rgba(42,143,122,.6) 0%,transparent 45%),
  radial-gradient(circle at 60% 120%,rgba(234,197,27,.28) 0%,transparent 50%)}
.opt2.opt4 .cta-card .sd-btn{box-shadow:3px 3px 0 rgba(255,255,255,.35)}

/* Header: light, as on easydone.work (look 2 made it dark) */
.opt2.opt4 .site-head{background:rgba(251,247,236,.92);border-bottom-color:var(--sd-line-soft)}
.opt2.opt4 .head-nav a,.opt2.opt4 .head-actions .login{color:var(--sd-ink)}
.opt2.opt4 .head-nav a:hover,.opt2.opt4 .head-nav a[aria-current="page"]{background:linear-gradient(transparent 62%,var(--sd-swash) 62%)}
.opt2.opt4 .site-head .sd-brand>span{color:var(--sd-ink)}
.opt2.opt4 .menu-btn{background:var(--sd-paper);color:var(--sd-ink);border-color:var(--sd-ink);box-shadow:2px 2px 0 var(--sd-ink)}
.opt2.opt4 .menu-panel{background:var(--sd-canvas);border-bottom-color:var(--sd-line)}
.opt2.opt4 .menu-panel a{color:var(--sd-ink);border-bottom-color:var(--sd-line-soft)}

/* Shared parts that look 2 darkens everywhere: light again on paper, dark only inside a night band */
.opt2.opt4 .round-btn{background:var(--sd-paper);color:var(--sd-ink);border-color:var(--sd-ink);box-shadow:2px 2px 0 var(--sd-ink)}
.opt2.opt4 .sd-night .round-btn{background:transparent;color:var(--sd-on-night);border-color:var(--sd-on-night);box-shadow:2px 2px 0 rgba(255,255,255,.35)}
.opt2.opt4 .dot{background:var(--sd-paper);border-color:var(--sd-ink)}
.opt2.opt4 .dot[aria-pressed="true"]{background:var(--sd-gold);border-color:var(--sd-ink)}
.opt2.opt4 .sd-night .dot{background:transparent;border-color:var(--sd-on-night)}
.opt2.opt4 .sd-night .dot[aria-pressed="true"]{background:var(--sd-gold);border-color:var(--sd-gold)}
.opt2.opt4 .sd-phone{background:var(--sd-ink);box-shadow:var(--sd-print-lg)}
.opt2.opt4 .sd-night .sd-phone{background:#0b2e29;box-shadow:0 0 0 1.5px rgba(255,255,255,.25),0 34px 60px -28px rgba(0,0,0,.75)}
.opt2.opt4 .phone-card figcaption span{color:var(--sd-ink-faint)}
.opt2.opt4 .sd-night .phone-card figcaption b{color:var(--sd-on-night)}
.opt2.opt4 .sd-night .phone-card figcaption span{color:var(--sd-on-night-faint)}
.opt2.opt4 .deck::before{background:radial-gradient(circle,rgba(234,197,27,.28),rgba(234,197,27,0) 68%)}

/* Homepage: the phone deck follows the dark hero, so it sits on paper (no two dark bands in a row) */
.opt2.opt4 .creative:not(.sd-night){background:var(--sd-paper);background-image:none;padding-top:112px;border-top:1.5px solid var(--sd-line-soft);border-bottom:1.5px solid var(--sd-line-soft);box-shadow:none}
.opt2.opt4 .creative:not(.sd-night) .price-note{color:var(--sd-ink-soft)}
.opt2.opt4 .creative:not(.sd-night) .creative-note{color:var(--sd-ink-faint)!important}
.opt2.opt4 .creative:not(.sd-night) .playing{border-color:var(--sd-ink)}

/* Homepage hero on the green: the chips and cube read on dark */
.opt2.opt4 .hero.sd-night .designs{border-top-color:rgba(255,255,255,.2)}
.opt2.opt4 .cube-face{border-color:rgba(255,255,255,.75)}
.opt2.opt4 .work.sd-night h2 span{color:#b9e0cf}

/* Footer: the deep brand green */
.opt2.opt4 .site-foot{background:var(--sd-night-deep)}