/* Adapted from the owner-provided accounts design;
see docs/account-portal.md. */
:root{
  --navy:#030d2b;
  --dark-blue:#062c60;
  --blue:#0050c8;
  --text:#526586;
  --line:#e0e8f3;
  --bg:#f8fbfe;
  --light:#eff5fb;
  --green:#137348;
  --green-bg:#e9f7ef;
  --font:Roboto,"Segoe UI",Arial,sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  color-scheme:light
}
body{
  margin:0;
  color:var(--navy);
  font-family:var(--font);
  background:#fff;
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:3px solid #1766e8;
  outline-offset:2px
}
.container{
  max-width:1290px;
  width:calc(100% - 80px);
  margin:0 auto
}
header{
  height:96px;
  border-bottom:1px solid #e8eef7;
  background:#fff;
  display:flex;
  align-items:center;
  position:relative;
  z-index:2
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:28px;
  letter-spacing:-1.25px;
  font-weight:500;
  color:#040404
}
.brand svg{
  color:#0e2a52;
  width:56px;
  height:61px;
  display:block;
  flex:none
}
.header-actions{
  display:flex;
  align-items:center;
  gap:24px;
  font-size:15px;
  color:var(--dark-blue)
}
.header-actions a:hover{
  text-decoration:underline
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:11px 19px;
  border-radius:9px;
  font-size:14px;
  font-weight:700;
  border:1px solid #b9c8dd;
  background:white;
  color:var(--dark-blue);
  white-space:normal;
  text-align:center
}
.btn-primary{
  background:linear-gradient(115deg,#073370,#002653);
  color:#fff;
  border-color:#073370;
  box-shadow:0 4px 14px #123e7118
}
.btn:hover{
  filter:brightness(.95)
}
.btn-danger{
  color:#b42318;
  border-color:#ebbec1
}
.btn-flat{
  border-color:transparent;
  background:transparent
}
.icon{
  width:19px;
  height:19px;
  flex:none;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.hero{
  position:relative;
  overflow:hidden;
  padding:62px 0 58px;
  background:linear-gradient(107deg,#eef6fd,#f9fbff 58%,#eaf3fd);
  border-bottom:1px solid #e8eff9
}
.hero:before{
  content:"";
  width:740px;
  height:520px;
  position:absolute;
  border:1px solid #fff9;
  border-radius:50%;
  right:-170px;
  top:-220px;
  box-shadow:0 0 0 80px #e9f3fd7a,0 0 0 165px #d7e8fa50;
  transform:rotate(-19deg)
}
.hero-content{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.eyebrow{
  font-size:12px;
  letter-spacing:3.2px;
  font-weight:800;
  color:var(--blue);
  margin:0 0 12px
}
.hero h1{
  font-weight:900;
  line-height:1.05;
  font-size:clamp(42px,4.1vw,66px);
  letter-spacing:-2.5px;
  margin:0 0 15px
}
.lead{
  font-size:20px;
  color:var(--text);
  line-height:1.5;
  max-width:710px;
  margin:0
}
.environment-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border:1px solid #abc6e8;
  color:#315a8c;
  border-radius:100px;
  background:#e9f3ff;
  padding:10px 13px;
  white-space:nowrap;
  align-self:flex-start;
  margin-top:10px
}
main{
  background:linear-gradient(180deg,#fcfdff,#fff 210px);
  padding:43px 0 90px
}
.overview{
  display:grid;
  grid-template-columns:1fr .98fr;
  gap:23px
}
.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 24px #153f6510
}
.card-pad{
  padding:29px 32px
}
.card h2{
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.75px;
  margin:0 0 10px
}
.card p{
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  margin:0
}
.section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:22px
}
.section-headline{
  display:flex;
  align-items:flex-start;
  gap:14px
}
.icon-wrap{
  background:#e9f2fc;
  color:var(--dark-blue);
  border-radius:12px;
  height:43px;
  width:43px;
  display:grid;
  place-items:center;
  flex:none
}
.icon-wrap .icon{
  width:23px;
  height:23px
}
.field-label{
  font-size:12px;
  color:#657998;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:7px
}
.field-value{
  font-size:22px;
  font-weight:700;
  color:var(--navy);
  word-break:break-word;
  margin:0 0 19px
}
.notice-line{
  font-size:13px;
  color:#71819a;
  margin-top:19px;
  display:flex;
  align-items:center;
  gap:6px
}
.notice-line .icon{
  width:15px;
  height:15px
}
.pro-card{
  background:linear-gradient(120deg,#f5f9ff,#fff 73%);
  position:relative;
  overflow:hidden
}
.pro-card:after{
  content:"";
  position:absolute;
  right:-38px;
  bottom:-100px;
  width:270px;
  height:270px;
  border-radius:50%;
  border:48px solid #e5f0fc99;
  pointer-events:none
}
.pro-content{
  position:relative;
  z-index:1
}
.pro-badge{
  background:#eef3f9;
  border:1px solid #d8e2ef;
  color:#526586;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:7px
}
.dot{
  width:8px;
  height:8px;
  background:#16854f;
  border-radius:50%
}
.pro-name{
  font-size:32px;
  letter-spacing:-1px;
  line-height:1.08;
  font-weight:900;
  margin:19px 0 7px
}
.pro-desc{
  max-width:400px
}
.microcopy{
  margin-top:20px!important;
  font-size:13px!important;
  max-width:410px
}
.inline-link{
  color:#0050c8;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px
}
.section-block{
  margin-top:28px
}
.section-block h2{
  font-size:24px
}
.row-list{
  display:flex;
  flex-direction:column;
  border:1px solid #e3eaf3;
  border-radius:11px;
  overflow:hidden
}
.method-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 18px;
  background:#fcfdff
}
.method-row+.method-row{
  border-top:1px solid #e3eaf3
}
.method-icon{
  height:44px;
  width:44px;
  display:grid;
  place-items:center;
  flex:none;
  background:#eaf1fa;
  border-radius:11px;
  color:var(--dark-blue)
}
.method-icon .icon{
  width:23px;
  height:23px
}
.method-icon.google{
  background:#fff;
  border:1px solid #e5eaf2
}
.google-g{
  font-size:23px;
  font-weight:800;
  background:conic-gradient(#4285F4 0deg 85deg,#34A853 85deg 160deg,#FBBC05 160deg 230deg,#EA4335 230deg 300deg,#4285F4 300deg);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.method-copy{
  flex:1;
  min-width:0
}
.method-name{
  font-weight:800;
  font-size:16px;
  margin-bottom:3px
}
.method-sub{
  font-size:13px;
  color:var(--text)
}
.connected{
  font-size:12px;
  font-weight:700;
  color:#1a7d4d;
  background:#edf8f1;
  padding:6px 10px;
  border-radius:100px
}
.method-actions{
  display:flex;
  align-items:center;
  gap:15px
}
.method-actions .btn{
  min-height:39px;
  padding:8px 14px
}
.sub-note{
  margin-top:17px!important;
  max-width:800px
}
.purchase-list{
  margin-top:3px
}
.purchase-item{
  display:flex;
  align-items:center;
  gap:15px;
  padding:15px 0
}
.purchase-item+.purchase-item{
  border-top:1px solid #edf1f7
}
.purchase-marker{
  background:#eef4fb;
  border:1px solid #e1eaf4;
  border-radius:11px;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  color:var(--dark-blue)
}
.purchase-copy{
  flex:1
}
.purchase-title{
  font-weight:700;
  font-size:15px;
  margin-bottom:4px
}
.purchase-sub{
  font-size:13px;
  color:var(--text)
}
.purchase-state{
  font-size:12px;
  color:#197443;
  font-weight:800
}
.purchase-state.muted{
  color:#7e8a9c
}
.purchase-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:25px;
  margin-top:26px
}
.info-panel{
  background:#f3f8fe;
  border:1px solid #e1ebf8;
  border-radius:12px;
  padding:21px
}
.info-panel strong{
  font-size:15px
}
.info-panel p{
  font-size:13px;
  margin-top:8px
}
.footer-actions{
  display:flex;
  align-items:center;
  gap:12px
}
.danger-card{
  border:1px solid #f1d8da;
  background:#fff
}
.danger-card .icon-wrap{
  color:#a73435;
  background:#fff0f0
}
.danger-copy{
  margin:0
}
.card h2.danger-title{
  font-size:18px;
  font-weight:800;
  margin:0 0 8px
}
.danger-flex{
  display:flex;
  align-items:center;
  gap:22px;
  justify-content:space-between
}
.account-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.account-tools p{
  font-size:14px
}
.tool-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex:none
}
.support-note{
  margin-top:14px;
  color:#667b98;
  font-size:13px;
  line-height:1.5
}
.site-footer{
  border-top:1px solid #e6edf7;
  background:#f4f8fd
}
.site-footer-inner{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  color:#63758f;
  font-size:13px
}
.site-footer a{
  margin-left:20px;
  color:var(--dark-blue)
}
.site-footer a:hover{
  text-decoration:underline
}
.modal{
  border:1px solid #cbd9ea;
  border-radius:16px;
  box-shadow:0 24px 75px #172a4650;
  padding:28px;
  max-width:500px;
  width:calc(100vw - 36px);
  color:var(--navy)
}
.modal::backdrop{
  background:#071b33aa
}
.modal h2{
  margin:0 0 14px;
  font-size:25px
}
.modal p{
  color:var(--text);
  line-height:1.5;
  font-size:15px
}
.modal label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:18px 0 7px
}
.modal input{
  width:100%;
  height:45px;
  padding:10px 12px;
  border:1px solid #b7c7de;
  border-radius:9px;
  font:inherit
}
.modal-actions{
  margin-top:25px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px
}
.modal small{
  font-size:12px;
  color:#526586
}
@media(max-width:920px){
  .overview,.purchase-grid{
    grid-template-columns:1fr
  }
  .hero{
    padding:45px 0
  }
  .hero h1{
    font-size:49px
  }
  .container{
    width:calc(100% - 44px)
  }
  .card-pad{
    padding:25px
  }
  .environment-label{
    align-self:flex-start
  }
  .header-actions{
    gap:12px
  }
}
@media(max-width:610px){
  header{
    height:76px
  }
  .brand{
    font-size:21px
  }
  .brand svg{
    width:39px;
    height:45px
  }
  .header-actions .help-link{
    display:none
  }
  .header-actions{
    font-size:12px
  }
  .header-actions .btn{
    padding:7px 11px;
    font-size:12px;
    min-height:37px
  }
  .container{
    width:calc(100% - 32px)
  }
  .hero{
    padding:40px 0
  }
  .hero h1{
    font-size:43px;
    letter-spacing:-1.8px
  }
  .lead{
    font-size:16px
  }
  .eyebrow{
    font-size:10px
  }
  main{
    padding:22px 0 58px
  }
  .overview{
    gap:16px
  }
  .card-pad{
    padding:22px 18px
  }
  .card h2{
    font-size:21px
  }
  .section-header{
    flex-wrap:wrap
  }
  .section-headline{
    gap:12px
  }
  .field-value{
    font-size:20px
  }
  .method-row{
    gap:11px;
    padding:13px 10px;
    flex-wrap:wrap
  }
  .method-icon{
    height:35px;
    width:35px
  }
  .method-actions{
    margin-left:47px;
    width:calc(100% - 47px);
    justify-content:space-between
  }
  .method-name{
    font-size:14px
  }
  .connected{
    font-size:10px
  }
  .account-tools,.danger-flex{
    align-items:flex-start;
    flex-direction:column
  }
  .tool-actions{
    flex-wrap:wrap
  }
  .site-footer-inner{
    align-items:flex-start;
    flex-direction:column;
    padding:25px 0;
    gap:18px
  }
  .site-footer a{
    margin:0 17px 0 0
  }
  .purchase-grid{
    gap:18px
  }
  .footer-actions{
    width:100%
  }
}
/* Live portal states and accessible responsive details. */
[hidden]{
  display: none !important;
}
.icon-definitions{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.skip-link{
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 12px;
  background: white;
  color: var(--dark-blue);
}
.skip-link:focus{
  top: 12px;
}
.session-status{
  margin-bottom: 22px;
  color: var(--text);
}
.session-status p{
  margin: 0 0 12px;
}
.session-status button, .session-status a{
  margin: 0 8px 8px 0;
}
button:disabled{
  opacity: .55;
  cursor: default;
}
button:disabled:hover{
  filter: none;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.pro-badge{
  text-transform: uppercase;
  white-space: nowrap;
}
.pro-badge[data-state="active"], .pro-badge[data-state="grace"]{
  background: #e7f6ee;
  border-color: #c5e9d3;
  color: #176e41;
}
.pro-badge[data-state="active"]::before, .pro-badge[data-state="grace"]::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.method-copy, .purchase-copy{
  min-width: 0;
  overflow-wrap: anywhere;
}
.method-actions{
  margin-left: auto;
}
.method-row > .method-copy{
  flex: 1 1 160px;
}
.add-methods{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.add-methods:not(:empty){
  margin-top: 18px;
}
.purchase-marker{
  flex: none;
}
.purchase-state{
  text-transform: uppercase;
}
.purchase-state.muted{
  color: #526586;
}
.info-panel h2{
  font-size: 15px;
  margin: 0;
}
.info-panel p{
  color: var(--text);
  line-height: 1.6;
}
.support-note{
  overflow-wrap: anywhere;
}
.empty-state{
  color: var(--text);
  font-size: 14px;
  padding: 16px 0;
}
.modal{
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  background: white;
}
.modal-actions{
  flex-wrap: wrap;
}
.modal a{
  color: var(--blue);
  text-decoration: underline;
}
.modal .dialog-message{
  background: #eff5fb;
  padding: 10px 12px;
  border-radius: 8px;
}
.modal .dialog-message:empty{
  display: none;
}
.modal input{
  color: var(--navy);
  background: white;
}
.environment-label{
  margin: 10px 0 0;
}
@media (max-width: 920px){
  .hero-content{
    align-items: flex-start;
    flex-direction: column;
  }
  .environment-label{
    margin: 0;
  }
}
@media (max-width: 610px){
  .brand{
    flex-shrink: 0;
  }
  .header-row{
    gap: 12px;
  }
  .header-actions{
    gap: 8px;
  }
  .section-header{
    gap: 16px;
  }
  .notice-line{
    align-items: flex-start;
    line-height: 1.6;
  }
  .method-actions{
    margin-left: 46px;
    width: calc(100% - 46px);
  }
  .tool-actions{
    flex-shrink: 1;
  }
  .card h2.danger-title{
    font-size: 18px;
  }
  .site-footer-inner nav{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .site-footer a{
    margin: 0;
  }
  .modal{
    padding: 22px 18px;
  }
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
}