/* Technology of Austin — Friendly Euphoria conversion layer.
 * Goal: capture attention fast, guide the eye through one dominant action,
 * keep the interface warm/human, and make motion feel alive rather than noisy.
 */
:root{
  --toa-eup-ink:#071524;
  --toa-eup-navy:#0b2037;
  --toa-eup-blue:#0b72ff;
  --toa-eup-cyan:#35cfff;
  --toa-eup-sky:#8fe8ff;
  --toa-eup-lilac:#c4c8ff;
  --toa-eup-peach:#ffd8c7;
  --toa-eup-text:#f8fcff;
  --toa-eup-muted:#b7cde0;
  --toa-eup-line:rgba(179,229,255,.20);
  --toa-eup-glass:rgba(14,42,68,.68);
  --toa-eup-glass-2:rgba(20,56,88,.62);
}

body.toa-one-tap-page,
body.page-id-261,
body.page-id-262{
  background:
    radial-gradient(circle at 17% 9%,rgba(84,205,255,.20),transparent 28%),
    radial-gradient(circle at 83% 16%,rgba(196,200,255,.18),transparent 30%),
    radial-gradient(circle at 52% 76%,rgba(255,216,199,.08),transparent 34%),
    linear-gradient(180deg,#08192b 0%,#0d2843 46%,#103456 74%,#0b2239 100%)!important;
  color:var(--toa-eup-text);
}

/* Living atmosphere. Motion is slow and large-scale so it directs attention
   without competing with the offer. */
.toa-friendly-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.95;
  contain:strict;
}
.toa-friendly-field span{
  position:absolute;
  display:block;
  border-radius:50%;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.toa-friendly-field span:nth-child(1){
  width:min(68vw,880px);height:min(68vw,880px);right:-18%;top:-20%;
  background:radial-gradient(circle,rgba(78,209,255,.23) 0,rgba(78,209,255,.08) 40%,transparent 70%);
  animation:toaEupFloatOne 18s ease-in-out infinite alternate;
}
.toa-friendly-field span:nth-child(2){
  width:min(55vw,720px);height:min(55vw,720px);left:-20%;top:30%;
  background:radial-gradient(circle,rgba(196,200,255,.19) 0,rgba(122,158,255,.07) 44%,transparent 72%);
  animation:toaEupFloatTwo 23s ease-in-out infinite alternate;
}
.toa-friendly-field span:nth-child(3){
  width:min(44vw,620px);height:min(44vw,620px);left:36%;bottom:-16%;
  background:radial-gradient(circle,rgba(255,216,199,.10) 0,rgba(78,209,255,.06) 48%,transparent 74%);
  animation:toaEupFloatThree 27s ease-in-out infinite alternate;
}
@keyframes toaEupFloatOne{to{transform:translate3d(-8%,10%,0) scale(1.09)}}
@keyframes toaEupFloatTwo{to{transform:translate3d(10%,-7%,0) scale(1.08)}}
@keyframes toaEupFloatThree{to{transform:translate3d(-5%,-10%,0) scale(1.10)}}

body.toa-one-tap-page #toa-header,
#toa-customize-page .toa-door-bar,
#toa-plans-page .toa-door-bar{
  background:rgba(8,25,43,.76)!important;
  border-color:rgba(160,223,255,.20)!important;
  box-shadow:0 8px 34px rgba(2,13,25,.12)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}

/* The eye path is deliberately: headline -> main CTA -> product preview. */
.ot-hero{
  min-height:calc(100svh - 68px)!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  background:transparent!important;
}
.ot-hero::before{
  background:
    radial-gradient(circle at 25% 42%,rgba(74,211,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(7,21,36,.16),rgba(7,21,36,.04))!important;
}
.ot-hero .ot-wrap{position:relative;z-index:2!important}
.ot-hero .ot-layout{gap:clamp(34px,6vw,84px)!important;align-items:center!important}
.ot-kicker{color:#9aeaff!important;letter-spacing:.17em!important}
.ot-title{
  max-width:10.8ch!important;
  color:#fff!important;
  text-wrap:balance;
  text-shadow:0 10px 40px rgba(0,32,72,.12);
}
.ot-title em{
  color:#9cecff!important;
  text-shadow:0 0 38px rgba(81,211,255,.23)!important;
}
.ot-copy{
  max-width:39rem!important;
  color:#c5d9e8!important;
  font-size:clamp(15px,1.25vw,18px)!important;
  line-height:1.65!important;
}
.ot-actions{gap:12px!important;align-items:center!important}
.ot-btn{
  border-radius:16px!important;
  min-height:54px!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease!important;
}
.ot-btn.ot-primary{
  position:relative!important;
  overflow:hidden!important;
  border-color:rgba(211,249,255,.88)!important;
  background:linear-gradient(135deg,#0b72ff 0%,#2bcfff 58%,#8ceaff 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 46px rgba(10,123,255,.28),0 0 38px rgba(53,207,255,.13)!important;
  transform:translateZ(0);
  animation:toaEupPrimaryBreath 6.5s ease-in-out infinite;
}
.ot-btn.ot-primary::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.38) 48%,transparent 66%);
  transform:translateX(-140%);
  animation:toaEupSweep 8s ease-in-out infinite 1.2s;
}
.ot-actions>.ot-btn:not(.ot-primary){
  border-color:rgba(175,228,255,.22)!important;
  background:rgba(10,38,63,.45)!important;
  color:#dcecf7!important;
  box-shadow:none!important;
}
.ot-btn:hover{transform:translateY(-2px)!important}
.ot-btn.ot-primary:hover{box-shadow:0 23px 58px rgba(10,123,255,.34),0 0 48px rgba(53,207,255,.18)!important}
@keyframes toaEupPrimaryBreath{0%,100%{box-shadow:0 18px 46px rgba(10,123,255,.25),0 0 30px rgba(53,207,255,.10)}50%{box-shadow:0 22px 56px rgba(10,123,255,.33),0 0 44px rgba(53,207,255,.18)}}
@keyframes toaEupSweep{0%,72%{transform:translateX(-140%)}90%,100%{transform:translateX(140%)}}

.ot-small{
  color:#9db9cb!important;
  font-size:10px!important;
  letter-spacing:.025em!important;
}
.toa-value-cues{
  display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 0;padding:0;list-style:none;
}
.toa-value-cues li{
  display:inline-flex;align-items:center;min-height:31px;padding:0 10px;
  border:1px solid rgba(174,229,255,.19);border-radius:999px;
  background:rgba(14,48,76,.42);color:#cfe5f3;font-size:9px;font-weight:800;letter-spacing:.02em;
  backdrop-filter:blur(12px);
}
.toa-value-cues li::before{
  content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:#70ddff;box-shadow:0 0 10px rgba(112,221,255,.52);
}

/* The phone is the visual proof. Keep it lively but calmer than the CTA. */
.ot-phone{
  border-color:rgba(152,220,255,.28)!important;
  background:linear-gradient(145deg,#6f8fa5 0,#18334a 7%,#06111b 22%,#16364f 76%,#07121c 94%)!important;
  box-shadow:0 34px 90px rgba(0,16,35,.38),0 0 74px rgba(44,189,255,.13)!important;
  animation:toaEupPhoneFloat 8s ease-in-out infinite!important;
}
@keyframes toaEupPhoneFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(0,-9px,0) rotate(.35deg)}}
.ot-screen{background:radial-gradient(circle at 92% 0,rgba(54,207,255,.16),transparent 31%),linear-gradient(180deg,#0a1b2c,#07121d)!important}
.ot-previewtile,.ot-section,.ot-values>div,.ot-editor,.ot-menuitem{
  background:linear-gradient(180deg,rgba(21,57,87,.72),rgba(8,29,48,.72))!important;
  border-color:rgba(152,220,255,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.ot-previewtile:hover,.ot-menuitem:hover{border-color:rgba(145,232,255,.44)!important;background:rgba(22,65,98,.78)!important}
.ot-monogram{box-shadow:0 0 34px rgba(53,207,255,.12)!important}
.ot-belowphone{color:#8eaec3!important}

/* Demo and close sections: brighter visual rhythm, no heavy black slabs. */
.ot-demo,.ot-close{
  background:linear-gradient(180deg,rgba(10,31,52,.18),rgba(12,43,70,.38))!important;
}
.ot-close{border-top-color:rgba(167,224,255,.14)!important}
.ot-demo h2,.ot-close h2{color:#fff!important}
.ot-demo p,.ot-close p{color:#afc8da!important}

/* Door 2 + Door 3 — same emotionally lighter surface language. */
#toa-customize-page,#toa-plans-page{
  --bg:#0a2037!important;--panel:rgba(14,45,73,.72)!important;--panel2:rgba(20,58,91,.66)!important;
  --line:rgba(163,223,255,.19)!important;--line2:rgba(147,229,255,.40)!important;
  --text:#f8fcff!important;--muted:#aec6d8!important;--cyan:#8fe8ff!important;--blue:#0b72ff!important;
  position:relative;z-index:1;background:transparent!important;
}
.toa-door2-shell,.toa-plans-shell{background:transparent!important}
.toa-custom-hero h1,.toa-plans-hero h1,.toa-checkout-head h2{color:#fff!important;text-shadow:0 12px 42px rgba(0,22,48,.12)}
.toa-custom-hero h1 em,.toa-plans-hero h1 em,.toa-checkout-head h2 em{color:#9eeaff!important}
.toa-custom-hero p,.toa-plans-hero>p,.toa-checkout-head p{color:#b8cfe0!important}

.toa-example-switcher,.toa-control-group,.toa-plan,.toa-summary,#toa-checkout-form,.toa-after-order,.toa-build-recap{
  background:linear-gradient(180deg,rgba(18,54,86,.74),rgba(9,31,51,.72))!important;
  border-color:rgba(162,225,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 50px rgba(0,18,38,.10)!important;
  backdrop-filter:blur(14px);
}
.toa-control-group.open,.toa-plan.selected{
  border-color:rgba(128,230,255,.55)!important;
  box-shadow:0 20px 54px rgba(11,114,255,.12),0 0 36px rgba(53,207,255,.07),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.toa-group-head,.toa-plan h2,.toa-summary h3{color:#fff!important}
.toa-group-body input,.toa-group-body textarea,.toa-group-body select,#toa-checkout-form input{
  background:rgba(5,24,41,.66)!important;border-color:rgba(155,222,255,.24)!important;color:#fff!important;
}
.toa-choice-grid button,.toa-primary-grid button,.toa-example-switcher button{
  background:rgba(10,37,60,.56)!important;border-color:rgba(153,220,255,.20)!important;color:#d9eaf5!important;
}
.toa-choice-grid button.active,.toa-primary-grid button.active,.toa-example-switcher button.active{
  background:linear-gradient(135deg,rgba(11,114,255,.28),rgba(53,207,255,.18))!important;
  border-color:rgba(142,234,255,.62)!important;color:#fff!important;
}
.toa-next-cta,#toa-checkout-form button,.toa-plan.selected button{
  border-color:rgba(214,250,255,.82)!important;
  background:linear-gradient(135deg,#0b72ff,#35cfff 62%,#8ceaff)!important;
  box-shadow:0 16px 42px rgba(11,114,255,.24),0 0 32px rgba(53,207,255,.10)!important;
}
.toa-action-order-item{
  background:linear-gradient(180deg,rgba(17,53,83,.66),rgba(8,29,48,.64))!important;
  border-color:rgba(155,226,255,.17)!important;
}
.toa-drag-grip{background:rgba(17,58,90,.72)!important;border-color:rgba(150,227,255,.26)!important}
.toa-action-order-item.toa-dragging{box-shadow:0 20px 52px rgba(7,89,177,.24),0 0 30px rgba(53,207,255,.12)!important}

/* Gentle guidance toward active decisions, without hiding alternatives. */
.toa-plan:not(.selected){opacity:.93}
.toa-plan.selected{transform:translateY(-2px)}
.toa-door-progress .active{box-shadow:0 0 18px rgba(77,218,255,.45)!important}

/* Mobile keeps the same hierarchy and content; geometry simply stacks. */
@media(max-width:780px){
  .ot-hero{padding-top:34px!important;padding-bottom:54px!important}
  .ot-hero .ot-layout{gap:30px!important}
  .ot-title{max-width:11ch!important}
  .ot-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .ot-actions .ot-btn{width:100%!important}
  .toa-value-cues{gap:6px}
  .toa-value-cues li{font-size:8px;min-height:29px;padding:0 9px}
  .ot-phone{animation-duration:9.5s!important}
  .toa-friendly-field span:nth-child(1){width:96vw;height:96vw;right:-35%;top:-8%}
  .toa-friendly-field span:nth-child(2){width:90vw;height:90vw;left:-42%;top:39%}
  .toa-friendly-field span:nth-child(3){width:80vw;height:80vw;left:22%;bottom:-6%}
}

@media(prefers-reduced-motion:reduce){
  .toa-friendly-field span,.ot-phone,.ot-btn.ot-primary,.ot-btn.ot-primary::before{animation:none!important}
}