.data-usage-calculator { --duc-teal:#073a47; --duc-ink:#1d2a30; --duc-muted:#5f6b70; --duc-line:#dbe3e3; --duc-soft:#f1f4f4; --duc-green:#496d58; color:var(--duc-ink); }
.data-usage-calculator [hidden] { display:none !important; }
.duc-container { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.duc-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.duc-skip { position:fixed; top:8px; left:8px; z-index:100; padding:12px 20px; color:#fff; background:var(--duc-green); transform:translateY(-150%); }
.duc-skip:focus { transform:none; }
.data-usage-calculator :is(input,select,textarea,button,a,summary):focus-visible { outline:3px solid #749780; outline-offset:3px; }
.data-usage-calculator :is(input,select,textarea):focus { border-color:var(--duc-green); box-shadow:0 0 0 3px rgb(73 109 88 / 16%); outline:none; }
.duc-hero { background:var(--duc-teal); color:#fff; padding:34px 0 0; }
.duc-hero-top,.duc-hero-bottom,.duc-result-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.duc-eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; line-height:1.7; }
.duc-hero-top .duc-eyebrow { color:#bdcfd0; }
.duc-review { font-size:12px; color:#d0dedd; }
.duc-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; padding:30px 0 34px; align-items:center; }
.duc-hero h1 { font-size:clamp(42px,4.5vw,64px); font-weight:800; letter-spacing:-.065em; line-height:1.03; margin:0; }
.duc-hero h1 em { font-style:normal; color:#a7c7b1; }
.duc-intro { font-size:17px; line-height:1.8; color:#d0dedd; margin-top:23px; max-width:650px; }
.duc-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.duc-hero-stats { border-left:1px solid #ffffff38; padding-left:32px; }
.duc-hero-stats>.duc-eyebrow { color:#bdcfd0; }
.duc-stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.duc-stats-grid dt { font-size:13px; font-weight:650; color:#d0dedd; }
.duc-stats-grid dd { font-size:clamp(23px,2.4vw,34px); font-weight:800; letter-spacing:-.055em; white-space:nowrap; margin:8px 0; }
.duc-stats-grid small { display:block; margin-top:8px; font-weight:400; letter-spacing:0; white-space:normal; font-size:11px; line-height:1.6; color:#d0dedd; }
.duc-stats-note { font-size:11px; line-height:1.7; color:#bdcfd0; margin-top:22px; max-width:370px; }
.duc-usage-overview { padding-block:45px 55px; max-width:1000px; }
.duc-hero-bottom { border-top:1px solid #ffffff30; padding:18px 0; font-size:10px; font-weight:600; letter-spacing:.09em; color:#c4d3d4; }
.duc-hero-bottom a { letter-spacing:0; font-size:12px; }
.duc-calculator-section { padding:55px 0 65px; background:#f4f6f5; }
.duc-section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:28px; }
.duc-section-heading .duc-eyebrow { color:var(--duc-green); }
.duc-section-heading h2,.duc-guide h2,.duc-next h2 { font-size:clamp(28px,3.3vw,43px); line-height:1.15; font-weight:750; letter-spacing:-.045em; margin-top:7px; }
.duc-section-heading>p { font-size:13px; line-height:1.8; color:var(--duc-muted); }
.duc-workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; gap:28px; }
.duc-controls { padding:30px; border:1px solid var(--duc-line); background:#fff; border-radius:12px; }
.duc-controls fieldset { min-width:0; border:0; padding:0; margin:0; }
.duc-controls fieldset:disabled { opacity:.65; }
.duc-field-label,.duc-add-label { font-size:12px; font-weight:700; display:block; }
.duc-choice-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.duc-segment { display:flex; background:var(--duc-soft); padding:4px; border-radius:7px; }
.duc-segment button { padding:9px 17px; font-size:12px; border-radius:5px; font-weight:650; }
.duc-segment button[aria-pressed=true] { color:#fff; background:var(--duc-teal); }
.duc-mode { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--duc-line); margin-bottom:23px; gap:12px; }
.duc-mode button { padding:0 4px 15px; font-size:14px; font-weight:650; color:var(--duc-muted); border-bottom:3px solid transparent; }
.duc-mode button[aria-pressed=true] { color:var(--duc-teal); border-bottom-color:var(--duc-green); }
.duc-presets>div { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.duc-presets button,.duc-quick button,.duc-guide-shortcuts button { border:1px solid var(--duc-line); border-radius:5px; padding:8px 11px; font-size:11px; font-weight:600; background:#fff; }
.duc-presets button:hover,.duc-quick button:hover,.duc-guide-shortcuts button:hover { border-color:var(--duc-green); background:#edf3ef; }
.duc-example { font-size:11px; color:var(--duc-muted); margin:12px 0 20px; line-height:1.6; }
.duc-settings { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.duc-settings label { font-size:11px; font-weight:650; min-width:0; }
.duc-settings label>span { display:block; font-size:10px; line-height:1.6; font-weight:400; margin-top:5px; color:var(--duc-muted); }
.duc-settings label>span button { font-weight:650; text-decoration:underline; margin-right:6px; }
.duc-controls input,.duc-controls select { width:100%; min-height:43px; border:1px solid #cbd7d2; border-radius:5px; background:#fff; color:var(--duc-ink); padding:10px; font:inherit; font-size:12px; margin-top:7px; }
.duc-controls input[aria-invalid=true] { border-color:#a34444; }
.duc-settings #duc-people-label { grid-column:1/-1; }
.duc-bundle-settings { padding:17px; margin-top:20px; background:var(--duc-soft); border-radius:7px; }
.duc-unit-input { display:grid; grid-template-columns:1fr 80px; gap:8px; }
.duc-quick { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.duc-bundle-settings>p { font-size:11px; color:var(--duc-muted); margin-top:10px; line-height:1.7; }
.duc-activity-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:29px; padding-bottom:10px; border-bottom:1px solid var(--duc-line); }
.duc-activity-heading h3,.duc-extra h3 { font-size:14px; font-weight:700; }
.duc-activity-heading h3 span,.duc-activity-heading>span { font-size:10px; font-weight:500; color:var(--duc-muted); }
.duc-activity { border-bottom:1px solid var(--duc-line); padding:16px 0 12px; }
.duc-activity-name { display:flex; gap:9px; align-items:center; }
.duc-activity-name label { font-size:12px; font-weight:650; flex:1; }
.duc-activity-icon { color:var(--duc-green); font-size:9px; font-weight:800; padding:5px 6px; border-radius:4px; background:#edf2ee; }
.duc-remove { padding:0 7px; font-size:20px; line-height:1.3; color:#925252; }
.duc-activity-inputs { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:14px; margin-left:34px; }
.duc-rate { font-size:10px; color:var(--duc-green); display:block; margin-top:5px; font-weight:600; }
.duc-minutes { position:relative; align-self:start; }
.duc-minutes input { padding-right:28px; }
.duc-minutes span { position:absolute; right:8px; top:21px; font-size:10px; color:var(--duc-muted); pointer-events:none; }
.duc-basis { font-size:10px; color:var(--duc-muted); line-height:1.65; margin:7px 0 0 34px; }
.duc-add-label { margin-top:20px; }
.duc-extra { border-top:1px solid var(--duc-line); margin-top:25px; padding-top:20px; }
.duc-extra>p { font-size:11px; color:var(--duc-muted); line-height:1.8; margin:8px 0 13px; }
.duc-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:47px; border-radius:6px; padding:12px 19px; font-size:13px; font-weight:650; text-align:center; transition:background .15s; }
.duc-button-green { color:#fff; background:var(--duc-green); border:1px solid var(--duc-green); }
.duc-button-green:hover { background:#3b5b48; }
.duc-calculate { width:100%; margin-top:22px; }
.duc-error { color:#943d3d; background:#faf0ef; padding:12px; font-size:12px; line-height:1.7; margin-top:15px; border-radius:5px; }
.duc-result { background:var(--duc-teal); color:#fff; border-radius:12px; padding:30px; position:sticky; top:100px; box-shadow:0 16px 42px rgb(7 58 71 / 9%); }
.duc-result-top { border-bottom:1px solid #ffffff30; padding-bottom:19px; }
.duc-result-top .duc-eyebrow { color:#c4d5d5; }
.duc-result-top>span { font-size:11px; background:#ffffff12; border:1px solid #ffffff25; border-radius:30px; padding:5px 10px; }
.duc-result-label { font-size:13px; color:#d0dedc; margin-top:25px; }
.duc-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:11px; padding:6px 0 4px; }
#duc-total { font-size:clamp(42px,5.4vw,70px); font-weight:750; letter-spacing:-.065em; line-height:1.15; overflow-wrap:anywhere; }
#duc-total-unit { font-size:25px; font-weight:500; color:#b6d1bd; }
#duc-result-caption { font-size:12px; line-height:1.7; color:#d0dedd; margin-top:5px; }
.duc-result-metrics { border-block:1px solid #ffffff25; margin-top:23px; padding:13px 0; }
.duc-result-metrics>div { display:flex; justify-content:space-between; gap:15px; font-size:11px; line-height:2.2; }
.duc-result-metrics dt { color:#cad9d8; }
.duc-result-metrics dd { font-weight:600; }
.duc-team-total,.duc-duration { margin-top:18px; padding:12px; border:1px solid #ffffff30; background:#ffffff0c; border-radius:5px; font-size:12px; line-height:1.8; }
.duc-breakdown { display:grid; gap:11px; margin-top:20px; }
.duc-breakdown-line>div:first-child { display:flex; justify-content:space-between; gap:15px; font-size:11px; margin-bottom:5px; }
.duc-breakdown-bar { height:4px; background:#ffffff1c; border-radius:8px; overflow:hidden; }
.duc-breakdown-bar span { display:block; height:100%; background:#a7c7b1; }
.duc-saving { color:#dbebde; font-size:12px; line-height:1.8; margin-top:20px; padding-left:12px; border-left:2px solid #a7c7b1; }
.duc-estimate-note { color:#bdd1d2; font-size:10px; line-height:1.8; margin-top:23px; }
.duc-estimate-note a { text-decoration:underline; text-underline-offset:3px; }
.duc-result-actions { display:grid; gap:9px; margin-top:23px; }
.duc-result .duc-button-green { background:#a7c7b1; border-color:#a7c7b1; color:#163b2d; }
.duc-result .duc-button-green:hover { background:#bdd5c5; }
.duc-button-outline { color:#fff; border:1px solid #ffffff55; }
.duc-button-outline:hover { background:#ffffff12; }
.duc-purchase-note { font-size:10px; color:#b9cece; line-height:1.7; margin-top:10px; }
.duc-share { display:flex; flex-wrap:wrap; gap:10px 18px; padding-top:19px; margin-top:19px; border-top:1px solid #ffffff25; }
.duc-share button { font-size:10px; color:#d8e4e1; text-decoration:underline; text-underline-offset:4px; }
.duc-share-status { font-size:11px; color:#d8e4e1; line-height:1.6; margin-top:10px; }
.duc-notice { padding:16px 20px; margin-bottom:20px; border:1px solid #cad9ce; background:#edf3ef; line-height:1.8; font-size:14px; }
.duc-notice a { text-decoration:underline; }
.duc-mobile-summary { display:none; }
.duc-bundle-comparison { margin-top:35px; }
.duc-bundle-comparison h3 { font-size:23px; font-weight:750; letter-spacing:-.03em; }
.duc-bundle-comparison>p { font-size:13px; color:var(--duc-muted); max-width:800px; line-height:1.8; margin-top:9px; }
.duc-comparison-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.duc-comparison-card { padding:20px; background:#fff; border:1px solid var(--duc-line); border-radius:7px; }
.duc-comparison-card strong { display:block; font-size:24px; letter-spacing:-.03em; margin:6px 0; }
.duc-comparison-card span { font-size:12px; font-weight:650; }
.duc-comparison-card small { font-size:10px; color:var(--duc-muted); line-height:1.6; display:block; }
.duc-reading-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:65px; padding-block:70px 80px; align-items:start; }
.duc-contents { position:sticky; top:110px; display:grid; gap:15px; }
.duc-contents .duc-eyebrow { color:var(--duc-green); margin-bottom:8px; }
.duc-contents a { font-size:12px; color:var(--duc-muted); line-height:1.6; }
.duc-contents a:hover { color:var(--duc-teal); text-decoration:underline; }
.duc-guide { min-width:0; }
.duc-guide section+section { border-top:1px solid var(--duc-line); margin-top:45px; padding-top:45px; }
.duc-guide .duc-eyebrow { color:var(--duc-green); margin:0 0 8px; }
.duc-guide h2 { font-size:33px; }
.duc-guide h3 { font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.4; margin-top:28px; }
.duc-guide p,.duc-guide li { font-size:14px; line-height:1.95; color:#526167; }
.duc-guide p { margin-top:16px; }
.duc-guide p.duc-lead { font-size:17px; color:var(--duc-ink); line-height:1.8; }
.duc-guide a { color:#365e48; text-decoration:underline; text-underline-offset:3px; }
.duc-callout { border-left:3px solid var(--duc-green); background:#f0f4f1; padding:21px 24px; margin-top:25px; }
.duc-callout>strong { font-size:13px; color:#365e48; }
.duc-callout p { margin-top:7px; font-size:13px; }
.duc-guide-shortcuts { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.duc-table-wrap { overflow-x:auto; margin-top:22px; border:1px solid var(--duc-line); border-radius:7px; }
.duc-guide table { border-collapse:collapse; width:100%; text-align:left; font-size:11px; min-width:500px; }
.duc-guide caption { text-align:left; padding:13px; font-size:10px; color:var(--duc-muted); background:#f7f9f7; }
.duc-guide th,.duc-guide td { padding:13px; border-top:1px solid var(--duc-line); vertical-align:top; line-height:1.7; }
.duc-guide th { font-weight:650; }
.duc-guide thead { background:var(--duc-teal); color:#fff; }
.duc-guide td:nth-child(2) { white-space:nowrap; font-weight:650; color:#365e48; }
.duc-guide td:last-child { color:var(--duc-muted); }
.duc-guide :is(ol,ul) { padding-left:21px; margin-top:18px; }
.duc-guide ol { list-style:decimal; }
.duc-guide ul { list-style:disc; }
.duc-guide li+li { margin-top:10px; }
.duc-guide .duc-reviewed { font-size:11px; line-height:1.8; }
.duc-guide details { border-bottom:1px solid var(--duc-line); padding:18px 0; }
.duc-guide details:first-of-type { margin-top:15px; }
.duc-guide summary { font-size:14px; line-height:1.6; font-weight:650; cursor:pointer; }
.duc-guide details p { font-size:13px; margin-top:12px; }
.duc-next { background:#edf2ee; padding:60px 0 70px; }
.duc-next .duc-eyebrow { color:var(--duc-green); }
.duc-next-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:35px; }
.duc-next-grid>div { padding-top:22px; border-top:1px solid #c6d5cb; }
.duc-next-number { font-size:10px; letter-spacing:.12em; color:var(--duc-green); font-weight:750; }
.duc-next h3 { font-size:25px; font-weight:700; letter-spacing:-.035em; margin-top:15px; }
.duc-next p { font-size:14px; line-height:1.9; color:var(--duc-muted); max-width:470px; margin:12px 0 22px; }
.duc-text-link { font-size:12px; text-decoration:underline; text-underline-offset:4px; display:inline-block; margin:15px; color:#365e48; }
@media (max-width:760px) { .duc-controls input,.duc-controls select { font-size:16px; min-height:44px; } .duc-settings label,.duc-field-label,.duc-add-label,.duc-activity-name label { font-size:13px; } .duc-presets button,.duc-quick button,.duc-guide-shortcuts button,.duc-segment button,.duc-share button { min-height:44px; font-size:12px; } .duc-basis { font-size:11px; } .duc-minutes span { top:23px; } .duc-remove { min-height:40px; min-width:32px; } }
@media (max-width:1000px) { .duc-container { width:calc(100% - 40px); } .duc-workspace { gap:18px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } .duc-controls,.duc-result { padding:22px; } .duc-reading-layout { gap:32px; grid-template-columns:170px minmax(0,1fr); } .duc-activity-inputs { margin-left:0; gap:10px; grid-template-columns:minmax(0,1fr) 85px; } .duc-basis { margin-left:0; } }
@media (max-width:760px) { .duc-container { width:calc(100% - 32px); } .duc-hero { padding-top:22px; } .duc-review { font-size:10px; } .duc-hero-grid { grid-template-columns:1fr; gap:20px; padding:28px 0; } .duc-hero h1 { font-size:clamp(39px,8.3vw,59px); } .duc-intro { font-size:14px; margin-top:18px; } .duc-hero-stats { border-left:0; border-top:1px solid #ffffff30; padding:18px 0 0; } .duc-stats-grid { margin-top:12px; gap:12px; } .duc-stats-grid dd { font-size:25px; } .duc-stats-note { margin-top:12px; font-size:10px; } .duc-hero-actions { margin-top:18px; } .duc-hero-actions .duc-button { font-size:12px; min-height:44px; padding:10px 12px; } .duc-usage-overview { padding-block:32px 40px; } .duc-hero-bottom { font-size:8px; gap:18px; line-height:1.7; } .duc-hero-bottom a { flex-shrink:0; font-size:10px; } .duc-section-heading { align-items:start; gap:12px; } .duc-section-heading h2 { font-size:29px; } .duc-section-heading>p { display:none; } .duc-calculator-section { padding:33px 0 40px; } .duc-workspace { grid-template-columns:1fr; } .duc-controls,.duc-result { padding:22px; } .duc-result { position:static; } #duc-total { font-size:65px; } .duc-choice-row { gap:12px; } .duc-comparison-cards { grid-template-columns:1fr 1fr; } .duc-mobile-summary { display:flex; position:fixed; bottom:12px; left:16px; right:16px; z-index:40; border-radius:8px; background:var(--duc-teal); color:#fff; box-shadow:0 5px 25px #0003; padding:12px 17px; align-items:center; justify-content:space-between; gap:15px; } .duc-mobile-summary strong { font-size:16px; } .duc-mobile-summary small { display:block; font-size:9px; color:#c4d8cb; margin-top:2px; } .duc-mobile-summary a { font-size:12px; font-weight:650; padding:8px 0 8px 12px; } .duc-reading-layout { display:block; padding-block:35px 45px; } .duc-contents { position:static; display:flex; gap:10px 20px; flex-wrap:wrap; padding-bottom:28px; margin-bottom:30px; border-bottom:1px solid var(--duc-line); } .duc-contents .duc-eyebrow { width:100%; margin-bottom:0; } .duc-contents a { font-size:11px; } .duc-guide h2 { font-size:28px; } .duc-guide p { font-size:14px; } .duc-guide .duc-lead { font-size:16px; } .duc-next { padding:40px 0 100px; } .duc-next-grid { grid-template-columns:1fr; gap:30px; } .duc-next h2 { font-size:32px; } }
@media (max-width:380px) { .duc-settings { grid-template-columns:1fr; } .duc-mode button { font-size:12px; } .duc-controls,.duc-result { padding:17px; } .duc-hero-top { align-items:start; gap:10px; } .duc-review { max-width:100px; text-align:right; line-height:1.7; } .duc-hero h1 { font-size:34px; } .duc-hero-actions { gap:8px; } .duc-hero-actions .duc-button { font-size:11px; padding-inline:10px; } .duc-stats-grid dd { font-size:22px; } .duc-stats-grid dt { font-size:12px; } .duc-stats-grid small { font-size:10px; } }
@media print { .data-usage-calculator>header,.data-usage-calculator>div:first-of-type,.duc-hero,.duc-controls,.duc-reading-layout,.duc-usage-overview,.duc-next,.data-usage-calculator>footer,.duc-mobile-summary,.duc-share,.duc-result-actions,.duc-contents,.duc-skip { display:none !important; } .duc-workspace { display:block; } .duc-result { position:static; color:#111; background:#fff; box-shadow:none; border:1px solid #aaa; } .duc-result :is(p,span,dt,dd,a),#duc-total-unit { color:#111; } .duc-container { width:100%; } .duc-breakdown-bar span { background:#555; print-color-adjust:exact; } .duc-result-top,.duc-result-metrics { border-color:#aaa; } .duc-result-actions { display:none; } .duc-bundle-comparison { break-inside:avoid; } }