/* Licensing (/licensing): the short summary of the Data Licence Agreement. legal.css supplies the section frame (its
   padding, as on Terms and Privacy) and the H1; this file lays out the notice, the two buttons, the plan lines, the plan
   table (type, rules and row padding follow the Pricing comparison table) and the At a glance points. Gaps between
   blocks, heading and paragraph spacing follow Terms. Breakpoints: tablet <= 1023px, phone <= 640px. */

.lc-in{display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.lc-sec a:not(.btn){color:#0872b0;text-decoration:underline;text-decoration-color:#b7d9f0;text-underline-offset:3px}
.lc-sec a:not(.btn):hover{color:#065f93;text-decoration-color:#0872b0}

/* Heading and notice, with the two buttons beside them */
.lc-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:32px 40px}
.lc-title{display:flex;flex-direction:column;gap:14px;max-width:760px}
.lc-notice{margin:0;font:440 15px/1.5 var(--font);color:#4d5f75}
.lc-btns{display:flex;flex-wrap:wrap;gap:8px}
.lc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* One line per plan. /licensing#<plan> lands on one and marks it. */
.lc-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}
.lc-plans > div{padding:16px;line-height:20px;border:1px solid #e3ecf4;border-radius:8px;background:#fff;scroll-margin-top:24px}
.lc-plans > div:target{border-color:#b7d9f0;background:#f5f9fd}
/* The plan name runs into its line */
.lc-plans dt{display:inline;margin-right:6px;font:550 14px/20px var(--font);color:#0b2239}
.lc-plans dd{display:inline;margin:0;font:440 14px/20px var(--font);color:#4d5f75}

/* Plan table: a question column, then one equal column per plan */
.lc-table{font:440 14px/20px var(--font)}
.lc-row{display:grid;grid-template-columns:minmax(200px,2.1fr) repeat(4,minmax(0,1fr));border-bottom:1px solid #e3ecf4}
.lc-head{border-bottom-color:#0b2239}
.lc-head > *{padding:12px 6px;font:550 14px/20px var(--font);color:#0b2239;text-align:center}
.lc-head > .lc-q{padding:12px 16px 12px 0;text-align:left}
.lc-q{padding:14px 16px 14px 0;color:#33475e;text-wrap:pretty}
.lc-c{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px;text-align:center}
.lc-yes{font-weight:550;color:#0b2239}
.lc-no{color:#647489}
.lc-note{font:440 12px/16px var(--font);color:#647489;text-wrap:balance}
.lc-plan{display:none}

/* At a glance: the agreement's points that apply across the plans, one line each */
.lc-keys{display:flex;flex-direction:column;gap:14px;scroll-margin-top:24px}
.lc-h2{margin:0;font:550 15px/20px var(--font);color:#0b2239}
.lc-keys ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0 0 0 18px;font:440 14px/20px var(--font);color:#33475e}
.lc-keys li{text-wrap:pretty}

/* Below the short version */
.lc-more{padding-top:clamp(32px,4vw,48px);border-top:1px solid #e3ecf4;max-width:860px}
.lc-more p{margin:0 0 18px;font:440 14px/1.6 var(--font);color:#4d5f75;text-wrap:pretty}
.lc-more p:last-child{margin-bottom:0}

@media (max-width:1023px){
.lc-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.lc-btns{width:100%}
.lc-btns .btn{flex:1 1 auto}
.lc-plans{grid-template-columns:minmax(0,1fr);gap:12px}
/* Phones: each question spans the row and the four plans sit two by two under it, each with its name.
   The column headers stay for screen readers. Spacing follows the Pricing comparison list on phones. */
.lc-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lc-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-block:14px}
.lc-q{grid-column:1 / -1;padding:0;font-weight:500;color:#0b2239}
.lc-c{align-items:flex-start;justify-content:flex-start;padding:0;text-align:left}
.lc-plan{display:block;font:440 12px/16px var(--font);color:#647489}
.lc-note{text-wrap:pretty}
.lc-more{padding-top:28px}
}