.billing-page{
font-variant-numeric:tabular-nums;
}
.billing-page [hidden]{
display:none!important;
}
.billing-page :is(section,article,div,dl,dt,dd){
min-width:0;
}
.billing-page h1{
font-size:var(--text-section);
line-height:var(--lh-title);
max-width:24em;
}
.billing-page h3{
font-size:var(--text-lg);
line-height:1.35;
}
.billing-hero{
display:block;
}
.billing-hero-lead{
max-width:48rem;
margin-top:var(--space-2);
}
.billing-hero-note{
margin-top:var(--space-3);
font-size:var(--text-sm);
}
.billing-dgx-grid{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
align-items:start;
gap:var(--space-5);
}
.billing-daily-card{
display:flex;
flex-direction:column;
gap:var(--space-2);
padding:var(--space-4);
border-radius:var(--r-m);
background:#FFF1D6;
color:#5A3A00;
--surface-bg:#FFF1D6;
--surface-heading:#5A3A00;
--surface-body:#5A3A00;
--surface-muted:#5A3A00;
--surface-line:#E4D3AF;
}
.billing-label{
font-size:var(--text-sm);
font-weight:600;
}
.billing-daily-price{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:var(--space-1);
color:#1C1B19;
}
.billing-daily-price strong{
font-family:var(--fm);
font-size:var(--text-section);
line-height:var(--lh-title);
font-weight:800;
}
.billing-daily-price span{
font-size:var(--text-base);
}
.billing-equation{
font-family:var(--fm);
font-weight:600;
}
.billing-daily-card .c-actions{
margin-top:var(--space-2);
}
.billing-dgx-detail{
display:grid;
align-content:start;
gap:var(--space-2);
}
.billing-day-examples{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-2);
margin:var(--space-2) 0;
}
.billing-day-examples>div{
display:flex;
flex-direction:column;
gap:var(--space-1);
padding:var(--space-3);
border-radius:var(--r-m);
background:#F5F4F1;
color:#1C1B19;
--surface-heading:#1C1B19;
--surface-body:#4A4640;
--surface-muted:#625D55;
--surface-line:#E6E1D8;
}
.billing-day-examples dt{
font-size:var(--text-xs);
color:#4A4640;
overflow-wrap:break-word;
}
.billing-day-examples dd{
font-family:var(--fm);
font-size:var(--text-lg);
font-weight:800;
overflow-wrap:break-word;
}
.billing-expiry{
display:grid;
gap:var(--space-2);
margin-top:var(--space-3);
padding-top:var(--space-3);
border-top:1px solid var(--line);
}
.billing-dgx-boundary{
display:grid;
gap:var(--space-2);
margin-top:var(--space-6);
}
.billing-dgx-boundary .c-actions{
margin-top:var(--space-2);
}
.billing-amd{
background:#F5F4F1;
color:#4A4640;
--surface-bg:#F5F4F1;
--surface-heading:#1C1B19;
--surface-body:#4A4640;
--surface-muted:#625D55;
--surface-line:#E6E1D8;
}
.billing-periods{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--space-3);
align-items:stretch;
}
.billing-period{
display:flex;
flex-direction:column;
gap:var(--space-2);
height:100%;
padding:var(--space-3);
border-radius:var(--r-m);
background:#FFFFFF;
color:#4A4640;
--surface-bg:#FFFFFF;
--surface-heading:#1C1B19;
--surface-body:#4A4640;
--surface-muted:#625D55;
--surface-line:#E6E1D8;
}
.billing-period-number{
font-family:var(--fm);
font-size:var(--text-reading);
font-weight:800;
color:#1C1B19;
}
.billing-period-number span{
font-family:var(--fb);
font-size:var(--text-sm);
font-weight:400;
}
.billing-period>p:last-child{
margin-top:auto;
font-size:var(--text-sm);
}
.billing-block{
margin-top:var(--space-7);
}
.billing-block-head{
display:grid;
gap:var(--space-2);
margin-bottom:var(--space-3);
}
.billing-math{
display:block;
padding:0;
border-radius:var(--r-m);
background:#FFFFFF;
color:#4A4640;
--surface-bg:#FFFFFF;
--surface-heading:#1C1B19;
--surface-body:#4A4640;
--surface-muted:#625D55;
--surface-line:#E6E1D8;
}
.billing-math-heading{
display:grid;
gap:var(--space-2);
padding:var(--space-4);
}
.billing-math .table-scroll{
border-radius:0;
}
.billing-math-total{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-3);
padding:var(--space-4);
}
.billing-math-total>div{
display:grid;
align-content:start;
gap:var(--space-1);
padding:var(--space-3);
border-radius:var(--r-m);
background:#E6F2EA;
color:#1F4030;
--surface-bg:#E6F2EA;
--surface-heading:#1F4030;
--surface-body:#1F4030;
--surface-muted:#1F4030;
--surface-line:#C7DCD0;
}
.billing-math-total strong{
font-family:var(--fm);
font-size:var(--text-reading);
line-height:1.35;
font-weight:800;
color:#1C1B19;
overflow-wrap:break-word;
}
.billing-math-total :is(span,p){
font-size:var(--text-sm);
}
.billing-footnote{
margin-top:var(--space-3);
font-size:var(--text-sm);
}
.billing-policy-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-5);
align-items:start;
}
.billing-policy{
display:flex;
flex-direction:column;
gap:var(--space-2);
}
.billing-policy .c-actions{
margin-top:var(--space-2);
}
.billing-memory-note{
display:grid;
gap:var(--space-2);
padding-top:var(--space-4);
border-top:1px solid var(--line);
}
.billing-record-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
gap:var(--space-5);
}
.billing-record{
display:grid;
gap:var(--space-2);
padding:var(--space-4);
border-radius:var(--r-m);
background:#ECE8F7;
color:#34295C;
--surface-bg:#ECE8F7;
--surface-heading:#34295C;
--surface-body:#34295C;
--surface-muted:#34295C;
--surface-line:#DDD7EC;
}
.billing-record h3{
color:#34295C;
}
.billing-end{
padding-bottom:var(--space-close);
}
.billing-end .c-closing>div{
text-align:left;
}
@media(max-width:64rem){
.billing-dgx-grid{
grid-template-columns:minmax(0,1fr);
}
.billing-periods{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:42rem){
.billing-page h1{
font-size:2rem;
}
.billing-daily-card,
.billing-math-heading,
.billing-math-total,
.billing-record{
padding:var(--space-3);
}
.billing-day-examples{
grid-template-columns:minmax(0,1fr);
}
.billing-day-examples>div{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:baseline;
justify-content:space-between;
gap:var(--space-1) var(--space-2);
}
.billing-day-examples dt,
.billing-day-examples dd{
flex:0 1 auto;
}
.billing-policy-grid,
.billing-record-grid,
.billing-math-total{
grid-template-columns:minmax(0,1fr);
}
.billing-periods{
gap:var(--space-2);
}
.billing-period{
padding:var(--space-3);
}
.billing-block{
margin-top:var(--space-6);
}
.billing-hero .c-actions .c-btn{
width:100%;
}
}